@joint/core 4.1.0 → 4.1.2

package/dist/vectorizer.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.1.0 (2024-11-27) - JavaScript diagramming library
+/*! JointJS v4.1.2 (2025-01-16) - JavaScript diagramming library
 
 
 This Source Code Form is subject to the terms of the Mozilla Public
@@ -5721,8 +5721,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           case 'bottom':
             dy = -(0.25 * llMaxFont) - rLineHeights;
             break;
-          default:
           case 'top':
+          default:
             dy = 0.8 * flMaxFont;
             break;
         }

package/dist/vectorizer.min.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.1.0 (2024-11-27) - JavaScript diagramming library
+/*! JointJS v4.1.2 (2025-01-16) - 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.1.0";
+var version = "4.1.2";
 
 export { version };

package/package.json

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

package/src/V/index.mjs

@@ -472,8 +472,8 @@ const V = (function() {
             case 'bottom':
                 dy = -(0.25 * llMaxFont) - rLineHeights;
                 break;
-            default:
             case 'top':
+            default:
                 dy = (0.8 * flMaxFont);
                 break;
         }

package/src/dia/ElementView.mjs

@@ -142,7 +142,7 @@ export const ElementView = CellView.extend({
      * @abstract
      */
     _initializePorts: function() {
-
+        // implemented in ports.js
     },
 
     update: function(_, renderingOnlyAttrs) {

package/src/dia/HighlighterView.mjs

@@ -42,13 +42,13 @@ export const HighlighterView = mvc.View.extend({
         // The cellView is now rendered/updated since it has a higher update priority.
         this.updateRequested = false;
         const { cellView, nodeSelector } = this;
-        if (!cellView.isMounted()) {
+        if (cellView.isMounted()) {
+            this.update(cellView, nodeSelector);
+            this.mount();
+            this.transform();
+        } else {
             this.postponedUpdate = true;
-            return 0;
         }
-        this.update(cellView, nodeSelector);
-        this.mount();
-        this.transform();
         return 0;
     },
 

package/src/dia/ToolsView.mjs

@@ -52,15 +52,7 @@ export const ToolsView = mvc.View.extend({
             const tool = tools[i];
             tool.updateVisibility();
             if (!tool.isVisible()) continue;
-            if (!this.isRendered) {
-                // There is at least one visible tool
-                this.isRendered = Array(n).fill(false);
-            }
-            if (!this.isRendered[i]) {
-                // First update executes render()
-                tool.render();
-                this.isRendered[i] = true;
-            } else if (opt.tool !== tool.cid) {
+            if (this.ensureToolRendered(tools, i) && opt.tool !== tool.cid) {
                 tool.update();
             }
         }
@@ -79,6 +71,20 @@ export const ToolsView = mvc.View.extend({
         return this;
     },
 
+    ensureToolRendered(tools, i) {
+        if (!this.isRendered) {
+            // There is at least one visible tool
+            this.isRendered = Array(tools.length).fill(false);
+        }
+        if (!this.isRendered[i]) {
+            // First update executes render()
+            tools[i].render();
+            this.isRendered[i] = true;
+            return false;
+        }
+        return true;
+    },
+
     focusTool: function(focusedTool) {
 
         var tools = this.tools;
@@ -103,7 +109,7 @@ export const ToolsView = mvc.View.extend({
                 tool.show();
                 // Check if the tool is conditionally visible too
                 if (tool.isVisible()) {
-                    tool.update();
+                    this.ensureToolRendered(tools, i) && tool.update();
                 }
             }
         }
@@ -115,7 +121,12 @@ export const ToolsView = mvc.View.extend({
     },
 
     show: function() {
-        return this.blurTool(null);
+        this.blurTool(null);
+        // If this the first time the tools are shown, make sure they are mounted
+        if (!this.isMounted()) {
+            this.mount();
+        }
+        return this;
     },
 
     onRemove: function() {

package/src/mvc/Collection.mjs

@@ -59,11 +59,15 @@ assign(Collection.prototype, Events, {
 
     // preinitialize is an empty function by default. You can override it with a function
     // or object.  preinitialize will run before any instantiation logic is run in the Collection.
-    preinitialize: function(){},
+    preinitialize: function(){
+        // No implementation.
+    },
 
     // Initialize is an empty function by default. Override it with your own
     // initialization logic.
-    initialize: function(){},
+    initialize: function(){
+        // No implementation.
+    },
 
     // The JSON representation of a Collection is an array of the
     // models' attributes.

package/src/mvc/Dom/Dom.mjs

@@ -109,8 +109,8 @@ $.fn.find = function(selector) {
     return ret;
 };
 
-$.fn.add = function(selector, context) {
-    const newElements = $(selector, context).toArray();
+$.fn.add = function(selector) {
+    const newElements = $(selector).toArray();
     const prevElements = this.toArray();
     const ret = this.pushStack([]);
     $.merge(ret, uniq(prevElements.concat(newElements)));

package/src/mvc/Dom/methods.mjs

@@ -65,7 +65,7 @@ export function html(html) {
     if (!el) return null;
     if (arguments.length === 0) return el.innerHTML;
     if (html === undefined) return this; // do nothing
-    cleanNodesData(dataPriv, el.getElementsByTagName('*'));
+    cleanNodesData(el.getElementsByTagName('*'));
     if (typeof html === 'string' || typeof html === 'number') {
         el.innerHTML = html;
     } else {
@@ -336,17 +336,19 @@ export function position() {
         // when a statically positioned element is identified
         doc = el.ownerDocument;
         offsetParent = el.offsetParent || doc.documentElement;
-        const $parentOffset = $(offsetParent);
-        const parentOffsetElementPosition = $parentOffset.css('position') || 'static';
-        while ( offsetParent && (offsetParent === doc.body || offsetParent === doc.documentElement) && parentOffsetElementPosition === 'static') {
-            offsetParent = offsetParent.parentNode;
+        const isStaticallyPositioned = (el) => {
+            const { position } = el.style;
+            return !position || position === 'static';
+        };
+        while (offsetParent && offsetParent !== doc.documentElement && isStaticallyPositioned(offsetParent)) {
+            offsetParent = offsetParent.offsetParent || doc.documentElement;
         }
-        if (offsetParent && offsetParent !== el && offsetParent.nodeType === 1) {
+        if (offsetParent && offsetParent !== el && offsetParent.nodeType === 1 && !isStaticallyPositioned(offsetParent)) {
             // Incorporate borders into its offset, since they are outside its content origin
             const offsetParentStyles = window.getComputedStyle(offsetParent);
             const borderTopWidth = parseFloat(offsetParentStyles.borderTopWidth) || 0;
             const borderLeftWidth = parseFloat(offsetParentStyles.borderLeftWidth) || 0;
-            parentOffset = $parentOffset.offset();
+            parentOffset = $(offsetParent).offset();
             parentOffset.top += borderTopWidth;
             parentOffset.left += borderLeftWidth;
         }

package/src/mvc/Listener.mjs

@@ -1,4 +1,3 @@
-import V from '../V/index.mjs';
 import { Events } from './Events.mjs';
 
 export class Listener {
@@ -9,7 +8,7 @@ export class Listener {
     listenTo(object, evt, ...args) {
         const { callbackArguments } = this;
         // signature 1 - (object, eventHashMap, context)
-        if (V.isObject(evt)) {
+        if (evt && typeof evt === 'object') {
             const [context = null] = args;
             Object.entries(evt).forEach(([eventName, cb]) => {
                 if (typeof cb !== 'function') return;

package/src/mvc/Model.mjs

@@ -59,11 +59,15 @@ assign(Model.prototype, Events, {
 
     // preinitialize is an empty function by default. You can override it with a function
     // or object.  preinitialize will run before any instantiation logic is run in the Model.
-    preinitialize: function(){},
+    preinitialize: function(){
+        // No implementation.
+    },
 
     // Initialize is an empty function by default. Override it with your own
     // initialization logic.
-    initialize: function(){},
+    initialize: function(){
+        // No implementation.
+    },
 
     // Return a copy of the model's `attributes` object.
     toJSON: function(options) {

package/src/mvc/ViewBase.mjs

@@ -52,11 +52,15 @@ assign(ViewBase.prototype, Events, {
 
     // preinitialize is an empty function by default. You can override it with a function
     // or object.  preinitialize will run before any instantiation logic is run in the View
-    preinitialize: function(){},
+    preinitialize: function(){
+        // No implementation.
+    },
 
     // Initialize is an empty function by default. Override it with your own
     // initialization logic.
-    initialize: function(){},
+    initialize: function(){
+        // No implementation.
+    },
 
     // **render** is the core function that your view should override, in order
     // to populate its element (`this.el`), with the appropriate HTML. The

package/src/util/util.mjs

@@ -79,10 +79,10 @@ export const parseDOMJSON = function(json, namespace) {
     const groupSelectors = {};
     const svgNamespace = V.namespace.svg;
 
-    const ns = namespace || svgNamespace;
+    const initialNS = namespace || svgNamespace;
     const fragment = document.createDocumentFragment();
 
-    const parseNode = function(siblingsDef, parentNode, ns) {
+    const parseNode = function(siblingsDef, parentNode, parentNS) {
         for (let i = 0; i < siblingsDef.length; i++) {
             const nodeDef = siblingsDef[i];
 
@@ -100,7 +100,7 @@ export const parseDOMJSON = function(json, namespace) {
             let node;
 
             // Namespace URI
-            if (nodeDef.hasOwnProperty('namespaceURI')) ns = nodeDef.namespaceURI;
+            const ns = (nodeDef.hasOwnProperty('namespaceURI')) ? nodeDef.namespaceURI : parentNS;
             node = document.createElementNS(ns, tagName);
             const svg = (ns === svgNamespace);
 
@@ -152,7 +152,7 @@ export const parseDOMJSON = function(json, namespace) {
             }
         }
     };
-    parseNode(json, fragment, ns);
+    parseNode(json, fragment, initialNS);
     return {
         fragment: fragment,
         selectors: selectors,
@@ -1790,4 +1790,5 @@ export {
 };
 
 export const noop = function() {
+    // Do nothing.
 };

package/src/util/utilHelpers.mjs

@@ -389,7 +389,7 @@ const initCloneByTag = (object, tag, isDeep) => {
     const Constructor = object.constructor;
     switch(tag) {
         case arrayBufferTag:
-            return cloneArrayBuffer(object, isDeep);
+            return cloneArrayBuffer(object);
         case boolTag:
         case dateTag:
             return new Constructor(+object);
@@ -1168,7 +1168,7 @@ const baseMerge = (object, source, srcIndex, customizer, stack) => {
 
             assignMergeValue(object, key, newValue);
         }
-    }, keysIn);
+    });
 };
 
 const baseMergeDeep = (object, source, key, srcIndex, mergeFunc, customizer, stack) => {
@@ -1281,7 +1281,7 @@ function last(array) {
 
 const createSet = (Set && (1 / setToArray(new Set([undefined,-0]))[1]) == 1 / 0)
     ? (values) => new Set(values)
-    : () => {};
+    : () => { /* no-op */ };
 
 function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {
     if (isObject(objValue) && isObject(srcValue)) {
@@ -2236,8 +2236,8 @@ export function debounce(func, wait, opt) {
 export const groupBy = (collection, iteratee) => {
     iteratee = getIteratee(iteratee, 2);
 
-    return reduce(collection, (result, value, key) => {
-        key = iteratee(value);
+    return reduce(collection, (result, value) => {
+        const key = iteratee(value);
         if (hasOwnProperty.call(result, key)) {
             result[key].push(value);
         } else {

package/types/joint.d.ts

@@ -22,6 +22,9 @@ type _DeepPartial<T> = {
 
 type DeepPartial<T> = _DeepPartial<_DeepRequired<T>>;
 
+// We use `DOMElement` later in the code, to avoid conflicts with the `dia.Element` type.
+type DOMElement = Element;
+
 export namespace dia {
 
     type Event = mvc.TriggeredEvent;
@@ -395,7 +398,7 @@ export namespace dia {
 
         type UnsetCallback<V> = (
             this: V,
-            node: Element,
+            node: DOMElement,
             nodeAttributes: { [name: string]: any },
             cellView: V
         ) => string | Array<string> | null | void;
@@ -404,7 +407,7 @@ export namespace dia {
             this: V,
             attributeValue: any,
             refBBox: g.Rect,
-            node: Element,
+            node: DOMElement,
             nodeAttributes: { [name: string]: any },
             cellView: V
         ) => { [key: string]: any } | string | number | void;
@@ -413,7 +416,7 @@ export namespace dia {
             this: V,
             attributeValue: any,
             refBBox: g.Rect,
-            node: Element,
+            node: DOMElement,
             nodeAttributes: { [name: string]: any },
             cellView: V
         ) => dia.Point | null | void;
@@ -422,7 +425,7 @@ export namespace dia {
             this: V,
             attributeValue: any,
             nodeBBox: g.Rect,
-            node: Element,
+            node: DOMElement,
             nodeAttributes: { [name: string]: any },
             cellView: V
         ) => dia.Point | null | void;
@@ -923,7 +926,7 @@ export namespace dia {
 
         isNodeConnection(node: SVGElement): boolean;
 
-        getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): Element;
+        getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): DOMElement;
 
         checkMouseleave(evt: dia.Event): void;
 
@@ -1044,7 +1047,7 @@ export namespace dia {
 
     class ElementView<E extends Element = Element> extends CellViewGeneric<E> {
 
-        update(element?: E, renderingOnlyAttrs?: { [key: string]: any }): void;
+        update(element?: DOMElement, renderingOnlyAttrs?: { [key: string]: any }): void;
 
         setInteractivity(value: boolean | ElementView.InteractivityOptions): void;
 
@@ -1053,9 +1056,9 @@ export namespace dia {
         getTargetParentView(evt: dia.Event): CellView | null;
 
         findPortNode(portId: string | number): SVGElement | null;
-        findPortNode(portId: string | number, selector: string): E | null;
+        findPortNode(portId: string | number, selector: string): DOMElement | null;
 
-        findPortNodes(portId: string | number, groupSelector: string): E[];
+        findPortNodes(portId: string | number, groupSelector: string): DOMElement[];
 
         protected renderMarkup(): void;
 
@@ -1204,9 +1207,9 @@ export namespace dia {
         getEndMagnet(endType: dia.LinkEnd): SVGElement | null;
 
         findLabelNode(labelIndex: string | number): SVGElement | null;
-        findLabelNode(labelIndex: string | number, selector: string): Element | null;
+        findLabelNode(labelIndex: string | number, selector: string): DOMElement | null;
 
-        findLabelNodes(labelIndex: string | number, groupSelector: string): Element[];
+        findLabelNodes(labelIndex: string | number, groupSelector: string): DOMElement[];
 
         removeRedundantLinearVertices(opt?: dia.ModelSetOptions): number;
 
@@ -2647,27 +2650,27 @@ export namespace util {
 
     export function imageToDataUri(url: string, callback: (err: Error | null, dataUri: string) => void): void;
 
-    export function getElementBBox(el: Element): dia.BBox;
+    export function getElementBBox(el: DOMElement): dia.BBox;
 
     export function sortElements(
         elements: mvc.$Element,
-        comparator: (a: Element, b: Element) => number
-    ): Element[];
+        comparator: (a: DOMElement, b: DOMElement) => number
+    ): DOMElement[];
 
-    export function setAttributesBySelector(el: Element, attrs: { [selector: string]: { [attribute: string]: any }}): void;
+    export function setAttributesBySelector(el: DOMElement, attrs: { [selector: string]: { [attribute: string]: any }}): void;
 
     export function normalizeSides(sides: dia.Sides): dia.PaddingJSON;
 
     export function template(html: string): (data: any) => string;
 
-    export function toggleFullScreen(el?: Element): void;
+    export function toggleFullScreen(el?: DOMElement): void;
 
     export function objectDifference(object: object, base: object, opt?: { maxDepth?: number }): object;
 
     interface DOMJSONDocument {
         fragment: DocumentFragment;
-        selectors: { [key: string]: Element };
-        groupSelectors: { [key: string]: Element[] };
+        selectors: { [key: string]: DOMElement };
+        groupSelectors: { [key: string]: DOMElement[] };
     }
 
     export function parseDOMJSON(json: dia.MarkupJSON): DOMJSONDocument;
@@ -2998,7 +3001,7 @@ export namespace mvc {
     type Dom = unknown;
     // The following types represent the DOM elements that can be passed to the
     // $() function.
-    type $Element<T extends Element = Element> = string | T | T[] | Dom;
+    type $Element<T extends DOMElement = DOMElement> = string | T | T[] | Dom;
     type $HTMLElement = $Element<HTMLElement>;
     type $SVGElement = $Element<SVGElement>;
 
@@ -3006,7 +3009,7 @@ export namespace mvc {
         duration?: number;
         delay?: number;
         easing?: string;
-        complete?: (this: Element) => void;
+        complete?: (this: DOMElement) => void;
     }
 
     interface Event {
@@ -3029,7 +3032,7 @@ export namespace mvc {
         screenX: number | undefined;
         screenY: number | undefined;
         /** @deprecated */
-        toElement: Element | undefined;
+        toElement: DOMElement | undefined;
         // PointerEvent
         pointerId: number | undefined;
         pointerType: string | undefined;
@@ -3394,7 +3397,7 @@ export namespace mvc {
 
     }
 
-    interface ViewBaseOptions<TModel extends (Model | undefined) = Model, TElement extends Element = HTMLElement> {
+    interface ViewBaseOptions<TModel extends (Model | undefined) = Model, TElement extends DOMElement = HTMLElement> {
         model?: TModel | undefined;
         // TODO: quickfix, this can't be fixed easy. The collection does not need to have the same model as the parent view.
         collection?: Collection<any> | undefined; // was: Collection<TModel>;
@@ -3408,7 +3411,7 @@ export namespace mvc {
 
     type ViewBaseEventListener = (event: mvc.Event) => void;
 
-    class ViewBase<TModel extends (Model | undefined) = Model, TElement extends Element = HTMLElement> extends EventsMixin implements Events {
+    class ViewBase<TModel extends (Model | undefined) = Model, TElement extends DOMElement = HTMLElement> extends EventsMixin implements Events {
         /**
          * Do not use, prefer TypeScript's extend functionality.
          */
@@ -3460,7 +3463,7 @@ export namespace mvc {
         protected _setAttributes(attributes: Record<string, any>): void;
     }
 
-    interface ViewOptions<T extends (mvc.Model | undefined), E extends Element = HTMLElement> extends mvc.ViewBaseOptions<T, E> {
+    interface ViewOptions<T extends (mvc.Model | undefined), E extends DOMElement = HTMLElement> extends mvc.ViewBaseOptions<T, E> {
         theme?: string;
         [key: string]: any;
     }
@@ -3469,7 +3472,7 @@ export namespace mvc {
         [key: string]: any;
     }
 
-    class View<T extends (mvc.Model | undefined), E extends Element = HTMLElement> extends mvc.ViewBase<T, E> {
+    class View<T extends (mvc.Model | undefined), E extends DOMElement = HTMLElement> extends mvc.ViewBase<T, E> {
 
         constructor(opt?: ViewOptions<T, E>);
 
@@ -3497,7 +3500,7 @@ export namespace mvc {
 
         children?: dia.MarkupJSON;
 
-        childNodes?: { [key: string]: Element } | null;
+        childNodes?: { [key: string]: DOMElement } | null;
 
         style?: { [key: string]: any };
 
@@ -3509,9 +3512,9 @@ export namespace mvc {
 
         undelegateDocumentEvents(): this;
 
-        delegateElementEvents(element: Element, events?: mvc.EventsHash, data?: viewEventData): this;
+        delegateElementEvents(element: DOMElement, events?: mvc.EventsHash, data?: viewEventData): this;
 
-        undelegateElementEvents(element: Element): this;
+        undelegateElementEvents(element: DOMElement): this;
 
         eventData(evt: dia.Event): viewEventData;
         eventData(evt: dia.Event, data: viewEventData): this;
@@ -3521,7 +3524,7 @@ export namespace mvc {
 
         renderChildren(children?: dia.MarkupJSON): this;
 
-        findAttribute(attributeName: string, node: Element): string | null;
+        findAttribute(attributeName: string, node: DOMElement): string | null;
 
         confirmUpdate(flag: number, opt: { [key: string]: any }): number;
 
@@ -3529,7 +3532,7 @@ export namespace mvc {
 
         isMounted(): boolean;
 
-        protected findAttributeNode(attributeName: string, node: Element): Element | null;
+        protected findAttributeNode(attributeName: string, node: DOMElement): DOMElement | null;
 
         protected init(): void;