@krainovsd/graph 0.9.0 → 0.10.0-rc2

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-nodes.js","sources":["../../../../../src/module/GraphCanvas/slices/draw-nodes.ts"],"sourcesContent":["import { isNumber } from \"@krainovsd/js-helpers\";\nimport { colorToRgb, extractRgb, fadeRgb, rgbAnimationByProgress } from \"@/lib\";\nimport type { CachedTextNodeParametersInterface, NodeInterface } from \"@/types\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport {\n  animationByProgress,\n  isNodeVisible,\n  nodeIterationExtractor,\n  nodeOptionsGetter,\n  nodeRadiusGetter,\n  nodeSizeGetter,\n} from \"../lib\";\nimport type { GraphState, NodeOptionsInterface } from \"../types\";\nimport { drawText, getTextLines } from \"./draw-text\";\n\nexport function getDrawNode<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(nodeRenders: (() => void)[], textRenders: (() => void)[], state: GraphState<NodeData, LinkData>) {\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\n    let nodeOptions: Required<NodeOptionsInterface<NodeData, LinkData>>;\n    if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {\n      nodeOptions = this.nodeOptionsCache[node.id];\n    } else {\n      nodeOptions = nodeIterationExtractor(\n        node,\n        index,\n        this.nodes,\n        state,\n        this.nodeSettings.options ?? {},\n        nodeOptionsGetter,\n      );\n      if (this.nodeSettings.cache) {\n        this.nodeOptionsCache[node.id] = nodeOptions;\n      }\n    }\n\n    if (nodeOptions.nodeDraw && nodeOptions.textDraw) {\n      nodeRenders.push(() => {\n        nodeOptions?.nodeDraw?.(node, nodeOptions, state);\n      });\n\n      textRenders.push(() => {\n        nodeOptions?.textDraw?.(node, nodeOptions, state);\n      });\n\n      return;\n    }\n\n    let alpha = nodeOptions.alpha;\n    let color = nodeOptions.color;\n    let radiusInitial = nodeOptions.radius;\n    let widthInitial = nodeOptions.width;\n    let heightInitial = nodeOptions.height;\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 textWidth = nodeOptions.textWidth;\n    let sizeCoefficient = 1;\n    /** Node Highlight */\n    if (this.highlightedNeighbors && this.highlightedNode) {\n      /** Not highlighted */\n      if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {\n        if (this.nodeSettings.highlightByNodeNodeFading) {\n          const min =\n            this.nodeSettings.highlightByNodeNodeFadingMin < alpha\n              ? this.nodeSettings.highlightByNodeNodeFadingMin\n              : alpha;\n          alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);\n        }\n        if (this.nodeSettings.highlightByNodeTextFading) {\n          const min =\n            this.nodeSettings.highlightByNodeTextFadingMin < textAlpha\n              ? this.nodeSettings.highlightByNodeTextFadingMin\n              : textAlpha;\n          textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);\n        }\n        if (this.nodeSettings.highlightByNodeNodeColor) {\n          const colorRgb = extractRgb(colorToRgb(color));\n          if (colorRgb) {\n            const colorRgbFade = fadeRgb(\n              colorRgb,\n              this.nodeSettings.highlightByNodeNodeColorFadingMin,\n            );\n            const colorFadeAnimation = rgbAnimationByProgress(\n              colorRgb,\n              colorRgbFade,\n              this.highlightProgress,\n            );\n            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;\n          }\n        }\n      } else if (\n        !this.nodeSettings.highlightByNodeOnlyRoot ||\n        (this.nodeSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)\n      ) {\n        /** Highlighted */\n\n        if (this.nodeSettings.highlightByNodeNodeSizing && nodeOptions.shape === \"circle\") {\n          radiusInitial = animationByProgress(\n            radiusInitial,\n            this.nodeSettings.highlightByNodeNodeSizingAdditional,\n            this.highlightProgress,\n          );\n        }\n        if (\n          this.nodeSettings.highlightByNodeNodeSizing &&\n          (nodeOptions.shape === \"square\" || nodeOptions.shape === \"text\")\n        ) {\n          sizeCoefficient = animationByProgress(\n            sizeCoefficient,\n            this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient,\n            this.highlightProgress,\n          );\n\n          widthInitial *= sizeCoefficient;\n          heightInitial *= sizeCoefficient;\n        }\n        if (this.nodeSettings.highlightByNodeTextSizing) {\n          textSize = animationByProgress(\n            textSize,\n            this.nodeSettings.highlightByNodeTextSizingAdditional,\n            this.highlightProgress,\n          );\n          textShiftX = animationByProgress(\n            textShiftX,\n            this.nodeSettings.highlightByNodeTextShiftXAdditional,\n            this.highlightProgress,\n          );\n          textShiftY = animationByProgress(\n            textShiftY,\n            this.nodeSettings.highlightByNodeTextShiftYAdditional,\n            this.highlightProgress,\n          );\n          textWeight = animationByProgress(\n            textWeight,\n            this.nodeSettings.highlightByNodeTextWeightAdditional,\n            this.highlightProgress,\n          );\n          textWidth = animationByProgress(\n            textWidth,\n            this.nodeSettings.highlightByNodeTextWidthAdditional,\n            this.highlightProgress,\n          );\n        }\n      }\n    }\n    /** LinkHighlight */\n    if (this.highlightedNeighbors && this.highlightedLink) {\n      /** Not highlighted */\n      if (\n        !this.highlightedNeighbors.has(node.id) &&\n        this.highlightedLink.source !== node &&\n        this.highlightedLink.target !== node\n      ) {\n        if (this.nodeSettings.highlightByLinkNodeFading) {\n          const min =\n            this.nodeSettings.highlightByLinkNodeFadingMin < alpha\n              ? this.nodeSettings.highlightByLinkNodeFadingMin\n              : alpha;\n          alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);\n        }\n        if (this.nodeSettings.highlightByLinkTextFading) {\n          const min =\n            this.nodeSettings.highlightByLinkTextFadingMin < textAlpha\n              ? this.nodeSettings.highlightByLinkTextFadingMin\n              : textAlpha;\n          textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);\n        }\n        if (this.nodeSettings.highlightByLinkNodeColor) {\n          const colorRgb = extractRgb(colorToRgb(color));\n          if (colorRgb) {\n            const colorRgbFade = fadeRgb(\n              colorRgb,\n              this.nodeSettings.highlightByLinkNodeColorFadingMin,\n            );\n            const colorFadeAnimation = rgbAnimationByProgress(\n              colorRgb,\n              colorRgbFade,\n              this.highlightProgress,\n            );\n            color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;\n          }\n        }\n      } else {\n        /** Highlighted */\n\n        if (this.nodeSettings.highlightByLinkNodeSizing && nodeOptions.shape === \"circle\") {\n          radiusInitial = animationByProgress(\n            radiusInitial,\n            this.nodeSettings.highlightByLinkNodeSizingAdditional,\n            this.highlightProgress,\n          );\n        }\n        if (\n          this.nodeSettings.highlightByLinkNodeSizing &&\n          (nodeOptions.shape === \"square\" ||\n            nodeOptions.shape === \"text\" ||\n            nodeOptions.shape === \"icon\")\n        ) {\n          sizeCoefficient = animationByProgress(\n            sizeCoefficient,\n            this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient,\n            this.highlightProgress,\n          );\n\n          widthInitial *= sizeCoefficient;\n          heightInitial *= sizeCoefficient;\n        }\n        if (this.nodeSettings.highlightByLinkTextSizing) {\n          textSize = animationByProgress(\n            textSize,\n            this.nodeSettings.highlightByLinkTextSizingAdditional,\n            this.highlightProgress,\n          );\n          textShiftX = animationByProgress(\n            textShiftX,\n            this.nodeSettings.highlightByLinkTextShiftXAdditional,\n            this.highlightProgress,\n          );\n          textShiftY = animationByProgress(\n            textShiftY,\n            this.nodeSettings.highlightByLinkTextShiftYAdditional,\n            this.highlightProgress,\n          );\n          textWeight = animationByProgress(\n            textWeight,\n            this.nodeSettings.highlightByLinkTextWeightAdditional,\n            this.highlightProgress,\n          );\n          textWidth = animationByProgress(\n            textWidth,\n            this.nodeSettings.highlightByLinkTextWidthAdditional,\n            this.highlightProgress,\n          );\n        }\n      }\n    }\n\n    /** Flex radius */\n    const radius =\n      nodeOptions.shape === \"circle\"\n        ? nodeRadiusGetter({\n            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,\n            radiusInitial,\n            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,\n            radiusFactor: this.nodeSettings.nodeRadiusFactor,\n            linkCount: node.linkCount,\n          })\n        : radiusInitial;\n    /** Flex size */\n    let height: number = heightInitial;\n    let width: number = widthInitial;\n    if (nodeOptions.shape === \"square\") {\n      const size = nodeSizeGetter({\n        heightInitial,\n        widthInitial,\n        linkCount: node.linkCount,\n        sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,\n        sizeFactor: this.nodeSettings.nodeSizeFactor,\n        sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n      });\n      width = size.width;\n      height = size.height;\n    }\n    if (nodeOptions.shape === \"text\") {\n      width = nodeOptions.width;\n\n      const size = nodeSizeGetter({\n        heightInitial,\n        widthInitial: width,\n        linkCount: node.linkCount,\n        sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,\n        sizeFactor: this.nodeSettings.nodeSizeFactor,\n        sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n      });\n\n      textSize *= size.additionalSizeCoefficient;\n    }\n    /** Size by text in textNode */\n    if (nodeOptions.shape === \"text\" && nodeOptions.text) {\n      textWidth = width;\n      let lines: string[];\n\n      let textNodeParameters: CachedTextNodeParametersInterface;\n\n      const cachedLines = this.cachedNodeText[node.id];\n      const cachedTextNodeParameters = this.cachedTextNodeParameters[node.id];\n      if (cachedLines != undefined && cachedTextNodeParameters != undefined) {\n        lines = cachedLines;\n        textNodeParameters = cachedTextNodeParameters;\n      } else {\n        const textInfo = getTextLines({\n          context: this.context,\n          text: nodeOptions.text,\n          textAlign: nodeOptions.textAlign,\n          textColor: nodeOptions.textColor,\n          textFont: nodeOptions.textFont,\n          textSize,\n          maxWidth: textWidth,\n          textStyle: nodeOptions.textStyle,\n          textWeight,\n        });\n        textNodeParameters = [textInfo.currentMaxSize, textSize];\n        lines = textInfo.lines;\n        this.cachedNodeText[node.id] = lines;\n        this.cachedTextNodeParameters[node.id] = textNodeParameters;\n      }\n\n      const textSizeCoefficient = textSize / textNodeParameters[1];\n      const maxSize = textNodeParameters[0] * textSizeCoefficient;\n\n      height =\n        lines.length * textSize +\n        (lines.length - 1) * nodeOptions.textGap +\n        nodeOptions.textNodeYPadding;\n\n      width = maxSize + nodeOptions.textNodeXPadding;\n    }\n\n    /** Node parameters */\n    node._radius = radius;\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 = nodeOptions.borderWidth;\n      this.context.strokeStyle = nodeOptions.borderColor;\n      this.context.fillStyle = color;\n\n      switch (nodeOptions.shape) {\n        case \"circle\": {\n          this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n          break;\n        }\n        case \"square\": {\n          this.context.roundRect(\n            node.x - width / 2,\n            node.y - height / 2,\n            width,\n            height,\n            node._borderRadius,\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          const lines = this.cachedNodeText[node.id];\n          if (nodeOptions.text && lines)\n            drawText({\n              id: node.id,\n              cachedNodeText: this.cachedNodeText,\n              context: this.context,\n              text: nodeOptions.text,\n              textAlign: nodeOptions.textAlign,\n              textColor: nodeOptions.textColor,\n              textFont: nodeOptions.textFont,\n              textSize,\n              x: node.x,\n              y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),\n              maxWidth: textWidth,\n              textStyle: nodeOptions.textStyle,\n              textWeight,\n              textGap: nodeOptions.textGap,\n            });\n          break;\n        }\n        default: {\n          this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);\n          break;\n        }\n      }\n\n      this.context.fill();\n      this.context.stroke();\n    });\n\n    if (nodeOptions.nodeExtraDraw) {\n      nodeRenders.push(() => {\n        nodeOptions?.nodeExtraDraw?.(\n          node,\n          {\n            ...nodeOptions,\n            radius,\n            alpha,\n            color,\n            textAlpha,\n            textSize,\n            textShiftX,\n            textShiftY,\n            textWeight,\n            textWidth,\n          },\n          state,\n        );\n      });\n    }\n\n    /** Text draw */\n    if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== \"text\") {\n      textRenders.push(() => {\n        if (nodeOptions.textDraw) {\n          nodeOptions.textDraw(\n            node,\n            {\n              ...nodeOptions,\n              radius,\n              alpha,\n              color,\n              textAlpha,\n              textSize,\n              textShiftX,\n              textShiftY,\n              textWeight,\n              textWidth,\n            },\n            state,\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\") {\n          y += height / 2;\n        }\n\n        drawText({\n          id: node.id,\n          cachedNodeText: this.cachedNodeText,\n          context: this.context,\n          text: nodeOptions.text,\n          textAlign: nodeOptions.textAlign,\n          textColor: nodeOptions.textColor,\n          textFont: nodeOptions.textFont,\n          textSize,\n          x: node.x + textShiftX,\n          y,\n          maxWidth: textWidth,\n          textStyle: nodeOptions.textStyle,\n          textWeight,\n          textGap: nodeOptions.textGap,\n        });\n\n        if (nodeOptions.textExtraDraw) {\n          nodeOptions.textExtraDraw(\n            node,\n            {\n              ...nodeOptions,\n              radius,\n              alpha,\n              color,\n              textAlpha,\n              textSize,\n              textShiftX,\n              textShiftY,\n              textWeight,\n              textWidth,\n            },\n            state,\n          );\n        }\n      });\n    }\n  };\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/module/GraphCanvas/{lib/utils → slices}/draw-text.js

