@krainovsd/graph 0.12.0-beta.4 → 0.12.0-beta.6

package/lib/cjs/index.cjs

@@ -436,7 +436,7 @@ function pointerGetter(mouseEvent, areaRect, areaTransform) {
 }
 
 function isOverlapsNode(node, pointerX, pointerY, radius) {
-    if (node.x == undefined || node.y == undefined)
+    if (node.x == undefined || node.y == undefined || node.visible === false)
         return false;
     switch (node._shape) {
         case "circle": {
@@ -932,7 +932,10 @@ function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkH
     });
 }
 function isNearLink(mouseX, mouseY, link, threshold = 2) {
-    if (!jsHelpers.isObject(link.source) || !jsHelpers.isObject(link.target))
+    if (!jsHelpers.isObject(link.source) ||
+        !jsHelpers.isObject(link.target) ||
+        link.source.visible === false ||
+        link.target.visible === false)
         return false;
     const x1 = link.source.x;
     const y1 = link.source.y;
@@ -1493,8 +1496,12 @@ function getDrawNode(nodeRenders, textRenders) {
     return function drawNode(node) {
         if (!this.context || !node.x || !node.y)
             return;
-        if (node.visible != undefined && !node.visible)
+        if (node.visible != undefined && !node.visible) {
+            node._radius = 0;
+            node._width = 0;
+            node._height = 0;
             return;
+        }
         const nodeOptions = this.nodeOptionsCache[node.id];
         if (!nodeOptions)
             return;
@@ -2236,87 +2243,29 @@ function initCollideForce(forceUpdate) {
         else if (!this.simulation.force("collide") || forceUpdate) {
             this.simulation.force("collide", d3Force.forceCollide()
                 .radius((node, index) => {
-                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                const nodeOptions = this.nodeOptionsCache[node.id];
+                if (!nodeOptions)
+                    return 0;
                 switch (nodeOptions.shape) {
                     case "circle": {
                         if (this.forceSettings.collideRadius) {
                             return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
                         }
-                        const radius = nodeRadiusGetter({
-                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
-                            radiusInitial: nodeOptions.radius,
-                            linkCount: node.linkCount,
-                            radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
-                            radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
-                            radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
-                            radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
-                            radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
-                        });
-                        return radius + this.forceSettings.collideAdditionalRadius;
+                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
                     }
                     case "square": {
-                        const { height, width } = nodeSizeGetter({
-                            heightInitial: nodeOptions.width,
-                            widthInitial: nodeOptions.height,
-                            linkCount: node.linkCount,
-                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-                            sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
-                            sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
-                            sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
-                            sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
-                            sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
-                        });
-                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
                             this.forceSettings.collideAdditionalRadius);
                     }
                     case "text": {
-                        let { height, width } = nodeSizeGetter({
-                            heightInitial: nodeOptions.width,
-                            widthInitial: nodeOptions.height,
-                            linkCount: node.linkCount,
-                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
-                            sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
-                            sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
-                            sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
-                            sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
-                            sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
-                        });
-                        if (this.context && nodeOptions.text) {
-                            const textInfo = getTextLines({
-                                context: this.context,
-                                text: nodeOptions.text,
-                                textAlign: nodeOptions.textAlign,
-                                textColor: nodeOptions.textColor,
-                                textFont: nodeOptions.textFont,
-                                textSize: nodeOptions.textSize,
-                                maxWidth: width,
-                                textStyle: nodeOptions.textStyle,
-                                textWeight: nodeOptions.textWeight,
-                            });
-                            height =
-                                textInfo.lines.length * nodeOptions.textSize +
-                                    (textInfo.lines.length - 1) * nodeOptions.textGap +
-                                    nodeOptions.labelYPadding;
-                            width = textInfo.currentMaxSize + nodeOptions.labelXPadding;
-                        }
-                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                        return (Math.sqrt(nodeOptions.width ** 2 + nodeOptions.height ** 2) / 2 +
                             this.forceSettings.collideAdditionalRadius);
                     }
                     default: {
                         if (this.forceSettings.collideRadius) {
                             return nodeIterationExtractor(node, index, this.nodes, this, this.forceSettings.collideRadius, undefined);
                         }
-                        const radius = nodeRadiusGetter({
-                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
-                            radiusInitial: nodeOptions.radius,
-                            radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
-                            radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
-                            radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
-                            radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
-                            radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
-                            linkCount: node.linkCount,
-                        });
-                        return radius + this.forceSettings.collideAdditionalRadius;
+                        return nodeOptions.radius + this.forceSettings.collideAdditionalRadius;
                     }
                 }
             })
@@ -2435,9 +2384,9 @@ function updateNodeCache() {
             width = maxSize + nodeOptions.labelXPadding;
             this.cachedNodeLabel[node.id] = lines;
         }
-        nodeOptions.width = width;
-        nodeOptions.height = height;
-        nodeOptions.radius = radius;
+        nodeOptions.width = node.visible === false ? 0 : width;
+        nodeOptions.height = node.visible === false ? 0 : height;
+        nodeOptions.radius = node.visible === false ? 0 : radius;
         nodeOptions.labelSize = labelSize;
         /** text */
         if (nodeOptions.text) {
@@ -2618,7 +2567,38 @@ class GraphCanvas {
         this.area.width = this.dpi * this.width;
         this.area.height = this.dpi * this.height;
         this.areaRect = this.area.getBoundingClientRect();
+        this.context = this.area.getContext("2d");
+        if (!this.context)
+            throw new Error("couldn't create canvas context");
+        this.context.scale(this.dpi, this.dpi);
         this.draw();
+        // this.clearHTMLElements();
+        // initArea.call<
+        //   GraphCanvas<NodeData, LinkData>,
+        //   Parameters<typeof initArea>,
+        //   ReturnType<typeof initArea>
+        // >(this);
+        // initDnd.call<
+        //   GraphCanvas<NodeData, LinkData>,
+        //   Parameters<typeof initDnd>,
+        //   ReturnType<typeof initDnd>
+        // >(this);
+        // initZoom.call<
+        //   GraphCanvas<NodeData, LinkData>,
+        //   Parameters<typeof initZoom>,
+        //   ReturnType<typeof initZoom>
+        // >(this);
+        // initResize.call<
+        //   GraphCanvas<NodeData, LinkData>,
+        //   Parameters<typeof initResize>,
+        //   ReturnType<typeof initResize>
+        // >(this);
+        // initPointer.call<
+        //   GraphCanvas<NodeData, LinkData>,
+        //   Parameters<typeof initPointer>,
+        //   ReturnType<typeof initPointer>
+        // >(this);
+        // this.draw();
     }
     clearCache(keys) {
         if (!keys) {