opensmock / pyramid Goto Github PK

Pyramid is a Graphical User-Interface (GUI) builder and editor for Bloc and Toplo.

License: MIT License

Smalltalk 100.00%

bloc graphic-editor gui gui-builder hmi pharo pharo-smalltalk pyramid smalltalk toplo ui ui-builder ui-editor ux wysiwyg wysiwyg-editor

pyramid's Introduction

OpenSmock

Workshop and utilities to make applications, specialy user interfaces (UI), in Pharo.

Getting Started

Installing OpenSmock

To install all OpenSmock workshop on your Pharo image you can just execute the following script:

Metacello new
   baseline: 'OpenSmock';
   repository: 'github://OpenSmock/OpenSmock';
   load.

To install only OpenSmock core packages (no major dependencies) on your Pharo image you can just execute the following script:

Metacello new
   baseline: 'OpenSmock';
   repository: 'github://OpenSmock/OpenSmock';
   load: 'Core'.

Dependencies

Credits

Pierre Laborde - Initial work - labordep
Eric Le Pors - Initial work - ELePors
Brendan Landais - Development

License

This project is licensed under the MIT License - see the LICENSE file for details.

pyramid's People

Contributors

Stargazers

Watchers

Forkers

akevalion astares stevencostiou nyan11 eliott-guevel

pyramid's Issues

Export as Pharo code?

Do you plan to add "Export as Pharo code"? I mean a snippet like script "space := BlSpace new. space addChild: (...)".

That's the first thing when I used this great tool. "Wow, it could help me to write examples e.g. to share on an email or Discord".

[Project configuration] Use Tab key to switch input field

Using Tab key to chain input field and win time.

Write a BlSpace extensions to edit a Space into Pyramid

Remove BlElement>>openInNewSpaceWithPyramidShortcut and propose a BlSpace extensions to activate or not the shortcut.
For example:

space := element openInNewSpace.
space canEditWithPyramid: true.
"> Type the F12 Key"

EDIT : Just remove BlElement>>openInNewSpaceWithPyramidShortcut and create a Settings section (see reflexion below)

Rename save model variables in plugin save

Group selection, create the group element at the top most coordinates

BlocSerializationError when saving a BlElement with Ellipse geometry

Error when trying to save a BlElement with a circle.

1 - Open a new project in Pyramid
2 - Setup Project configuration (package, class and method - class side)
3 - Create an object from Add new element button and Square with randomized color
4 - Select the BlElement and set a Ellipse geometry with the button on the right section Properties
5 - Click on save button and see the error :

My config :

Windows 10 Pro
Pharo 11 64 bits stable
Pyramid main branch commit 31698fd

Tree update

add column for visibility with working button
indicator if the parent is not visible

Suggestion: insert with random color?

I can imagine the utility of inserting elements already with a color, so okay, but maybe you like the random option. In Pharo it's very simple to get one with the expression Color random.

Space is deleted when Editor is minimize

The BlSapce is deleted when window is minimize.

When Spec is minimize, it ask its Morph to delete them self. (SystemWindow minimizeOrRestore)

When Morph is deleted it send a signal that it's deleted. (Morph announceDeleted)

In BlMorphicSpaceHostMorph initializeAnnouncement it catch MorphDeleted and send BlMorphicWindowClosedEvent.

BlMorphicEventHandler handleWindowwClosed: send BlSpaceCloseRequest and destroy the morph.

Then BlSpaceEventListener cath BlSpaceCloseRequest and execute spaceCloseRequest: wich kill the space.

CI bug

Timeout

CI timeout before it end testing on Pharo 12. The timeout is define in .github/workflows/Pharo11CI.yml at the #timeout-minutes: 10

I suggest we put it at 15 min. It seem that Pharo12 CI takes between 7 to 10 min to complete.

SSH before HTTPS

Matecello try to download the package with SSH protocole, but doesn't have a SSH key, so it fails but then it try HTTPS.