@@ -14,19 +14,43 @@ function drawText({ context, id, textAlign, textColor, textFont, textStyle, text
         context.fillText(text, x, y);
         return;
     }
+    const { lines } = getTextLines({
+        context,
+        maxWidth,
+        text,
+        textAlign,
+        textColor,
+        textFont,
+        textSize,
+        textStyle,
+        textWeight,
+    });
+    cachedNodeText[id] = lines;
+    lines.forEach((line, index) => {
+        context.fillText(line, x, y + index * textSize + index * textGap);
+    });
+}
+function getTextLines({ context, textAlign, textColor, textFont, textStyle, textWeight, textSize, text, maxWidth, }) {
+    context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;
+    context.fillStyle = textColor;
+    context.textAlign = textAlign;
     const spaceWidth = context.measureText(" ").width;
     const lines = [];
     let lineWidth = 0;
     let line = "";
+    let currentMaxSize = 0;
     for (const word of text.split(" ")) {
         const size = context.measureText(word).width;
-        lineWidth += size;
+        lineWidth += size + spaceWidth;
         if (line === "") {
             line = word;
             continue;
         }
         if (lineWidth > maxWidth) {
-            lineWidth = 0;
+            const initialSize = lineWidth - size - spaceWidth;
+            if (initialSize > currentMaxSize)
+                currentMaxSize = initialSize;
+            lineWidth = size;
             lines.push(line);
             line = word;
         }
@@ -37,11 +61,10 @@ function drawText({ context, id, textAlign, textColor, textFont, textStyle, text
     }
     if (line !== "")
         lines.push(line);
-    cachedNodeText[id] = lines;
-    lines.forEach((line, index) => {
-        context.fillText(line, x, y + index * textSize + index * textGap);
-    });
+    if (lineWidth > currentMaxSize)
+        currentMaxSize = lineWidth;
+    return { lines, currentMaxSize };
 }
 
-export { drawText };
+export { drawText, getTextLines };
 //# sourceMappingURL=draw-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-text.js","sources":["../../../../../src/module/GraphCanvas/slices/draw-text.ts"],"sourcesContent":["import type { CachedNodeTextInterface } from \"@/types\";\nimport type { TextStyleEnum } from \"../types\";\n\nexport type DrawTextOptions = {\n  id: string | number;\n  x: number;\n  y: number;\n  text: string;\n  textSize: number;\n  textStyle: TextStyleEnum;\n  textWeight: number;\n  textFont: string;\n  textColor: string;\n  textGap: number;\n  textAlign: CanvasTextAlign;\n  context: CanvasRenderingContext2D;\n  cachedNodeText: CachedNodeTextInterface;\n  maxWidth?: number;\n};\n\nconst SPACE = \" \";\n\nexport function drawText({\n  context,\n  id,\n  textAlign,\n  textColor,\n  textFont,\n  textStyle,\n  textGap,\n  textWeight,\n  textSize,\n  text,\n  x,\n  y,\n  cachedNodeText,\n  maxWidth,\n}: DrawTextOptions) {\n  context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;\n  context.fillStyle = textColor;\n  context.textAlign = textAlign;\n\n  if (cachedNodeText[id] != undefined) {\n    cachedNodeText[id].forEach((line, index) => {\n      context.fillText(line, x, y + index * textSize + index * textGap);\n    });\n\n    return;\n  }\n\n  if (maxWidth == undefined || context.measureText(text).width <= maxWidth) {\n    cachedNodeText[id] = [text];\n    context.fillText(text, x, y);\n\n    return;\n  }\n\n  const { lines } = getTextLines({\n    context,\n    maxWidth,\n    text,\n    textAlign,\n    textColor,\n    textFont,\n    textSize,\n    textStyle,\n    textWeight,\n  });\n\n  cachedNodeText[id] = lines;\n  lines.forEach((line, index) => {\n    context.fillText(line, x, y + index * textSize + index * textGap);\n  });\n}\n\nexport type GetTextLines = {\n  text: string;\n  textSize: number;\n  textStyle: TextStyleEnum;\n  textWeight: number;\n  textFont: string;\n  textColor: string;\n  textAlign: CanvasTextAlign;\n  context: CanvasRenderingContext2D;\n  maxWidth: number;\n};\nexport function getTextLines({\n  context,\n  textAlign,\n  textColor,\n  textFont,\n  textStyle,\n  textWeight,\n  textSize,\n  text,\n  maxWidth,\n}: GetTextLines) {\n  context.font = `${textStyle} normal ${textWeight} ${textSize}px ${textFont}`;\n  context.fillStyle = textColor;\n  context.textAlign = textAlign;\n\n  const spaceWidth = context.measureText(\" \").width;\n  const lines: string[] = [];\n  let lineWidth = 0;\n  let line = \"\";\n  let currentMaxSize = 0;\n\n  for (const word of text.split(\" \")) {\n    const size = context.measureText(word).width;\n    lineWidth += size + spaceWidth;\n\n    if (line === \"\") {\n      line = word;\n\n      continue;\n    }\n    if (lineWidth > maxWidth) {\n      const initialSize = lineWidth - size - spaceWidth;\n      if (initialSize > currentMaxSize) currentMaxSize = initialSize;\n\n      lineWidth = size;\n      lines.push(line);\n      line = word;\n    } else {\n      lineWidth += spaceWidth;\n      line += `${SPACE}${word}`;\n    }\n  }\n\n  if (line !== \"\") lines.push(line);\n  if (lineWidth > currentMaxSize) currentMaxSize = lineWidth;\n\n  return { lines, currentMaxSize };\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import { create } from 'd3-selection';
+
+function initArea() {
+    if (!this.area || !this.context || !this.container) {
+        this.container = create("div")
+            .attr("style", "padding: 0 !important; width: 100%; height: 100%;")
+            .node();
+        if (!this.container)
+            throw new Error("couldn't create container");
+        this.root.appendChild(this.container);
+        const { width, height } = this.root.getBoundingClientRect();
+        this.width = width;
+        this.height = height;
+        this.area = create("canvas")
+            .attr("width", this.dpi * this.width)
+            .attr("height", this.dpi * this.height)
+            .attr("style", `width: 100%; height: 100%; border: none !important;`)
+            .node();
+        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);
+    }
+}
+
+export { initArea };
+//# sourceMappingURL=init-area.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,62 @@
+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)
+        throw new Error("bad init data");
+    const dragHandler = drag()
+        .subject((event) => {
+        if (this.listeners.onDragSubject) {
+            return this.listeners.onDragSubject(event, this.state);
+        }
+        if (!this.areaRect)
+            return;
+        const mouseEvent = event.sourceEvent;
+        const [pointerX, pointerY] = pointerGetter(mouseEvent, this.areaRect, this.areaTransform);
+        return greatest(this.nodes, (node) => {
+            if (!node.x || !node.y || (isBoolean(node.drag) && !node.drag))
+                return undefined;
+            return this.graphSettings.dragPlaceCoefficient(node, pointerX, pointerY);
+        });
+    })
+        .on("start", (event) => {
+        this.listeners.onStartDragFinished?.(event, this.state);
+    })
+        .on("drag", (event) => {
+        if (!this.isDragging) {
+            this.isDragging = true;
+            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;
+        this.listeners.onMoveDragFinished?.(event, this.state);
+    })
+        .on("end", (event) => {
+        this.isDragging = false;
+        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;
+        }
+        else {
+            event.subject.fx = null;
+            event.subject.fy = null;
+        }
+        this.listeners.onEndDragFinished?.(event, this.state);
+    });
+    select(this.area).call(dragHandler);
+}
+
+export { initDnd };
+//# sourceMappingURL=init-dnd.js.map

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

