wip

ditrit · Sep 6, 2023 · bbe3a7d · bbe3a7d
1 parent 6eb4d3e
commit bbe3a7d
Show file tree

Hide file tree

Showing 10 changed files with 328 additions and 1,742 deletions.
diff --git a/changelog.md b/changelog.md
@@ -23,6 +23,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `getDefinedAttributesByType` will now return nested attributes inside object, fix [this bug](https://github.com/ditrit/leto-modelizer-plugin-core/issues/203).
 
+- Add `arrangeComponentsPosition` method in `DefaultDrawer` and `DefaultPlugin`
+- Add inheritable class `DefaultLayout` for automatic layout in the diagram (does nothing)
+- Add inherited class `ElkLayout` for automatic layout in the diagram, using ELK.
+- Add HTML attribute equality as a Cypress step definition in `html.js`
+- Add `elkjs` and `web-worker` as package dependencies
+
 ## [0.18.0] - 2023/07/20
 
 ### Added

diff --git a/cypress/e2e/automatic-layout.feature b/cypress/e2e/automatic-layout.feature
@@ -16,9 +16,6 @@ Feature: Test automatic layout for the graph
     And I expect "#wfstep2" to be at position 30,110
     And I expect "#wfstep3" to be at position 30,190
     And I expect "#wfstep4" to be at position 30,270
-    And I expect "#wfstep5" to be at position 30,30
-    And I expect "#wfstep6" to be at position 302,30
     And I expect "#wfstep7" to be at position 574,30
-    And I expect "#wfstep8" to be at position 846,30
     And I expect "#server1" to be at position 12,12
     And I expect "#server2" to be at position 12,112
diff --git a/cypress/support/step_definitions/html.js b/cypress/support/step_definitions/html.js
@@ -126,11 +126,3 @@ Then('I expect {string} appear {int} time(s) on screen', (templateSelector, coun
   const selector = nunjucks.renderString(templateSelector, cy.context);
   cy.get(selector).should('have.length', count);
 });
-
-Then('I expect {string} attribute {string} to be {string}', (templateSelector, attribute, value) => {
-  const selector = nunjucks.renderString(templateSelector, cy.context);
-
-  cy.get(selector).should((element) => {
-    expect(element.attr(attribute)).eq(value);
-  });
-});
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -48,7 +48,7 @@
       </div>
       <button id="rename-component" @click="renameComponent" :disabled="!(selectedId && renamedId)">Save</button>
     </fieldset>
-    <div id='root' :style="readOnly ? { width: `${width}px`, height: `${height}px` } : {}"></div>
+    <div id='view-port' :style="readOnly ? { width: `${width}px`, height: `${height}px` } : {}"></div>
   </main>
 </template>
 
@@ -82,17 +82,17 @@ function savePosition() {
 
 async function automaticLayout() {
   await plugin.arrangeComponentsPosition();
-  plugin.draw('root', readOnly.value);
+  plugin.draw('view-port', readOnly.value);
 }
 
 function reset() {
-  document.querySelector('#root').innerHTML = '';
-  plugin.draw('root', readOnly.value);
+  document.querySelector('#view-port').innerHTML = '';
+  plugin.draw();
 }
 
 function renameComponent() {
   plugin.data.renameComponentId(selectedId.value, renamedId.value);
-  plugin.draw('root', readOnly.value);
+  plugin.draw('view-port', readOnly.value);
   updateComponentsIds();
   selectedId.value = '';
   renamedId.value = '';
@@ -108,10 +108,16 @@ const defaultConfiguration = JSON.stringify({
     demo: {
       internal1: new ComponentDrawOption({
         x: 42,
-        y: 666,
+        y: 550,
         width: 242,
-        height: 50,
+        height: 200,
       }),
+      network1: new ComponentDrawOption({
+        x: 400,
+        y: 150,
+        width: 250,
+        height: 312,
+      })
     },
   },
 });
@@ -125,8 +131,8 @@ onMounted(() => {
     path: 'localstorage',
     content: window.localStorage.getItem('configuration') || defaultConfiguration,
   }));
-  plugin.draw('root');
-  updateComponentsIds();
+  plugin.initDrawingContext();
+  plugin.draw();
 });
 </script>
 
@@ -158,19 +164,12 @@ main {
   align-items: center;
 }
 
-#viewport {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 .disabled{
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-#root {
+#view-port {
   width: 100%;
   height: 100%;
 

