@metadev/daga 4.2.12 → 4.2.13

package/Changelog.md

@@ -6,6 +6,10 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.13
+
+- Fix check for whether a browser is Safari [#363](https://github.com/metadevpro/daga/pull/363)
+
 ## v. 4.2.12
 
 - Force location of field `<foreignObject>` tags in webkit browsers [#356](https://github.com/metadevpro/daga/pull/356)

package/index.cjs.js

@@ -7414,8 +7414,8 @@ 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;
+const isUserAgentSafari = userAgent => /^((?!chrome|android).)*safari/i.test(userAgent);
+const isSafari = isUserAgentSafari(navigator.userAgent);
 
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
@@ -7714,7 +7714,7 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
-      if (isWebkit) {
+      if (isSafari) {
         // force update fields to compensate for a rendering bug in webkit
         this.updateFieldsInView();
       }
@@ -8676,7 +8676,7 @@ 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) {
+    if (isSafari) {
       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`);
     }

package/index.esm.js

@@ -7393,8 +7393,8 @@ 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;
+const isUserAgentSafari = userAgent => /^((?!chrome|android).)*safari/i.test(userAgent);
+const isSafari = isUserAgentSafari(navigator.userAgent);
 
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
@@ -7693,7 +7693,7 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
-      if (isWebkit) {
+      if (isSafari) {
         // force update fields to compensate for a rendering bug in webkit
         this.updateFieldsInView();
       }
@@ -8655,7 +8655,7 @@ 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) {
+    if (isSafari) {
       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`);
     }

package/package.json

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

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

@@ -1 +1,2 @@
-export declare const isWebkit: boolean;
+export declare const isUserAgentSafari: (userAgent: string) => boolean;
+export declare const isSafari: boolean;