@@ -0,0 +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(event, this.state);\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?.(event, this.state);\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?.(event, this.state);\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?.(event, this.state);\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

@@ -0,0 +1,84 @@
+import '@krainovsd/js-helpers';
+import 'd3-array';
+import { setDrawTime } from '../../../lib/draw-time.js';
+import { getDrawLink } from './draw-links.js';
+import { getDrawNode } from './draw-nodes.js';
+
+function initDraw() {
+    function calculateHighlight() {
+        this.highlightDrawing = true;
+        if (!this.highlightWorking && this.highlightProgress > 0) {
+            const highlightDownStep = 1 / this.graphSettings.highlightDownFrames;
+            this.highlightProgress -= highlightDownStep;
+            if (!this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
+            }
+            if (!this.linkSettings.particles)
+                return;
+        }
+        if (this.highlightWorking && this.highlightProgress < 1) {
+            const highlightUpStep = 1 / this.graphSettings.highlightUpFrames;
+            this.highlightProgress += highlightUpStep;
+            if (!this.simulationWorking) {
+                return void requestAnimationFrame(() => this.draw());
+            }
+            if (!this.linkSettings.particles)
+                return;
+        }
+        if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {
+            return void requestAnimationFrame(() => this.draw());
+        }
+        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) {
+                    return void requestAnimationFrame(() => this.draw());
+                }
+            }
+        }
+        this.highlightDrawing = false;
+    }
+    function draw() {
+        if (!this.context)
+            return;
+        const state = this.state;
+        if (this.listeners.onDraw) {
+            this.listeners.onDraw(state, (status) => {
+                this.highlightDrawing = status;
+            }, () => {
+                if (this.highlightedNeighbors)
+                    this.highlightedNeighbors = null;
+                if (this.highlightedNode)
+                    this.highlightedNode = null;
+                if (this.highlightedLink)
+                    this.highlightedLink = null;
+            });
+            return;
+        }
+        this.context.save();
+        this.context.clearRect(0, 0, this.width, this.height);
+        this.context.translate(this.areaTransform.x, this.areaTransform.y);
+        this.context.scale(this.areaTransform.k, this.areaTransform.k);
+        const textRenders = [];
+        const nodeRenders = [];
+        this.nodes.forEach(getDrawNode(nodeRenders, textRenders, state).bind(this));
+        /** links */
+        this.links.forEach(getDrawLink(state).bind(this));
+        /** nodes */
+        nodeRenders.forEach((render) => render());
+        textRenders.forEach((render) => render());
+        this.context.restore();
+        this.listeners.onDrawFinished?.(state);
+        calculateHighlight.bind(this)();
+    }
+    if (this.graphSettings.showDrawTime) {
+        return setDrawTime(draw.bind(this), this.graphSettings.showDrawTimeEveryTick);
+    }
+    return draw.bind(this);
+}
+
+export { initDraw };
+//# sourceMappingURL=init-draw.js.map

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

