Merge branch 'development' into diagrams

# Conflicts:
#	packages/webapp-starter/src/starter.ts

.prettierrc

@@ -1,4 +1,5 @@
 {
   "printWidth": 160,
-  "tabWidth": 4
+  "tabWidth": 4,
+  "semi": false
 }

notes/editor-misc.md

@@ -2,15 +2,15 @@
 
 - [x] Filter current parent from dropdown in reference.
   - Fixed by custom scoper
-- [ ] DEletion does niot work very well at all, need to revisit how this is done.
-- [ ] When using reference shortcuts (like Event V1, S1 in Mike’s example) do not show concept “EventReference”
+- [x] DEletion does niot work very well at all, need to revisit how this is done.
+- [x] When using reference shortcuts (like Event V1, S1 in Mike’s example) do not show concept “EventReference”
 - [x] Howto add your own editor components to Freon
 - [x] create the ability to jump to elements by clicking (or something) on its reference
       (special ReferenceBox?)
 - [ ] When a type of a property cannot be found the error message is rather unclear: (A)
     -  `ERROR: Element 'correctAnswer' should have a type`
 
-- [ ] in context menu 'add' make base class available
+- [ ] in context menu 'add' make base class available (only if concrete)
 - [ ] add a handle for the drag and drop
 - [x] make it easy to add a button to a component
 
@@ -20,7 +20,7 @@
 - [x] tinymce editor => have a look at MultiLineComponent2.svelte in M&G's stuff
 
 - [ ] Click already selected error in error/search list does not select it in editor.
-- [ ] Some ersors cannot be navigated to, e.g. placeholders for child concepts
+- [ ] Some erors cannot be navigated to, e.g. placeholders for child concepts
 
 - [ ] Drag & drop in tabellen werkt niet.
 

notes/expression-editing.md

@@ -1,37 +1,21 @@
 ### Expression editing
 
-- [ ] Document styling (J)
-- [ ] When opening a model, some references are not found (ref to Fraction10 from Flow in edu-example) (J)
-- [x] **NB** : 24/12/2022 selectElement(in PiEditor) chnaged signature, create bin expr command not changeed accordingly)! (A)
-
 #### Issues and Ideas:
 
 - [ ] When in the left or right side of a binary expression do not show binary expressions.
   Peope You do not first create all binary expressions and them fill in the operands
-- [ ] Thereis always a left box with focus before an expression.
-      This is used so people can add operators there, but while gtabbing it feels wrong.
-      How to avoid it?
-    - [x] solution: when tabbing, skip all the empty places inside expressions (start, end, around binary operators).
-        - Need to be able to select, so be able to select t hese empty places with the mouse?
-        - Show some special background so people see that they can edit there?
-- [x] Trigger /0-9/. Should not show up in dropdown
-    - [x] Never show regular expressions in dropdowns (like `/0-9/`)
 - [ ] Do not show binary expressions in `left` or `right` placeholders.
     - People will most probably not use these anyway.
     - allow the shortcuts? And if so, what about options that are larger than one character?
 - [ ] If we know something is an identifier (also for references), try not fitting characters in next box.
   - Similar to the number literal in `samples/Example`
-- [x] Be able to change the text in “[add]” into something else
-- [x] Deletion in expressions does not work, you get stuck when e.g. a number is empty, delete then jumps to next field
 
 #### Binary expressions:
 
-- [ ] switch to show brackets (does not seem to work now)
 - [ ] switch to show tree
 
 #### Expression edit magic:
 
-- [ ] Add brackets
 - [ ] Add unary expressions
 - [ ] Move to core
     - Does parser already use priorities? If not, it should be solved by this.

notes/freon-bugs.md

@@ -1,49 +1,18 @@
 # Bugs
 
