@joint/core 4.0.3 → 4.0.4

package/dist/vectorizer.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.0.3 (2024-05-14) - JavaScript diagramming library
+/*! JointJS v4.0.4 (2024-05-31) - JavaScript diagramming library
 
 
 This Source Code Form is subject to the terms of the Mozilla Public

package/dist/vectorizer.min.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.0.3 (2024-05-14) - JavaScript diagramming library
+/*! JointJS v4.0.4 (2024-05-31) - JavaScript diagramming library
 
 
 This Source Code Form is subject to the terms of the Mozilla Public

package/dist/version.mjs

@@ -1,3 +1,3 @@
-var version = "4.0.3";
+var version = "4.0.4";
 
 export { version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joint/core",
   "title": "JointJS",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "JavaScript diagramming library",
   "sideEffects": false,
   "main": "./dist/joint.min.js",

package/src/dia/LinkView.mjs

@@ -5,7 +5,7 @@ import { addClassNamePrefix, merge, assign, isObject, isFunction, clone, isPerce
 import { Point, Line, Path, normalizeAngle, Rect, Polyline } from '../g/index.mjs';
 import * as routers from '../routers/index.mjs';
 import * as connectors from '../connectors/index.mjs';
-
+import { env } from '../env/index.mjs';
 
 const Flags = {
     TOOLS: CellView.Flags.TOOLS,
@@ -99,6 +99,11 @@ export const LinkView = CellView.extend({
             this.updateHighlighters(true);
             this.updateTools(opt);
             flags = this.removeFlag(flags, [Flags.RENDER, Flags.UPDATE, Flags.LABELS, Flags.TOOLS, Flags.CONNECTOR]);
+
+            if (env.test('isSafari')) {
+                this.__fixSafariBug268376();
+            }
+
             return flags;
         }
 
@@ -151,6 +156,19 @@ export const LinkView = CellView.extend({
         return flags;
     },
 
+    __fixSafariBug268376: function() {
+        // Safari has a bug where any change after the first render is not reflected in the DOM.
+        // https://bugs.webkit.org/show_bug.cgi?id=268376
+        const { el } = this;
+        const childNodes = Array.from(el.childNodes);
+        const fragment = document.createDocumentFragment();
+        for (let i = 0, n = childNodes.length; i < n; i++) {
+            el.removeChild(childNodes[i]);
+            fragment.appendChild(childNodes[i]);
+        }
+        el.appendChild(fragment);
+    },
+
     requestConnectionUpdate: function(opt) {
         this.requestUpdate(this.getFlag(Flags.UPDATE), opt);
     },

package/src/dia/attributes/text.mjs

@@ -7,6 +7,8 @@ function isTextInUse(_value, _node, attrs) {
     return (attrs.text !== undefined);
 }
 
+const FONT_ATTRIBUTES = ['font-weight', 'font-family', 'font-size', 'letter-spacing', 'text-transform'];
+
 const textAttributesNS = {
 
     'line-height': {
@@ -122,18 +124,28 @@ const textAttributesNS = {
             var text = value.text;
             if (text === undefined) text = attrs.text;
             if (text !== undefined) {
+
                 const breakTextFn = value.breakText || breakText;
                 const computedStyles = getComputedStyle(node);
+                const wrapFontAttributes = {};
+                // The font size attributes must be set on the node
+                // to get the correct text wrapping.
+                // TODO: set the native SVG attributes before special attributes
+                for (let i = 0; i < FONT_ATTRIBUTES.length; i++) {
+                    const name = FONT_ATTRIBUTES[i];
+                    if (name in attrs) {
+                        node.setAttribute(name, attrs[name]);
+                    }
+                    // Note: computedStyles is a live object
+                    // i.e. the properties are evaluated when accessed.
+                    wrapFontAttributes[name] = computedStyles[name];
+                }
 
-                wrappedText = breakTextFn('' + text, size, {
-                    'font-weight': computedStyles.fontWeight,
-                    'font-family': computedStyles.fontFamily,
-                    'text-transform': computedStyles.textTransform,
-                    'font-size': computedStyles.fontSize,
-                    'letter-spacing': computedStyles.letterSpacing,
-                    // The `line-height` attribute in SVG is JoinJS specific.
-                    'lineHeight': attrs['line-height'],
-                }, {
+                // The `line-height` attribute in SVG is JoinJS specific.
+                // TODO: change the `lineHeight` to breakText option.
+                wrapFontAttributes.lineHeight = attrs['line-height'];
+
+                wrappedText = breakTextFn('' + text, size, wrapFontAttributes, {
                     // Provide an existing SVG Document here
                     // instead of creating a temporary one over again.
                     svgDocument: this.paper.svg,
@@ -147,7 +159,11 @@ const textAttributesNS = {
                 wrappedText = '';
             }
             textAttributesNS.text.set.call(this, wrappedText, refBBox, node, attrs);
-        }
+        },
+        // We expose the font attributes list to allow
+        // the user to take other custom font attributes into account
+        // when wrapping the text.
+        FONT_ATTRIBUTES
     },
 
     'title': {

package/src/env/index.mjs

@@ -7,6 +7,11 @@ export const env = {
         svgforeignobject: function() {
             return !!document.createElementNS &&
                 /SVGForeignObject/.test(({}).toString.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
+        },
+
+        // works for iOS browsers too
+        isSafari: function() {
+            return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
         }
     },
 

package/types/joint.d.ts

@@ -12,6 +12,16 @@ export namespace config {
 
 type NativeEvent = Event;
 
+type _DeepRequired<T> = {
+    [P in keyof T]-?: T[P] extends object ? _DeepRequired<T[P]> : T[P];
+};
+
+type _DeepPartial<T> = {
+	[P in keyof T]?: T[P] extends object ? _DeepPartial<T[P]> : T[P];
+};
+
+type DeepPartial<T> = _DeepPartial<_DeepRequired<T>>;
+
 export namespace dia {
 
     type Event = mvc.TriggeredEvent;
@@ -327,7 +337,7 @@ export namespace dia {
 
     class Cell<A extends ObjectHash = Cell.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends mvc.Model<A, S> {
 
-        constructor(attributes?: A, opt?: Cell.ConstructorOptions);
+        constructor(attributes?: DeepPartial<A>, opt?: Cell.ConstructorOptions);
 
         id: Cell.ID;
         graph: Graph;
@@ -361,7 +371,7 @@ export namespace dia {
         isEmbedded(): boolean;
 
         prop(key: Path): any;
-        prop(object: Partial<A>, opt?: Cell.Options): this;
+        prop(object: DeepPartial<A>, opt?: Cell.Options): this;
         prop(key: Path, value: any, opt?: Cell.Options): this;
 
         removeProp(path: Path, opt?: Cell.Options): this;