@@ -0,0 +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  function calculateHighlight(this: GraphCanvas<NodeData, LinkData>) {\n    this.highlightDrawing = true;\n\n    if (!this.highlightWorking && this.highlightProgress > 0) {\n      const highlightDownStep = 1 / this.graphSettings.highlightDownFrames;\n      this.highlightProgress -= highlightDownStep;\n\n      if (!this.simulationWorking) {\n        return void requestAnimationFrame(() => this.draw());\n      }\n\n      if (!this.linkSettings.particles) return;\n    }\n    if (this.highlightWorking && this.highlightProgress < 1) {\n      const highlightUpStep = 1 / this.graphSettings.highlightUpFrames;\n      this.highlightProgress += highlightUpStep;\n\n      if (!this.simulationWorking) {\n        return void requestAnimationFrame(() => this.draw());\n      }\n\n      if (!this.linkSettings.particles) return;\n    }\n\n    if (this.linkSettings.particles && this.highlightWorking && !this.simulationWorking) {\n      return void requestAnimationFrame(() => this.draw());\n    }\n\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          return void requestAnimationFrame(() => this.draw());\n        }\n      }\n    }\n\n    this.highlightDrawing = false;\n  }\n\n  function draw(this: GraphCanvas<NodeData, LinkData>) {\n    if (!this.context) return;\n    const state = this.state;\n\n    if (this.listeners.onDraw) {\n      this.listeners.onDraw(\n        state,\n        (status) => {\n          this.highlightDrawing = status;\n        },\n        () => {\n          if (this.highlightedNeighbors) this.highlightedNeighbors = null;\n          if (this.highlightedNode) this.highlightedNode = null;\n          if (this.highlightedLink) this.highlightedLink = null;\n        },\n      );\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(nodeRenders, textRenders, state).bind(this));\n\n    /** links */\n    this.links.forEach(getDrawLink(state).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?.(state);\n\n    calculateHighlight.bind(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

@@ -0,0 +1,211 @@
+import { isObject } from 'lodash';
+import { checkType } from '../../../lib/check-type.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';
+
+function initPointer() {
+    if (!this.area || !this.nodes)
+        throw new Error("bad init data");
+    function onHover(event) {
+        if (!this.area)
+            return;
+        let currentNode;
+        let currentLink;
+        const checkHighlightNode = this.nodeSettings.highlightByHoverNode && !this.isDragging;
+        const checkHighlightLink = this.linkSettings.highlightByHoverLink && !this.isDragging;
+        if (checkHighlightNode) {
+            currentNode = nodeByPointerGetter({
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                nodes: this.nodes,
+            });
+        }
+        if (currentNode) {
+            this.area.style.cursor = "pointer";
+        }
+        else if (checkHighlightLink) {
+            currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            if (currentLink) {
+                this.area.style.cursor = "pointer";
+            }
+            else {
+                this.area.style.cursor = "default";
+            }
+        }
+        else {
+            this.area.style.cursor = "default";
+        }
+        if (currentNode && this.highlightedNode !== currentNode) {
+            this.highlightedNode = currentNode;
+            this.highlightedLink = null;
+            this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);
+            this.highlightWorking = true;
+            if (!this.simulationWorking && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        else if (currentLink &&
+            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 && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {
+            this.highlightWorking = false;
+            if (!this.simulationWorking && !this.highlightDrawing)
+                requestAnimationFrame(() => {
+                    this.draw();
+                });
+        }
+        if (!this.listeners.onMove)
+            return;
+        if (!currentNode && !checkHighlightNode)
+            currentNode = nodeByPointerGetter({
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                nodes: this.nodes,
+            });
+        if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {
+            currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+        }
+        if (!currentNode)
+            return void this.listeners.onMove(event, currentNode, currentLink);
+    }
+    function onWheelClick(event) {
+        if (this.isDragging ||
+            !this.listeners.onWheelClick ||
+            !("button" in event) ||
+            event.button !== 1)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onWheelClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onWheelClick(event, currentNode, undefined);
+    }
+    function onRightClick(event) {
+        if (!this.listeners.onContextMenu)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onContextMenu(event, undefined, currentLink);
+        }
+        return void this.listeners.onContextMenu(event, currentNode, undefined);
+    }
+    function onDoubleClick(event) {
+        if (!this.listeners.onDoubleClick)
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onDoubleClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onDoubleClick(event, currentNode, undefined);
+    }
+    function onClick(event) {
+        if (this.isDragging || !this.listeners.onClick || ("button" in event && event.button !== 0))
+            return;
+        const currentNode = nodeByPointerGetter({
+            areaRect: this.areaRect,
+            areaTransform: this.areaTransform,
+            mouseEvent: event,
+            nodes: this.nodes,
+        });
+        if (!currentNode) {
+            const currentLink = linkByPointerGetter({
+                linkSettings: this.linkSettings,
+                areaRect: this.areaRect,
+                areaTransform: this.areaTransform,
+                mouseEvent: event,
+                links: this.links,
+            });
+            return void this.listeners.onClick(event, undefined, currentLink);
+        }
+        return void this.listeners.onClick(event, currentNode, undefined);
+    }
+    /** hover */
+    this.area.addEventListener("mousemove", onHover.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    this.area.addEventListener("touchmove", onHover.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** dblclick */
+    this.area.addEventListener("dblclick", onDoubleClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** wheel click */
+    this.area.addEventListener("mousedown", onWheelClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** click */
+    this.area.addEventListener("click", onClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+    /** right click */
+    this.area.addEventListener("contextmenu", onRightClick.bind(this), {
+        signal: this.eventAbortController.signal,
+    });
+}
+
+export { initPointer };
+//# sourceMappingURL=init-pointer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"init-pointer.js","sources":["../../../../../src/module/GraphCanvas/slices/init-pointer.ts"],"sourcesContent":["import { isObject } from \"lodash\";\nimport { checkType } from \"@/lib\";\nimport type { LinkInterface, NodeInterface } from \"@/types\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport { linkByPointerGetter, nodeByPointerGetter } from \"../lib\";\n\nexport function initPointer<\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  function onHover(this: GraphCanvas<NodeData, LinkData>, event: MouseEvent | TouchEvent) {\n    if (!this.area) return;\n\n    let currentNode: NodeInterface<NodeData> | undefined;\n    let currentLink: LinkInterface<NodeData, LinkData> | undefined;\n    const checkHighlightNode = this.nodeSettings.highlightByHoverNode && !this.isDragging;\n    const checkHighlightLink = this.linkSettings.highlightByHoverLink && !this.isDragging;\n\n    if (checkHighlightNode) {\n      currentNode = nodeByPointerGetter({\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        nodes: this.nodes,\n      });\n    }\n    if (currentNode) {\n      this.area.style.cursor = \"pointer\";\n    } else if (checkHighlightLink) {\n      currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n\n      if (currentLink) {\n        this.area.style.cursor = \"pointer\";\n      } else {\n        this.area.style.cursor = \"default\";\n      }\n    } else {\n      this.area.style.cursor = \"default\";\n    }\n    if (currentNode && this.highlightedNode !== currentNode) {\n      this.highlightedNode = currentNode;\n      this.highlightedLink = null;\n      this.highlightedNeighbors = new Set(this.highlightedNode?.neighbors ?? []);\n      this.highlightWorking = true;\n\n      if (!this.simulationWorking && !this.highlightDrawing)\n        requestAnimationFrame(() => {\n          this.draw();\n        });\n    } else if (\n      currentLink &&\n      checkType<NodeInterface<NodeData>>(currentLink.source, isObject(currentLink.source)) &&\n      checkType<NodeInterface<NodeData>>(currentLink.target, isObject(currentLink.target)) &&\n      this.highlightedLink !== currentLink\n    ) {\n      this.highlightProgress = 0;\n      this.highlightedLink = currentLink;\n      this.highlightedNode = null;\n      this.highlightedNeighbors = new Set([currentLink.source.id, currentLink.target.id]);\n      this.highlightWorking = true;\n\n      if (!this.simulationWorking && !this.highlightDrawing)\n        requestAnimationFrame(() => {\n          this.draw();\n        });\n    } else if (!currentNode && !currentLink && (this.highlightedNode || this.highlightedLink)) {\n      this.highlightWorking = false;\n      if (!this.simulationWorking && !this.highlightDrawing)\n        requestAnimationFrame(() => {\n          this.draw();\n        });\n    }\n\n    if (!this.listeners.onMove) return;\n\n    if (!currentNode && !checkHighlightNode)\n      currentNode = nodeByPointerGetter({\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        nodes: this.nodes,\n      });\n    if (!currentNode && (!checkHighlightNode || (!checkHighlightLink && !currentLink))) {\n      currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n    }\n\n    if (!currentNode) return void this.listeners.onMove(event, currentNode, currentLink);\n  }\n  function onWheelClick(this: GraphCanvas<NodeData, LinkData>, event: MouseEvent | TouchEvent) {\n    if (\n      this.isDragging ||\n      !this.listeners.onWheelClick ||\n      !(\"button\" in event) ||\n      event.button !== 1\n    )\n      return;\n\n    const currentNode = nodeByPointerGetter({\n      areaRect: this.areaRect,\n      areaTransform: this.areaTransform,\n      mouseEvent: event,\n      nodes: this.nodes,\n    });\n\n    if (!currentNode) {\n      const currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n\n      return void this.listeners.onWheelClick(event, undefined, currentLink);\n    }\n\n    return void this.listeners.onWheelClick(event, currentNode, undefined);\n  }\n  function onRightClick(this: GraphCanvas<NodeData, LinkData>, event: MouseEvent) {\n    if (!this.listeners.onContextMenu) return;\n\n    const currentNode = nodeByPointerGetter({\n      areaRect: this.areaRect,\n      areaTransform: this.areaTransform,\n      mouseEvent: event,\n      nodes: this.nodes,\n    });\n\n    if (!currentNode) {\n      const currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n\n      return void this.listeners.onContextMenu(event, undefined, currentLink);\n    }\n\n    return void this.listeners.onContextMenu(event, currentNode, undefined);\n  }\n  function onDoubleClick(this: GraphCanvas<NodeData, LinkData>, event: MouseEvent | TouchEvent) {\n    if (!this.listeners.onDoubleClick) return;\n\n    const currentNode = nodeByPointerGetter({\n      areaRect: this.areaRect,\n      areaTransform: this.areaTransform,\n      mouseEvent: event,\n      nodes: this.nodes,\n    });\n    if (!currentNode) {\n      const currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n\n      return void this.listeners.onDoubleClick(event, undefined, currentLink);\n    }\n\n    return void this.listeners.onDoubleClick(event, currentNode, undefined);\n  }\n  function onClick(this: GraphCanvas<NodeData, LinkData>, event: MouseEvent | TouchEvent) {\n    if (this.isDragging || !this.listeners.onClick || (\"button\" in event && event.button !== 0))\n      return;\n    const currentNode = nodeByPointerGetter({\n      areaRect: this.areaRect,\n      areaTransform: this.areaTransform,\n      mouseEvent: event,\n      nodes: this.nodes,\n    });\n    if (!currentNode) {\n      const currentLink = linkByPointerGetter({\n        linkSettings: this.linkSettings,\n        areaRect: this.areaRect,\n        areaTransform: this.areaTransform,\n        mouseEvent: event,\n        links: this.links,\n      });\n\n      return void this.listeners.onClick(event, undefined, currentLink);\n    }\n\n    return void this.listeners.onClick(event, currentNode, undefined);\n  }\n\n  /** hover */\n  this.area.addEventListener(\"mousemove\", onHover.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n  this.area.addEventListener(\"touchmove\", onHover.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n\n  /** dblclick */\n  this.area.addEventListener(\"dblclick\", onDoubleClick.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n\n  /** wheel click */\n  this.area.addEventListener(\"mousedown\", onWheelClick.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n\n  /** click */\n  this.area.addEventListener(\"click\", onClick.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n\n  /** right click */\n  this.area.addEventListener(\"contextmenu\", onRightClick.bind(this), {\n    signal: this.eventAbortController.signal,\n  });\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+function initResize() {
+    if (!this.area)
+        throw new Error("bad init data");
+    let initialResizeCall = true;
+    const abortController = this.eventAbortController;
+    const observer = new ResizeObserver(() => {
+        if (initialResizeCall) {
+            initialResizeCall = false;
+            return;
+        }
+        if (abortController.signal.aborted) {
+            observer.disconnect();
+            return;
+        }
+        requestAnimationFrame(() => {
+            this.updateSize();
+        });
+    });
+    document.addEventListener("scroll", this.updateRect.bind(this), {
+        capture: true,
+        passive: true,
+        signal: abortController.signal,
+    });
+    observer.observe(this.area);
+}
+
+export { initResize };
+//# sourceMappingURL=init-resize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"init-resize.js","sources":["../../../../../src/module/GraphCanvas/slices/init-resize.ts"],"sourcesContent":["import type { GraphCanvas } from \"../GraphCanvas\";\n\nexport function initResize<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.area) throw new Error(\"bad init data\");\n\n  let initialResizeCall = true;\n\n  const abortController = this.eventAbortController;\n  const observer = new ResizeObserver(() => {\n    if (initialResizeCall) {\n      initialResizeCall = false;\n\n      return;\n    }\n\n    if (abortController.signal.aborted) {\n      observer.disconnect();\n\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      this.updateSize();\n    });\n  });\n\n  document.addEventListener(\"scroll\", this.updateRect.bind(this), {\n    capture: true,\n    passive: true,\n    signal: abortController.signal,\n  });\n\n  observer.observe(this.area);\n}\n"],"names":[],"mappings":"SAEgB,UAAU,GAAA;IAIxB,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC;IAEhD,IAAI,iBAAiB,GAAG,IAAI;AAE5B,IAAA,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB;AACjD,IAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;QACvC,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,GAAG,KAAK;YAEzB;;AAGF,QAAA,IAAI,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE;YAClC,QAAQ,CAAC,UAAU,EAAE;YAErB;;QAGF,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,UAAU,EAAE;AACnB,SAAC,CAAC;AACJ,KAAC,CAAC;AAEF,IAAA,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC9D,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,eAAe,CAAC,MAAM;AAC/B,KAAA,CAAC;AAEF,IAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AAC7B;;;;"}