@metadev/daga 4.2.15 → 4.2.16

package/Changelog.md

@@ -6,6 +6,11 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.16
+
+- Fix bug where the `DagaImporter` fails to create a node's label if it's blank [#373](https://github.com/metadevpro/daga/pull/373)
+- Add `openTextInput` method to `Canvas` to enable opening a text box editor for a text via API [#374](https://github.com/metadevpro/daga/pull/374)
+
 ## v. 4.2.15
 
 - Configure center animation duration in buttons component [#368](https://github.com/metadevpro/daga/pull/368)

package/index.cjs.js

@@ -1194,13 +1194,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -4946,23 +4950,21 @@ class DagaImporter {
       model.nodes.add(newNode);
       newNode.width = node.width;
       newNode.height = node.height;
-      if (node.label) {
-        // add node decorators
-        if (newNodeType.decorators) {
-          for (let i = 0; i < newNodeType.decorators.length; ++i) {
-            const decoratorConfig = newNodeType.decorators[i];
-            model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
-          }
-        }
-        // add node label
-        if (newNodeType.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
-          const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
-          newField.text = node.label;
-          newNode.label = newField;
-          model.fields.add(newField);
-          newField.updateInView();
-        }
+      // add node decorators
+      if (newNodeType.decorators) {
+        for (let i = 0; i < newNodeType.decorators.length; ++i) {
+          const decoratorConfig = newNodeType.decorators[i];
+          model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
+        }
+      }
+      // add node label
+      if (newNodeType.label) {
+        const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
+        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        newField.text = node.label;
+        newNode.label = newField;
+        model.fields.add(newField);
+        newField.updateInView();
       }
       for (const child of node.children || []) {
         const newChild = this.importNode(model, child);
@@ -4975,16 +4977,14 @@ class DagaImporter {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
         (_b = newNode.sections) === null || _b === void 0 ? void 0 : _b.push(newSection);
         model.sections.add(newSection);
-        if (section.label) {
-          // add section label
-          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
-            const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
-            newField.text = section.label;
-            newSection.label = newField;
-            model.fields.add(newField);
-            newField.updateInView();
-          }
+        // add section label
+        if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
+          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
+          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          newField.text = section.label;
+          newSection.label = newField;
+          model.fields.add(newField);
+          newField.updateInView();
         }
         let portCounter = 0;
         for (const port of section.ports || []) {
@@ -8722,21 +8722,7 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(exports.DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
-        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, _text => {
-          /*
-          Empty for now
-          We should create a better function to stretch the root element as the text expands
-          Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
-          */
-        }, text => {
-          d.text = text;
-          if (this.currentAction instanceof EditFieldAction) {
-            this.currentAction.to = text;
-            this.currentAction.do();
-            this.actionStack.add(this.currentAction);
-            this.currentAction = undefined;
-          }
-        });
+        this.openTextInput(d.id);
       }
     }).call(d3__namespace.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -9324,6 +9310,27 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
+  openTextInput(id) {
+    const field = this.model.fields.get(id);
+    if (field) {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, () => {
+        // (_text)
+        /*
+            Empty for now
+            We should create a better function to stretch the root element as the text expands
+            Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
+            */
+      }, text => {
+        field.text = text;
+        if (this.currentAction instanceof EditFieldAction) {
+          this.currentAction.to = text;
+          this.currentAction.do();
+          this.actionStack.add(this.currentAction);
+          this.currentAction = undefined;
+        }
+      });
+    }
+  }
   createInputField(text, coords, width, height, fontSize, fontFamily, orientation, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();

package/index.esm.js

@@ -1173,13 +1173,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -4925,23 +4929,21 @@ class DagaImporter {
       model.nodes.add(newNode);
       newNode.width = node.width;
       newNode.height = node.height;
-      if (node.label) {
-        // add node decorators
-        if (newNodeType.decorators) {
-          for (let i = 0; i < newNodeType.decorators.length; ++i) {
-            const decoratorConfig = newNodeType.decorators[i];
-            model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
-          }
-        }
-        // add node label
-        if (newNodeType.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
-          const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
-          newField.text = node.label;
-          newNode.label = newField;
-          model.fields.add(newField);
-          newField.updateInView();
-        }
+      // add node decorators
+      if (newNodeType.decorators) {
+        for (let i = 0; i < newNodeType.decorators.length; ++i) {
+          const decoratorConfig = newNodeType.decorators[i];
+          model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
+        }
+      }
+      // add node label
+      if (newNodeType.label) {
+        const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
+        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        newField.text = node.label;
+        newNode.label = newField;
+        model.fields.add(newField);
+        newField.updateInView();
       }
       for (const child of node.children || []) {
         const newChild = this.importNode(model, child);
@@ -4954,16 +4956,14 @@ class DagaImporter {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
         (_b = newNode.sections) === null || _b === void 0 ? void 0 : _b.push(newSection);
         model.sections.add(newSection);
-        if (section.label) {
-          // add section label
-          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
-            const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
-            newField.text = section.label;
-            newSection.label = newField;
-            model.fields.add(newField);
-            newField.updateInView();
-          }
+        // add section label
+        if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
+          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
+          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          newField.text = section.label;
+          newSection.label = newField;
+          model.fields.add(newField);
+          newField.updateInView();
         }
         let portCounter = 0;
         for (const port of section.ports || []) {
@@ -8701,21 +8701,7 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
-        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, _text => {
-          /*
-          Empty for now
-          We should create a better function to stretch the root element as the text expands
-          Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
-          */
-        }, text => {
-          d.text = text;
-          if (this.currentAction instanceof EditFieldAction) {
-            this.currentAction.to = text;
-            this.currentAction.do();
-            this.actionStack.add(this.currentAction);
-            this.currentAction = undefined;
-          }
-        });
+        this.openTextInput(d.id);
       }
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -9303,6 +9289,27 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
+  openTextInput(id) {
+    const field = this.model.fields.get(id);
+    if (field) {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, () => {
+        // (_text)
+        /*
+            Empty for now
+            We should create a better function to stretch the root element as the text expands
+            Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
+            */
+      }, text => {
+        field.text = text;
+        if (this.currentAction instanceof EditFieldAction) {
+          this.currentAction.to = text;
+          this.currentAction.do();
+          this.actionStack.add(this.currentAction);
+          this.currentAction = undefined;
+        }
+      });
+    }
+  }
   createInputField(text, coords, width, height, fontSize, fontFamily, orientation, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.15",
+  "version": "4.2.16",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/lib/diagram/canvas/diagram-canvas.d.ts

@@ -138,6 +138,7 @@ export declare class DiagramCanvas implements Canvas {
     private dropConnection;
     cancelAllUserActions(): void;
     canUserPerformAction(action: DiagramActions): boolean;
+    openTextInput(id: string): void;
     private createInputField;
     private removeInputField;
     private minimumSizeOfField;

package/src/lib/interfaces/canvas.d.ts

@@ -356,6 +356,11 @@ export interface Canvas {
      * @param shrink Whether the node should shrink if there is excess space; `true` by default
      */
     fitNodeInView(id: string, shrink?: boolean): void;
+    /**
+     * Open a text input for a field.
+     * @param id The id of a field.
+     */
+    openTextInput(id: string): void;
     /**
      * Get the d3 Selection containing the root html div element of the canvas.
      * @private