@krainovsd/graph 0.13.0-beta3 → 0.14.0-beta-7.2

package/lib/esm/module/GraphCanvas/slices/draw-nodes.js

@@ -1,11 +1,16 @@
 import { isNumber } from '@krainovsd/js-helpers';
+import '../constants/force-settings.js';
+import '../constants/graph-settings.js';
+import '../constants/highlight-settings.js';
+import '../constants/link-settings.js';
+import '../constants/node-settings.js';
 import 'd3-array';
 import { isNodeVisible } from '../lib/utils/is-node-visible.js';
 import { nodeFade, nodeHighlight } from '../lib/utils/node-highlight.js';
 import { drawText } from './draw-text.js';
 
 function getDrawNode(nodeRenders, textRenders) {
-    return function drawNode(node) {
+    return function drawNode(node, index) {
         if (!this.context || !node.x || !node.y)
             return;
         if (node.visible != undefined && !node.visible) {
@@ -14,7 +19,7 @@ function getDrawNode(nodeRenders, textRenders) {
             node._height = 0;
             return;
         }
-        const nodeOptions = this.nodeOptionsCache[node.id];
+        const nodeOptions = this.nodeOptionsCache[index];
         if (!nodeOptions)
             return;
         if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
@@ -173,7 +178,7 @@ function getDrawNode(nodeRenders, textRenders) {
             this.context.lineWidth = borderWidth;
             this.context.strokeStyle = borderColor;
             this.context.fillStyle = color;
-            const labelLines = this.cachedNodeLabel[node.id];
+            const labelLines = this.cachedNodeLabel[index];
             switch (nodeOptions.shape) {
                 case "circle": {
                     if (!node.image) {
@@ -299,7 +304,7 @@ function getDrawNode(nodeRenders, textRenders) {
             });
         }
         /** Text draw */
-        const textLines = this.cachedNodeText[node.id];
+        const textLines = this.cachedNodeText[index];
         if (nodeOptions.textVisible && nodeOptions.text && textLines) {
             textRenders.push(() => {
                 if (nodeOptions.textDraw) {

package/lib/esm/module/GraphCanvas/slices/draw-nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw-nodes.js","sources":["../../../../../src/module/GraphCanvas/slices/draw-nodes.ts"],"sourcesContent":["import { isNumber } from \"@krainovsd/js-helpers\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { isNodeVisible, nodeFade, nodeHighlight } from \"../lib\";\nimport type { NodeInterface } from \"../types\";\nimport { drawText } from \"./draw-text\";\n\nexport function getDrawNode<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(nodeRenders: (() => void)[], textRenders: (() => void)[]) {\n  return function drawNode(this: GraphCanvas<NodeData, LinkData>, node: NodeInterface<NodeData>) {\n    if (!this.context || !node.x || !node.y) return;\n    if (node.visible != undefined && !node.visible) {\n      node._radius = 0;\n      node._width = 0;\n      node._height = 0;\n\n      return;\n    }\n\n    const nodeOptions = this.nodeOptionsCache[node.id];\n    if (!nodeOptions) return;\n\n    if (nodeOptions.nodeDraw && nodeOptions.textDraw) {\n      nodeRenders.push(() => {\n        if (nodeOptions.nodeDraw) {\n          nodeOptions.nodeDraw.bind(this)(node, nodeOptions);\n        }\n      });\n\n      textRenders.push(() => {\n        if (nodeOptions.textDraw) {\n          nodeOptions.textDraw.bind(this)(node, nodeOptions);\n        }\n      });\n\n      return;\n    }\n\n    let radius = nodeOptions.radius;\n    let width = nodeOptions.width;\n    let height = nodeOptions.height;\n    let alpha = nodeOptions.alpha;\n    let color = nodeOptions.color;\n    let borderColor = nodeOptions.borderColor;\n    let borderWidth = nodeOptions.borderWidth;\n    let textAlpha = nodeOptions.textAlpha;\n    let textSize = nodeOptions.textSize;\n    let textShiftX = nodeOptions.textShiftX;\n    let textShiftY = nodeOptions.textShiftY;\n    let textWeight = nodeOptions.textWeight;\n    let labelSize = nodeOptions.labelSize;\n    let labelWeight = nodeOptions.labelWeight;\n    let labelAlpha = nodeOptions.labelAlpha;\n    /** Highlight */\n    if (this.highlightedNeighbors && this.highlightedNode) {\n      /** By Node Not Highlight */\n      if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {\n        const fadingOptions = nodeFade({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelFadingMin: this.highlightSettings.highlightByNodeForLabelFadingMin,\n          highlightForNodeColorFading: this.highlightSettings.highlightByNodeForNodeColorFading,\n          highlightForNodeFadingMin: this.highlightSettings.highlightByNodeForNodeFadingMin,\n          highlightForTextFadingMin: this.highlightSettings.highlightByNodeForTextFadingMin,\n        });\n        alpha = fadingOptions.alpha;\n        color = fadingOptions.color;\n        textAlpha = fadingOptions.textAlpha;\n        labelAlpha = fadingOptions.labelAlpha;\n      } else if (\n        !this.highlightSettings.highlightByNodeOnlyRoot ||\n        (this.highlightSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)\n      ) {\n        /** By Node Highlight */\n        const highlightOptions = nodeHighlight({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelSizingAdditional:\n            this.highlightSettings.highlightByNodeForLabelSizingAdditional,\n          highlightForLabelWeightAdditional:\n            this.highlightSettings.highlightByNodeForLabelWeightAdditional,\n          highlightForNodeBorderColor: this.highlightSettings.highlightByNodeForNodeBorderColor,\n          highlightForNodeBorderSizingAdditional:\n            this.highlightSettings.highlightByNodeForNodeBorderSizingAdditional,\n          highlightForNodeColor: this.highlightSettings.highlightByNodeForNodeColor,\n          highlightForNodeSizingAdditional:\n            this.highlightSettings.highlightByNodeForNodeSizingAdditional,\n          highlightForNodeSizingAdditionalCoefficient:\n            this.highlightSettings.highlightByNodeForNodeSizingAdditionalCoefficient,\n          highlightForTextShiftXAdditional:\n            this.highlightSettings.highlightByNodeForTextShiftXAdditional,\n          highlightForTextShiftYAdditional:\n            this.highlightSettings.highlightByNodeForTextShiftYAdditional,\n          highlightForTextSizingAdditional:\n            this.highlightSettings.highlightByNodeForTextSizingAdditional,\n          highlightForTextWeightAdditional:\n            this.highlightSettings.highlightByNodeForTextWeightAdditional,\n        });\n        color = highlightOptions.color;\n        borderColor = highlightOptions.borderColor;\n        borderWidth = highlightOptions.borderWidth;\n        radius = highlightOptions.radiusInitial;\n        width = highlightOptions.widthInitial;\n        height = highlightOptions.heightInitial;\n        textSize = highlightOptions.textSize;\n        textShiftX = highlightOptions.textShiftX;\n        textShiftY = highlightOptions.textShiftY;\n        textWeight = highlightOptions.textWeight;\n        labelSize = highlightOptions.labelSize;\n        labelWeight = highlightOptions.labelWeight;\n      }\n    }\n    if (this.highlightedNeighbors && this.highlightedLink) {\n      /** By Link Not Highlight */\n      if (\n        !this.highlightedNeighbors.has(node.id) &&\n        this.highlightedLink.source !== node &&\n        this.highlightedLink.target !== node\n      ) {\n        const fadingOptions = nodeFade({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelFadingMin: this.highlightSettings.highlightByLinkForLabelFadingMin,\n          highlightForNodeColorFading: this.highlightSettings.highlightByLinkForNodeColorFading,\n          highlightForNodeFadingMin: this.highlightSettings.highlightByLinkForNodeFadingMin,\n          highlightForTextFadingMin: this.highlightSettings.highlightByLinkForTextFadingMin,\n        });\n        alpha = fadingOptions.alpha;\n        color = fadingOptions.color;\n        textAlpha = fadingOptions.textAlpha;\n        labelAlpha = fadingOptions.labelAlpha;\n      } else {\n        /** By Link Highlight */\n\n        const highlightOptions = nodeHighlight({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelSizingAdditional:\n            this.highlightSettings.highlightByLinkForLabelSizingAdditional,\n          highlightForLabelWeightAdditional:\n            this.highlightSettings.highlightByLinkForLabelWeightAdditional,\n          highlightForNodeBorderColor: this.highlightSettings.highlightByLinkForNodeBorderColor,\n          highlightForNodeBorderSizingAdditional:\n            this.highlightSettings.highlightByLinkForNodeBorderSizingAdditional,\n          highlightForNodeColor: this.highlightSettings.highlightByLinkForNodeColor,\n          highlightForNodeSizingAdditional:\n            this.highlightSettings.highlightByLinkForNodeSizingAdditional,\n          highlightForNodeSizingAdditionalCoefficient:\n            this.highlightSettings.highlightByLinkForNodeSizingAdditionalCoefficient,\n          highlightForTextShiftXAdditional:\n            this.highlightSettings.highlightByLinkForTextShiftXAdditional,\n          highlightForTextShiftYAdditional:\n            this.highlightSettings.highlightByLinkForTextShiftYAdditional,\n          highlightForTextSizingAdditional:\n            this.highlightSettings.highlightByLinkForTextSizingAdditional,\n          highlightForTextWeightAdditional:\n            this.highlightSettings.highlightByLinkForTextWeightAdditional,\n        });\n        color = highlightOptions.color;\n        borderColor = highlightOptions.borderColor;\n        borderWidth = highlightOptions.borderWidth;\n        radius = highlightOptions.radiusInitial;\n        width = highlightOptions.widthInitial;\n        height = highlightOptions.heightInitial;\n        textSize = highlightOptions.textSize;\n        textShiftX = highlightOptions.textShiftX;\n        textShiftY = highlightOptions.textShiftY;\n        textWeight = highlightOptions.textWeight;\n        labelSize = highlightOptions.labelSize;\n        labelWeight = highlightOptions.labelWeight;\n      }\n    }\n\n    /** Node parameters */\n    node._radius = radius;\n    node._borderWidth = borderWidth;\n    node._width = width;\n    node._height = height;\n    node._borderRadius =\n      isNumber(nodeOptions.borderRadius) && nodeOptions.borderRadius > 0\n        ? Math.min(nodeOptions.borderRadius, nodeOptions.width / 2, nodeOptions.height / 2)\n        : 0;\n    node._shape = nodeOptions.shape ?? \"circle\";\n\n    /** Node Visibility */\n    if (\n      !isNodeVisible({\n        height: this.height,\n        width: this.width,\n        transform: this.areaTransform,\n        node,\n      })\n    ) {\n      node._visible = false;\n\n      return;\n    }\n    node._visible = true;\n\n    /** Node draw */\n    nodeRenders.push(() => {\n      if (!this.context || !node.x || !node.y) return;\n\n      this.context.beginPath();\n      this.context.globalAlpha = alpha;\n      this.context.lineWidth = borderWidth;\n      this.context.strokeStyle = borderColor;\n      this.context.fillStyle = color;\n      const labelLines = this.cachedNodeLabel[node.id];\n\n      switch (nodeOptions.shape) {\n        case \"circle\": {\n          if (!node.image) {\n            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n            this.context.fill();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          } else {\n            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n            this.context.closePath();\n            this.context.save();\n            this.context.clip();\n\n            this.context.drawImage(\n              node.image,\n              node.x - radius,\n              node.y - radius,\n              radius * 2,\n              radius * 2,\n            );\n\n            this.context.restore();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          }\n\n          if (node.label && labelLines) {\n            this.context.globalAlpha = labelAlpha;\n            drawText({\n              context: this.context,\n              lines: labelLines,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textGap: nodeOptions.labelGap,\n              textSize: labelSize,\n              textStyle: nodeOptions.labelStyle,\n              textWeight: labelWeight,\n              x: node.x,\n              y: node.y + labelSize / 3,\n            });\n          }\n\n          break;\n        }\n        case \"square\": {\n          if (!node.image) {\n            this.context.roundRect(\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n              node._borderRadius,\n            );\n            this.context.fill();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          } else {\n            this.context.roundRect(\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n              node._borderRadius,\n            );\n            this.context.closePath();\n            this.context.save();\n            this.context.clip();\n            this.context.drawImage(\n              node.image,\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n            );\n            this.context.restore();\n\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          }\n          if (node.label && labelLines) {\n            this.context.globalAlpha = labelAlpha;\n            drawText({\n              context: this.context,\n              lines: labelLines,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textGap: nodeOptions.labelGap,\n              textSize: labelSize,\n              textStyle: nodeOptions.labelStyle,\n              textWeight: labelWeight,\n              x: node.x,\n              y: node.y + labelSize / 3,\n            });\n          }\n          break;\n        }\n        case \"text\": {\n          if (this.nodeSettings.textNodeDebug) {\n            this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);\n          }\n\n          if (nodeOptions.label && labelLines)\n            drawText({\n              lines: labelLines,\n              context: this.context,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textSize: labelSize,\n              x: node.x,\n              y: node.y + textSize / 4 - (labelLines.length - 1) * (textSize / 2),\n              textStyle: nodeOptions.labelStyle,\n              textWeight,\n              textGap: nodeOptions.labelGap,\n            });\n          this.context.fill();\n          if (borderWidth > 0) {\n            this.context.stroke();\n          }\n          break;\n        }\n        default: {\n          this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n          this.context.fill();\n          if (borderWidth > 0) {\n            this.context.stroke();\n          }\n          break;\n        }\n      }\n    });\n\n    if (nodeOptions.nodeExtraDraw) {\n      nodeRenders.push(() => {\n        nodeOptions?.nodeExtraDraw?.bind?.(this)?.(node, {\n          ...nodeOptions,\n          radius,\n          alpha,\n          color,\n          textAlpha,\n          textSize,\n          textShiftX,\n          textShiftY,\n          textWeight,\n        });\n      });\n    }\n\n    /** Text draw */\n    const textLines = this.cachedNodeText[node.id];\n    if (nodeOptions.textVisible && nodeOptions.text && textLines) {\n      textRenders.push(() => {\n        if (nodeOptions.textDraw) {\n          nodeOptions.textDraw.bind(this)(node, {\n            ...nodeOptions,\n            radius,\n            alpha,\n            color,\n            textAlpha,\n            textSize,\n            textShiftX,\n            textShiftY,\n            textWeight,\n          });\n\n          return;\n        }\n\n        if (!this.context || !node.x || !node.y || !nodeOptions.text) return;\n        this.context.beginPath();\n        this.context.globalAlpha = textAlpha;\n\n        let y = node.y + textShiftY;\n        if (nodeOptions.shape === \"circle\") {\n          y += radius;\n        }\n        if (nodeOptions.shape === \"square\" || nodeOptions.shape === \"text\") {\n          y += height / 2;\n        }\n\n        drawText({\n          lines: textLines,\n          context: this.context,\n          textAlign: nodeOptions.textAlign,\n          textColor: nodeOptions.textColor,\n          textFont: nodeOptions.textFont,\n          textSize,\n          x: node.x + textShiftX,\n          y,\n          textStyle: nodeOptions.textStyle,\n          textWeight,\n          textGap: nodeOptions.textGap,\n        });\n\n        if (nodeOptions.textExtraDraw) {\n          nodeOptions.textExtraDraw.bind(this)(node, {\n            ...nodeOptions,\n            radius,\n            alpha,\n            color,\n            textAlpha,\n            textSize,\n            textShiftX,\n            textShiftY,\n            textWeight,\n          });\n        }\n      });\n    }\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"draw-nodes.js","sources":["../../../../../src/module/GraphCanvas/slices/draw-nodes.ts"],"sourcesContent":["import { isNumber } from \"@krainovsd/js-helpers\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { isNodeVisible, nodeFade, nodeHighlight } from \"../lib\";\nimport type { NodeInterface } from \"../types\";\nimport { drawText } from \"./draw-text\";\n\nexport function getDrawNode<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(nodeRenders: (() => void)[], textRenders: (() => void)[]) {\n  return function drawNode(\n    this: GraphCanvas<NodeData, LinkData>,\n    node: NodeInterface<NodeData>,\n    index: number,\n  ) {\n    if (!this.context || !node.x || !node.y) return;\n    if (node.visible != undefined && !node.visible) {\n      node._radius = 0;\n      node._width = 0;\n      node._height = 0;\n\n      return;\n    }\n\n    const nodeOptions = this.nodeOptionsCache[index];\n    if (!nodeOptions) return;\n\n    if (nodeOptions.nodeDraw && nodeOptions.textDraw) {\n      nodeRenders.push(() => {\n        if (nodeOptions.nodeDraw) {\n          nodeOptions.nodeDraw.bind(this)(node, nodeOptions);\n        }\n      });\n\n      textRenders.push(() => {\n        if (nodeOptions.textDraw) {\n          nodeOptions.textDraw.bind(this)(node, nodeOptions);\n        }\n      });\n\n      return;\n    }\n\n    let radius = nodeOptions.radius;\n    let width = nodeOptions.width;\n    let height = nodeOptions.height;\n    let alpha = nodeOptions.alpha;\n    let color = nodeOptions.color;\n    let borderColor = nodeOptions.borderColor;\n    let borderWidth = nodeOptions.borderWidth;\n    let textAlpha = nodeOptions.textAlpha;\n    let textSize = nodeOptions.textSize;\n    let textShiftX = nodeOptions.textShiftX;\n    let textShiftY = nodeOptions.textShiftY;\n    let textWeight = nodeOptions.textWeight;\n    let labelSize = nodeOptions.labelSize;\n    let labelWeight = nodeOptions.labelWeight;\n    let labelAlpha = nodeOptions.labelAlpha;\n    /** Highlight */\n    if (this.highlightedNeighbors && this.highlightedNode) {\n      /** By Node Not Highlight */\n      if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {\n        const fadingOptions = nodeFade({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelFadingMin: this.highlightSettings.highlightByNodeForLabelFadingMin,\n          highlightForNodeColorFading: this.highlightSettings.highlightByNodeForNodeColorFading,\n          highlightForNodeFadingMin: this.highlightSettings.highlightByNodeForNodeFadingMin,\n          highlightForTextFadingMin: this.highlightSettings.highlightByNodeForTextFadingMin,\n        });\n        alpha = fadingOptions.alpha;\n        color = fadingOptions.color;\n        textAlpha = fadingOptions.textAlpha;\n        labelAlpha = fadingOptions.labelAlpha;\n      } else if (\n        !this.highlightSettings.highlightByNodeOnlyRoot ||\n        (this.highlightSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)\n      ) {\n        /** By Node Highlight */\n        const highlightOptions = nodeHighlight({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelSizingAdditional:\n            this.highlightSettings.highlightByNodeForLabelSizingAdditional,\n          highlightForLabelWeightAdditional:\n            this.highlightSettings.highlightByNodeForLabelWeightAdditional,\n          highlightForNodeBorderColor: this.highlightSettings.highlightByNodeForNodeBorderColor,\n          highlightForNodeBorderSizingAdditional:\n            this.highlightSettings.highlightByNodeForNodeBorderSizingAdditional,\n          highlightForNodeColor: this.highlightSettings.highlightByNodeForNodeColor,\n          highlightForNodeSizingAdditional:\n            this.highlightSettings.highlightByNodeForNodeSizingAdditional,\n          highlightForNodeSizingAdditionalCoefficient:\n            this.highlightSettings.highlightByNodeForNodeSizingAdditionalCoefficient,\n          highlightForTextShiftXAdditional:\n            this.highlightSettings.highlightByNodeForTextShiftXAdditional,\n          highlightForTextShiftYAdditional:\n            this.highlightSettings.highlightByNodeForTextShiftYAdditional,\n          highlightForTextSizingAdditional:\n            this.highlightSettings.highlightByNodeForTextSizingAdditional,\n          highlightForTextWeightAdditional:\n            this.highlightSettings.highlightByNodeForTextWeightAdditional,\n        });\n        color = highlightOptions.color;\n        borderColor = highlightOptions.borderColor;\n        borderWidth = highlightOptions.borderWidth;\n        radius = highlightOptions.radiusInitial;\n        width = highlightOptions.widthInitial;\n        height = highlightOptions.heightInitial;\n        textSize = highlightOptions.textSize;\n        textShiftX = highlightOptions.textShiftX;\n        textShiftY = highlightOptions.textShiftY;\n        textWeight = highlightOptions.textWeight;\n        labelSize = highlightOptions.labelSize;\n        labelWeight = highlightOptions.labelWeight;\n      }\n    }\n    if (this.highlightedNeighbors && this.highlightedLink) {\n      /** By Link Not Highlight */\n      if (\n        !this.highlightedNeighbors.has(node.id) &&\n        this.highlightedLink.source !== node &&\n        this.highlightedLink.target !== node\n      ) {\n        const fadingOptions = nodeFade({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelFadingMin: this.highlightSettings.highlightByLinkForLabelFadingMin,\n          highlightForNodeColorFading: this.highlightSettings.highlightByLinkForNodeColorFading,\n          highlightForNodeFadingMin: this.highlightSettings.highlightByLinkForNodeFadingMin,\n          highlightForTextFadingMin: this.highlightSettings.highlightByLinkForTextFadingMin,\n        });\n        alpha = fadingOptions.alpha;\n        color = fadingOptions.color;\n        textAlpha = fadingOptions.textAlpha;\n        labelAlpha = fadingOptions.labelAlpha;\n      } else {\n        /** By Link Highlight */\n\n        const highlightOptions = nodeHighlight({\n          highlightProgress: this.highlightProgress,\n          nodeOptions,\n          highlightForLabelSizingAdditional:\n            this.highlightSettings.highlightByLinkForLabelSizingAdditional,\n          highlightForLabelWeightAdditional:\n            this.highlightSettings.highlightByLinkForLabelWeightAdditional,\n          highlightForNodeBorderColor: this.highlightSettings.highlightByLinkForNodeBorderColor,\n          highlightForNodeBorderSizingAdditional:\n            this.highlightSettings.highlightByLinkForNodeBorderSizingAdditional,\n          highlightForNodeColor: this.highlightSettings.highlightByLinkForNodeColor,\n          highlightForNodeSizingAdditional:\n            this.highlightSettings.highlightByLinkForNodeSizingAdditional,\n          highlightForNodeSizingAdditionalCoefficient:\n            this.highlightSettings.highlightByLinkForNodeSizingAdditionalCoefficient,\n          highlightForTextShiftXAdditional:\n            this.highlightSettings.highlightByLinkForTextShiftXAdditional,\n          highlightForTextShiftYAdditional:\n            this.highlightSettings.highlightByLinkForTextShiftYAdditional,\n          highlightForTextSizingAdditional:\n            this.highlightSettings.highlightByLinkForTextSizingAdditional,\n          highlightForTextWeightAdditional:\n            this.highlightSettings.highlightByLinkForTextWeightAdditional,\n        });\n        color = highlightOptions.color;\n        borderColor = highlightOptions.borderColor;\n        borderWidth = highlightOptions.borderWidth;\n        radius = highlightOptions.radiusInitial;\n        width = highlightOptions.widthInitial;\n        height = highlightOptions.heightInitial;\n        textSize = highlightOptions.textSize;\n        textShiftX = highlightOptions.textShiftX;\n        textShiftY = highlightOptions.textShiftY;\n        textWeight = highlightOptions.textWeight;\n        labelSize = highlightOptions.labelSize;\n        labelWeight = highlightOptions.labelWeight;\n      }\n    }\n\n    /** Node parameters */\n    node._radius = radius;\n    node._borderWidth = borderWidth;\n    node._width = width;\n    node._height = height;\n    node._borderRadius =\n      isNumber(nodeOptions.borderRadius) && nodeOptions.borderRadius > 0\n        ? Math.min(nodeOptions.borderRadius, nodeOptions.width / 2, nodeOptions.height / 2)\n        : 0;\n    node._shape = nodeOptions.shape ?? \"circle\";\n\n    /** Node Visibility */\n    if (\n      !isNodeVisible({\n        height: this.height,\n        width: this.width,\n        transform: this.areaTransform,\n        node,\n      })\n    ) {\n      node._visible = false;\n\n      return;\n    }\n    node._visible = true;\n\n    /** Node draw */\n    nodeRenders.push(() => {\n      if (!this.context || !node.x || !node.y) return;\n\n      this.context.beginPath();\n      this.context.globalAlpha = alpha;\n      this.context.lineWidth = borderWidth;\n      this.context.strokeStyle = borderColor;\n      this.context.fillStyle = color;\n      const labelLines = this.cachedNodeLabel[index];\n\n      switch (nodeOptions.shape) {\n        case \"circle\": {\n          if (!node.image) {\n            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n            this.context.fill();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          } else {\n            this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n            this.context.closePath();\n            this.context.save();\n            this.context.clip();\n\n            this.context.drawImage(\n              node.image,\n              node.x - radius,\n              node.y - radius,\n              radius * 2,\n              radius * 2,\n            );\n\n            this.context.restore();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          }\n\n          if (node.label && labelLines) {\n            this.context.globalAlpha = labelAlpha;\n            drawText({\n              context: this.context,\n              lines: labelLines,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textGap: nodeOptions.labelGap,\n              textSize: labelSize,\n              textStyle: nodeOptions.labelStyle,\n              textWeight: labelWeight,\n              x: node.x,\n              y: node.y + labelSize / 3,\n            });\n          }\n\n          break;\n        }\n        case \"square\": {\n          if (!node.image) {\n            this.context.roundRect(\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n              node._borderRadius,\n            );\n            this.context.fill();\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          } else {\n            this.context.roundRect(\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n              node._borderRadius,\n            );\n            this.context.closePath();\n            this.context.save();\n            this.context.clip();\n            this.context.drawImage(\n              node.image,\n              node.x - width / 2,\n              node.y - height / 2,\n              width,\n              height,\n            );\n            this.context.restore();\n\n            if (borderWidth > 0) {\n              this.context.stroke();\n            }\n          }\n          if (node.label && labelLines) {\n            this.context.globalAlpha = labelAlpha;\n            drawText({\n              context: this.context,\n              lines: labelLines,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textGap: nodeOptions.labelGap,\n              textSize: labelSize,\n              textStyle: nodeOptions.labelStyle,\n              textWeight: labelWeight,\n              x: node.x,\n              y: node.y + labelSize / 3,\n            });\n          }\n          break;\n        }\n        case \"text\": {\n          if (this.nodeSettings.textNodeDebug) {\n            this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);\n          }\n\n          if (nodeOptions.label && labelLines)\n            drawText({\n              lines: labelLines,\n              context: this.context,\n              textAlign: nodeOptions.labelAlign,\n              textColor: nodeOptions.labelColor,\n              textFont: nodeOptions.labelFont,\n              textSize: labelSize,\n              x: node.x,\n              y: node.y + textSize / 4 - (labelLines.length - 1) * (textSize / 2),\n              textStyle: nodeOptions.labelStyle,\n              textWeight,\n              textGap: nodeOptions.labelGap,\n            });\n          this.context.fill();\n          if (borderWidth > 0) {\n            this.context.stroke();\n          }\n          break;\n        }\n        default: {\n          this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n          this.context.fill();\n          if (borderWidth > 0) {\n            this.context.stroke();\n          }\n          break;\n        }\n      }\n    });\n\n    if (nodeOptions.nodeExtraDraw) {\n      nodeRenders.push(() => {\n        nodeOptions?.nodeExtraDraw?.bind?.(this)?.(node, {\n          ...nodeOptions,\n          radius,\n          alpha,\n          color,\n          textAlpha,\n          textSize,\n          textShiftX,\n          textShiftY,\n          textWeight,\n        });\n      });\n    }\n\n    /** Text draw */\n    const textLines = this.cachedNodeText[index];\n    if (nodeOptions.textVisible && nodeOptions.text && textLines) {\n      textRenders.push(() => {\n        if (nodeOptions.textDraw) {\n          nodeOptions.textDraw.bind(this)(node, {\n            ...nodeOptions,\n            radius,\n            alpha,\n            color,\n            textAlpha,\n            textSize,\n            textShiftX,\n            textShiftY,\n            textWeight,\n          });\n\n          return;\n        }\n\n        if (!this.context || !node.x || !node.y || !nodeOptions.text) return;\n        this.context.beginPath();\n        this.context.globalAlpha = textAlpha;\n\n        let y = node.y + textShiftY;\n        if (nodeOptions.shape === \"circle\") {\n          y += radius;\n        }\n        if (nodeOptions.shape === \"square\" || nodeOptions.shape === \"text\") {\n          y += height / 2;\n        }\n\n        drawText({\n          lines: textLines,\n          context: this.context,\n          textAlign: nodeOptions.textAlign,\n          textColor: nodeOptions.textColor,\n          textFont: nodeOptions.textFont,\n          textSize,\n          x: node.x + textShiftX,\n          y,\n          textStyle: nodeOptions.textStyle,\n          textWeight,\n          textGap: nodeOptions.textGap,\n        });\n\n        if (nodeOptions.textExtraDraw) {\n          nodeOptions.textExtraDraw.bind(this)(node, {\n            ...nodeOptions,\n            radius,\n            alpha,\n            color,\n            textAlpha,\n            textSize,\n            textShiftX,\n            textShiftY,\n            textWeight,\n          });\n        }\n      });\n    }\n  };\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/module/GraphCanvas/slices/init-area.js

@@ -19,11 +19,11 @@ function initArea() {
         if (!this.area)
             throw new Error("couldn't create canvas");
         this.container.appendChild(this.area);
-        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.updateRect();
     }
 }
 

package/lib/esm/module/GraphCanvas/slices/init-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"init-area.js","sources":["../../../../../src/module/GraphCanvas/slices/init-area.ts"],"sourcesContent":["import { create as d3Create } from \"d3-selection\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\n\nexport function initArea<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.area || !this.context || !this.container) {\n    this.container = d3Create(\"div\")\n      .attr(\"style\", \"padding: 0 !important; width: 100%; height: 100%;\")\n      .node();\n    if (!this.container) throw new Error(\"couldn't create container\");\n    this.root.appendChild(this.container);\n\n    const { width, height } = this.root.getBoundingClientRect();\n    this.width = width;\n    this.height = height;\n\n    this.area = d3Create(\"canvas\")\n      .attr(\"width\", this.dpi * this.width)\n      .attr(\"height\", this.dpi * this.height)\n      .attr(\"style\", `width: 100%; height: 100%; border: none !important;`)\n      .node();\n\n    if (!this.area) throw new Error(\"couldn't create canvas\");\n    this.container.appendChild(this.area);\n    this.areaRect = this.area.getBoundingClientRect();\n\n    this.context = this.area.getContext(\"2d\");\n    if (!this.context) throw new Error(\"couldn't create canvas context\");\n    this.context.scale(this.dpi, this.dpi);\n  }\n}\n"],"names":["d3Create"],"mappings":";;SAGgB,QAAQ,GAAA;AAItB,IAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAClD,QAAA,IAAI,CAAC,SAAS,GAAGA,MAAQ,CAAC,KAAK;AAC5B,aAAA,IAAI,CAAC,OAAO,EAAE,mDAAmD;AACjE,aAAA,IAAI,EAAE;QACT,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;QACjE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AAErC,QAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AAEpB,QAAA,IAAI,CAAC,IAAI,GAAGA,MAAQ,CAAC,QAAQ;aAC1B,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK;aACnC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;AACrC,aAAA,IAAI,CAAC,OAAO,EAAE,CAAA,mDAAA,CAAqD;AACnE,aAAA,IAAI,EAAE;QAET,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;QAEjD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC;AACpE,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC;;AAE1C;;;;"}
+{"version":3,"file":"init-area.js","sources":["../../../../../src/module/GraphCanvas/slices/init-area.ts"],"sourcesContent":["import { create as d3Create } from \"d3-selection\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\n\nexport function initArea<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.area || !this.context || !this.container) {\n    this.container = d3Create(\"div\")\n      .attr(\"style\", \"padding: 0 !important; width: 100%; height: 100%;\")\n      .node();\n    if (!this.container) throw new Error(\"couldn't create container\");\n    this.root.appendChild(this.container);\n    const { width, height } = this.root.getBoundingClientRect();\n    this.width = width;\n    this.height = height;\n    this.area = d3Create(\"canvas\")\n      .attr(\"width\", this.dpi * this.width)\n      .attr(\"height\", this.dpi * this.height)\n      .attr(\"style\", `width: 100%; height: 100%; border: none !important;`)\n      .node();\n    if (!this.area) throw new Error(\"couldn't create canvas\");\n    this.container.appendChild(this.area);\n    this.context = this.area.getContext(\"2d\");\n    if (!this.context) throw new Error(\"couldn't create canvas context\");\n    this.context.scale(this.dpi, this.dpi);\n    this.updateRect();\n  }\n}\n"],"names":["d3Create"],"mappings":";;SAGgB,QAAQ,GAAA;AAItB,IAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAClD,QAAA,IAAI,CAAC,SAAS,GAAGA,MAAQ,CAAC,KAAK;AAC5B,aAAA,IAAI,CAAC,OAAO,EAAE,mDAAmD;AACjE,aAAA,IAAI,EAAE;QACT,IAAI,CAAC,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;QACjE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AACrC,QAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE;AAC3D,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,IAAI,GAAGA,MAAQ,CAAC,QAAQ;aAC1B,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK;aACnC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;AACrC,aAAA,IAAI,CAAC,OAAO,EAAE,CAAA,mDAAA,CAAqD;AACnE,aAAA,IAAI,EAAE;QACT,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACzC,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC;AACpE,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC;QACtC,IAAI,CAAC,UAAU,EAAE;;AAErB;;;;"}

package/lib/esm/module/GraphCanvas/slices/init-dnd.js

@@ -2,7 +2,6 @@ import { isBoolean } from '@krainovsd/js-helpers';
 import { greatest } from 'd3-array';
 import { drag } from 'd3-drag';
 import { select } from 'd3-selection';
-import { pointerGetter } from '../lib/utils/pointer-getter.js';
 
 function initDnd() {
     if (!this.area || !this.nodes)
@@ -12,10 +11,8 @@ function initDnd() {
         if (this.listeners.onDragSubject) {
             return this.listeners.onDragSubject.call(this, event);
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
         return greatest(this.nodes, (node) => {
             if (!node.x || !node.y || (isBoolean(node.drag) && !node.drag))
                 return undefined;
@@ -31,12 +28,16 @@ function initDnd() {
             if (this.simulation)
                 this.simulation.alphaTarget(0.3).restart();
         }
-        if (!this.areaRect)
-            return;
         const mouseEvent = event.sourceEvent;
-        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
-        event.subject.fx = pointerX;
-        event.subject.fy = pointerY;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);
+        if (this._translateExtent) {
+            event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
+            event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
+        }
+        else {
+            event.subject.fx = pointerX;
+            event.subject.fy = pointerY;
+        }
         this.listeners.onMoveDragFinished?.call?.(this, event);
     })
         .on("end", (event) => {
@@ -44,10 +45,16 @@ function initDnd() {
         if (!event.active && this.simulation)
             this.simulation.alphaTarget(0);
         const sourceEvent = event.sourceEvent;
-        if (sourceEvent.altKey && this.areaRect) {
-            const [pointerX, pointerY] = pointerGetter(sourceEvent, this.areaRect, this.areaTransform);
-            event.subject.fx = pointerX;
-            event.subject.fy = pointerY;
+        if (sourceEvent.altKey) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(sourceEvent);
+            if (this._translateExtent) {
+                event.subject.fx = Math.max(this._translateExtent[0][0], Math.min(this._translateExtent[1][0], pointerX));
+                event.subject.fy = Math.max(this._translateExtent[0][1], Math.min(this._translateExtent[1][1], pointerY));
+            }
+            else {
+                event.subject.fx = pointerX;
+                event.subject.fy = pointerY;
+            }
         }
         else {
             event.subject.fx = null;

package/lib/esm/module/GraphCanvas/slices/init-dnd.js.map

@@ -1 +1 @@
-{"version":3,"file":"init-dnd.js","sources":["../../../../../src/module/GraphCanvas/slices/init-dnd.ts"],"sourcesContent":["import { isBoolean } from \"@krainovsd/js-helpers\";\nimport { greatest } from \"d3-array\";\nimport { drag as d3Drag } from \"d3-drag\";\nimport { select as d3Select } from \"d3-selection\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { pointerGetter } from \"../lib\";\nimport type { DragEventInterface } from \"../types\";\n\nexport function initDnd<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.area || !this.nodes) throw new Error(\"bad init data\");\n\n  const dragHandler = d3Drag<HTMLCanvasElement, unknown>()\n    .subject((event: DragEventInterface<NodeData>) => {\n      if (this.listeners.onDragSubject) {\n        return this.listeners.onDragSubject.call(this, event);\n      }\n\n      if (!this.areaRect) return;\n\n      const mouseEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);\n\n      return greatest(this.nodes, (node) => {\n        if (!node.x || !node.y || (isBoolean(node.drag) && !node.drag)) return undefined;\n\n        return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY);\n      });\n    })\n    .on(\"start\", (event: DragEventInterface<NodeData>) => {\n      this.listeners.onStartDragFinished?.call?.(this, event);\n    })\n    .on(\"drag\", (event: DragEventInterface<NodeData>) => {\n      if (!this.isDragging) {\n        this.isDragging = true;\n        if (this.simulation) this.simulation.alphaTarget(0.3).restart();\n      }\n\n      if (!this.areaRect) return;\n      const mouseEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);\n      event.subject.fx = pointerX;\n      event.subject.fy = pointerY;\n\n      this.listeners.onMoveDragFinished?.call?.(this, event);\n    })\n    .on(\"end\", (event: DragEventInterface<NodeData>) => {\n      this.isDragging = false;\n\n      if (!event.active && this.simulation) this.simulation.alphaTarget(0);\n\n      const sourceEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      if (sourceEvent.altKey && this.areaRect) {\n        const [pointerX, pointerY] = pointerGetter(sourceEvent, this.areaRect, this.areaTransform);\n        event.subject.fx = pointerX;\n        event.subject.fy = pointerY;\n      } else {\n        event.subject.fx = null;\n        event.subject.fy = null;\n      }\n\n      this.listeners.onEndDragFinished?.call?.(this, event);\n    });\n\n  d3Select(this.area).call(dragHandler);\n}\n"],"names":["d3Drag","d3Select"],"mappings":"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"}
+{"version":3,"file":"init-dnd.js","sources":["../../../../../src/module/GraphCanvas/slices/init-dnd.ts"],"sourcesContent":["import { isBoolean } from \"@krainovsd/js-helpers\";\nimport { greatest } from \"d3-array\";\nimport { drag as d3Drag } from \"d3-drag\";\nimport { select as d3Select } from \"d3-selection\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport type { DragEventInterface } from \"../types\";\n\nexport function initDnd<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.area || !this.nodes) throw new Error(\"bad init data\");\n\n  const dragHandler = d3Drag<HTMLCanvasElement, unknown>()\n    .subject((event: DragEventInterface<NodeData>) => {\n      if (this.listeners.onDragSubject) {\n        return this.listeners.onDragSubject.call(this, event);\n      }\n\n      const mouseEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);\n\n      return greatest(this.nodes, (node) => {\n        if (!node.x || !node.y || (isBoolean(node.drag) && !node.drag)) return undefined;\n\n        return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY);\n      });\n    })\n    .on(\"start\", (event: DragEventInterface<NodeData>) => {\n      this.listeners.onStartDragFinished?.call?.(this, event);\n    })\n    .on(\"drag\", (event: DragEventInterface<NodeData>) => {\n      if (!this.isDragging) {\n        this.isDragging = true;\n        if (this.simulation) this.simulation.alphaTarget(0.3).restart();\n      }\n\n      const mouseEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      const [pointerX, pointerY] = this.getPointerAreaPosition(mouseEvent);\n\n      if (this._translateExtent) {\n        event.subject.fx = Math.max(\n          this._translateExtent[0][0],\n          Math.min(this._translateExtent[1][0], pointerX),\n        );\n        event.subject.fy = Math.max(\n          this._translateExtent[0][1],\n          Math.min(this._translateExtent[1][1], pointerY),\n        );\n      } else {\n        event.subject.fx = pointerX;\n        event.subject.fy = pointerY;\n      }\n\n      this.listeners.onMoveDragFinished?.call?.(this, event);\n    })\n    .on(\"end\", (event: DragEventInterface<NodeData>) => {\n      this.isDragging = false;\n\n      if (!event.active && this.simulation) this.simulation.alphaTarget(0);\n\n      const sourceEvent = event.sourceEvent as MouseEvent | TouchEvent;\n      if (sourceEvent.altKey) {\n        const [pointerX, pointerY] = this.getPointerAreaPosition(sourceEvent);\n        if (this._translateExtent) {\n          event.subject.fx = Math.max(\n            this._translateExtent[0][0],\n            Math.min(this._translateExtent[1][0], pointerX),\n          );\n          event.subject.fy = Math.max(\n            this._translateExtent[0][1],\n            Math.min(this._translateExtent[1][1], pointerY),\n          );\n        } else {\n          event.subject.fx = pointerX;\n          event.subject.fy = pointerY;\n        }\n      } else {\n        event.subject.fx = null;\n        event.subject.fy = null;\n      }\n\n      this.listeners.onEndDragFinished?.call?.(this, event);\n    });\n\n  d3Select(this.area).call(dragHandler);\n}\n"],"names":["d3Drag","d3Select"],"mappings":"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"}

package/lib/esm/module/GraphCanvas/slices/init-draw.js

@@ -4,57 +4,7 @@ import { getDrawLink } from './draw-links.js';
 import { getDrawNode } from './draw-nodes.js';
 
 function initDraw() {
-    let hasHighlight = false;
-    function calculateHighlight(recursive) {
-        if (hasHighlight && !recursive)
-            return;
-        /** animation up */
-        if (!this.highlightWorking && this.highlightProgress > 0) {
-            const highlightDownStep = 1 / this.highlightSettings.highlightDownFrames;
-            this.highlightProgress -= highlightDownStep;
-            if (!this.simulationWorking) {
-                hasHighlight = true;
-                return void requestAnimationFrame(() => this.draw(true));
-            }
-            if (!this.linkSettings.particles) {
-                hasHighlight = false;
-                return;
-            }
-        }
-        /** animation down */
-        if (this.highlightWorking && this.highlightProgress < 1) {
-            const highlightUpStep = 1 / this.highlightSettings.highlightUpFrames;
-            this.highlightProgress += highlightUpStep;
-            if (!this.simulationWorking) {
-                hasHighlight = true;
-                return void requestAnimationFrame(() => this.draw(true));
-            }
-            if (!this.linkSettings.particles) {
-                hasHighlight = false;
-                return;
-            }
-        }
-        /** animation active */
-        if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
-            hasHighlight = true;
-            return void requestAnimationFrame(() => this.draw(true));
-        }
-        /** animation stop */
-        if (!this.highlightWorking && this.highlightProgress <= 0) {
-            if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {
-                this.highlightedNeighbors = null;
-                this.highlightedNode = null;
-                this.highlightedLink = null;
-                this.particles = {};
-                if (!this.simulationWorking) {
-                    hasHighlight = true;
-                    return void requestAnimationFrame(() => this.draw(true));
-                }
-            }
-        }
-        hasHighlight = false;
-    }
-    function draw(recursive = false) {
+    function draw() {
         if (!this.context)
             return;
         if (this.listeners.onDraw) {
@@ -74,8 +24,20 @@ function initDraw() {
         nodeRenders.forEach((render) => render());
         textRenders.forEach((render) => render());
         this.context.restore();
+        /** selection rectangle */
+        if (this.isSelecting && this.selectionRect) {
+            const rect = this.selectionRect;
+            const screenX = Math.min(rect.x1, rect.x2) * this.areaTransform.k + this.areaTransform.x;
+            const screenY = Math.min(rect.y1, rect.y2) * this.areaTransform.k + this.areaTransform.y;
+            const screenW = Math.abs(rect.x2 - rect.x1) * this.areaTransform.k;
+            const screenH = Math.abs(rect.y2 - rect.y1) * this.areaTransform.k;
+            this.context.fillStyle = "rgba(66, 133, 244, 0.2)";
+            this.context.fillRect(screenX, screenY, screenW, screenH);
+            this.context.strokeStyle = "rgba(66, 133, 244, 0.8)";
+            this.context.lineWidth = 2;
+            this.context.strokeRect(screenX, screenY, screenW, screenH);
+        }
         this.listeners.onDrawFinished?.call?.(this);
-        calculateHighlight.bind(this)(recursive);
     }
     if (this.graphSettings.showDrawTime) {
         return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);

package/lib/esm/module/GraphCanvas/slices/init-draw.js.map

@@ -1 +1 @@
-{"version":3,"file":"init-draw.js","sources":["../../../../../src/module/GraphCanvas/slices/init-draw.ts"],"sourcesContent":["import { setDrawTime } from \"@/lib\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { getDrawLink } from \"./draw-links\";\nimport { getDrawNode } from \"./draw-nodes\";\n\nexport function initDraw<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  let hasHighlight = false;\n\n  function calculateHighlight(this: GraphCanvas<NodeData, LinkData>, recursive: boolean) {\n    if (hasHighlight && !recursive) return;\n\n    /** animation up */\n    if (!this.highlightWorking && this.highlightProgress > 0) {\n      const highlightDownStep = 1 / this.highlightSettings.highlightDownFrames;\n      this.highlightProgress -= highlightDownStep;\n\n      if (!this.simulationWorking) {\n        hasHighlight = true;\n\n        return void requestAnimationFrame(() => this.draw(true));\n      }\n\n      if (!this.linkSettings.particles) {\n        hasHighlight = false;\n\n        return;\n      }\n    }\n    /** animation down */\n    if (this.highlightWorking && this.highlightProgress < 1) {\n      const highlightUpStep = 1 / this.highlightSettings.highlightUpFrames;\n      this.highlightProgress += highlightUpStep;\n\n      if (!this.simulationWorking) {\n        hasHighlight = true;\n\n        return void requestAnimationFrame(() => this.draw(true));\n      }\n\n      if (!this.linkSettings.particles) {\n        hasHighlight = false;\n\n        return;\n      }\n    }\n    /** animation active */\n    if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {\n      hasHighlight = true;\n\n      return void requestAnimationFrame(() => this.draw(true));\n    }\n\n    /** animation stop */\n    if (!this.highlightWorking && this.highlightProgress <= 0) {\n      if (this.highlightedNeighbors || this.highlightedNode || this.highlightedLink) {\n        this.highlightedNeighbors = null;\n        this.highlightedNode = null;\n        this.highlightedLink = null;\n        this.particles = {};\n\n        if (!this.simulationWorking) {\n          hasHighlight = true;\n\n          return void requestAnimationFrame(() => this.draw(true));\n        }\n      }\n    }\n\n    hasHighlight = false;\n  }\n\n  function draw(this: GraphCanvas<NodeData, LinkData>, recursive: boolean = false) {\n    if (!this.context) return;\n\n    if (this.listeners.onDraw) {\n      this.listeners.onDraw.call(this);\n\n      return;\n    }\n\n    this.context.save();\n    this.context.clearRect(0, 0, this.width, this.height);\n    this.context.translate(this.areaTransform.x, this.areaTransform.y);\n    this.context.scale(this.areaTransform.k, this.areaTransform.k);\n\n    const textRenders: (() => void)[] = [];\n    const nodeRenders: (() => void)[] = [];\n    this.nodes.forEach(getDrawNode<NodeData, LinkData>(nodeRenders, textRenders).bind(this));\n\n    /** links */\n    this.links.forEach(getDrawLink<NodeData, LinkData>().bind(this));\n\n    /** nodes */\n\n    nodeRenders.forEach((render) => render());\n    textRenders.forEach((render) => render());\n\n    this.context.restore();\n\n    this.listeners.onDrawFinished?.call?.(this);\n\n    calculateHighlight.bind(this)(recursive);\n  }\n\n  if (this.graphSettings.showDrawTime) {\n    return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);\n  }\n\n  return draw.bind(this);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"init-draw.js","sources":["../../../../../src/module/GraphCanvas/slices/init-draw.ts"],"sourcesContent":["import { setDrawTime } from \"@/lib\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { getDrawLink } from \"./draw-links\";\nimport { getDrawNode } from \"./draw-nodes\";\n\nexport function initDraw<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  function draw(this: GraphCanvas<NodeData, LinkData>) {\n    if (!this.context) return;\n\n    if (this.listeners.onDraw) {\n      this.listeners.onDraw.call(this);\n\n      return;\n    }\n\n    this.context.save();\n    this.context.clearRect(0, 0, this.width, this.height);\n    this.context.translate(this.areaTransform.x, this.areaTransform.y);\n    this.context.scale(this.areaTransform.k, this.areaTransform.k);\n\n    const textRenders: (() => void)[] = [];\n    const nodeRenders: (() => void)[] = [];\n    this.nodes.forEach(getDrawNode<NodeData, LinkData>(nodeRenders, textRenders).bind(this));\n\n    /** links */\n    this.links.forEach(getDrawLink<NodeData, LinkData>().bind(this));\n\n    /** nodes */\n\n    nodeRenders.forEach((render) => render());\n    textRenders.forEach((render) => render());\n\n    this.context.restore();\n\n    /** selection rectangle */\n    if (this.isSelecting && this.selectionRect) {\n      const rect = this.selectionRect;\n      const screenX = Math.min(rect.x1, rect.x2) * this.areaTransform.k + this.areaTransform.x;\n      const screenY = Math.min(rect.y1, rect.y2) * this.areaTransform.k + this.areaTransform.y;\n      const screenW = Math.abs(rect.x2 - rect.x1) * this.areaTransform.k;\n      const screenH = Math.abs(rect.y2 - rect.y1) * this.areaTransform.k;\n\n      this.context.fillStyle = \"rgba(66, 133, 244, 0.2)\";\n      this.context.fillRect(screenX, screenY, screenW, screenH);\n      this.context.strokeStyle = \"rgba(66, 133, 244, 0.8)\";\n      this.context.lineWidth = 2;\n      this.context.strokeRect(screenX, screenY, screenW, screenH);\n    }\n    this.listeners.onDrawFinished?.call?.(this);\n  }\n\n  if (this.graphSettings.showDrawTime) {\n    return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);\n  }\n\n  return draw.bind(this);\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/module/GraphCanvas/slices/init-pointer.js

@@ -1,5 +1,8 @@
-import { isObject } from 'lodash';
-import { checkType } from '../../../lib/check-type.js';
+import '../constants/force-settings.js';
+import '../constants/graph-settings.js';
+import '../constants/highlight-settings.js';
+import '../constants/link-settings.js';
+import '../constants/node-settings.js';
 import '@krainovsd/js-helpers';
 import { nodeByPointerGetter } from '../lib/utils/node-by-pointer-getter.js';
 import { linkByPointerGetter } from '../lib/utils/link-by-pointer-getter.js';
@@ -8,7 +11,7 @@ function initPointer() {
     if (!this.area || !this.nodes)
         throw new Error("bad init data");
     function onHover(event) {
-        if (!this.area)
+        if (!this.area || this.isSelecting)
             return;
         let currentNode;
         let currentLink;
@@ -17,10 +20,10 @@ function initPointer() {
         let highlightNode = true;
         let highlightLink = true;
         if (checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
             if (currentNode?.highlight != undefined)
@@ -30,11 +33,11 @@ function initPointer() {
             this.area.style.cursor = "pointer";
         }
         else if (checkHighlightLink) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -50,53 +53,23 @@ function initPointer() {
         else {
             this.area.style.cursor = "default";
         }
-        if (currentNode && highlightNode && this.highlightedNode !== currentNode) {
-            this.highlightedNode = currentNode;
-            this.highlightedLink = null;
-            this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
-            this.highlightWorking = true;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
-        else if (currentLink &&
-            highlightLink &&
-            checkType(currentLink.source, isObject(currentLink.source)) &&
-            checkType(currentLink.target, isObject(currentLink.target)) &&
-            this.highlightedLink !== currentLink) {
-            this.highlightProgress = 0;
-            this.highlightedLink = currentLink;
-            this.highlightedNode = null;
-            this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);
-            this.highlightWorking = true;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
-        else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
-            this.highlightWorking = false;
-            if (!this.simulationWorking)
-                requestAnimationFrame(() => {
-                    this.draw();
-                });
-        }
+        this.animateHighlight(highlightNode ? currentNode : undefined, highlightLink ? currentLink : undefined);
         if (!this.listeners.onMove)
             return;
-        if (!currentNode && !checkHighlightNode)
+        if (!currentNode && !checkHighlightNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentNode = nodeByPointerGetter({
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
+                pointerX,
+                pointerY,
                 nodes: this.nodes,
             });
+        }
         if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -110,18 +83,18 @@ function initPointer() {
             !("button" in event) ||
             event.button !== 1)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -132,18 +105,18 @@ function initPointer() {
     function onRightClick(event) {
         if (!this.listeners.onContextMenu)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -154,18 +127,18 @@ function initPointer() {
     function onDoubleClick(event) {
         if (!this.listeners.onDoubleClick)
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });
@@ -176,18 +149,18 @@ function initPointer() {
     function onClick(event) {
         if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
             return;
+        const [pointerX, pointerY] = this.getPointerAreaPosition(event);
         const currentNode = nodeByPointerGetter({
-            areaRect: this.areaRect,
-            areaTransform: this.areaTransform,
-            mouseEvent: event,
+            pointerX,
+            pointerY,
             nodes: this.nodes,
         });
         if (!currentNode) {
+            const [pointerX, pointerY] = this.getPointerAreaPosition(event);
             const currentLink = linkByPointerGetter({
+                pointerX,
+                pointerY,
                 linkHoverExtraZone: this.highlightSettings.linkHoverExtraZone,
-                areaRect: this.areaRect,
-                areaTransform: this.areaTransform,
-                mouseEvent: event,
                 links: this.links,
                 curve: this.linkSettings.curve,
             });