MetacelloNotification: Loading baseline of BaselineOfPyramid...
aborting
I got an error while cloning: There was an authentication error while trying to execute the operation: . 
This happens usually because you didn't provide a valid set of credentials. 
You may fix this problem in different ways: 

1. adding your keys to ssh-agent, executing ssh-add ~/.ssh/id_rsa in your command line.
2. adding your keys in settings (open settings browser search for "Use custom SSH keys" and
add your public and private keys).
3. using HTTPS instead SSH (Just use an url in the form [HTTPS://etc.git).](https://etc.git%29./) I will try to clone the HTTPS variant.

I think it's better if it did not fail every time it try to load something.

selection overlay misaligned when element not a root

And parent is not in 0 @ 0

Playground is not explicit

When using the playground, the "self" value depend of the current selection.

no selection = self is nil
one selection = self is the selected item
multiple selection = self is an array containing the selected items

"self" value should be more explicit on the UI.

IDE package should be loaded manually?

I loaded in a new Pharo 11 with:

Metacello new
	baseline: 'Pyramid';
	repository: 'github://OpenSmock/Pyramid:main/src';
	load

and the world menu on top didn't have the Pyramic entry, but it appeared when I loaded the IDE package via Iceberg.

I guess the baseline needs to include it?

BTW: Awesome project!

Using playground to add a Child cannot update the Tree

When I'm adding a child into a BlElement manually (using the Playground) the Tree is not updating.
My child is on his parent but not in the tree.

Feature: Project test mode

The idea is to test the current edited project.
It should be a button to switch between edition mode and test mode.
We can cover two cases:

First - Direct test inside the editor view, click on a switch button to "test mode" and use the mouse (or the keyboard) to test the current projet. Go back to edition mode to edit the project content.
Second - A play mode: the idea is to propose to open the project in a dedicated window to test it in a real situation. This can be a play button which is opening a new window with the current project instanciation. If the project already cames from an existing running view (edition) this play button open a new window in addition of the existing view, not a replacement.

Element's margin and padding

Do you plan to support them?

Update window title

Setup the default title of a Pyramid Window as :

New UI : "New project | Pyramid"
When the project is currently loaded or saved in a Class : "[Class] class >> [method] | Pyramid"

Cannot re-save on a tag package

1- Create a new projet
2- Configure save in a "Test-Core" where Test is a package and Core is a tag
3- Save your project
4- Add a rectangle into the project
5- Save the project : error cannot save. If I remove the -Core is can save

Can display and edit BlSpace root element properties

Can display and edit root BlSpace root element properties, not by default but should be an option to display it.

When grouping a selection of BlElement, the order is not the same

Create two elements and group them.
The group contents have child but not in the same order that the selection.

Text foreground not directly applied

1 - Create a BlTextElement
2 - Setup the foreground from Properties panel
3 - The color is not applied

To resolve you need to de-select and re-select the BlTextElement.

remove selection helper

keep it simple

Yellow help tootips are missing + others

Also some tooltip and with "." and other without.

New rule:
All tooltip should end with "."

Add a section about rules and convention on Pyramid in the Wiki.

Missing tooltips:

Pyramid settings section

In reference of #83, write a dedicated Pyramid settings section in Pharo settings browser.
Provide an access from :

- The Pyramid main menu
- Each Pyramid window

Display BlElement id at first in the Tree

The problem is that ids are not visible when the Tree is reduce.
Ids are important to navigate into the Tree, so I propose to have this order for a BlElement line :
1 - Icon
2 - Id in white
3 - Classname (in gray)
4 - Hash number (in gray)

Use sequential identifiers?

I just realized that when I changed the background to orange, the identifier didn't change automatically which makes totally sense, as not every color as a name, etc. But I didn't realize of that at first... so maybe (my suggestion) it's preferable create identifiers that user doesn't associate with the background color.

Consider this example of Generator that always answers a new string:

alphabetGenerator := Generator on: [ :generator |
		| index |
		index := 1.
		[ 	Character alphabet do: [ :each |
				| next suffix |
				next := each asUppercase asString.
				suffix := index = 1
					ifTrue: [ '' ]
					ifFalse: [ index asString ].
				generator yield: next, suffix ].
			index := index + 1 ] repeat ].

The generators can be used like a read stream, via next or with next: to get a collection, like this:

alphabetGenerator next: 50. "an OrderedCollection('A' 'B' 'C' 'D' 'E' 'F' 'G' 'H' 'I' 'J' 'K' 'L' 'M' 'N' 'O'
'P' 'Q' 'R' 'S' 'T' 'U' 'V' 'W' 'X' 'Y' 'Z' 'A2' 'B2' 'C2' 'D2'
'E2' 'F2' 'G2' 'H2' 'I2' 'J2' 'K2' 'L2' 'M2' 'N2' 'O2' 'P2'
'Q2' 'R2' 'S2' 'T2' 'U2' 'V2' 'W2' 'X2')"

Better selection

load examples on baseline

Cannot save this project : a group with a BlTextElement and a BlElement

The project string :

[
	BlElement {
		#children : BlChildrenArray [
			BlElement {
				#children : BlChildrenArray [ ],
				#constraints : BlLayoutCommonConstraints {
					#vertical : BlLayoutCommonConstraintsAxis {
						#resizer : BlLayoutMatchParentResizer { }
					},
					#horizontal : BlLayoutCommonConstraintsAxis {
						#resizer : @8
					},
					#position : Point [ 0.0, 0.0 ],
					#margin : BlInsets {
						#top : 0.0,
						#left : 0.0,
						#bottom : 0.0,
						#right : 0.0
					},
					#padding : @11,
					#minHeight : 0.0,
					#minWidth : 0.0,
					#maxHeight : Float [ #infinity ],
					#maxWidth : @12,
					#ignoredByLayout : false,
					#accountTransformation : false
				},
				#visuals : BlCustomVisuals {
					#background : BlPaintBackground {
						#paint : BlColorPaint {
							#color : Color {
								#red : 0.10752688172043011,
								#green : 0.4359726295210166,
								#blue : 0.22678396871945258,
								#alpha : 1.0
							}
						}
					}
				},
				#userData : IdentityDictionary {
					#elementId : BlElementNamedId {
						#identifier : #Texture
					}
				},
				#layout : BlBasicLayout { },
				#eventDispatcher : BlElementEventDispatcher {
					#owner : @4,
					#handlers : [
						,
						,
						,
						,
						,
						
					]
				}
			},
			BlTextElement {
				#children : BlChildrenArray [ ],
				#constraints : BlLayoutCommonConstraints {
					#vertical : BlLayoutCommonConstraintsAxis {
						#resizer : BlLayoutFitContentResizer { }
					},
					#horizontal : BlLayoutCommonConstraintsAxis {
						#resizer : @26
					},
					#position : Point [ 20.0, 20.0 ],
					#margin : @11,
					#padding : @11,
					#minHeight : 0.0,
					#minWidth : 0.0,
					#maxHeight : @12,
					#maxWidth : @12,
					#ignoredByLayout : false,
					#accountTransformation : false
				},
				#visuals : BlDefaultVisuals { },
				#userData : IdentityDictionary {
					#elementId : BlElementNamedId {
						#identifier : #Text
					}
				},
				#layout : BlBasicLayout { },
				#text : BlRopedText {
					#rope : BlAttributeRope {
						#attributes : [
							BlFontSizeAttribute {
								#isOverwritableByStyler : true,
								#size : 15
							},
							BlTextForegroundAttribute {
								#isOverwritableByStyler : true,
								#paint : Color [ #white ]
							}
						],
						#rope : BlCollectionRope {
							#collection : 'This is a demo'
						}
					}
				}
			}
		],
		#constraints : BlLayoutCommonConstraints {
			#vertical : BlLayoutCommonConstraintsAxis {
				#resizer : @8
			},
			#horizontal : BlLayoutCommonConstraintsAxis {
				#resizer : @8
			},
			#position : Point [ 0.0, 0.0 ],
			#margin : @11,
			#padding : @11,
			#minHeight : 0.0,
			#minWidth : 0.0,
			#maxHeight : @12,
			#maxWidth : @12,
			#ignoredByLayout : false,
			#accountTransformation : false
		},
		#visuals : BlCustomVisuals {
			#clipChildren : false
		},
		#userData : IdentityDictionary {
			#elementId : BlElementNamedId {
				#identifier : #group
			}
		},
		#layout : @19,
		#eventDispatcher : BlElementEventDispatcher {
			#owner : @2,
			#handlers : [
				
			]
		}
	}
]

