From 6eb4d3ebeae977a933a6f55839cf0e8d08199a65 Mon Sep 17 00:00:00 2001 From: Thibaud Labat Date: Mon, 31 Jul 2023 23:20:09 +0200 Subject: [PATCH 1/4] Improve rule to verify component position --- cypress/support/step_definitions/html.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/cypress/support/step_definitions/html.js b/cypress/support/step_definitions/html.js index e4cdc05d..916b7b04 100644 --- a/cypress/support/step_definitions/html.js +++ b/cypress/support/step_definitions/html.js @@ -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); }); + }); Then('I expect {string} width is {int}', (templateSelector, width) => { @@ -125,3 +126,11 @@ 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); + }); +}); From bbe3a7d33aa44affffd81f914d717d484c40111c Mon Sep 17 00:00:00 2001 From: Dimitri Chauvel Date: Wed, 6 Sep 2023 10:01:15 +0200 Subject: [PATCH 2/4] wip --- changelog.md | 6 + cypress/e2e/automatic-layout.feature | 3 - cypress/support/step_definitions/html.js | 8 - demo/src/App.vue | 33 +- demo/src/assets/resources.js | 137 +- src/draw/DefaultDrawer.js | 1751 ++-------------------- src/draw/ElkLayout.js | 1 + src/draw/render/ComponentRenderer.js | 115 ++ src/models/Component.js | 3 +- src/models/DefaultPlugin.js | 13 +- 10 files changed, 328 insertions(+), 1742 deletions(-) create mode 100644 src/draw/render/ComponentRenderer.js diff --git a/changelog.md b/changelog.md index 720adfc1..f95bb730 100644 --- 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 index b80fbfff..f030c431 100644 --- 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 index 916b7b04..c8b71cc3 100644 --- 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 index a7808cdf..f351a167 100644 --- a/demo/src/App.vue +++ b/demo/src/App.vue @@ -48,7 +48,7 @@ -
+
@@ -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(); }); @@ -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 index 72ac6d1b..484b8b48 100644 --- a/demo/src/assets/resources.js +++ b/demo/src/assets/resources.js @@ -6,85 +6,86 @@ export default { }, models: { DefaultModel: ` - - + + + + + + {{ icon | safe }} + + {% if hasError %} - - - - + + + + {% endif %} - - - {{ name }} - {{ definition.type }} - id: {{ id }} + + {{ name }} + {{ definition.type }} - id: {{ id }} - - - - - `, DefaultContainer: ` - - - {% if hasError %} - - - - - + - - + + {% if hasWidth and hasHeight %} + width="{{ drawOption.width + 12 + padding * 2}}" + height="{{ drawOption.height + 56 + padding * 2}}" + {% else %} + width="254" height="118" + {% endif %} + > + + + {% if hasError %} + + + - - - {{ name }} - {{ definition.type }} - id: {{ id }} + {% endif %} + + + + {{ icon | safe }} + + + + {{ name }} + {{ definition.type }} - id: {{ id }} - - - - - - - + + + + `, }, diff --git a/src/draw/DefaultDrawer.js b/src/draw/DefaultDrawer.js index ee370bb8..0ce01e88 100644 --- a/src/draw/DefaultDrawer.js +++ b/src/draw/DefaultDrawer.js @@ -1,9 +1,6 @@ import * as d3 from 'd3'; -import nunjucks from 'nunjucks'; import ElkLayout from './ElkLayout'; -import ComponentDrawOption from '../models/ComponentDrawOption'; -import actionIcons from '../assets/actions/actionIcons'; -import ComponentLink from '../models/ComponentLink'; +import ComponentRenderer from './render/ComponentRenderer'; /** * Class that draws a component in a graphical representation. @@ -13,1722 +10,193 @@ class DefaultDrawer { * Default constructor * @param {DefaultData} pluginData - Plugin data storage. * @param {object} [resources] - Object that contains resources. - * @param {string} [rootId] - Id of HTML element where we want to draw. - * @param {object} [options] - Rendering options. - * @param {number} [options.minWidth] - Minimum width of a component. - * @param {number} [options.minHeight] - Minimum height of a component. - * @param {number} [options.padding] - Padding around a component. - * @param {number} [options.margin] - Component margin thickness. - * @param {number[]} [options.lineLengthPerDepth] - Number of components - * per line at a given depth. Valid values: 1 - Infinity. - * @param {number} [options.actionMenuButtonSize] - The size of each action menu button. - * @param {DefaultLayout} [layout] - The manager for an automatic diagram layout. + * @param {string} [viewPortId] - Id of HTML element where we want to draw. */ - constructor(pluginData, resources = null, rootId = 'root', options = {}, layout = null) { + constructor(pluginData, resources = null, viewPortId = 'view-port') { /** * Plugin data storage. * @type {DefaultData} */ this.pluginData = pluginData; + /** * Plugin layout system. * @type {DefaultLayout} * @default new ElkLayout() */ - this.layout = layout ?? new ElkLayout(this.pluginData); - /** - * Id of HTML element where we want to draw. - * @type {string} - * @default 'root' - */ - this.rootId = rootId || 'root'; + this.layout = new ElkLayout(this.pluginData); + /** * Object that contains resources. * @type {object} + * @default null */ this.resources = resources; + /** - * Minimum width of a component. - * @type {number} - * @default 230 - */ - this.minWidth = options.minWidth !== undefined ? options.minWidth : 230; - /** - * Minimum height of a component. - * @type {number} - * @default 50 - */ - this.minHeight = options.minHeight !== undefined ? options.minHeight : 50; - /** - * Padding around components. - * @type {number} - * @default 30 - */ - this.padding = options.padding !== undefined ? options.padding : 30; - /** - * Component margin thickness. - * @type {number} - * @default 6 + * Id of HTML element where we want to draw. + * @type {string} + * @default 'view-port' */ - this.margin = options.margin !== undefined ? options.margin : 6; + this.viewPortId = viewPortId; + /** - * Number of components per line at a given depth. Valid values: 1 - Infinity. - * @type {number[]} - * @default [5, 1] + * D3 selection of the view port. + * @type {Selection} */ - this.lineLengthPerDepth = options.lineLengthPerDepth !== undefined - ? options.lineLengthPerDepth : [5, 1]; + this.viewPort = null; + /** - * The size of each action menu button. - * @type {number} - * @default 24 + * D3 selection of the root. + * @type {Selection} */ - this.actionMenuButtonSize = options.actionMenuButtonSize || 24; + this.root = null; + /** - * Store for actions, used to set specific actions values when making actions. - * @type {object} + * Component renderer. */ - this.actions = { - selection: { - current: null, - style: '2px solid hsl(205, 100%, 50%)', - offset: '3px', - }, - linkCreation: { - source: null, - target: null, - creating: false, - }, - drag: { - offsetX: 0, - offsetY: 0, - state: false, - target: null, - }, - zoom: { - scale: 1, - translate: { - x: 0, - y: 0, - }, - }, - }; - } - - /** - * Convert screen coordinates into a given svg referential. - * @param {number} screenX - Screen x coordinate. - * @param {number} screenY - Screen y coordinate. - * @param {SVGSVGElement} [svg] - SVG referential. - * @returns {DOMPoint} The transformed coordinates. - */ - screenToSVG(screenX, screenY, svg = null) { - const localSvg = svg || this.svg.node(); - const pivotPoint = new DOMPoint(screenX, screenY); - - return pivotPoint.matrixTransform(localSvg.getScreenCTM().inverse()); - } - - /** - * Convert svg coordinates into screen coordinates. - * @param {number} svgX - SVG x coordinate. - * @param {number} svgY - SVG y coordinate. - * @param {SVGSVGElement} [svg] - SVG referential. - * @returns {DOMPoint} The transformed coordinates. - */ - SVGToScreen(svgX, svgY, svg = null) { - const localSvg = svg || this.svg.node(); - const pivotPoint = new DOMPoint(svgX, svgY); - - return pivotPoint.matrixTransform(localSvg.getScreenCTM()); - } - - /** - * Compute a coefficient representing how tall a component will be based on its children's layout. - * @param {Node} item - The component to check. - * @returns {number} The coefficient. - * @private - */ - __getVerticalCoefficient(item) { - const lineLength = this.getLineLengthForDepth( - item.depth, - item.parent?.data?.definition?.childrenPerLine, - ); - - if (item.children?.length > 0) { - const childHeights = Math.ceil( - item.children - .filter((child) => child?.data?.definition?.isContainer) - .reduce( - (acc, child) => acc + this.__getVerticalCoefficient(child), - 0, - ), - ); - const localChildValue = item.children - .filter((child) => !(child.data?.definition?.isContainer)) - .reduce((acc, child) => acc + child.value, 0); - - return localChildValue - / lineLength - + childHeights - + (item.data?.definition?.isContainer ? 1 : 0); - } - - return (lineLength === Infinity ? 1 : item.value - / lineLength) - + (item.data?.definition?.isContainer ? 1 : 0); - } - - /** - * Get the maximum line length for a given depth. - * @param {number} depth - The depth to check. - * @param {boolean} [lineLengthOverride] - Override if parent is tagged as a workflow - * @returns {number} The maximum length at that depth. - */ - getLineLengthForDepth(depth, lineLengthOverride = null) { - return lineLengthOverride - || this.lineLengthPerDepth[Math.min(depth, this.lineLengthPerDepth.length - 1)]; - } - - /** - * Apply the disabled style to all elements matching the selector. - * @param {string} [selector] - CSS selector string. - */ - setDisabledStyle(selector = '.component') { - const localSelector = `#${this.rootId} ${selector || '.component'}`; - - d3.selectAll(localSelector) - .classed('disabled', true); - } - - /** - * Remove the disabled style from previously disabled components. - */ - unsetAllDisabledStyles() { - d3.selectAll(`#${this.rootId} .disabled`) - .classed('disabled', false); - } - - /** - * Handles dragging a component across the screen and return the element it will be dropped on. - * @param {Element} draggedElement - The DOM element being dragged. - * @param {DragEvent} event - The emitted drag event. - * @returns {Element} The element to drop the dragged element onto. - */ - dragHandler(draggedElement, event) { - this.hideActionMenu(); - - const dropTarget = document - .elementsFromPoint(event.sourceEvent.x, event.sourceEvent.y) - .find((element) => event.subject.data.id !== element.dataset.parentId && ( - element.classList.contains('container-background') - || element.classList.contains('container') - )); - - const target = d3.select(`#${event.subject.data.id}`).attr('cursor', 'grabbing'); - - d3.select('#root-components') - .append(() => target.node()); - - const rootSVGPoint = this.screenToSVG( - event.sourceEvent.clientX, - event.sourceEvent.clientY, - this.svg.select('.container').node(), - ); - - d3.select(draggedElement) - .attr( - 'transform', - event.subject.transform = `translate(${rootSVGPoint.x - this.actions.drag.offsetX}, - ${rootSVGPoint.y - this.actions.drag.offsetY})`, - ); - - event.subject.x = rootSVGPoint.x - this.actions.drag.offsetX; - event.subject.y = rootSVGPoint.y - this.actions.drag.offsetY; - if (event.subject.data.definition) { - const forbiddenTypes = event.subject.data.definition.parentTypes - .map((type) => `:not(.${type})`) - .join(''); - - this.setDisabledStyle(`.component:not(#${event.subject.data.id})${forbiddenTypes}`); - } - - this.drawLinks(); - - return dropTarget; + this.componentRenderer = new ComponentRenderer(); } /** - * Create and return d3 drag behaviour. - * @returns {Function} D3 drag behaviour. + * Initialize drawing context. + * @public */ - setupDragBehavior() { - let dropTarget = null; - let itemWasDragged = false; - const dragHandler = this.dragHandler.bind(this); + initDrawingContext() { + this.viewPort = d3.select(`#${this.viewPortId}`); + this.root = this.viewPort + .selectAll('#root') + .data(this.__formatComponentDataset()) + .join('svg') + .attr('id', 'root') + .attr('width', '100%') + .attr('height', '100%') + .attr('overflow', 'visible'); - return d3.drag() - .subject((event) => { - const target = document - .elementsFromPoint(event.sourceEvent.x, event.sourceEvent.y) - .find((element) => element.classList.contains('component-hitbox')); - const targetData = d3.select(target); + const componentDrawingContext = this.root.append('g').attr('class', 'components'); - return targetData.datum(); - }) - .on('start', (event) => { - this.actions.drag.offsetX = event.x - event.subject.x0; - this.actions.drag.offsetY = event.y - event.subject.y0; - }) - .on('drag', function dragged(event) { - dropTarget = dragHandler(this, event); - itemWasDragged = true; - }) - .on('end', (event) => { - if (itemWasDragged) { - this.handleDropEvent(event, dropTarget); - } - }); + this.root.append('g').attr('class', 'links'); + this.componentRenderer.context = componentDrawingContext; + this.componentRenderer.resources = this.resources; } - /** - * Starting from a given node, recursively mark all parent nodes as needing a resize. - * @param {Node} node - The node to start from. - * @private - */ - __markAsNeedingResize(node) { - if (node?.data.drawOption) { - node.data.drawOption.needsResizing = true; - } - if (node.parent) { - this.__markAsNeedingResize(node.parent); - } - } - - /** - * Update component hierarchy and re-render. - * @param {DragEvent} event - D3's drag event. - * @param {Element} dropTarget - The element on which the dragged component was dropped. - */ - handleDropEvent(event, dropTarget) { - const origParent = this.pluginData.getComponentById(event.subject.parent.data.id); - const target = dropTarget ? d3.select(dropTarget) : null; + automaticLayout() { + // TODO: implement automatic layout + // first step: sort components by depth (decrescent) + // like this [[depth: 3, depth: 3], [depth: 2, depth: 2], [depth: 1, depth: 1]] + // second step: automatic layout for the deepest components + // third step: filter the components of the previous depth - 1 + // to keep the container with children + // four step: set the width and height of these container components - if (target === origParent - || (origParent?.id === target?.datum().data?.id - && !origParent?.definition?.preventChildrenMovement)) { - const { x, y } = event; + const containerGroups = this.groupNodesByDepth().map((group) => ( + group.filter((d) => d.data.definition.isContainer && !!d.children) + )); - event.subject.data.drawOption.x = x - this.actions.drag.offsetX; - event.subject.data.drawOption.y = y - this.actions.drag.offsetY; + containerGroups.forEach((group) => { + group.each((d) => { + // TODO: autolayout its children - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'move', - status: 'success', - components: [event.subject.data.id], + this.componentRenderer.setAutomaticlyContainerSize(d.data.id); }); - } else { - if (event.subject.parent) { - this.__markAsNeedingResize(event.subject.parent); - } - event.subject.data.drawOption = null; - - if (target) { - this.changeParent(target, event); - } else { - event.subject.data.removeAllReferenceAttributes(); - - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'update', - status: 'success', - components: [event.subject.data.id], - }); - } - } - - this.draw(this.rootId); - } - - /** - * Change the event subject's parent to the target component. - * @param {Selection} target - Where the dragged element was dropped. - * @param {DragEvent} event - D3's drag event. - */ - changeParent(target, event) { - const parentId = target.attr('data-parentId'); - const newParent = this.pluginData.getComponentById(parentId); - const newParentNode = d3.select(`#${parentId}`).datum(); - const isValid = newParent.definition.childrenTypes.includes(event.subject.data.definition.type); - - if (isValid) { - event.subject.data.setReferenceAttribute(newParent); - this.__markAsNeedingResize(newParentNode); - - if (newParent?.definition?.displayType === 'workflow') { - const newInboundComponent = this.findInsertionPosition(newParentNode, event); - - if (newInboundComponent) { - this.pluginData - .insertComponentAfter( - event.subject.data.id, - newInboundComponent.data?.id, - ); - } else if (newParentNode.children?.length > 0) { - this.pluginData - .insertComponentBefore( - event.subject.data.id, - newParentNode.children[0].data?.id, - ); - } - } - } - - this.pluginData.emitEvent({ - type: 'Drawer', - action: isValid ? 'update' : 'move', - status: 'success', - components: [event.subject.data.id], }); } - /** - * Find after which component the dragged component should be placed in a container. - * @param {Node} parentNode - The destination container. - * @param {DragEvent} event - The drag event. - * @returns {Component} - The component that will be directly before the dropped component. - */ - findInsertionPosition(parentNode, event) { - const xDelta = parentNode.x0 - event.subject.parent.x0; - const yDelta = parentNode.y0 - event.subject.parent.y0; - const adjustedEventX = event.x - xDelta; - const adjustedEventY = event.y - yDelta; + groupNodesByDepth() { + const nodes = d3.selectAll('.component'); + const maxDepth = d3.max(nodes.data(), (d) => d.depth); + const groupedNodes = []; - if (!parentNode.children) { - return null; + for (let i = maxDepth - 1; i > 0; i -= 1) { + groupedNodes.push(nodes.filter((d) => d.depth === i)); } - const sameLineComponents = parentNode.children - .filter((component) => component.data?.id !== event.subject?.data?.id) - .filter((component) => component.y0 <= adjustedEventY - && component.y1 >= adjustedEventY); - - if (sameLineComponents.length > 0) { - const bracketingComponents = sameLineComponents.reduce((targetInfo, component) => { - const distance = adjustedEventX - component.x1; - - if (distance > 0 && distance < targetInfo.distanceLeft) { - targetInfo.distanceLeft = distance; - targetInfo.componentLeft = component; - } else if (distance <= 0 && Math.abs(distance) < targetInfo.distanceRight) { - targetInfo.distanceRight = Math.abs(distance); - targetInfo.componentRight = component; - } - - return targetInfo; - }, { - distanceLeft: Infinity, - distanceRight: Infinity, - componentLeft: null, - componentRight: null, - }); - - this.__fillMissingBracket(parentNode, bracketingComponents, event.subject); - - return this.__isInverted( - parentNode, - bracketingComponents.componentLeft, - bracketingComponents.componentRight, - ) - ? bracketingComponents.componentRight - : bracketingComponents.componentLeft; - } - const { component: returnComponent } = parentNode.children - .reduce((targetInfo, component) => { - const distance = adjustedEventY - component.y1; - - if (distance > 0 && distance <= targetInfo.distance) { - targetInfo = { distance, component }; - } - - return targetInfo; - }, { distance: Infinity, component: null }); - - return returnComponent; + return groupedNodes; } /** - * Fill left bracket if missing due to vertical layout. - * @param {Node} parentNode - The parent node - * @param {object} bracketingComponents - the components we want to drop the subject between. - * @param {Node} subject - The component being dropped. - * @private + * Draw. + * @public */ - __fillMissingBracket(parentNode, bracketingComponents, subject) { - if (parentNode.children?.length > 1 - && !bracketingComponents.componentLeft - && bracketingComponents.componentRight) { - const subjectIndex = parentNode.children - .findIndex((component) => component.data?.id === subject?.data?.id); - const rightIndex = parentNode.children - .findIndex( - (component) => component.data?.id === bracketingComponents.componentRight.data?.id, - ); - const newLeftIndex = subjectIndex === rightIndex - 1 ? rightIndex - 2 : rightIndex - 1; - - if (newLeftIndex >= 0) { - bracketingComponents.componentLeft = parentNode.children[newLeftIndex]; - } - } + draw() { + this.__drawingComponents(); + this.automaticLayout(); } /** - * Check if two components are being rendered right to left. - * @param {Node} parentNode - The parent component - * @param {Node} componentLeft - The left hand component - * @param {Node} componentRight - the right hand component - * @returns {boolean} - true if the right hand component has a lower index than the left hand one + * Drawing components. * @private */ - __isInverted( - parentNode, - componentLeft, - componentRight, - ) { - const leftIndex = parentNode.children - .findIndex( - (component) => component.data.id === componentLeft?.data?.id, - ); - const rightIndex = parentNode.children - .findIndex( - (component) => component.data.id === componentRight?.data?.id, - ); - - return !!((leftIndex === -1 && rightIndex === (parentNode.children.length - 1)) - || (leftIndex >= 0 && rightIndex >= 0 && leftIndex > rightIndex)); - } - - /** - * Create a new svg to render the models in, or fetch an existing one. - */ - createRenderingContext() { - const contextIsPresent = !d3.select(`#${this.rootId}>svg`).empty(); - - if (!contextIsPresent) { - this.svg = d3.select(`#${this.rootId}`) - .append('svg') - .attr('preserveAspectRatio', 'xMinYMin meet') - .style('font', '10px sans-serif') - .attr('height', '100%') - .attr('width', '100%'); - this.svg.append('g') - .attr('class', 'container'); - this.svg.append('defs'); - this.__initializeArrowMarker(); - } else { - this.svg = d3.select(`#${this.rootId}`) - .select('svg'); - } + __drawingComponents() { + this.componentRenderer.render(); } /** - * Draws all Components and ComponentLinks in the parentId Element. - * @param {string} rootId - Id of the container where you want to draw. - * @param {boolean} readOnly - Make the draw read-only. - */ - draw(rootId, readOnly) { - const id = this.pluginData.emitEvent({ - type: 'Drawer', - action: 'write', - status: 'running', - data: { - rootId, - }, - }); - - this.rootId = rootId; - this.createRenderingContext(); - - this.__unselectComponent(); - - this.drawComponents(readOnly); - - this.drawLinks(readOnly); - - this.setViewPortAction(readOnly); - - d3.select('body') - .on('keyup', (event) => { - const currentSelection = this.actions.selection.current; - - if (event.key === 'Delete' && currentSelection) { - if (currentSelection.__class === 'Component') { - this.removeComponentHandler(); - } else if (currentSelection.__class === 'Link') { - this.removeLinkHandler(); - } - } - }); - - if (readOnly) { - const { - width, - height, - x, - y, - } = document.querySelector(`#${this.rootId} svg`).getBBox(); - - d3.select(`#${this.rootId} svg`).attr('viewBox', `${x} ${y} ${width} ${height}`); - } - - this.pluginData.emitEvent({ id, status: 'success' }); - } - - /** - * Handle component click event. Set selected style on it. - * @param {PointerEvent} event - The click event. - */ - clickHandler(event) { - event.stopPropagation(); - this.__selectComponent(d3.select(event.currentTarget)); - } - - /** - * Render components in model view. - * @param {boolean} readOnly - Draw read-only components. - */ - drawComponents(readOnly) { - this.shadowRoot = { children: this.pluginData.components, id: '__shadowRoot', name: '' }; - const groupedNodes = this.buildTree(); - const clicked = this.clickHandler.bind(this); - const drag = this.setupDragBehavior(); - const node = this.svg - .select('.container') - .selectAll('g') - .data(groupedNodes, (data) => data) - .join('g') - .attr('id', ([data]) => data) - .selectAll('g') - .data(([, data]) => data) - .join('g') - .attr('id', ({ data }) => data.id) - .on('click', readOnly ? null : clicked) - .call(readOnly ? () => {} : drag) - .attr('x', ({ x0 }) => x0) - .attr('y', ({ y0 }) => y0) - .attr('transform', ({ x0, y0 }) => `translate(${x0},${y0})`); - - node - .filter(({ data }) => data.id !== '__shadowRoot') - .attr('class', ({ data }) => `component - component-${data.definition.model} - ${data.definition.type}`) - .html(({ data }) => nunjucks.renderString( - this.resources.models[data.definition.model], - { - ...data, - hasError: data.hasError(), - getAttribute: (name) => data.attributes.find((attribute) => attribute.name === name), - }, - )) - .select('svg') - .attr('id', ({ data }) => `svg-${data.id}`) - .attr('height', (component) => { - const { manuallyResized, height } = component.data.drawOption; - - return manuallyResized ? height : this.getComponentHeight(component); - }) - .attr('width', (component) => { - const { manuallyResized, width } = component.data.drawOption; - - return manuallyResized ? width : this.getComponentWidth(component); - }); - - node.select('.component-icon') - .html(({ data }) => this.resources.icons[data.definition.icon]); - - node.select('rect') - .filter((d) => d.data?.definition?.isContainer) - .attr('height', (component) => { - const { manuallyResized, height } = component.data.drawOption; - - return manuallyResized ? height : this.getComponentHeight(component); - }) - .attr('width', (component) => { - const { manuallyResized, width } = component.data.drawOption; - - return manuallyResized ? width : this.getComponentWidth(component); - }); - - node.select('.component-container') - .attr('height', (component) => { - const { manuallyResized, height } = component.data.drawOption; - - return (manuallyResized ? height : this.getComponentHeight(component)) - - this.minHeight - this.margin; - }) - .attr('width', (component) => { - const { manuallyResized, width } = component.data.drawOption; - - return (manuallyResized ? width : this.getComponentWidth(component)) - 2 * this.margin; - }) - .attr('x', () => this.margin) - .filter(({ children }) => children) - .append(({ data }) => d3.select(`#group-${data.id}`).node()); - - node.select('.component-container>rect').attr('data-parentId', ({ data }) => data.id); - } - - /** - * Initialize component height and width then store them in its drawOptions. - * @param {Node} component - The component to initialize the values for. - */ - initializeComponentDrawOptions(component) { - /* - component.depth and component.height are set by d3 and represent the position of the node in - the hierarchy: - - height: how many layers exist below this node - - depth: how deep in the tree the node is - */ - const horizontalCoefficient = Math.min( - component.value, - this.getLineLengthForDepth(component.depth, component.data.definition?.childrenPerLine), - ); - const verticalCoefficient = Math.ceil(this.__getVerticalCoefficient(component)); - - const width = (horizontalCoefficient * (this.minWidth + 2 * this.margin)) - + (component.height * 2 * this.padding) - + (horizontalCoefficient - 1) - * (this.padding + 2 * this.margin); - - const height = (verticalCoefficient * this.minHeight) - + (component.height * this.padding) - + (verticalCoefficient - 1) - * (this.padding + this.margin); - - if (!component.data.drawOption || component.parent?.data?.definition?.preventChildrenMovement) { - component.data.drawOption = new ComponentDrawOption({ - needsPositioning: true, - width, - height, - }); - } else if (!component.data.drawOption.manuallyResized) { - component.data.drawOption.width = width; - component.data.drawOption.height = height; - } - } - - /** - * Build d3 hierarchy and treemap layout. - * @returns {Array} The nodes grouped by parent. - */ - buildTree() { - const treemapLayout = d3.treemap() - .size([this.width, this.height]) - .tile((data) => { - const newComponents = data - .children - .filter((child) => !child.data.drawOption - || data.data?.definition?.preventChildrenMovement); - const existingComponents = data - .children - .filter((child) => child.data.drawOption - && !(data.data?.definition?.preventChildrenMovement)); - - newComponents.forEach((component) => this.initializeComponentDrawOptions(component)); - - const lines = this.__buildLines(existingComponents.concat(newComponents), data.depth); - - this.setupTiles(lines.map((line) => { - line.items = line.items.filter((item) => item); - - return line; - }), data.data?.definition?.displayType === 'workflow'); - // TODO save/load coordinates - }) - .round(true); - const rootNode = d3.hierarchy( - this.shadowRoot, - ({ id }) => this.pluginData.getChildren(id === '__shadowRoot' ? null : id), - ); - - rootNode - .count(); - - treemapLayout(rootNode); - - return d3.groups( - rootNode, - ({ parent }) => (parent - && parent.data.id !== '__shadowRoot' - ? `group-${parent.data.id}` - : 'root-components'), - ).filter(([data]) => data !== 'root-__shadowRoot'); - } - - /** - * Get the most appropriate anchor point for a link towards the given target. - * @param {Selection} sourceSelection - The source D3 selection object. - * @param {Selection} targetSelection - The target D3 selection object. - * @returns {number[] | null} - Tuple representing x,y coordinates, - * null if lacking source and/or target. Format required by d3. - */ - getAnchorPoint(sourceSelection, targetSelection) { - if (sourceSelection.empty() || targetSelection.empty()) { - return null; - } - - const sourceCoords = sourceSelection.node().getBoundingClientRect(); - const sourceCenter = this.getSelectionCenter(sourceSelection); - const targetCenter = this.getSelectionCenter(targetSelection); - - const angle = this.getBearing( - this.screenToSVG(sourceCenter.x, sourceCenter.y, this.svg.select('.container').node()), - this.screenToSVG(targetCenter.x, targetCenter.y, this.svg.select('.container').node()), - ); - - const topAnchor = { - y: sourceCoords.top, - x: sourceCoords.x + (sourceCoords.width / 2), - }; - const bottomAnchor = { - y: sourceCoords.bottom, - x: sourceCoords.x + (sourceCoords.width / 2), - }; - const leftAnchor = { - x: sourceCoords.left, - y: sourceCoords.top + (sourceCoords.height / 2), - }; - const rightAnchor = { - x: sourceCoords.right, - y: sourceCoords.top + (sourceCoords.height / 2), - }; - let anchorPoint; - - if (angle < 45 || angle >= 315) { - anchorPoint = bottomAnchor; - } else if (angle >= 45 && angle < 135) { - anchorPoint = rightAnchor; - } else if (angle >= 135 && angle < 225) { - anchorPoint = topAnchor; - } else { - anchorPoint = leftAnchor; - } - - const { x, y } = this.screenToSVG(anchorPoint.x, anchorPoint.y); - - return [x, y]; - } - - /** - * Initialize arrow marker for links. + * Format component dataset to d3 hierarchy. + * @returns {object} - Formated component dataset. * @private */ - __initializeArrowMarker() { - const definitions = this.pluginData.getUsedLinkDefinitions(); - const arrows = this.svg.select('defs').selectAll('arrow') - .data( - definitions, - (data) => `${data.attributeRef}-${data.sourceRef}-${data.targetRef}`, - ) - .join('marker') - .attr('class', 'arrow'); - - arrows - .attr('id', (data) => `${data.attributeRef}-${data.sourceRef}-${data.targetRef}-arrow`) - .attr('refX', (data) => data.marker.refX) - .attr('refY', (data) => data.marker.refY) - .attr('markerWidth', (data) => data.marker.width) - .attr('markerHeight', (data) => data.marker.height) - .attr('orient', (data) => data.marker.orient) - .append('path') - .attr('d', (data) => data.marker.path) - .attr('fill', (data) => data.color); - } - - /** - * Render links in model view. - * @param {boolean} readOnly - Draw read-only links. - */ - drawLinks(readOnly) { - const pluginLinks = this.pluginData.getLinks(); - - if (!pluginLinks) { - return; - } - - const links = this.svg - .selectAll('.link'); - - links.data(pluginLinks, (data) => data) - .join('path') - .filter(({ source, target }) => !d3.select(`#${source}`).empty() - && !d3.select(`#${target}`).empty()) - .classed('link', true) - .attr('d', (link) => { - const generator = this.getLinkGenerator(link); - - return generator(link); - }) - .attr('id', ({ definition, source, target }) => ( - `link-${definition.sourceRef}-${definition.attributeRef}-${source}-${target}` - )) - .attr('fill', 'none') - .attr('stroke', (link) => link.definition.color) - .attr('stroke-width', (link) => link.definition.width * this.actions.zoom.scale) - .attr('stroke-dasharray', (link) => ( - !link.definition.dashStyle - ? 'none' - : link.definition.dashStyle.map((value) => value * this.actions.zoom.scale) - )) - .attr('marker-start', (data) => { - const { attributeRef, sourceRef, targetRef } = data.definition; - - return data.definition.type === 'Reverse' - ? `url(#${attributeRef}-${sourceRef}-${targetRef}-arrow)` - : 'none'; - }) - .attr('marker-end', (data) => { - const { attributeRef, sourceRef, targetRef } = data.definition; - - return data.definition.type !== 'Reverse' - ? `url(#${attributeRef}-${sourceRef}-${targetRef}-arrow)` - : 'none'; - }) - .attr('cursor', readOnly ? 'default' : 'pointer') - .on('click', (event) => (readOnly ? null : this.clickHandler(event))); - - links.raise(); - } - - /** - * Get the coordinates for a given selection's center. - * @param {Selection} selection - The selection to find the center for. - * @returns {object} Position of selection. - */ - getSelectionCenter(selection) { - const box = selection.node().getBoundingClientRect(); - - return { - x: box.left + (box.width / 2), - y: box.top + (box.height / 2), + __formatComponentDataset() { + const fromRootComponentDataset = { + id: 'root', + name: '', + children: this.pluginData.components, }; - } - - /** - * Get the angle (in degrees) between two points. - * 0 = pointB is directly below. - * 180 = pointB is directly above. - * @param {object} pointA - The point to get the bearing from. - * @param {object} pointB - The point to get the bearing to. - * @returns {number} The bearing. - */ - getBearing(pointA, pointB) { - const distanceXBA = pointB.x - pointA.x; - const distanceYBA = pointB.y - pointA.y; - const x = distanceXBA / (Math.sqrt(distanceXBA ** 2 + distanceYBA ** 2)); - const y = distanceYBA / (Math.sqrt(distanceXBA ** 2 + distanceYBA ** 2)); - - return ((Math.atan2(x, y) * (180 / Math.PI)) + 360) % 360; - } - - /** - * Build a new d3 link generator for a ComponentLink - * @param {ComponentLink} link - The link to build the generator for. - * @returns {object} A d3 link generator. - */ - getLinkGenerator(link) { - const source = d3.select(`#${link.source}`); - const target = d3.select(`#${link.target}`); - - const sourceAnchor = this.getAnchorPoint(source, target); - const targetAnchor = this.getAnchorPoint(target, source); - - const sourceCenter = this.getSelectionCenter(source); - const targetCenter = this.getSelectionCenter(target); - - const angle = this.getBearing( - this.screenToSVG(sourceCenter.x, sourceCenter.y, this.svg.select('.container').node()), - this.screenToSVG(targetCenter.x, targetCenter.y, this.svg.select('.container').node()), - ); - - let curve; - - if (angle < 45 || angle >= 315 || (angle >= 135 && angle < 225)) { - curve = d3.curveBumpY; - } else { - curve = d3.curveBumpX; - } - - return d3.link(curve) - .source(() => sourceAnchor) - .target(() => targetAnchor); - } - - /** - * Compute the component's height then store it in its drawOptions. - * @param {Node} component - The component to get the height for. - * @returns {number} The computed height. - */ - getComponentHeight(component) { - if (component.id === '__shadowRoot') { - return 0; - } - - const containerSpacing = this.minHeight + this.padding + this.margin; - const childHeights = component.children - ? component.children.map(({ y1 }) => y1 + containerSpacing) - : [0]; - - component.data.drawOption.height = (Math.max( - this.minHeight + (component.data.definition.isContainer * containerSpacing), - ...childHeights, - )); - - return component.data.drawOption.height; - } - - /** - * Compute the component's width then store it in its drawOptions. - * @param {Node} component - The component to get the width for. - * @returns {number} The computed width. - */ - getComponentWidth(component) { - if (component.id === '__shadowRoot') { - return 0; - } - - const childWidths = component.children ? component.children.map(({ x1 }) => x1) : [0]; - - component.data.drawOption.width = Math.max(this.minWidth, ...childWidths) - + (!!(component.children) * (this.padding + this.margin)); - - return component.data.drawOption.width; - } - - /** - * Compute the dimension of every component. - * @param {Array} lines - Rows of components. - * @param {boolean} [invertEven] - Layout even line components right to left. - */ - setupTiles(lines, invertEven = false) { - let previousTallestItem = { x1: 0, y1: 0 }; - - lines - .forEach((line) => { - line.items = line.items - .map((item) => { - if (!item.data.drawOption) { - item.data.drawOption = new ComponentDrawOption({ - needsPositioning: true, - needsResizing: true, - }); - } - - return item; - }) - .map((item) => { - if (item.data.drawOption.needsResizing) { - this.initializeComponentDrawOptions(item); - item.data.drawOption.needsResizing = false; - } - - return item; - }) - .sort((itemA, itemB) => { - if (itemA.data.drawOption.needsPositioning && !itemB.data.drawOption.needsPositioning) { - return 1; - } - - if (!itemA.data.drawOption.needsPositioning - && !itemB.data.drawOption.needsPositioning) { - return itemA.data.drawOption.x - itemB.data.drawOption.x; - } - - return 0; - }); - /* .reduceRight((acc, item) => { - acc[invertEven && lineIndex % 2 ? 'push' : 'unshift'](item); - - return acc; - }, []) */ - }); - const rightClamp = Math.max(...lines.map( - (line) => (line.items.reduce((acc, item) => acc + item.data.drawOption.width, 0) - + (line.items.length + 1) * this.padding), - )); - - lines - .forEach((line, lineIndex) => { - let prevItem = { - x1: 0, - x0: rightClamp, - y0: line.band + this.padding, - }; - - line.items.forEach((item) => { - if (item.data.drawOption.needsPositioning) { - item.data.drawOption.x = invertEven && lineIndex % 2 - ? prevItem.x0 - item.data.drawOption.width - this.padding - : prevItem.x1 + this.padding; - item.data.drawOption.y = previousTallestItem.y1 + this.padding; - item.data.drawOption.needsPositioning = false; - } - - item.x0 = item.data.drawOption.x; - item.y0 = item.data.drawOption.y; - prevItem = item; - - item.x1 = item.x0 + item.data.drawOption.width; - item.y1 = item.y0 + item.data.drawOption.height; - }); - - if (line.items.length > 0) { - const maxLineValue = Math.max(...line.items.map((item) => item.value)); - - previousTallestItem = line.items.find((item) => item.value === maxLineValue); - } - }); - } - - /** - * Build and fill the layout lines for a Node. - * @param {Node[]} children - The Node's children to build lines with. - * @param {number} depth - The Node's depth. - * @returns {Array} A list of lines. - * @private - */ - __buildLines(children, depth) { - let lines = []; - let activeLineIndex = 0; - let activeLine = lines[activeLineIndex]; - - children.forEach((child) => { - lines = lines.sort((la, lb) => la.band - lb.band); - if (child.data.drawOption && !child.data.drawOption.needsPositioning) { - activeLineIndex = lines.findIndex( - (line) => line.band === Math.floor(child.data.drawOption.y / 100) * 100, - ); - - if (activeLineIndex === -1) { - lines.push({ - total: 0, - band: Math.floor(child.data.drawOption.y / 100) * 100, - items: [], - }); - activeLineIndex = lines.length - 1; - } - } else { - activeLineIndex = 0; - - while (activeLineIndex < lines.length - && lines[activeLineIndex].items.length >= this.getLineLengthForDepth( - depth, - child.parent?.data?.definition?.childrenPerLine, - )) { - activeLineIndex += 1; - } - - if (activeLineIndex === lines.length) { - lines.push({ - total: 0, - band: activeLineIndex > 0 ? lines[activeLineIndex - 1].band + 100 : 0, - items: [], - }); - } + const formatedComponentDataset = d3.hierarchy(fromRootComponentDataset, (data) => { + if (data.id === 'root') { + return data.children; } - activeLine = lines[activeLineIndex]; - activeLine.total += child.value; - activeLine.items.push(child); + return this.pluginData.getChildren(data.id); }); - return lines.sort((la, lb) => la.band - lb.band); - } - - /** - * Set actions on viewport. - * @param {boolean} readOnly - Disable viewport action. - */ - setViewPortAction(readOnly) { - this.svg.on('click', () => { - this.__unselectComponent(); - this.cancelLinkCreationInteraction(); - }); - - if (readOnly) { - return; - } - - const drawLinks = this.drawLinks.bind(this); - - this.svg.call(d3 - .zoom() - .on('zoom', (event) => { - this.svg.select('.container').attr('transform', event.transform); - this.actions.zoom.scale = event.transform.k; - this.actions.zoom.translate.x = event.transform.x; - this.actions.zoom.translate.y = event.transform.y; - - drawLinks(); - })); - } - - /** - * Action to unselect current element. - * If no element is selected, does nothing. - * @private - */ - __unselectComponent() { - if (this.actions.selection.current) { - const selectedComponent = d3.select(`#${this.rootId} .selected`); - - if (selectedComponent.empty()) { - this.actions.selection.current = null; - - return; - } - - if (selectedComponent.classed('component')) { - selectedComponent - .classed('selected', false) - .select('.template') - .style('outline', ''); - } else { - selectedComponent - .classed('selected', false) - .style('outline', ''); - } + formatedComponentDataset.children = formatedComponentDataset.children + .filter((component) => ( + this.__discriminateComponentsWithouthParent().includes(component.data.id) + )); - this.actions.selection.current = null; - this.hideActionMenu(); - this.hideResizer(); - } + return [formatedComponentDataset]; } /** - * Unselects current selected element and selects a new one. - * @param {Selection} targetSelection - Component or link to select. + * Get components without parent. + * @returns {Component.id[]} - Components without parent. * @private */ - __selectComponent(targetSelection) { - const currentComponent = targetSelection.datum().__class === 'Link' - ? targetSelection.datum() - : targetSelection.datum().data; - const sameElementClicked = this.actions.selection.current === currentComponent; - - if (this.actions.linkCreation.creating) { - if (targetSelection.node().classList.contains('disabled')) { - return; - } - - this.actions.linkCreation.target = currentComponent; - this.createLink(); - } else { - this.__unselectComponent(); - - if (sameElementClicked) { - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'select', - status: 'success', - components: [currentComponent.id], - data: { - isSelected: false, - }, - }); - - return; - } - - targetSelection - .classed('selected', true); - - if (targetSelection.classed('component')) { - targetSelection - .select('.template') - .style('outline', this.actions.selection.style) - .style('outline-offset', this.actions.selection.offset); - } else { - targetSelection - .style('outline', this.actions.selection.style) - .style('outline-offset', this.actions.selection.offset); - } - - this.actions.selection.current = currentComponent; - - if (this.events?.SelectEvent && currentComponent.__class === 'Component') { - this.events.SelectEvent.next(currentComponent); - } - - this.initializeActionMenu(targetSelection); - - if (targetSelection.datum().data && targetSelection.datum()?.data.definition.isContainer) { - this.initializeResizer(targetSelection); - } + __discriminateComponentsWithouthParent() { + let componentWithParent = []; - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'select', - status: 'success', - components: [currentComponent.id], - data: { - isSelected: true, - }, - }); - } - } - - /** - * Create a link between the previously selected source and destination. - * @param {string} componentId - Component id. - */ - createLink(componentId) { - const { source, target } = this.actions.linkCreation; - const activeLinkType = this.pluginData.definitions.links - .find((definition) => definition.sourceRef === source.definition.type - && definition.targetRef === target.definition.type); - - const newLink = new ComponentLink({ - source: source.id, - target: target.id, - definition: activeLinkType, - }); - - this.actions.linkCreation.source.setLinkAttribute(newLink); - - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'add', - status: 'success', - components: [componentId], - links: [newLink], + this.pluginData.components.forEach((component) => { + componentWithParent = componentWithParent.concat(this.pluginData.getChildren(component.id)); }); - this.cancelLinkCreationInteraction(); - - this.drawLinks(); + return this.pluginData.components + .filter((component) => !componentWithParent.includes(component)) + .map((component) => component.id); } /** - * Initialize the action menu for a given target. - * @param {Selection} targetSelection - D3 selection of the target object. + * Get node position. + * @param {Component.id} componentId - Component Id. + * @returns {object} - Node position. */ - initializeActionMenu(targetSelection) { - const actionMenu = this.svg - .select('.container') - .append('svg') - .attr('id', 'action-menu'); - - const actions = this.getMenuActions(targetSelection); - - const linkableList = targetSelection.datum().data?.getDefinedAttributesByType('Link'); - - const zoomTransform = d3.zoomTransform(this.svg.select('.container').node()); - - actionMenu - .append('rect') - .attr('fill', 'lightgrey') - .attr('width', this.actionMenuButtonSize * actions.length) - .attr('height', this.actionMenuButtonSize) - .attr('rx', 5); - - const { bottom, width, left } = targetSelection.node().getBoundingClientRect(); - const { x, y } = this.screenToSVG( - (left + (width / 2)) - ((this.actionMenuButtonSize * actions.length) / 2) * zoomTransform.k, - bottom + 20, - this.svg.select('.container').node(), - ); - - actionMenu - .attr('x', x) - .attr('y', y); - - const buttons = actionMenu - .selectAll('svg') - .data(actions) - .join('svg') - .attr('id', (data) => data.id) - .attr('width', this.actionMenuButtonSize) - .attr('height', this.actionMenuButtonSize) - .attr('x', (_data, index) => (this.actionMenuButtonSize * index)) - .attr('preserveAspectRatio', 'xMinYMin meet') - .attr('cursor', (d) => ((d.id === 'create-linkable-component' || d.id === 'create-link') - && linkableList.length === 0 ? 'not-allowed' : 'pointer')) - .on('click', (event, data) => { - event.stopPropagation(); - const handler = data.handler.bind(this); - - handler(event, data); - }); - - buttons - .append('rect') - .classed('bg-button', true) - .attr('fill', 'lightgrey') - .attr('rx', 5) - .style('width', this.actionMenuButtonSize) - .style('height', this.actionMenuButtonSize); - - buttons - .on('mouseenter', function onHover() { - d3.select(this) - .select('.bg-button') - .attr('fill', (data) => ( - (data.id === 'create-linkable-component' || data.id === 'create-link') - && linkableList.length === 0 ? 'lightgrey' : 'grey' - )); - }) - .on('mouseleave', function onLeave() { - d3.select(this) - .select('.bg-button') - .attr('fill', 'lightgrey'); - }); - - buttons - .append('g') - .attr('x', 0) - .attr('y', 0) - .html((d) => d.icon) - .select('svg') - .attr('opacity', (data) => ( - (data.id === 'create-linkable-component' || data.id === 'create-link') - && linkableList.length === 0 ? 0.2 : 1 - )) - .attr('width', '80%') - .attr('height', '80%') - .attr('x', '10%') - .attr('y', '10%'); - - actionMenu.selectAll('button') - .style('width', '30px') - .style('height', '30px') - .style('border', 'none'); - } - - /** - * Initialize resizer button when container component is selected. - * @param {Selection} targetSelection - D3 selection of the target object. - */ - initializeResizer(targetSelection) { - const { - top, left, width, height, - } = targetSelection.node().getBoundingClientRect(); - const { x: x1, y: y1 } = this.screenToSVG( - left + width, - top + height, - this.svg.select('.container').node(), - ); - - const hitSize = 10; - - const resizer = this.svg.select('.container') - .append('g') - .attr('id', 'resizer') - .attr('fill', '#B5B5B5'); - - resizer.append('circle') - .classed('resize-hit', true) - .attr('cursor', 'nwse-resize') - .attr('cx', x1) - .attr('cy', y1) - .attr('r', hitSize) - .call(d3.drag() - .on('drag', (event) => { - this.hideActionMenu(); - - const component = d3.select(`#svg-${this.actions.selection.current.id}`); - const componentContainer = component.select('.component-container'); - const componentW = parseInt(component.attr('width'), 10); - const componentH = parseInt(component.attr('height'), 10); - const containerW = parseInt(componentContainer.attr('width'), 10); - const containerH = parseInt(componentContainer.attr('height'), 10); - - const hit = d3.select('.resize-hit'); - const hitX = parseInt(hit.attr('cx'), 10); - const hitY = parseInt(hit.attr('cy'), 10); - - hit.attr('cx', hitX + event.dx); - hit.attr('cy', hitY + event.dy); - - component - .attr('width', componentW + event.dx) - .attr('height', componentH + event.dy); - - component - .select('.component-hitbox') - .attr('width', componentW + event.dx) - .attr('height', componentH + event.dy); - - component - .select('.component-container') - .attr('width', containerW + event.dx) - .attr('height', containerH + event.dy); - }) - .on('end', () => { - const component = this.actions.selection.current; - const componentSvg = d3.select(`#svg-${component.id}`); - const componentW = parseInt(componentSvg.attr('width'), 10); - const componentH = parseInt(componentSvg.attr('height'), 10); - - component.drawOption.width = componentW; - component.drawOption.height = componentH; - component.drawOption.manuallyResized = true; - - this.draw(this.rootId); - - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'resize', - status: 'success', - components: [component.id], - }); - })); - } - - /** - * Initialize the linkable components creation menu. - * @param {ComponentDefinition[]} definitions - List of component definitions. - */ - initializeCreateLinkableComponentMenu(definitions) { - d3.select('#linkable-menu')?.remove(); - - let maxTextWidth = 0; - const buttonPadding = 5; - const iconSize = 20; - const actionMenu = document.querySelector('#action-menu'); - const menu = this.svg.select('.container') - .append('svg') - .attr('id', 'linkable-menu'); - - menu - .append('rect') - .attr('rx', 5) - .attr('fill', 'lightgrey') - .attr('height', '100%') - .attr('width', '100%'); - - const buttons = menu - .selectAll('.linkable-button') - .data(definitions) - .join('svg') - .classed('linkable-button', true); - - buttons.attr('class', (data) => `linkable-button ${data.type}`); - - buttons - .attr('width', '100%') - .attr('rx', 5) - .attr('width', '100%') - .attr('height', 30) - .attr('y', (_data, index) => (index * 30)); - - buttons - .append('rect') - .attr('rx', 5) - .attr('fill', 'lightgrey') - .attr('height', '100%') - .attr('width', '100%'); - - buttons - .append('svg') - .html((data) => this.resources.icons[data.icon]) - .attr('x', buttonPadding) - .attr('y', buttonPadding) - .attr('width', iconSize) - .attr('height', iconSize) - // eslint-disable-next-line prefer-arrow-callback - .attr('viewBox', function setViewbox() { - const icon = d3.select(this).select('svg'); - const width = icon.attr('width').replace('px', ''); - const height = icon.attr('height').replace('px', ''); - - return `0 0 ${width} ${height}`; - }) - .attr('background-color', 'white'); + getNodePosition(componentId) { + const component = this.pluginData.components.find((data) => data.id === componentId); - buttons - .append('text') - .attr('x', (buttonPadding * 2) + iconSize) - .attr('y', 18) - .text((data) => data.type); - - // eslint-disable-next-line prefer-arrow-callback - buttons.selectAll('text').each(function getTextWidth() { - const { width } = this.getBBox(); - - if (width > maxTextWidth) { - maxTextWidth = width; - } - }); - - menu - .attr('width', maxTextWidth + iconSize + (buttonPadding * 3)) - .attr('height', (definitions.length * 30)) - // eslint-disable-next-line prefer-arrow-callback - .attr('x', function xPos() { - return parseInt(actionMenu.getAttribute('x'), 10) - + (actionMenu.getBBox().width / 2) - - (parseInt(this.getAttribute('width'), 10) / 2); - }) - .attr('y', (parseInt(actionMenu.getAttribute('y'), 10) - + (actionMenu.getBBox().height) + 10)); - - buttons - .on('mouseenter', function onHover() { - d3.select(this) - .select('rect') - .attr('fill', 'grey') - .attr('cursor', 'pointer'); - }) - .on('mouseleave', function onLeave() { - d3.select(this) - .select('rect') - .attr('fill', 'lightgrey') - .attr('cursor', 'default'); - }) - .on('click', (event, data) => { - this.actions.linkCreation.source = this.actions.selection.current; - - const componentId = this.pluginData.addComponent(data); - const component = this.pluginData.getComponentById(componentId); - - component.path = this.actions.linkCreation.source.path; - - this.draw(this.rootId); - this.actions.linkCreation.target = d3.select(`#${componentId}`).datum().data; - this.createLink(componentId); - }); - } - - /** - * Initialize the link creation menu. - */ - startLinkCreationInteraction() { - if (this.actions.selection.current) { - const source = this.pluginData.getComponentById(this.actions.selection.current.id); - const allowedLinkTargets = source.getDefinedAttributesByType('Link'); - const forbiddenTypes = allowedLinkTargets - .map((linkTarget) => `:not(.${linkTarget.linkRef})`) - .join(''); - - this.actions.linkCreation.creating = true; - this.actions.linkCreation.source = source; - - this.setDisabledStyle(`.component:not(#${source.id})${forbiddenTypes}`); - } - } - - /** - * Handler for component removal. - * Remove component, emit an event accordingly then draw again. - */ - removeComponentHandler() { - this.pluginData.removeComponentById(this.actions.selection.current.id); - - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'delete', - status: 'success', - components: [this.actions.selection.current.id], - }); - - this.draw(this.rootId); - } - - /** - * Handler for link removal. - * Remove link, emit an event accordingly then draw again. - */ - removeLinkHandler() { - this.pluginData.removeLink(this.actions.selection.current); - - this.pluginData.emitEvent({ - type: 'Drawer', - action: 'delete', - status: 'success', - components: [], - }); - - this.draw(this.rootId); - } - - /** - * Get a list of actions to fill the menu for a given target. - * @param {object} targetSelection - The target object. - * @type {object} - * @property {string} id - Id of the action button. - * @property {string} icon - Icon to display in the action button - * @property {Function} handler - Function called on action click. - * @returns {Array} The list of menu actions. - */ - getMenuActions(targetSelection) { - if (targetSelection.classed('component')) { - return [ - { - id: 'create-linkable-component', - icon: actionIcons.add, - handler() { - const data = targetSelection.datum().data?.getDefinedAttributesByType('Link') - .map((link) => link.linkRef); - const definitions = this.pluginData.definitions.components.filter((definition) => ( - data.includes(definition.type) - )); - - if (definitions.length > 0) { - this.initializeCreateLinkableComponentMenu(definitions); - } - }, - }, - { - id: 'create-link', - icon: actionIcons.link, - handler() { - this.startLinkCreationInteraction(); - }, - }, - { - id: 'remove-component', - icon: actionIcons.trash, - handler: this.removeComponentHandler.bind(this), - }, - ]; - } - - return [ - { - id: 'remove-link', - icon: actionIcons.trash, - handler: this.removeLinkHandler.bind(this), - }, - ]; - } - - /** - * Handle link creation being cancelled. - */ - cancelLinkCreationInteraction() { - this.actions.linkCreation.creating = false; - this.actions.linkCreation.source = null; - this.actions.linkCreation.target = null; - this.unsetAllDisabledStyles(); + return { + x: component.drawOption.x, + y: component.drawOption.y, + }; } - /** - * Hide the action menu. - */ - hideActionMenu() { - d3.select('#action-menu').remove(); - d3.select('#linkable-menu').remove(); - } + getNodeSize(componentId) { + const node = d3.select(`#${componentId}`).select('.model'); - /** - * Hide the resizer. - */ - hideResizer() { - d3.select('#resizer').remove(); + return { + width: parseInt(node.attr('width'), 10), + height: parseInt(node.attr('height'), 10), + }; } /** @@ -1741,4 +209,5 @@ class DefaultDrawer { await this.layout.arrangeComponentsPosition(); } } + export default DefaultDrawer; diff --git a/src/draw/ElkLayout.js b/src/draw/ElkLayout.js index 89a45200..0f3cbda8 100644 --- a/src/draw/ElkLayout.js +++ b/src/draw/ElkLayout.js @@ -171,6 +171,7 @@ class ElkLayout extends DefaultLayout { * @private */ writeLayout(layout) { + console.log('test: ', layout); layout.forEach((elkNode) => this.writeSingleDepthLayout(elkNode)); } diff --git a/src/draw/render/ComponentRenderer.js b/src/draw/render/ComponentRenderer.js new file mode 100644 index 00000000..36ff85a9 --- /dev/null +++ b/src/draw/render/ComponentRenderer.js @@ -0,0 +1,115 @@ +import * as d3 from 'd3'; +import { renderString } from 'nunjucks'; + +class ComponentRenderer { + constructor(options = { + gap: 10, + padding: 6, + resources: null, + }) { + /** + * Gap between components. + * @type {number} + * @default 10 + */ + this.gap = options.gap; + + /** + * Space between the component and the border of its container. + * @type {number} + * @default 10 + */ + this.padding = options.padding; + + /** + * Object that contains resources. + * @type {object} + */ + this.resources = options.resources; + + /** + * Drawing context. + * @type {object} + * @default null + * @private + */ + this.drawingContextId = 'root'; + } + + /** + * Check if the data has the option to draw. + * @param {Component} [data] - Data of component. + * @param {string} [option] - Option to check if exists. + * @returns {boolean} - True if the option exists, false otherwise. + * @private + */ + __checkDataDrawingOptionExists(data, option) { + return !(!data.drawOption || !data.drawOption[option]); + } + + /** + * Create models. + * @param {Component} [data] - Data of component. + * @returns {string} - Rendered models. + */ + renderModel(data) { + const { padding } = this; + + return renderString( + this.getModel(data.definition.model), + { + ...data, + padding, + icon: this.resources.icons[data.definition.icon], + hasError: data.hasError(), + hasWidth: this.__checkDataDrawingOptionExists(data, 'width'), + hasHeight: this.__checkDataDrawingOptionExists(data, 'height'), + hasX: this.__checkDataDrawingOptionExists(data, 'x'), + hasY: this.__checkDataDrawingOptionExists(data, 'y'), + getAttribute: (name) => data.attributes.find((attribute) => attribute.name === name), + }, + ); + } + + /** + * Create nodes. + * @param {string} contextId - Id of current context. + * @private + */ + render(contextId = this.drawingContextId) { + const context = d3.select(`#${contextId}`); + + context.select('.components').selectAll('.component') + .data(({ children }) => children) + .join('g') + .attr('id', ({ data }) => data.id) + .attr('class', 'component') + .html(({ data }) => this.renderModel(data)) + .filter(({ data, children }) => data.definition.isContainer && !(!children)) + .each(({ data }) => this.render(data.id)); + } + + setAutomaticlyContainerSize(nodeId) { + const node = d3.select(`#${nodeId}`); + + const { width, height } = node.select('.components').node().getBoundingClientRect(); + + node.datum().data.drawOption.width = width; + node.datum().data.drawOption.height = height; + + node.html(this.renderModel(node.datum().data)); + this.render(nodeId); + } + + /** + * Get model. + * @param {string} [model] - Model name. + * @returns {string} - Model. + * @private + */ + getModel(model) { + return this.resources.models[model]; + } +} + +export default ComponentRenderer; diff --git a/src/models/Component.js b/src/models/Component.js index 4d207829..b19e9ec9 100644 --- a/src/models/Component.js +++ b/src/models/Component.js @@ -1,5 +1,6 @@ import ComponentAttribute from './ComponentAttribute'; import FileInformation from './FileInformation'; +import ComponentDrawOption from './ComponentDrawOption'; /** * A model for modelling tools in Leto Modelizer. @@ -57,7 +58,7 @@ class Component extends FileInformation { * The options used to draw this Component. * @type {ComponentDrawOption} */ - this.drawOption = drawOption || null; + this.drawOption = drawOption || new ComponentDrawOption(); /** * Attributes of Component. * @type {ComponentAttribute[]} diff --git a/src/models/DefaultPlugin.js b/src/models/DefaultPlugin.js index 77df3aa7..4fe46a06 100644 --- a/src/models/DefaultPlugin.js +++ b/src/models/DefaultPlugin.js @@ -90,13 +90,18 @@ class DefaultPlugin { this.__drawer.resources = resources; } + /** + * Init drawing context of plugin. + */ + initDrawingContext() { + this.__drawer.initDrawingContext(); + } + /** * Draws all data in the html element defined by the id. - * @param {string} id - Html id, without '#'. - * @param {boolean} readOnly - Make the draw read-only. */ - draw(id, readOnly) { - this.__drawer.draw(id, readOnly); + draw() { + this.__drawer.draw(); } /** From 1730cc3ffd0a490714e82f3615d6a96ec8e77c25 Mon Sep 17 00:00:00 2001 From: Dimitri Chauvel Date: Wed, 6 Sep 2023 15:04:18 +0200 Subject: [PATCH 3/4] wip --- demo/src/assets/resources.js | 12 ++++++------ src/draw/DefaultDrawer.js | 15 +++++++++++++++ src/draw/ElkLayout.js | 4 +++- src/draw/render/ComponentRenderer.js | 4 ++-- src/models/ComponentDrawOption.js | 12 ++++++++++++ 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/demo/src/assets/resources.js b/demo/src/assets/resources.js index 484b8b48..4aabb66b 100644 --- a/demo/src/assets/resources.js +++ b/demo/src/assets/resources.js @@ -45,9 +45,9 @@ export default { x="0" y="0" {% endif %} - {% if hasWidth and hasHeight %} - width="{{ drawOption.width + 12 + padding * 2}}" - height="{{ drawOption.height + 56 + padding * 2}}" + {% 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 %} @@ -77,9 +77,9 @@ export default { 0 and drawOption.innerHeight > 0 %} + width="{{ drawOption.innerWidth + padding * 2 }}" + height="{{ drawOption.innerHeight + padding * 2 }}" {% else %} width={{ 254 - 12 }} height={{ 68 - 6 }} {% endif %} diff --git a/src/draw/DefaultDrawer.js b/src/draw/DefaultDrawer.js index 0ce01e88..6b467986 100644 --- a/src/draw/DefaultDrawer.js +++ b/src/draw/DefaultDrawer.js @@ -120,6 +120,7 @@ class DefaultDrawer { */ draw() { this.__drawingComponents(); + this.registerComponentsDrawOption(); this.automaticLayout(); } @@ -208,6 +209,20 @@ class DefaultDrawer { async arrangeComponentsPosition() { await this.layout.arrangeComponentsPosition(); } + + registerComponentsDrawOption() { + this.pluginData.components.forEach((component) => { + const position = this.getNodePosition(component.id); + const size = this.getNodeSize(component.id); + + console.log(position, size); + + component.drawOption.x = position.x; + component.drawOption.y = position.y; + component.drawOption.width = size.width; + component.drawOption.height = size.height; + }); + } } export default DefaultDrawer; diff --git a/src/draw/ElkLayout.js b/src/draw/ElkLayout.js index 0f3cbda8..5a298b43 100644 --- a/src/draw/ElkLayout.js +++ b/src/draw/ElkLayout.js @@ -171,7 +171,6 @@ class ElkLayout extends DefaultLayout { * @private */ writeLayout(layout) { - console.log('test: ', layout); layout.forEach((elkNode) => this.writeSingleDepthLayout(elkNode)); } @@ -283,6 +282,7 @@ class ElkLayout extends DefaultLayout { * @private */ writeSingleDepthLayout(elkNode) { + console.log('elkNode: ', elkNode); const nodes = new Map(elkNode.children .map((node) => [node.id, { x: node.x, @@ -297,6 +297,8 @@ class ElkLayout extends DefaultLayout { component.drawOption.x = x; component.drawOption.y = y; }); + + } /** diff --git a/src/draw/render/ComponentRenderer.js b/src/draw/render/ComponentRenderer.js index 36ff85a9..686cc041 100644 --- a/src/draw/render/ComponentRenderer.js +++ b/src/draw/render/ComponentRenderer.js @@ -94,8 +94,8 @@ class ComponentRenderer { const { width, height } = node.select('.components').node().getBoundingClientRect(); - node.datum().data.drawOption.width = width; - node.datum().data.drawOption.height = height; + node.datum().data.drawOption.innerWidth = width; + node.datum().data.drawOption.innerHeight = height; node.html(this.renderModel(node.datum().data)); this.render(nodeId); diff --git a/src/models/ComponentDrawOption.js b/src/models/ComponentDrawOption.js index d6e7cad1..3fc37845 100644 --- a/src/models/ComponentDrawOption.js +++ b/src/models/ComponentDrawOption.js @@ -59,6 +59,18 @@ class ComponentDrawOption { */ this.height = height || null; + /** + * True width of Component in pixel. + * @type {number} + */ + this.innerWidth = null; + + /** + * True height of Component in pixel. + * @type {number} + */ + this.innerHeight = null; + /** * True if the component needs to be resized * @type {boolean} From 713b9442908e7a6ae516b91b5acd872d2b73d440 Mon Sep 17 00:00:00 2001 From: Dimitri Chauvel Date: Mon, 18 Sep 2023 09:48:28 +0200 Subject: [PATCH 4/4] wip --- demo/src/assets/resources.js | 4 +- src/draw/DefaultDrawer.js | 57 +++++++++++--------------- src/draw/{ => layout}/DefaultLayout.js | 0 src/draw/{ => layout}/ElkLayout.js | 31 +++++++++----- src/draw/render/ComponentRenderer.js | 5 ++- 5 files changed, 49 insertions(+), 48 deletions(-) rename src/draw/{ => layout}/DefaultLayout.js (100%) rename src/draw/{ => layout}/ElkLayout.js (94%) diff --git a/demo/src/assets/resources.js b/demo/src/assets/resources.js index 4aabb66b..257d711b 100644 --- a/demo/src/assets/resources.js +++ b/demo/src/assets/resources.js @@ -56,7 +56,7 @@ export default { {% if hasError %} - + + `, }, diff --git a/src/draw/DefaultDrawer.js b/src/draw/DefaultDrawer.js index 6b467986..cc0dea08 100644 --- a/src/draw/DefaultDrawer.js +++ b/src/draw/DefaultDrawer.js @@ -1,5 +1,5 @@ import * as d3 from 'd3'; -import ElkLayout from './ElkLayout'; +import ElkLayout from './layout/ElkLayout'; import ComponentRenderer from './render/ComponentRenderer'; /** @@ -11,20 +11,41 @@ class DefaultDrawer { * @param {DefaultData} pluginData - Plugin data storage. * @param {object} [resources] - Object that contains resources. * @param {string} [viewPortId] - Id of HTML element where we want to draw. + * @param option */ - constructor(pluginData, resources = null, viewPortId = 'view-port') { + constructor(pluginData, resources = null, viewPortId = 'view-port', option = { + padding: 10, + gap: 50, + }) { /** * Plugin data storage. * @type {DefaultData} */ this.pluginData = pluginData; + /** + * Component renderer. + */ + this.componentRenderer = new ComponentRenderer({ padding: option.padding }); + /** * Plugin layout system. * @type {DefaultLayout} * @default new ElkLayout() */ - this.layout = new ElkLayout(this.pluginData); + this.layout = new ElkLayout( + this.pluginData, + { componentRenderer: this.componentRenderer }, + { + 'elk.padding': `[ + left=${option.padding}, + top=${option.padding}, + right=${option.padding}, + bottom=${option.padding} + ]`, + 'elk.layered.spacing.baseValue': option.gap, + }, + ); /** * Object that contains resources. @@ -51,11 +72,6 @@ class DefaultDrawer { * @type {Selection} */ this.root = null; - - /** - * Component renderer. - */ - this.componentRenderer = new ComponentRenderer(); } /** @@ -80,28 +96,6 @@ class DefaultDrawer { this.componentRenderer.resources = this.resources; } - automaticLayout() { - // TODO: implement automatic layout - // first step: sort components by depth (decrescent) - // like this [[depth: 3, depth: 3], [depth: 2, depth: 2], [depth: 1, depth: 1]] - // second step: automatic layout for the deepest components - // third step: filter the components of the previous depth - 1 - // to keep the container with children - // four step: set the width and height of these container components - - const containerGroups = this.groupNodesByDepth().map((group) => ( - group.filter((d) => d.data.definition.isContainer && !!d.children) - )); - - containerGroups.forEach((group) => { - group.each((d) => { - // TODO: autolayout its children - - this.componentRenderer.setAutomaticlyContainerSize(d.data.id); - }); - }); - } - groupNodesByDepth() { const nodes = d3.selectAll('.component'); const maxDepth = d3.max(nodes.data(), (d) => d.depth); @@ -121,7 +115,6 @@ class DefaultDrawer { draw() { this.__drawingComponents(); this.registerComponentsDrawOption(); - this.automaticLayout(); } /** @@ -215,8 +208,6 @@ class DefaultDrawer { const position = this.getNodePosition(component.id); const size = this.getNodeSize(component.id); - console.log(position, size); - component.drawOption.x = position.x; component.drawOption.y = position.y; component.drawOption.width = size.width; diff --git a/src/draw/DefaultLayout.js b/src/draw/layout/DefaultLayout.js similarity index 100% rename from src/draw/DefaultLayout.js rename to src/draw/layout/DefaultLayout.js diff --git a/src/draw/ElkLayout.js b/src/draw/layout/ElkLayout.js similarity index 94% rename from src/draw/ElkLayout.js rename to src/draw/layout/ElkLayout.js index 5a298b43..9d0a46a3 100644 --- a/src/draw/ElkLayout.js +++ b/src/draw/layout/ElkLayout.js @@ -101,10 +101,11 @@ class ElkLayout extends DefaultLayout { /** * Initializes ELK parameters and inherited fields. * @param {DefaultData} pluginData - A graph to be arranged. + * @param {object} [renderer] - Renderer for the components. (use defaults if unsure) * @param {object} [elkParams] - Parameters for the layout algorithm. (use defaults if unsure) * @see Parameters for ELK: {@link https://eclipse.dev/elk/reference/options.html} */ - constructor(pluginData, elkParams = {}) { + constructor(pluginData, renderer = {}, elkParams = {}) { super(pluginData); /** @@ -114,7 +115,6 @@ class ElkLayout extends DefaultLayout { this.elkParams = { // default parameters 'elk.algorithm': 'elk.layered', - 'spacing.baseValue': '50', separateConnectedComponents: 'true', 'elk.layered.cycleBreaking.strategy': 'INTERACTIVE', 'elk.layered.layering.strategy': 'INTERACTIVE', @@ -126,6 +126,11 @@ class ElkLayout extends DefaultLayout { ...elkParams, }; + + this.renderer = { + componentRenderer: null, + ...renderer, + }; } /** @@ -158,10 +163,7 @@ class ElkLayout extends DefaultLayout { // For each parent, from the deepest nodes up to the root, get a layout for its children. return Promise.all( - this.getParentsByDepth(nodes) - .map( - (node) => this.generateELKLayout(node, nodes, links), - ), + this.getParentsByDepth(nodes).map((node) => this.generateELKLayout(node, nodes, links)), ); } @@ -171,7 +173,9 @@ class ElkLayout extends DefaultLayout { * @private */ writeLayout(layout) { - layout.forEach((elkNode) => this.writeSingleDepthLayout(elkNode)); + layout.forEach((elkNode) => { + this.writeSingleDepthLayout(elkNode); + }); } /** @@ -273,7 +277,15 @@ class ElkLayout extends DefaultLayout { })); // Finally calling ELK. - return ElkLayout.elk.layout(graph); + const layout = await ElkLayout.elk.layout(graph); + + this.writeSingleDepthLayout(layout); + this.renderer.componentRenderer.render(layout.id); + if (layout.id !== 'root') { + this.renderer.componentRenderer.setAutomaticlyContainerSize(layout.id); + } + + return layout; } /** @@ -282,7 +294,6 @@ class ElkLayout extends DefaultLayout { * @private */ writeSingleDepthLayout(elkNode) { - console.log('elkNode: ', elkNode); const nodes = new Map(elkNode.children .map((node) => [node.id, { x: node.x, @@ -297,8 +308,6 @@ class ElkLayout extends DefaultLayout { component.drawOption.x = x; component.drawOption.y = y; }); - - } /** diff --git a/src/draw/render/ComponentRenderer.js b/src/draw/render/ComponentRenderer.js index 686cc041..00b4ddce 100644 --- a/src/draw/render/ComponentRenderer.js +++ b/src/draw/render/ComponentRenderer.js @@ -74,16 +74,18 @@ class ComponentRenderer { /** * Create nodes. * @param {string} contextId - Id of current context. + * @param {number} [depth] - Depth of current context. * @private */ render(contextId = this.drawingContextId) { const context = d3.select(`#${contextId}`); - context.select('.components').selectAll('.component') + context.select('.components').selectAll(`.component[depth="${context.datum().depth + 1}"]`) .data(({ children }) => children) .join('g') .attr('id', ({ data }) => data.id) .attr('class', 'component') + .attr('depth', (data) => data.depth) .html(({ data }) => this.renderModel(data)) .filter(({ data, children }) => data.definition.isContainer && !(!children)) .each(({ data }) => this.render(data.id)); @@ -91,7 +93,6 @@ class ComponentRenderer { setAutomaticlyContainerSize(nodeId) { const node = d3.select(`#${nodeId}`); - const { width, height } = node.select('.components').node().getBoundingClientRect(); node.datum().data.drawOption.innerWidth = width;