-## Curson incorrectv after optional multi value
-After selecting 'implement' with multi-reference in fren lionweb, thge cursor does not go to the right place.
-## Incorrect input in action or select box is not cleared when losing focus.
-ZDropdownComponent should clean incorrect value in actionbox
-In reference box it should keep the incorrect reference
-## Error markers in gutter not move with changes in the model
+## Error markers
+
+### Error markers in gutter not move with changes in the model
 SOmetimes the eror markers do move when something has chnaged in the model, sometimes they do not.
 In Example Model89:
 - Inserting an attribute at the froms using the context menu:
 	- The attribute marklers move ok
 	- The method markers stay where they are, should also move
 	- NOTE that the attribute markers are on text boxes and the method markers on layout boxes.
-## Some error markers stay after projection change, some not
+### Some error markers stay after projection change, some not
 Markers on textboxes (squiggly) stay red after projection change, other markers (in the gutter and the full lines) dissappear
 - Is this intentional?
-## Any number field that becomes empty deletes the whole node
-This is supposed to only work for concepts that  have only ons property in their projection, especially the NumerLiteralExpression.
-Now e.g. an entity with a version property is deleted when this property becomes empty.
-**Problem:** every number box always get deleteWhenEmpty set to true.
-**Solution:** remove deleteWhenEmpty as default, add it as custom projection in samples/Example
-## Up  arrows don't work in select/action boxes
-When the dropdown is closed, the up  arrow does nothing.
-It should go up in the editor to another box.
-
-**Problem**: The X and Y coordinates of the textbox inside a dropdown component were never set. Reason is that the corresponding text component is not usid througn the renderComponent that sets the X and Y coordinates.
-
-**Solution**:solved by setting the X and Y explicitly in the text component. May have a better solution when revisiting this.
-## ActionBox background remains blue
 
-The background of a, actionbox become light blue when it is selected/editing.  After leaving the actionbox it remains light blue, but it should remove the light blue background.
-
-- TAB in CLICK out: remains blue
-- TAB in TAB out: remains blue
-- CLICK in TAB out: ok, blue background dissappears
-- CLICK in CLICK out: ok, blue background dissappears
-
-**Solved**: Dispatch custom 'focusOutTextComponent' when leaving text box ensures it is handled by the textdropdown component.
-## After click inside action box TABs and arrows go wrong
-When selecting an action box through a click then remove the dropdown using ESC, the TAB, Back TAB and arrow keys use the previous selected box as the starting point
-
-**Problem**: The selected box is FreEditor is probably not set correctly 
-**Solved:** By previous two solved problems
-## Select and action boxes have no border when selected.
-IS this just styling?
 ## Incorrect projection for expression
 
 **Description:**  When the AST specifies a specific expression, e.g. for `DocuProject.InsurancePart.risk`, the editor creates a generaic expression projection with a pre- and post- action box. 
@@ -57,7 +26,6 @@ IS this just styling?
 (node:55540) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead
 (Use `node --trace-deprecation ...` to show where the warning was created)
 
-
 ## Styling
 
 In `core-svelte/src/notes-on-styling` the olf freon CSS variables are referred to.
@@ -76,22 +44,62 @@ The cursor should be inside the editor, eg st:
 
 - ...
 
+## External property replacer cannot input anything
+
+In the external tester project the replacers for properties do not react upon any key stroke. So you cannot type anything.    
+
+# Solved
+
+## Any number field that becomes empty deletes the whole node
+- [x] This is supposed to only work for concepts that  have only ons property in their projection, especially the NumerLiteralExpression.
+  Now e.g. an entity with a version property is deleted when this property becomes empty.
+  **Problem:** every number box always get deleteWhenEmpty set to true.
+  **Solution:** remove deleteWhenEmpty as default, add it as custom projection in samples/Example
+
+## Up  arrows don't work in select/action boxes
+- [x] When the dropdown is closed, the up  arrow does nothing.
+  It should go up in the editor to another box.
+
+**Problem**: The X and Y coordinates of the textbox inside a dropdown component were never set. Reason is that the corresponding text component is not usid througn the renderComponent that sets the X and Y coordinates.
+
+**Solution**:solved by setting the X and Y explicitly in the text component. May have a better solution when revisiting this.
+
+## Cursor incorrect after optional multi value
+- [x] After selecting 'implement' with multi-reference in fren lionweb, thge cursor does not go to the right place.
+## Incorrect input in action or select box is not cleared when losing focus.
+- [x] ZDropdownComponent should clean incorrect value in actionbox
+  In reference box it should keep the incorrect reference
+
 ## Box tree error
 
 The following error occurrs:
 
