Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement/component renderer #234

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Improvement/component renderer #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6eb4d3e
Improve rule to verify component position
thibaudlabat Jul 31, 2023
bbe3a7d
wip
Sep 6, 2023
1730cc3
wip
Sep 6, 2023
713b944
wip
Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont see the addition of arrangeComponentsPosition method in DefaultDrawer and DefaultPlugin? The function already existed

- 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
Expand Down
3 changes: 0 additions & 3 deletions cypress/e2e/automatic-layout.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions cypress/support/step_definitions/html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ Then('I expect {string} to be at position {int},{int}', (templateSelector, x, y)
expect(Math.trunc(parseInt(element.attr('x')))).eq(x);
expect(Math.trunc(parseInt(element.attr('y')))).eq(y);
});

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no need to jump line here

});

Then('I expect {string} width is {int}', (templateSelector, width) => {
Expand Down
33 changes: 16 additions & 17 deletions demo/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lack of consistency - no parameters here (vs line 85) ?

}

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 = '';
Expand All @@ -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,
})
},
},
});
Expand All @@ -125,8 +131,8 @@ onMounted(() => {
path: 'localstorage',
content: window.localStorage.getItem('configuration') || defaultConfiguration,
}));
plugin.draw('root');
updateComponentsIds();
plugin.initDrawingContext();
plugin.draw();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same - lack of consistency - no parameters here (vs line 95) ?

});
</script>

Expand Down Expand Up @@ -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%;

Expand Down
137 changes: 69 additions & 68 deletions demo/src/assets/resources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +9 to +31
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I need explaination - what are theses changes and why need them ?

</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 and drawOption.innerWidth > 0 and drawOption.innerHeight > 0 %}
width="{{ drawOption.innerWidth + 12 + padding * 2 }}"
height="{{ drawOption.innerHeight + 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="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>
<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 and drawOption.innerWidth > 0 and drawOption.innerHeight > 0 %}
width="{{ drawOption.innerWidth + padding * 2 }}"
height="{{ drawOption.innerHeight + padding * 2 }}"
{% else %}
width={{ 254 - 12 }} height={{ 68 - 6 }}
{% endif %}
/>

<g class="components" transform="translate({{ 6 }},{{ 50 }})"></g>
</svg>
`,
},
Expand Down
Loading