@metadev/daga 4.2.11 → 4.2.12

package/Changelog.md

@@ -6,6 +6,11 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.12
+
+- Force location of field `<foreignObject>` tags in webkit browsers [#356](https://github.com/metadevpro/daga/pull/356)
+- Use `<g>` instead of `<foreignObject>` for containers of diagram decorators and objects [#357](https://github.com/metadevpro/daga/pull/357)
+
 ## v. 4.2.11
 
 - Version branch to avoid error in ng-packagr

package/index.cjs.js

@@ -231,7 +231,7 @@ const distanceBetweenPoints = (point1, point2) => {
   return Math.pow(Math.pow(point1[0] - point2[0], 2) + Math.pow(point1[1] - point2[1], 2), 0.5);
 };
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.
@@ -7163,7 +7163,6 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(rxjs.debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7415,6 +7414,9 @@ const unrotate = (width, height, orientation) => {
   return [oldWidth, oldHeight];
 };
 
+var _a;
+const isWebkit = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.indexOf('AppleWebKit')) >= 0;
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7712,6 +7714,10 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      if (isWebkit) {
+        // force update fields to compensate for a rendering bug in webkit
+        this.updateFieldsInView();
+      }
       this.contextMenu.close();
       this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(exports.ZoomEvents.End, () => {
@@ -8670,11 +8676,15 @@ class DiagramCanvas {
       this.secondaryButton = false;
     })).append('xhtml:div').style('width', '100%').style('height', '100%').style('display', 'flex').append('xhtml:p').style('box-sizing', 'border-box').style('outline', 0).style('margin', 0).style('border', 0).style('padding', 0).style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'center' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === exports.VerticalAlign.Center ? 'center' : d.verticalAlign === exports.VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[0]}px`).style('max-height', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[1]}px`).style('overflow', d => d.fit ? 'default' : 'clip').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'center' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'end' : 'start').style('transform', d => `rotate(${d.orientation}deg)`).style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
+    if (isWebkit) {
+      const zoomFactor = this.zoomTransform.k;
+      mergeSelection.attr('width', d => `${d.width * zoomFactor}px`).attr('height', d => `${d.height * zoomFactor}px`).select('div').style('position', 'absolute').style('left', d => `${d.coords[0] * zoomFactor + this.zoomTransform.x}px`).style('top', d => `${d.coords[1] * zoomFactor + this.zoomTransform.y}px`).select('p').style('font-size', d => `${d.fontSize * zoomFactor}px`);
+    }
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -8715,9 +8725,9 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }

package/index.esm.js

@@ -210,7 +210,7 @@ const distanceBetweenPoints = (point1, point2) => {
   return Math.pow(Math.pow(point1[0] - point2[0], 2) + Math.pow(point1[1] - point2[1], 2), 0.5);
 };
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.
@@ -7142,7 +7142,6 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7394,6 +7393,9 @@ const unrotate = (width, height, orientation) => {
   return [oldWidth, oldHeight];
 };
 
+var _a;
+const isWebkit = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.indexOf('AppleWebKit')) >= 0;
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7691,6 +7693,10 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      if (isWebkit) {
+        // force update fields to compensate for a rendering bug in webkit
+        this.updateFieldsInView();
+      }
       this.contextMenu.close();
       this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(ZoomEvents.End, () => {
@@ -8649,11 +8655,15 @@ class DiagramCanvas {
       this.secondaryButton = false;
     })).append('xhtml:div').style('width', '100%').style('height', '100%').style('display', 'flex').append('xhtml:p').style('box-sizing', 'border-box').style('outline', 0).style('margin', 0).style('border', 0).style('padding', 0).style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === VerticalAlign.Center ? 'center' : d.verticalAlign === VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[0]}px`).style('max-height', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[1]}px`).style('overflow', d => d.fit ? 'default' : 'clip').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').style('transform', d => `rotate(${d.orientation}deg)`).style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
+    if (isWebkit) {
+      const zoomFactor = this.zoomTransform.k;
+      mergeSelection.attr('width', d => `${d.width * zoomFactor}px`).attr('height', d => `${d.height * zoomFactor}px`).select('div').style('position', 'absolute').style('left', d => `${d.coords[0] * zoomFactor + this.zoomTransform.x}px`).style('top', d => `${d.coords[1] * zoomFactor + this.zoomTransform.y}px`).select('p').style('font-size', d => `${d.fontSize * zoomFactor}px`);
+    }
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -8694,9 +8704,9 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }

package/package.json

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

package/src/lib/util/browser-util.d.ts

@@ -0,0 +1 @@
+export declare const isWebkit: boolean;

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

@@ -144,7 +144,7 @@ export declare const linesOverlap: (line1: Line, line2: Line) => boolean;
  */
 export declare const lineIntersectsRectangle: (line: Line, rectangle: Rectangle) => boolean;
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.