-` ERROR: Box: nextLeafRight: TextBox for ID-31 of concept Method is mising in its parent (index === -1)` 
+` ERROR: Box: nextLeafRight: TextBox for ID-31 of concept Method is mising in its parent (index === -1)`
 
 when selecting method type with click and tryinhg to tab right.
 
 The internal textbox parent should be a referencebox.
 
 **Solution:** AbstractSelectBox `children` returned empty array, but should return an array with the internal textbox as single element. Done.
 
-## External property replacer cannot input anything
-
-In the external tester project the replacers for properties do not react upon any key stroke. So you cannot type anything.    
-
 ## LoggerSettings from webapp-lib to webapp-starter
 
 Then logger setting should be in the webapp-=starter, so the developer can easily change them.
+
+## ActionBox background remains blue
+
+- [x] The background of a, actionbox become light blue when it is selected/editing.  After leaving the actionbox it remains light blue, but it should remove the light blue background.
+
+- TAB in CLICK out: remains blue
+- TAB in TAB out: remains blue
+- CLICK in TAB out: ok, blue background dissappears
+- CLICK in CLICK out: ok, blue background dissappears
+
+**Solved**: Dispatch custom 'focusOutTextComponent' when leaving text box ensures it is handled by the textdropdown component.
+## After click inside action box TABs and arrows go wrong
+- [x] When selecting an action box through a click then remove the dropdown using ESC, the TAB, Back TAB and arrow keys use the previous selected box as the starting point
+
+**Problem**: The selected box is FreEditor is probably not set correctly
+**Solved:** By previous two solved problems
+## Select and action boxes have no border when selected.
+- [x] IS this just styling?

notes/lionweb.md

@@ -3,30 +3,34 @@
 - how to integrate built-ins
     - [x] as a std library in Freon?
 
-- Freon CLI tool
+### Freon CLI tool
 - [x] Needs other import syntax for AGL because it is commonjs ?!?!
-- [ ] See Cli in lionweb-freon for a LionWeb Language => Freon converter.
-- [ ] Create Freon language to LionWeb converter
+- [x] See Cli in lionweb-freon for a LionWeb Language => Freon converter.
+- [ ] Create Freon language => LionWeb converter
 
 - Import metamodel 
-    - [x] Use M3 language deserializer, unparse in memory and generate .ast files
-    - [x] write projection to enable editing and nice syntax for metamodels.
+  - [x] Use M3 language deserializer, unparse in memory and generate .ast files
+  - [x] write projection to enable editing and nice syntax for metamodels.
 
 - [ ] Errors coming from server should be checked and shown to the user.
 
 #### Incompatibilities
 
 - [ ] Freon alows multi-valued primitive properties, LionWeb does not
-  - [ ] Option 1: remove them from Freon
+  - [ ] Option 1: remove them from Freon (Chosen)
   - [ ] Option 2: map to some Freon defined LionWeb structure (and map back)
-- [ ] LonWeb has introduced DataType in the M3, Freon does not have it yet
-    - [ ] Option 1: Add DataType to Freon
+- Primitive properties can be optional in LionWeb, not in Freon
+- [ ] LionWeb has introduced DataType in the M3, Freon does not have it yet
+    - [ ] Option 1: Add DataType to Freon (Chosen)
     - [ ] Option 2: map to Freon copncept and (harder) map it back
