@joint/core 4.0.2 → 4.0.4

package/dist/vectorizer.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.0.2 (2024-04-09) - 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.2 (2024-04-09) - 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.2";
+var version = "4.0.4";
 
 export { version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@joint/core",
   "title": "JointJS",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "JavaScript diagramming library",
   "sideEffects": false,
   "main": "./dist/joint.min.js",
@@ -37,6 +37,7 @@
     "access": "public"
   },
   "scripts": {
+    "prepublishOnly": "echo \"Publishing via NPM is not allowed!\" && exit 1",
     "prepack": "yarn run dist",
     "build": "grunt install",
     "test": "grunt test",
@@ -188,4 +189,4 @@
     "finder",
     "shortest-path-finder"
   ]
-}
+}

package/src/dia/CellView.mjs

@@ -433,15 +433,20 @@ export const CellView = View.extend({
 
     getLinkEnd: function(magnet, ...args) {
 
-        var model = this.model;
-        var id = model.id;
-        var port = this.findAttribute('port', magnet);
+        const model = this.model;
+        const id = model.id;
+        // Find a node with the `port` attribute set on it.
+        const portNode = this.findAttributeNode('port', magnet);
         // Find a unique `selector` of the element under pointer that is a magnet.
-        var selector = magnet.getAttribute('joint-selector');
+        const selector = magnet.getAttribute('joint-selector');
 
-        var end = { id: id };
+        const end = { id: id };
         if (selector != null) end.magnet = selector;
-        if (port != null) {
+        if (portNode != null) {
+            let port = portNode.getAttribute('port');
+            if (portNode.getAttribute('port-id-type') === 'number') {
+                port = parseInt(port, 10);
+            }
             end.port = port;
             if (!model.hasPort(port) && !selector) {
                 // port created via the `port` attribute (not API)

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/dia/layers/GridLayer.mjs

@@ -67,7 +67,7 @@ export const GridLayer = PaperLayer.extend({
 
         gridSettings.forEach((gridLayerSetting, index) => {
 
-            const id = 'pattern_' + index;
+            const id = this._getPatternId(index);
             const options = merge({}, gridLayerSetting);
             const { scaleFactor = 1 } = options;
             options.width = gridSize * scaleFactor || 1;
@@ -107,12 +107,16 @@ export const GridLayer = PaperLayer.extend({
         }
         gridSettings.forEach((options, index) => {
             if (isFunction(options.update)) {
-                const vPattern = patterns['pattern_' + index];
+                const vPattern = patterns[this._getPatternId(index)];
                 options.update(vPattern.node.firstChild, options, paper);
             }
         });
     },
 
+    _getPatternId(index) {
+        return `pattern_${this.options.paper.cid}_${index}`;
+    },
+
     _getGridRefs() {
         let { _gridCache: grid } = this;
         if (grid) return grid;

package/src/dia/ports.mjs

@@ -731,6 +731,13 @@ export const elementViewPortPrototype = {
             'port-group': port.group
         });
 
+        // If the port ID is a number, we need to add
+        // extra information to the port element to distinguish
+        // between ports with the same ID but different types.
+        if (util.isNumber(port.id)) {
+            portElement.attr('port-id-type', 'number');
+        }
+
         const labelMarkupDef = this._getPortLabelMarkup(port.label);
         if (Array.isArray(labelMarkupDef)) {
             // JSON Markup

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/src/linkTools/Arrowhead.mjs

@@ -48,12 +48,14 @@ const Arrowhead = ToolView.extend({
         evt.stopPropagation();
         evt.preventDefault();
         var relatedView = this.relatedView;
+        var paper = relatedView.paper;
         relatedView.model.startBatch('arrowhead-move', { ui: true, tool: this.cid });
         relatedView.startArrowheadMove(this.arrowheadType);
         this.delegateDocumentEvents();
-        relatedView.paper.undelegateEvents();
+        paper.undelegateEvents();
         this.focus();
         this.el.style.pointerEvents = 'none';
+        relatedView.notifyPointerdown(...paper.getPointerArgs(evt));
     },
     onPointerMove: function(evt) {
         var normalizedEvent = util.normalizeEvent(evt);

package/src/mvc/View.mjs

@@ -63,23 +63,25 @@ export const View = ViewBase.extend({
         return this;
     },
 
-    findAttribute: function(attributeName, node) {
-
-        var currentNode = node;
-
+    findAttributeNode: function(attributeName, node) {
+        let currentNode = node;
         while (currentNode && currentNode.nodeType === 1) {
-            var attributeValue = currentNode.getAttribute(attributeName);
             // attribute found
-            if (attributeValue) return attributeValue;
+            // (empty value does not count as attribute found)
+            if (currentNode.getAttribute(attributeName)) return currentNode;
             // do not climb up the DOM
             if (currentNode === this.el) return null;
             // try parent node
             currentNode = currentNode.parentNode;
         }
-
         return null;
     },
 
+    findAttribute: function(attributeName, node) {
+        const matchedNode = this.findAttributeNode(attributeName, node);
+        return matchedNode && matchedNode.getAttribute(attributeName);
+    },
+
     // Override the mvc ViewBase `_ensureElement()` method in order to create an
     // svg element (e.g., `<g>`) node that wraps all the nodes of the Cell view.
     // Expose class name setter as a separate method.

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;
@@ -3302,6 +3312,8 @@ export namespace mvc {
 
         isMounted(): boolean;
 
+        protected findAttributeNode(attributeName: string, node: Element): Element | null;
+
         protected init(): void;
 
         protected onRender(): void;