diff --git a/demo/src/assets/resources.js b/demo/src/assets/resources.js
@@ -6,85 +6,86 @@ export default {
   },
   models: {
     DefaultModel: `
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-        class="template"
-        width="230" height="50"
-        fill="#474262">
-        <rect class="component-hitbox" width="100%" height="100%" rx="5" ry="5"></rect>
+      <svg class="model" overflow="visible" fill="#474262" width="230" height="50"
+        {% if hasX and hasY %}
+           x="{{ drawOption.x }}" y="{{ drawOption.y }}"
+        {% else %}
+           x="0" y="0"
+        {% endif %}
+      >
+        <rect class="background" width="100%" height="100%" rx="6" />
+
+        <svg x="6" y="6" width="38" height="38">
+          <rect fill="#9691B1" width="100%" height="100%" rx="5"/>
+          <g class="type-icon" fill="#474262" transform="translate(3 3)">{{ icon | safe }}</g>
+        </svg>
+
         {% if hasError %}
-        <g class="component-error">
-            <svg xmlns="http://www.w3.org/2000/svg" 
-                 width="15" height="15"
-                 x=200 y="10"
-                 fill="yellow"
-                 viewBox="0 0 512 512">
-            <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/>
-            </svg>
+        <g class="error-icon">
+          <svg width="15" height="15" x="200" y="10" fill="yellow" viewBox="0 0 512 512">
+            <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512
+                  256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24
+                  24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32
+                  32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"
+            />
+          </svg>
         </g>
         {% endif %}
-        <g fill="white" style="font-family: Calibri, Arial">
-          <rect width="38" height="38"
-            x="6" y="6"
-            rx="4" ry="4"></rect>
-          <text class="component-name"
-            x="50" y="1.5em"
-            style="font-size: 14px; font-weight: 600">{{ name }}</text>
-          <text class="component-type"
-            x="50" y="3em"
-            style="font-size: 12px; font-style: italic">{{ definition.type }} - id: {{ id }}</text>
+        <g stroke="none" fill="white" font-family="Arial" transform="translate(50 32)">
+          <text class="name" font-size="12" y="-1em">{{ name }}</text>
+          <text class="type" font-size="12" y="0.5em">{{ definition.type }} - id: {{ id }}</text>
         </g>
-        <circle class="anchor" r="0" cx="50%" cy="0%" anchor="top"></circle>
-        <circle class="anchor" r="0" cx="50%" cy="100%" anchor="bottom"></circle>
-        <circle class="anchor" r="0" cx="100%" cy="50%" anchor="right"></circle>
-        <circle class="anchor" r="0" cx="0%" cy="50%" anchor="left"></circle>
-        <svg id="icon-{{id}}" class="component-icon" x="9" y="9" width="32" height="32"></svg>
       </svg>
     `,
     DefaultContainer: `
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
-           overflow="visible"
-           class="template"
-           width="230" height="68"
-           fill="#474262">
-        <rect class="component-hitbox" width="100%" height="100%" rx="5" ry="5"></rect>
-        {% if hasError %}
-        <g class="component-error">
-            <svg xmlns="http://www.w3.org/2000/svg" 
-                 width="15" height="15"
-                 x=200 y="10"
-                 fill="yellow"
-                 viewBox="0 0 512 512">
-            <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/>
-            </svg>
-        </g>
+      <svg class="model" overflow="visible"
+        {% if hasX and hasY %}
+           x="{{ drawOption.x }}" y="{{ drawOption.y }}"
+        {% else %}
+           x="0" y="0"
         {% endif %}
-        <g transform="translate(0,50)">
-          <svg class="component-container"
-              overflow="visible"
-              fill="#9691B1">
-            <rect class="container-background"
-                  width="100%" height="100%"
-                  rx="4" ry="4"></rect>
+
+        {% if hasWidth and hasHeight %}
+           width="{{ drawOption.width + 12 + padding * 2}}"
+           height="{{ drawOption.height + 56 + padding * 2}}"
+        {% else %}
+           width="254" height="118"
+        {% endif %}
+      >
+        <rect class="background" fill="#474262" width="100%" height="100%" rx="6" />
+
+        {% if hasError %}
+        <g class="error-icon">
+          <svg width="15" height="15" x="5" y="5" fill="#BB0A21" viewBox="0 0 512 512">
+            <path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512
+                  256 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24
+                  24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm32 224c0 17.7-14.3 32-32
+                  32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"
+            />
           </svg>
         </g>
-        <g fill="white" style="font-family: Calibri, Arial">
-          <rect width="38" height="38"
-                x="6" y="6"
-                rx="4" ry="4"></rect>
-          <text class="component-name"
-                x="50" y="1.5em"
-                style="font-size: 14px; font-weight: 600">{{ name }}</text>
-          <text class="component-type"
-                x="50" y="3em"
-                style="font-size: 12px; font-style: italic">{{ definition.type }} - id: {{ id }}</text>
+        {% endif %}
+
+        <svg x="6" y="6" width="38" height="38">
+          <rect fill="#9691B1" width="100%" height="100%" rx="5"/>
+          <g class="type-icon" fill="#474262" transform="translate(3 3)">{{ icon | safe }}</g>
+        </svg>
+
+        <g stroke="none" fill="white" font-family="Arial" transform="translate(50 32)">
+          <text class="name" font-size="12" y="-1em">{{ name }}</text>
+          <text class="type" font-size="12" y="0.5em">{{ definition.type }} - id: {{ id }}</text>
         </g>
-      
-        <circle class="anchor" cx="50%" cy="0%" anchor="top" r="0"></circle>
-        <circle class="anchor" cx="50%" cy="100%" anchor="bottom" r="0"></circle>
-        <circle class="anchor" cx="100%" cy="50%" anchor="right" r="0"></circle>
-        <circle class="anchor" cx="0%" cy="50%" anchor="left" r="0"></circle>
-  
-        <svg id="icon-{{id}}" class="component-icon" x="9" y="9" width="32" height="32"></svg>
+
+        <rect x="6" y ="50" fill="#9691B1" rx="4"
+          {% if hasWidth and hasHeight %}
+              width="{{ drawOption.width + padding * 2 }}"
+              height="{{ drawOption.height + padding * 2 }}"
+          {% else %}
+              width={{ 254 - 12 }} height={{ 68 - 6 }}
+          {% endif %}
+        />
+
+        <g class="components" transform="translate({{ 6 + padding }},{{ 50 + padding }})"></g>
       </svg>
     `,
   },