pySTON pragma?

I saved my project and browsed the method <pySTON> pragma. It makes me wonder what is its utility.

About section

This section need to be completed :

Minimum with :

Pyramid is a User-Interface (UI) editor.

LICENSE
Licensed under the MIT License
Copyright (c) 2022-2023 OpenSmock

https://github.com/OpenSmock/Pyramid

Bad baseline order

The baseline order is incorrect, try to load Bloc and Bloc-Serialization and Pyramid.

Right-clicking on a BlTextElement

Creating a new text element, then right-clicking it creates the following error: "#, was sent to nil". Clicking on the left part of the interface now causes this error until a click is made on another part of the interface.

The background doesn't change with the current system

reproduce:

select multiple element.
Change their background.
The color doesn't change.

Open from a BlSpace

Pyramid menu proposition

Pyramid >

> New design
(> Examples)
--
> Refresh plugins
> Browse sources
> Github
> Report a bug

Text font size not working

When changing the font size in the Properties panel, the text not change.

Provide Plugin guide in English

The plugin guide is in french, but should be in english

https://github.com/OpenSmock/Pyramid/wiki/Ajouter-un-nouveau-plugin-a-Pyramid

Relaunching the application

Creating a new Pyramid project, then closing the Pharo image while saving it and then relaunching the aforementioned image creates an error titled "Instance of BlMorphicEventHandler did not understand #handleTextEditionEvent:"

