improved dragging of nodes in sankey

ishubin · Feb 3, 2025 · 7de8d7a · 7de8d7a
1 parent e72d4f8
commit 7de8d7a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 10 deletions.
diff --git a/assets/templates/diagrams/sankey.json b/assets/templates/diagrams/sankey.json
diff --git a/assets/templates/diagrams/src/sankey.sch b/assets/templates/diagrams/src/sankey.sch
@@ -332,7 +332,7 @@ func buildNodeItems(levels) {
                 nodeItem.shapeProps.set('strokeColor', nodeStrokeColor)
                 nodeItem.shapeProps.set('cornerRadius', nodeCornerRadius)
                 nodeItem.shapeProps.set('fill', Fill.solid(node.color))
-                nodeItem.args.set('tplArea', 'controlled')
+                nodeItem.args.set('tplArea', 'movable')
                 nodeItem.args.set('tplConnector', 'off')
                 nodeItem.args.set('tplRotation', 'off')
                 nodeItem.locked = false

diff --git a/src/ui/components/editor/EditBox.vue b/src/ui/components/editor/EditBox.vue
@@ -208,7 +208,7 @@
         </g>
 
         <g v-if="!isItemConnector" :transform="svgEditBoxTransform">
-            <ellipse v-if="kind === 'regular' && !isAutoLayoutEnabled && !isLocked && editBox.rotationEnabled" class="boundary-box-dragger"
+            <ellipse v-if="kind === 'regular' && !isAutoLayoutEnabled && !isLocked && !isAMovableTemplatedItem && editBox.rotationEnabled" class="boundary-box-dragger"
                 data-type="edit-box-rotational-dragger"
                 :fill="boundaryBoxColor"
                 :cx="editBox.area.w / 2"
@@ -217,7 +217,7 @@
                 :ry="controlPointSize/safeZoom"
             />
 
-            <transition name="edit-box-controls" v-if="!isAutoLayoutEnabled && !isLocked && editBox.connectorStarterEnabled && editBox.items.length === 1 && kind === 'regular' && connectionStarterDisplayed">
+            <transition name="edit-box-controls" v-if="!isAutoLayoutEnabled && !isLocked && !isAMovableTemplatedItem && editBox.connectorStarterEnabled && editBox.items.length === 1 && kind === 'regular' && connectionStarterDisplayed">
                 <g>
                     <path class="boundary-box-connector-starter"
                         :transform="`translate(${editBox.area.w/2 + 3/safeZoom}  ${editBox.area.h + 30/safeZoom}) scale(${1/safeZoom}) rotate(90)`"
@@ -245,7 +245,7 @@
                 </g>
             </transition>
 
-            <g v-if="kind === 'regular' && !isAutoLayoutEnabled && !isLocked">
+            <g v-if="kind === 'regular' && !isAutoLayoutEnabled && !isLocked && !isAMovableTemplatedItem">
                 <rect class="boundary-box-dragger"
                     data-type="edit-box-resize-dragger"
                     data-dragger-edges="top,left"
@@ -904,6 +904,14 @@ export default {
             return allAutoLayout;
         },
 
+        isAMovableTemplatedItem() {
+            if (this.editBox.items.length === 1) {
+                const item = this.editBox.items[0];
+                return item.meta && item.meta.templated && item.args && item.args.tplArea == 'movable';
+            }
+            return false;
+        },
+
         isLocked() {
             if (this.editBox.connectorPoints && this.editBox.connectorPoints.length > 0) {
                 return false;

diff --git a/src/ui/scheme/SchemeContainer.js b/src/ui/scheme/SchemeContainer.js
@@ -3047,7 +3047,7 @@ class SchemeContainer {
                 }
 
                 if (item.meta && item.meta.templated && item.meta.templateRootId && item.meta.templateRootId !== item.id && item.args && item.args.templatedId) {
-                    if (item.args && item.args.tplArea ===  'controlled') {
+                    if (item.args && (item.args.tplArea ===  'controlled' || item.args.tplArea ===  'movable')) {
                         const templateRootItem = this.findItemById(item.meta.templateRootId);
                         if (!templateRootItem || !templateRootItem.args || !templateRootItem.args.templateRef) {
                             return;
@@ -3060,9 +3060,7 @@ class SchemeContainer {
                             item.area.w = modifiedArea.w;
                             item.area.h = modifiedArea.h;
 
-                            // if (!isSoft) {
                             this.regenerateTemplatedItem(templateRootItem, template, templateRootItem.args.templateArgs, templateRootItem.area.w, templateRootItem.area.h);
-                            // }
                             EditorEventBus.item.templateArgsUpdated.specific.$emit(this.editorId, templateRootItem.id);
                         });
                     }

diff --git a/src/ui/typedef.js b/src/ui/typedef.js
@@ -232,8 +232,9 @@
  * @property {Boolean|undefined} templateForceText - flag forces templed item to update its textSlots
  * @property {Array<String>|undefined} templateIgnoredProps - array of shapeProps field names that should be ignored when template is regenerated
  *                                                            this gives users possibility of editing individual template items
- * @property {String|undefined} tplArea - 'controlled' or 'fixed'. If specified as 'controlled' then it tells Schemio
- *                                        that this item can be moved and its movement will be controlled by the template
+ * @property {String|undefined} tplArea - 'controlled', 'movable' or 'fixed'. If specified as 'controlled' then it tells Schemio
+ *                                        that this item can be moved or resized and its movement will be controlled by the template.
+ *                                        If set to 'movable' it will allow to move it, but it will not show the resizing draggers in edit box.
  * @property {String} tplConnector - 'on' or 'off'. If specified as 'off' - it tells that for this item it should not render connector starter in the edit box
  * @property {String} tplRotation - 'on' or 'off'. Tells whether rotation of this item is supported
  * @property {String} tplForceDescription - if set to true, then template will set the description of the item