-- [ ] LionWeb has annotations, Freon does not yet
-- [ ] LionWeb has node id's, Freon only secondary
+- [ ] LionWeb has annotations, Freon does not yet (Add them, needed for e.g. diagrams)
+- [ ] LionWeb has node id's, Freon only secondary (cleanup)
   - [ ] M2: Look at `id.json` and see how it can be improved.
   - [ ] M1: $id vs id
     - [ ] $id should be optionally visible and editable in the editor
     - [ ] editable mainly for meta models.
     - [ ] as part of the .edit?
     - [ ] or generically ... but how?
+- [ ] Multiple languages
+  - [ ] Hacky support in Freon, needs redesign
+- [ ] Most LionWeb tools can work without language definition, should Freon also allow this? Answer: no.

packages/core-svelte/src/__tests__/IndentComponent.test.ts

@@ -16,7 +16,7 @@ describe.skip("Indent component", () => {
     const myIndentBox = new IndentBox(element2, "indent-role", 4, myLabelBox);
 
     it(", with label as slot, is indented", () => {
-        const result = render(IndentComponent, { box: myIndentBox, editor: myEditor });
+        const result = render<IndentComponent>(IndentComponent, { box: myIndentBox, editor: myEditor });
         const myLabel = screen.getByText("LabelText");
         expect(myLabel).toBeVisible();
         const indentComp = screen.getByTestId(`${myIndentBox.node.freId()}-${myIndentBox.role}`);

packages/core-svelte/src/__tests__/LabelComponent.test.ts

@@ -13,15 +13,15 @@ describe.skip("Label component", () => {
     const myEditor = new FreEditor(null, null);
 
     it("is rendered with label", () => {
-        render(LabelComponent, { box: myLabelBox });
+        render<LabelComponent>(LabelComponent, { box: myLabelBox });
         const myLabel = screen.getByText("LabelText");
         expect(myLabel).toBeVisible();
         myLabelBox.setFocus();
         expect(myLabel).toHaveFocus();
     });
 
     it("gets focus from its box", () => {
-        render(LabelComponent, { box: myLabelBox });
+        render<LabelComponent>(LabelComponent, { box: myLabelBox });
         const myLabel = screen.getByText("LabelText");
         expect(myLabel).toBeVisible();
         myLabelBox.setFocus();
@@ -31,7 +31,7 @@ describe.skip("Label component", () => {
     it("gets focus when clicked", () => {
         // the SelectableComponent listens to mouse clicks,
         // therefore we test this using a wrapper 'TestLabelSelectable'
-        render(MockLabelSelectable, { box1: myLabelBox, box2: secondLabelBox });
+        render<MockLabelSelectable>(MockLabelSelectable, { box1: myLabelBox, box2: secondLabelBox });
         const myContainer1 = screen.getByTestId("test-label1");
         expect(myContainer1).toBeVisible();
         const myLabel = screen.getByText("LabelText");
@@ -49,7 +49,7 @@ describe.skip("Label component", () => {
     it("loses focus when another label is clicked", () => {
         // the SelectableComponent listens to mouse clicks,
         // therefore we test this using a wrapper 'MockLabelSelectable'
-        render(MockLabelSelectable, { box1: myLabelBox, box2: secondLabelBox });
+        render<MockLabelSelectable>(MockLabelSelectable, { box1: myLabelBox, box2: secondLabelBox });
         const myContainer1 = screen.getByTestId("test-label1");
         expect(myContainer1).toBeVisible();
         const myLabel = screen.getByText("LabelText");

packages/core-svelte/src/__tests__/ListComponent.test.ts

@@ -19,15 +19,15 @@ describe.skip("List component", () => {
     });
 
     it("all elements are visible", () => {
-        const result = render(ListComponent, { box: horizontalBox, editor: myEditor });
+        const result = render<ListComponent>(ListComponent, { box: horizontalBox, editor: myEditor });
         horizontalBox.children.forEach((box, index) => {
             const myLabel = screen.getByText("Label" + index);
             expect(myLabel).toBeVisible();
         });
     });
 
     it("when clicked, a single element gets focus", () => {
-        const result = render(ListComponent, { box: horizontalBox, editor: myEditor });
+        const result = render<ListComponent>(ListComponent, { box: horizontalBox, editor: myEditor });
         // nothing has focus before the click
         horizontalBox.children.forEach((box, index) => {
             const myLabel = screen.getByText("Label" + index);
@@ -54,7 +54,7 @@ describe.skip("List component", () => {
     });
 
     it("using arrow keys, another element gets focus", () => {
-        const result = render(ListComponent, { box: horizontalBox, editor: myEditor });
+        const result = render<ListComponent>(ListComponent, { box: horizontalBox, editor: myEditor });
         // click the second element
         fireEvent.click(screen.getByText("Label1"));
         // the second element has focus

packages/core-svelte/src/__tests__/OptionalComponent.test.ts

@@ -32,7 +32,7 @@ describe.skip("Optional component", () => {
             false,
             "someAliasText",
         );
-        const result = render(OptionalComponent, { box: ownerBox, editor: myEditor });
+        const result = render<OptionalComponent>(OptionalComponent, { box: ownerBox, editor: myEditor });
         const myOwner = screen.getByTestId("OPTIONAL-OWNER-opt-role");
         expect(myOwner).toBeVisible();
         const myOptional = screen.getByTestId("OPTIONAL_ELEMENT-optional-element");
@@ -52,7 +52,7 @@ describe.skip("Optional component", () => {
             true,
             "someAliasText",
         );
-        const result = render(OptionalComponent, { box: ownerBox, editor: myEditor });
+        const result = render<OptionalComponent>(OptionalComponent, { box: ownerBox, editor: myEditor });
         const myOwner = screen.getByTestId("OPTIONAL-OWNER-opt-role");
         expect(myOwner).toBeVisible();
         const myOptional = screen.getByTestId("OPTIONAL_ELEMENT-optional-element");
@@ -72,7 +72,7 @@ describe.skip("Optional component", () => {
             true,
             "someAliasText",
         );
-        const result = render(OptionalComponent, { box: ownerBox, editor: myEditor });
+        const result = render<OptionalComponent>(OptionalComponent, { box: ownerBox, editor: myEditor });
         const myOwner = screen.getByTestId("OPTIONAL-OWNER-opt-role");
         expect(myOwner).toBeVisible();
         const myOptional = screen.getByTestId("OPTIONAL_ELEMENT-optional-element");
@@ -92,7 +92,7 @@ describe.skip("Optional component", () => {
             false,
             "someAliasText",
         );
-        const result = render(OptionalComponent, { box: ownerBox, editor: myEditor });
+        const result = render<OptionalComponent>(OptionalComponent, { box: ownerBox, editor: myEditor });
         const myOwner = screen.getByTestId("OPTIONAL-OWNER-opt-role");
         expect(myOwner).toBeVisible();
         const myOptional = screen.queryByTestId("OPTIONAL_ELEMENT-optional-element");
@@ -113,7 +113,7 @@ describe.skip("Optional component", () => {
             true,
             "someAliasText",
         );
-        const result = render(TestOptional, { box: ownerBox, editor: myEditor });
+        const result = render<TestOptional>(TestOptional, { box: ownerBox, editor: myEditor });
         const myOwner = screen.getByTestId("OPTIONAL-OWNER-opt-role");
         expect(myOwner).toBeVisible();
         const myOptional = screen.getByTestId("OPTIONAL_ELEMENT-optional-element");

packages/core-svelte/src/__tests__/example-test/first.test.ts

@@ -19,7 +19,7 @@ describe("First test in core-svelte", () => {
             },
         );
         const myEditor = new FreEditor(null, null);
-        render(TextComponent, { box: myTextBox, editor: myEditor, text: myTextBox.getText() });
+        render<TextComponent>(TextComponent, { box: myTextBox, editor: myEditor, text: myTextBox.getText() });
         const node = screen.queryByText("Hello world!");
         expect(node).not.toBeNull();
     });