Browse button on project configuration

Add a browse button to quicly have access to the saving class / method

Put/Send actions confusions between these actions and icons direction

Create a group in a group and add a text and an element.
The actions Put/Send are not clear and there is a confusions between them for a beginner.

Pyramid.mp4

I propose these items with icon orientation (same as actual) but with different actions as tooltip for menu button :

//\ First = Set the element as the first child in the child list of his parent. Child is display in the back for the same elevation level.
/ \ Up = Set the element before the previous one in the child list of his parent.
\ / Down = Set the element after the next one in the child list of his parent.
\// Last = Set the element as the last child in the child list of his parent. Child is display in the front for the same elevation level.

This is imporant to have same color for all these icons.

@Nyan11 do you confirm that these actions doesn't modify the elevation property ?

If element is deleted, it must be removed from selection

[bug] - Properties display is hidden for the lowest properties

You can see in this example that the Margin property tooltip does not display fully when individuals display is selected.

To reproduce:

Launch Pyramid, add ~10 rectangle, select them, click on edit button from one of the bottom property, select individual.

Bugs due to id Bloc evolution

There are some problems related to Bloc evolution (id management modification), I'm going to fix them.
PyramidElementIdSortFunctionTest
✗ #testSorting (5ms)

PyramidContextMenuPluginTest
✗ #testMenuContextOn (22ms)

PyramidElementIdCommandTest
✗ #testHistory (28ms)

Due to the daily development of Bloc it can be better to run all Bloc-Serialization tests additionnality to Pyramid tests
Pyramid tests should be green with a Bloc-Serialization red pass and introduce problem without see them
Pyramid tests doesn't coverage all Serialization features