@krainovsd/graph 0.8.4 → 0.10.0-rc1

package/lib/esm/module/GraphCanvas/lib/utils/pointer-getter.js

@@ -1,6 +1,12 @@
 function pointerGetter(mouseEvent, areaRect, areaTransform) {
-    const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;
-    const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;
+    const clientX = "clientX" in mouseEvent
+        ? mouseEvent.clientX
+        : (mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX);
+    const clientY = "clientX" in mouseEvent
+        ? mouseEvent.clientY
+        : (mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY);
+    const px = (clientX - areaRect.left - areaTransform.x) / areaTransform.k;
+    const py = (clientY - areaRect.top - areaTransform.y) / areaTransform.k;
     return [px, py];
 }
 

package/lib/esm/module/GraphCanvas/lib/utils/pointer-getter.js.map

@@ -1 +1 @@
-{"version":3,"file":"pointer-getter.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/pointer-getter.ts"],"sourcesContent":["import type { ZoomTransform } from \"d3-zoom\";\n\nexport function pointerGetter(\n  mouseEvent: MouseEvent,\n  areaRect: DOMRect,\n  areaTransform: ZoomTransform,\n) {\n  const px = (mouseEvent.clientX - areaRect.left - areaTransform.x) / areaTransform.k;\n  const py = (mouseEvent.clientY - areaRect.top - areaTransform.y) / areaTransform.k;\n\n  return [px, py];\n}\n"],"names":[],"mappings":"SAEgB,aAAa,CAC3B,UAAsB,EACtB,QAAiB,EACjB,aAA4B,EAAA;AAE5B,IAAA,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AACnF,IAAA,MAAM,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AAElF,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;AACjB;;;;"}
+{"version":3,"file":"pointer-getter.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/pointer-getter.ts"],"sourcesContent":["import type { ZoomTransform } from \"d3-zoom\";\n\nexport function pointerGetter(\n  mouseEvent: MouseEvent | TouchEvent,\n  areaRect: DOMRect,\n  areaTransform: ZoomTransform,\n) {\n  const clientX =\n    \"clientX\" in mouseEvent\n      ? mouseEvent.clientX\n      : (mouseEvent.touches[0]?.clientX ?? mouseEvent.changedTouches[0]?.clientX);\n  const clientY =\n    \"clientX\" in mouseEvent\n      ? mouseEvent.clientY\n      : (mouseEvent.touches[0]?.clientY ?? mouseEvent.changedTouches[0]?.clientY);\n\n  const px = (clientX - areaRect.left - areaTransform.x) / areaTransform.k;\n  const py = (clientY - areaRect.top - areaTransform.y) / areaTransform.k;\n\n  return [px, py];\n}\n"],"names":[],"mappings":"SAEgB,aAAa,CAC3B,UAAmC,EACnC,QAAiB,EACjB,aAA4B,EAAA;AAE5B,IAAA,MAAM,OAAO,GACX,SAAS,IAAI;UACT,UAAU,CAAC;WACV,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;AAC/E,IAAA,MAAM,OAAO,GACX,SAAS,IAAI;UACT,UAAU,CAAC;WACV,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,IAAI,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC;AAE/E,IAAA,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AACxE,IAAA,MAAM,EAAE,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,GAAG,GAAG,aAAa,CAAC,CAAC,IAAI,aAAa,CAAC,CAAC;AAEvE,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,CAAC;AACjB;;;;"}

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

@@ -0,0 +1,207 @@
+import { linkOptionsGetter } from '../lib/settings/link-settings-getter.js';
+import '@krainovsd/js-helpers';
+import { linkIterationExtractor } from '../lib/utils/link-iteration-extractor.js';
+import 'd3-array';
+import { calculateLinkPositionByNode } from '../lib/utils/calculate-link-position-by-node.js';
+import { animationByProgress } from '../lib/utils/animation-by-progress.js';
+import { getParticlePosition } from '../lib/utils/get-particle-position.js';
+
+function getDrawLink(state) {
+    return function drawLink(link, index) {
+        if (!this.context ||
+            typeof link.source !== "object" ||
+            typeof link.target !== "object" ||
+            !link.source.x ||
+            !link.source.y ||
+            !link.target.x ||
+            !link.target.y)
+            return;
+        if (!link.source._visible && !link.target._visible)
+            return;
+        const id = `${link.target.id}${link.source.id}`;
+        let linkOptions;
+        if (this.linkSettings.cache && this.linkOptionsCache[id]) {
+            linkOptions = this.linkOptionsCache[id];
+        }
+        else {
+            linkOptions = linkIterationExtractor(link, index, this.links, state, this.linkSettings.options ?? {}, linkOptionsGetter);
+            if (this.linkSettings.cache) {
+                this.linkOptionsCache[id] = linkOptions;
+            }
+        }
+        if (linkOptions.drawLink) {
+            linkOptions.drawLink(link, linkOptions, state);
+            return;
+        }
+        let alpha = linkOptions.alpha;
+        let arrowAlpha = this.linkSettings.arrowByHighlight ? 0 : linkOptions.arrowAlpha;
+        /** NODE HIGHLIGHT */
+        if (this.highlightedNeighbors && this.highlightedNode) {
+            /** Not highlighted */
+            if (this.highlightedNode.id != link.source.id && this.highlightedNode.id != link.target.id) {
+                if (this.linkSettings.highlightByNodeLinkFading) {
+                    const min = this.linkSettings.highlightByNodeLinkFadingMin < alpha
+                        ? this.linkSettings.highlightByNodeLinkFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.linkSettings.arrow &&
+                    this.linkSettings.highlightByNodeArrowFading &&
+                    !this.linkSettings.arrowByHighlight) {
+                    const min = this.linkSettings.highlightByNodeArrowFadingMin < arrowAlpha
+                        ? this.linkSettings.highlightByNodeArrowFadingMin
+                        : arrowAlpha;
+                    arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                }
+            }
+            else {
+                // eslint-disable-next-line no-lonely-if
+                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
+                    /** Highlighted */
+                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                }
+            }
+        }
+        /** LINK HIGHLIGHT */
+        if (this.highlightedNeighbors && this.highlightedLink) {
+            /** Not highlighted */
+            if (this.highlightedLink !== link) {
+                if (this.linkSettings.highlightByLinkLinkFading) {
+                    const min = this.linkSettings.highlightByLinkLinkFadingMin < alpha
+                        ? this.linkSettings.highlightByLinkLinkFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.linkSettings.arrow &&
+                    this.linkSettings.highlightByLinkArrowFading &&
+                    !this.linkSettings.arrowByHighlight) {
+                    const min = this.linkSettings.highlightByLinkArrowFadingMin < arrowAlpha
+                        ? this.linkSettings.highlightByLinkArrowFadingMin
+                        : arrowAlpha;
+                    arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);
+                }
+            }
+            else {
+                // eslint-disable-next-line no-lonely-if
+                if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {
+                    /** Highlighted */
+                    arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);
+                }
+            }
+        }
+        /** Link */
+        this.context.beginPath();
+        this.context.globalAlpha = alpha;
+        this.context.strokeStyle = linkOptions.color;
+        this.context.lineWidth = linkOptions.width;
+        let xStart = link.source.x;
+        let yStart = link.source.y;
+        let xEnd = link.target.x;
+        let yEnd = link.target.y;
+        let linkDistance = 0;
+        if (this.linkSettings.pretty || this.linkSettings.particleFlexSpeed) {
+            const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
+            const position = calculateLinkPositionByNode(link, isHasArrow ? linkOptions.arrowSize : 0);
+            if (position) {
+                xStart = position.x1;
+                xEnd = position.x2;
+                yStart = position.y1;
+                yEnd = position.y2;
+                linkDistance = position.distance;
+            }
+        }
+        this.context.moveTo(xStart, yStart);
+        this.context.lineTo(xEnd, yEnd);
+        this.context.stroke();
+        /** Particle */
+        if (this.linkSettings.particles &&
+            ((this.highlightedNode &&
+                (this.highlightedNode.id === link.source.id ||
+                    this.highlightedNode.id === link.target.id)) ||
+                (this.highlightedLink && this.highlightedLink === link))) {
+            const particleSteps = this.linkSettings.particleFlexSpeed
+                ? linkDistance <= 0
+                    ? 0
+                    : linkDistance * this.linkSettings.particleFlexSpeedCoefficient
+                : linkOptions.particleSteps;
+            const particleCount = linkOptions.particleCount;
+            if (!this.particles[id]) {
+                const sourceId = link.source.id;
+                const targetId = link.target.id;
+                const particles = [];
+                let prevParticle;
+                for (let i = 0; i < particleCount; i++) {
+                    const particle = {
+                        step: 0,
+                        sourceId,
+                        targetId,
+                        prev: prevParticle,
+                        next: undefined,
+                        index: i,
+                    };
+                    if (prevParticle)
+                        prevParticle.next = particle;
+                    particles.push(particle);
+                    prevParticle = particle;
+                }
+                if (particles.length >= 2) {
+                    particles[0].prev = particles[particles.length - 1];
+                    particles[particles.length - 1].next = particles[0];
+                }
+                this.particles[id] = particles;
+            }
+            if (particleSteps !== 0) {
+                this.particles[id].forEach((particle) => {
+                    if (!this.context)
+                        return;
+                    const distance = particleSteps / particleCount;
+                    getParticlePosition({
+                        distance,
+                        particle,
+                        totalSteps: particleSteps,
+                        xEnd,
+                        xStart,
+                        yEnd,
+                        yStart,
+                    });
+                    if (particle.x != undefined && particle.y != undefined) {
+                        this.context.beginPath();
+                        this.context.strokeStyle = linkOptions.particleBorderColor;
+                        this.context.lineWidth = linkOptions.particleBorderWidth;
+                        this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);
+                        this.context.fillStyle = linkOptions.particleColor;
+                        this.context.fill();
+                        this.context.stroke();
+                    }
+                });
+            }
+        }
+        /** Arrow */
+        if (this.linkSettings.arrow && arrowAlpha > 0) {
+            const { x1: xStart, x2: xEnd, y1: yStart, y2: yEnd, } = calculateLinkPositionByNode(link) ?? {
+                x1: 0,
+                x2: 0,
+                y1: 0,
+                y2: 0,
+            };
+            this.context.beginPath();
+            this.context.globalAlpha = arrowAlpha;
+            this.context.strokeStyle = linkOptions.arrowBorderColor;
+            this.context.lineWidth = linkOptions.arrowBorderWidth;
+            this.context.fillStyle = linkOptions.arrowColor;
+            const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
+            this.context.moveTo(xEnd, yEnd);
+            this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6));
+            this.context.lineTo(xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6), yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6));
+            this.context.closePath();
+            this.context.fill();
+            this.context.stroke();
+        }
+        if (linkOptions.drawExtraLink) {
+            linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);
+        }
+    };
+}
+
+export { getDrawLink };
+//# sourceMappingURL=draw-links.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draw-links.js","sources":["../../../../../src/module/GraphCanvas/slices/draw-links.ts"],"sourcesContent":["import type { LinkInterface } from \"@/types\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport {\n  animationByProgress,\n  calculateLinkPositionByNode,\n  getParticlePosition,\n  linkIterationExtractor,\n  linkOptionsGetter,\n} from \"../lib\";\nimport type { GraphParticle, GraphState, LinkOptionsInterface } from \"../types\";\n\nexport function getDrawLink<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(state: GraphState<NodeData, LinkData>) {\n  return function drawLink(\n    this: GraphCanvas<NodeData, LinkData>,\n    link: LinkInterface<NodeData, LinkData>,\n    index: number,\n  ) {\n    if (\n      !this.context ||\n      typeof link.source !== \"object\" ||\n      typeof link.target !== \"object\" ||\n      !link.source.x ||\n      !link.source.y ||\n      !link.target.x ||\n      !link.target.y\n    )\n      return;\n\n    if (!link.source._visible && !link.target._visible) return;\n\n    const id = `${link.target.id}${link.source.id}`;\n    let linkOptions: Required<LinkOptionsInterface<NodeData, LinkData>>;\n    if (this.linkSettings.cache && this.linkOptionsCache[id]) {\n      linkOptions = this.linkOptionsCache[id];\n    } else {\n      linkOptions = linkIterationExtractor(\n        link,\n        index,\n        this.links,\n        state,\n        this.linkSettings.options ?? {},\n        linkOptionsGetter,\n      );\n      if (this.linkSettings.cache) {\n        this.linkOptionsCache[id] = linkOptions;\n      }\n    }\n\n    if (linkOptions.drawLink) {\n      linkOptions.drawLink(link, linkOptions, state);\n\n      return;\n    }\n\n    let alpha = linkOptions.alpha;\n    let arrowAlpha = this.linkSettings.arrowByHighlight ? 0 : linkOptions.arrowAlpha;\n\n    /** NODE HIGHLIGHT */\n    if (this.highlightedNeighbors && this.highlightedNode) {\n      /** Not highlighted */\n      if (this.highlightedNode.id != link.source.id && this.highlightedNode.id != link.target.id) {\n        if (this.linkSettings.highlightByNodeLinkFading) {\n          const min =\n            this.linkSettings.highlightByNodeLinkFadingMin < alpha\n              ? this.linkSettings.highlightByNodeLinkFadingMin\n              : alpha;\n          alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);\n        }\n        if (\n          this.linkSettings.arrow &&\n          this.linkSettings.highlightByNodeArrowFading &&\n          !this.linkSettings.arrowByHighlight\n        ) {\n          const min =\n            this.linkSettings.highlightByNodeArrowFadingMin < arrowAlpha\n              ? this.linkSettings.highlightByNodeArrowFadingMin\n              : arrowAlpha;\n          arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);\n        }\n      } else {\n        // eslint-disable-next-line no-lonely-if\n        if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {\n          /** Highlighted */\n          arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);\n        }\n      }\n    }\n    /** LINK HIGHLIGHT */\n    if (this.highlightedNeighbors && this.highlightedLink) {\n      /** Not highlighted */\n      if (this.highlightedLink !== link) {\n        if (this.linkSettings.highlightByLinkLinkFading) {\n          const min =\n            this.linkSettings.highlightByLinkLinkFadingMin < alpha\n              ? this.linkSettings.highlightByLinkLinkFadingMin\n              : alpha;\n          alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);\n        }\n        if (\n          this.linkSettings.arrow &&\n          this.linkSettings.highlightByLinkArrowFading &&\n          !this.linkSettings.arrowByHighlight\n        ) {\n          const min =\n            this.linkSettings.highlightByLinkArrowFadingMin < arrowAlpha\n              ? this.linkSettings.highlightByLinkArrowFadingMin\n              : arrowAlpha;\n          arrowAlpha = animationByProgress(min, arrowAlpha - min, 1 - this.highlightProgress);\n        }\n      } else {\n        // eslint-disable-next-line no-lonely-if\n        if (this.linkSettings.arrow && this.linkSettings.arrowByHighlight) {\n          /** Highlighted */\n          arrowAlpha = animationByProgress(0, linkOptions.arrowAlpha, this.highlightProgress);\n        }\n      }\n    }\n\n    /** Link */\n    this.context.beginPath();\n\n    this.context.globalAlpha = alpha;\n    this.context.strokeStyle = linkOptions.color;\n    this.context.lineWidth = linkOptions.width;\n\n    let xStart = link.source.x;\n    let yStart = link.source.y;\n    let xEnd = link.target.x;\n    let yEnd = link.target.y;\n    let linkDistance = 0;\n    if (this.linkSettings.pretty || this.linkSettings.particleFlexSpeed) {\n      const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;\n      const position = calculateLinkPositionByNode(link, isHasArrow ? linkOptions.arrowSize : 0);\n\n      if (position) {\n        xStart = position.x1;\n        xEnd = position.x2;\n        yStart = position.y1;\n        yEnd = position.y2;\n        linkDistance = position.distance;\n      }\n    }\n    this.context.moveTo(xStart, yStart);\n    this.context.lineTo(xEnd, yEnd);\n    this.context.stroke();\n\n    /** Particle */\n    if (\n      this.linkSettings.particles &&\n      ((this.highlightedNode &&\n        (this.highlightedNode.id === link.source.id ||\n          this.highlightedNode.id === link.target.id)) ||\n        (this.highlightedLink && this.highlightedLink === link))\n    ) {\n      const particleSteps = this.linkSettings.particleFlexSpeed\n        ? linkDistance <= 0\n          ? 0\n          : linkDistance * this.linkSettings.particleFlexSpeedCoefficient\n        : linkOptions.particleSteps;\n      const particleCount = linkOptions.particleCount;\n\n      if (!this.particles[id]) {\n        const sourceId = link.source.id;\n        const targetId = link.target.id;\n\n        const particles: GraphParticle[] = [];\n        let prevParticle: GraphParticle | undefined;\n\n        for (let i = 0; i < particleCount; i++) {\n          const particle: GraphParticle = {\n            step: 0,\n            sourceId,\n            targetId,\n            prev: prevParticle,\n            next: undefined,\n            index: i,\n          };\n          if (prevParticle) prevParticle.next = particle;\n          particles.push(particle);\n          prevParticle = particle;\n        }\n        if (particles.length >= 2) {\n          particles[0].prev = particles[particles.length - 1];\n          particles[particles.length - 1].next = particles[0];\n        }\n        this.particles[id] = particles;\n      }\n\n      if (particleSteps !== 0) {\n        this.particles[id].forEach((particle) => {\n          if (!this.context) return;\n\n          const distance = particleSteps / particleCount;\n          getParticlePosition({\n            distance,\n            particle,\n            totalSteps: particleSteps,\n            totalCount: particleCount,\n            xEnd,\n            xStart,\n            yEnd,\n            yStart,\n          });\n          if (particle.x != undefined && particle.y != undefined) {\n            this.context.beginPath();\n            this.context.strokeStyle = linkOptions.particleBorderColor;\n            this.context.lineWidth = linkOptions.particleBorderWidth;\n            this.context.arc(particle.x, particle.y, linkOptions.particleRadius, 0, Math.PI * 2);\n            this.context.fillStyle = linkOptions.particleColor;\n            this.context.fill();\n            this.context.stroke();\n          }\n        });\n      }\n    }\n\n    /** Arrow */\n    if (this.linkSettings.arrow && arrowAlpha > 0) {\n      const {\n        x1: xStart,\n        x2: xEnd,\n        y1: yStart,\n        y2: yEnd,\n      } = calculateLinkPositionByNode(link) ?? {\n        x1: 0,\n        x2: 0,\n        y1: 0,\n        y2: 0,\n      };\n\n      this.context.beginPath();\n      this.context.globalAlpha = arrowAlpha;\n      this.context.strokeStyle = linkOptions.arrowBorderColor;\n      this.context.lineWidth = linkOptions.arrowBorderWidth;\n      this.context.fillStyle = linkOptions.arrowColor;\n      const angle = Math.atan2(yEnd - yStart, xEnd - xStart);\n      this.context.moveTo(xEnd, yEnd);\n      this.context.lineTo(\n        xEnd - linkOptions.arrowSize * Math.cos(angle - Math.PI / 6),\n        yEnd - linkOptions.arrowSize * Math.sin(angle - Math.PI / 6),\n      );\n      this.context.lineTo(\n        xEnd - linkOptions.arrowSize * Math.cos(angle + Math.PI / 6),\n        yEnd - linkOptions.arrowSize * Math.sin(angle + Math.PI / 6),\n      );\n      this.context.closePath();\n      this.context.fill();\n      this.context.stroke();\n    }\n\n    if (linkOptions.drawExtraLink) {\n      linkOptions.drawExtraLink(link, { ...linkOptions, alpha }, state);\n    }\n  };\n}\n"],"names":[],"mappings":";;;;;;;;AAWM,SAAU,WAAW,CAGzB,KAAqC,EAAA;AACrC,IAAA,OAAO,SAAS,QAAQ,CAEtB,IAAuC,EACvC,KAAa,EAAA;QAEb,IACE,CAAC,IAAI,CAAC,OAAO;AACb,YAAA,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ;AAC/B,YAAA,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ;AAC/B,YAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACd,YAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACd,YAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACd,YAAA,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAEd;AAEF,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;YAAE;AAEpD,QAAA,MAAM,EAAE,GAAG,CAAG,EAAA,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;AAC/C,QAAA,IAAI,WAA+D;AACnE,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE;AACxD,YAAA,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC;;aAClC;YACL,WAAW,GAAG,sBAAsB,CAClC,IAAI,EACJ,KAAK,EACL,IAAI,CAAC,KAAK,EACV,KAAK,EACL,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,EAC/B,iBAAiB,CAClB;AACD,YAAA,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3B,gBAAA,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,GAAG,WAAW;;;AAI3C,QAAA,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC;YAE9C;;AAGF,QAAA,IAAI,KAAK,GAAG,WAAW,CAAC,KAAK;AAC7B,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,GAAG,CAAC,GAAG,WAAW,CAAC,UAAU;;QAGhF,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,eAAe,EAAE;;YAErD,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE;AAC1F,gBAAA,IAAI,IAAI,CAAC,YAAY,CAAC,yBAAyB,EAAE;oBAC/C,MAAM,GAAG,GACP,IAAI,CAAC,YAAY,CAAC,4BAA4B,GAAG;AAC/C,0BAAE,IAAI,CAAC,YAAY,CAAC;0BAClB,KAAK;AACX,oBAAA,KAAK,GAAG,mBAAmB,CAAC,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC;;AAE3E,gBAAA,IACE,IAAI,CAAC,YAAY,CAAC,KAAK;oBACvB,IAAI,CAAC,YAAY,CAAC,0BAA0B;AAC5C,oBAAA,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,EACnC;oBACA,MAAM,GAAG,GACP,IAAI,CAAC,YAAY,CAAC,6BAA6B,GAAG;AAChD,0BAAE,IAAI,CAAC,YAAY,CAAC;0BAClB,UAAU;AAChB,oBAAA,UAAU,GAAG,mBAAmB,CAAC,GAAG,EAAE,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC;;;iBAEhF;;AAEL,gBAAA,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE;;AAEjE,oBAAA,UAAU,GAAG,mBAAmB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;;;QAKzF,IAAI,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,eAAe,EAAE;;AAErD,YAAA,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,EAAE;AACjC,gBAAA,IAAI,IAAI,CAAC,YAAY,CAAC,yBAAyB,EAAE;oBAC/C,MAAM,GAAG,GACP,IAAI,CAAC,YAAY,CAAC,4BAA4B,GAAG;AAC/C,0BAAE,IAAI,CAAC,YAAY,CAAC;0BAClB,KAAK;AACX,oBAAA,KAAK,GAAG,mBAAmB,CAAC,GAAG,EAAE,KAAK,GAAG,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC;;AAE3E,gBAAA,IACE,IAAI,CAAC,YAAY,CAAC,KAAK;oBACvB,IAAI,CAAC,YAAY,CAAC,0BAA0B;AAC5C,oBAAA,CAAC,IAAI,CAAC,YAAY,CAAC,gBAAgB,EACnC;oBACA,MAAM,GAAG,GACP,IAAI,CAAC,YAAY,CAAC,6BAA6B,GAAG;AAChD,0BAAE,IAAI,CAAC,YAAY,CAAC;0BAClB,UAAU;AAChB,oBAAA,UAAU,GAAG,mBAAmB,CAAC,GAAG,EAAE,UAAU,GAAG,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,iBAAiB,CAAC;;;iBAEhF;;AAEL,gBAAA,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE;;AAEjE,oBAAA,UAAU,GAAG,mBAAmB,CAAC,CAAC,EAAE,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC;;;;;AAMzF,QAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AAExB,QAAA,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,KAAK;QAChC,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK;QAC5C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK;AAE1C,QAAA,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAC1B,QAAA,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AAC1B,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AACxB,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;QACxB,IAAI,YAAY,GAAG,CAAC;AACpB,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE;YACnE,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,UAAU,GAAG,CAAC;AAC5D,YAAA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,IAAI,EAAE,UAAU,GAAG,WAAW,CAAC,SAAS,GAAG,CAAC,CAAC;YAE1F,IAAI,QAAQ,EAAE;AACZ,gBAAA,MAAM,GAAG,QAAQ,CAAC,EAAE;AACpB,gBAAA,IAAI,GAAG,QAAQ,CAAC,EAAE;AAClB,gBAAA,MAAM,GAAG,QAAQ,CAAC,EAAE;AACpB,gBAAA,IAAI,GAAG,QAAQ,CAAC,EAAE;AAClB,gBAAA,YAAY,GAAG,QAAQ,CAAC,QAAQ;;;QAGpC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;QACnC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/B,QAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;AAGrB,QAAA,IACE,IAAI,CAAC,YAAY,CAAC,SAAS;aAC1B,CAAC,IAAI,CAAC,eAAe;iBACnB,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE;oBACzC,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;AAC7C,iBAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,CAAC,EAC1D;AACA,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;kBACpC,YAAY,IAAI;AAChB,sBAAE;AACF,sBAAE,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;AACrC,kBAAE,WAAW,CAAC,aAAa;AAC7B,YAAA,MAAM,aAAa,GAAG,WAAW,CAAC,aAAa;YAE/C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE;AACvB,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE;AAC/B,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE;gBAE/B,MAAM,SAAS,GAAoB,EAAE;AACrC,gBAAA,IAAI,YAAuC;AAE3C,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE;AACtC,oBAAA,MAAM,QAAQ,GAAkB;AAC9B,wBAAA,IAAI,EAAE,CAAC;wBACP,QAAQ;wBACR,QAAQ;AACR,wBAAA,IAAI,EAAE,YAAY;AAClB,wBAAA,IAAI,EAAE,SAAS;AACf,wBAAA,KAAK,EAAE,CAAC;qBACT;AACD,oBAAA,IAAI,YAAY;AAAE,wBAAA,YAAY,CAAC,IAAI,GAAG,QAAQ;AAC9C,oBAAA,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;oBACxB,YAAY,GAAG,QAAQ;;AAEzB,gBAAA,IAAI,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE;AACzB,oBAAA,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;AACnD,oBAAA,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;;AAErD,gBAAA,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,SAAS;;AAGhC,YAAA,IAAI,aAAa,KAAK,CAAC,EAAE;gBACvB,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAI;oBACtC,IAAI,CAAC,IAAI,CAAC,OAAO;wBAAE;AAEnB,oBAAA,MAAM,QAAQ,GAAG,aAAa,GAAG,aAAa;AAC9C,oBAAA,mBAAmB,CAAC;wBAClB,QAAQ;wBACR,QAAQ;AACR,wBAAA,UAAU,EAAE,aAAa;AACzB,wBACA,IAAI;wBACJ,MAAM;wBACN,IAAI;wBACJ,MAAM;AACP,qBAAA,CAAC;AACF,oBAAA,IAAI,QAAQ,CAAC,CAAC,IAAI,SAAS,IAAI,QAAQ,CAAC,CAAC,IAAI,SAAS,EAAE;AACtD,wBAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;wBACxB,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,mBAAmB;wBAC1D,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,mBAAmB;wBACxD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,WAAW,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;wBACpF,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,aAAa;AAClD,wBAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACnB,wBAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;AAEzB,iBAAC,CAAC;;;;QAKN,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,UAAU,GAAG,CAAC,EAAE;YAC7C,MAAM,EACJ,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,IAAI,GACT,GAAG,2BAA2B,CAAC,IAAI,CAAC,IAAI;AACvC,gBAAA,EAAE,EAAE,CAAC;AACL,gBAAA,EAAE,EAAE,CAAC;AACL,gBAAA,EAAE,EAAE,CAAC;AACL,gBAAA,EAAE,EAAE,CAAC;aACN;AAED,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,UAAU;YACrC,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,gBAAgB;YACvD,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,gBAAgB;YACrD,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,UAAU;AAC/C,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;YACtD,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/B,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CACjB,IAAI,GAAG,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,EAC5D,IAAI,GAAG,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAC7D;AACD,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,CACjB,IAAI,GAAG,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,EAC5D,IAAI,GAAG,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAC7D;AACD,YAAA,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE;AACxB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACnB,YAAA,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;;AAGvB,QAAA,IAAI,WAAW,CAAC,aAAa,EAAE;AAC7B,YAAA,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC;;AAErE,KAAC;AACH;;;;"}

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

@@ -0,0 +1,342 @@
+import { isNumber } from '@krainovsd/js-helpers';
+import { colorToRgb } from '../../../lib/color-to-rgb.js';
+import { extractRgb } from '../../../lib/extract-rgb.js';
+import { fadeRgb } from '../../../lib/fade-rgb.js';
+import { rgbAnimationByProgress } from '../../../lib/rgb-animation-by-progress.js';
+import { nodeOptionsGetter, nodeRadiusGetter, nodeSizeGetter } from '../lib/settings/node-settings-getter.js';
+import 'd3-array';
+import { nodeIterationExtractor } from '../lib/utils/node-iteration-extractor.js';
+import { animationByProgress } from '../lib/utils/animation-by-progress.js';
+import { isNodeVisible } from '../lib/utils/is-node-visible.js';
+import { getTextLines, drawText } from './draw-text.js';
+
+function getDrawNode(nodeRenders, textRenders, state) {
+    return function drawNode(node, index) {
+        if (!this.context || !node.x || !node.y)
+            return;
+        let nodeOptions;
+        if (this.nodeSettings.cache && this.nodeOptionsCache[node.id]) {
+            nodeOptions = this.nodeOptionsCache[node.id];
+        }
+        else {
+            nodeOptions = nodeIterationExtractor(node, index, this.nodes, state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+            if (this.nodeSettings.cache) {
+                this.nodeOptionsCache[node.id] = nodeOptions;
+            }
+        }
+        if (nodeOptions.nodeDraw && nodeOptions.textDraw) {
+            nodeRenders.push(() => {
+                nodeOptions?.nodeDraw?.(node, nodeOptions, state);
+            });
+            textRenders.push(() => {
+                nodeOptions?.textDraw?.(node, nodeOptions, state);
+            });
+            return;
+        }
+        let alpha = nodeOptions.alpha;
+        let color = nodeOptions.color;
+        let radiusInitial = nodeOptions.radius;
+        let widthInitial = nodeOptions.width;
+        let heightInitial = nodeOptions.height;
+        let textAlpha = nodeOptions.textAlpha;
+        let textSize = nodeOptions.textSize;
+        let textShiftX = nodeOptions.textShiftX;
+        let textShiftY = nodeOptions.textShiftY;
+        let textWeight = nodeOptions.textWeight;
+        let textWidth = nodeOptions.textWidth;
+        /** Node Highlight */
+        if (this.highlightedNeighbors && this.highlightedNode) {
+            /** Not highlighted */
+            if (!this.highlightedNeighbors.has(node.id) && this.highlightedNode.id != node.id) {
+                if (this.nodeSettings.highlightByNodeNodeFading) {
+                    const min = this.nodeSettings.highlightByNodeNodeFadingMin < alpha
+                        ? this.nodeSettings.highlightByNodeNodeFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByNodeTextFading) {
+                    const min = this.nodeSettings.highlightByNodeTextFadingMin < textAlpha
+                        ? this.nodeSettings.highlightByNodeTextFadingMin
+                        : textAlpha;
+                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByNodeNodeColor) {
+                    const colorRgb = extractRgb(colorToRgb(color));
+                    if (colorRgb) {
+                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByNodeNodeColorFadingMin);
+                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    }
+                }
+            }
+            else if (!this.nodeSettings.highlightByNodeOnlyRoot ||
+                (this.nodeSettings.highlightByNodeOnlyRoot && this.highlightedNode.id === node.id)) {
+                /** Highlighted */
+                if (this.nodeSettings.highlightByNodeNodeSizing && nodeOptions.shape === "circle") {
+                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByNodeNodeSizingAdditional, this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeSizing &&
+                    (nodeOptions.shape === "square" || nodeOptions.shape === "text")) {
+                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByNodeNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= widthCoefficient;
+                    heightInitial *= heightCoefficient;
+                }
+                if (this.nodeSettings.highlightByNodeTextSizing) {
+                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByNodeTextSizingAdditional, this.highlightProgress);
+                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByNodeTextShiftXAdditional, this.highlightProgress);
+                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByNodeTextShiftYAdditional, this.highlightProgress);
+                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByNodeTextWeightAdditional, this.highlightProgress);
+                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByNodeTextWidthAdditional, this.highlightProgress);
+                }
+            }
+        }
+        /** LinkHighlight */
+        if (this.highlightedNeighbors && this.highlightedLink) {
+            /** Not highlighted */
+            if (!this.highlightedNeighbors.has(node.id) &&
+                this.highlightedLink.source !== node &&
+                this.highlightedLink.target !== node) {
+                if (this.nodeSettings.highlightByLinkNodeFading) {
+                    const min = this.nodeSettings.highlightByLinkNodeFadingMin < alpha
+                        ? this.nodeSettings.highlightByLinkNodeFadingMin
+                        : alpha;
+                    alpha = animationByProgress(min, alpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkTextFading) {
+                    const min = this.nodeSettings.highlightByLinkTextFadingMin < textAlpha
+                        ? this.nodeSettings.highlightByLinkTextFadingMin
+                        : textAlpha;
+                    textAlpha = animationByProgress(min, textAlpha - min, 1 - this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeColor) {
+                    const colorRgb = extractRgb(colorToRgb(color));
+                    if (colorRgb) {
+                        const colorRgbFade = fadeRgb(colorRgb, this.nodeSettings.highlightByLinkNodeColorFadingMin);
+                        const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, this.highlightProgress);
+                        color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+                    }
+                }
+            }
+            else {
+                /** Highlighted */
+                if (this.nodeSettings.highlightByLinkNodeSizing && nodeOptions.shape === "circle") {
+                    radiusInitial = animationByProgress(radiusInitial, this.nodeSettings.highlightByLinkNodeSizingAdditional, this.highlightProgress);
+                }
+                if (this.nodeSettings.highlightByLinkNodeSizing &&
+                    (nodeOptions.shape === "square" ||
+                        nodeOptions.shape === "text" ||
+                        nodeOptions.shape === "icon")) {
+                    const widthCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    const heightCoefficient = animationByProgress(1, this.nodeSettings.highlightByLinkNodeSizingAdditionalCoefficient, this.highlightProgress);
+                    widthInitial *= widthCoefficient;
+                    heightInitial *= heightCoefficient;
+                }
+                if (this.nodeSettings.highlightByLinkTextSizing) {
+                    textSize = animationByProgress(textSize, this.nodeSettings.highlightByLinkTextSizingAdditional, this.highlightProgress);
+                    textShiftX = animationByProgress(textShiftX, this.nodeSettings.highlightByLinkTextShiftXAdditional, this.highlightProgress);
+                    textShiftY = animationByProgress(textShiftY, this.nodeSettings.highlightByLinkTextShiftYAdditional, this.highlightProgress);
+                    textWeight = animationByProgress(textWeight, this.nodeSettings.highlightByLinkTextWeightAdditional, this.highlightProgress);
+                    textWidth = animationByProgress(textWidth, this.nodeSettings.highlightByLinkTextWidthAdditional, this.highlightProgress);
+                }
+            }
+        }
+        /** Flex radius */
+        const radius = nodeOptions.shape === "circle"
+            ? nodeRadiusGetter({
+                radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                radiusInitial,
+                radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                linkCount: node.linkCount,
+            })
+            : radiusInitial;
+        /** Flex size */
+        let height = heightInitial;
+        let width = widthInitial;
+        if (nodeOptions.shape === "square" || nodeOptions.shape === "text") {
+            const size = nodeSizeGetter({
+                heightInitial,
+                widthInitial,
+                linkCount: node.linkCount,
+                sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                sizeFactor: this.nodeSettings.nodeSizeFactor,
+                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+            });
+            width = size.width;
+            height = size.height;
+        }
+        if (nodeOptions.shape === "text" && nodeOptions.text) {
+            const lines = this.cachedNodeText[node.id] ??
+                getTextLines({
+                    context: this.context,
+                    text: nodeOptions.text,
+                    textAlign: nodeOptions.textAlign,
+                    textColor: nodeOptions.textColor,
+                    textFont: nodeOptions.textFont,
+                    textSize,
+                    maxWidth: width,
+                    textStyle: nodeOptions.textStyle,
+                    textWeight,
+                });
+            if (!this.cachedNodeText[node.id]) {
+                this.cachedNodeText[node.id] = lines;
+            }
+            height =
+                lines.length * textSize +
+                    (lines.length - 1) * nodeOptions.textGap +
+                    nodeOptions.textNodeYPadding;
+            width += nodeOptions.textNodeXPadding;
+        }
+        /** Node parameters */
+        node._radius = radius;
+        node._width = width;
+        node._height = height;
+        node._borderRadius =
+            isNumber(nodeOptions.borderRadius) && nodeOptions.borderRadius > 0
+                ? Math.min(nodeOptions.borderRadius, nodeOptions.width / 2, nodeOptions.height / 2)
+                : 0;
+        node._shape = nodeOptions.shape ?? "circle";
+        /** Node Visibility */
+        if (!isNodeVisible({
+            height: this.height,
+            width: this.width,
+            transform: this.areaTransform,
+            node,
+        })) {
+            node._visible = false;
+            return;
+        }
+        node._visible = true;
+        /** Node draw */
+        nodeRenders.push(() => {
+            if (!this.context || !node.x || !node.y)
+                return;
+            this.context.beginPath();
+            this.context.globalAlpha = alpha;
+            this.context.lineWidth = nodeOptions.borderWidth;
+            this.context.strokeStyle = nodeOptions.borderColor;
+            this.context.fillStyle = color;
+            switch (nodeOptions.shape) {
+                case "circle": {
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    break;
+                }
+                case "square": {
+                    this.context.roundRect(node.x - width / 2, node.y - height / 2, width, height, node._borderRadius);
+                    break;
+                }
+                case "text": {
+                    if (this.nodeSettings.textNodeDebug) {
+                        this.context.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
+                    }
+                    const lines = this.cachedNodeText[node.id];
+                    if (nodeOptions.text && lines)
+                        drawText({
+                            id: node.id,
+                            cachedNodeText: this.cachedNodeText,
+                            context: this.context,
+                            text: nodeOptions.text,
+                            textAlign: nodeOptions.textAlign,
+                            textColor: nodeOptions.textColor,
+                            textFont: nodeOptions.textFont,
+                            textSize,
+                            x: node.x,
+                            y: node.y + textSize / 4 - (lines.length - 1) * (textSize / 2),
+                            maxWidth: widthInitial,
+                            textStyle: nodeOptions.textStyle,
+                            textWeight,
+                            textGap: nodeOptions.textGap,
+                        });
+                    break;
+                }
+                default: {
+                    this.context.arc(node.x, node.y, radius, 0, 2 * Math.PI);
+                    break;
+                }
+            }
+            this.context.fill();
+            this.context.stroke();
+        });
+        if (nodeOptions.nodeExtraDraw) {
+            nodeRenders.push(() => {
+                nodeOptions?.nodeExtraDraw?.(node, {
+                    ...nodeOptions,
+                    radius,
+                    alpha,
+                    color,
+                    textAlpha,
+                    textSize,
+                    textShiftX,
+                    textShiftY,
+                    textWeight,
+                    textWidth,
+                }, state);
+            });
+        }
+        /** Text draw */
+        if (nodeOptions.textVisible && nodeOptions.text && nodeOptions.shape !== "text") {
+            textRenders.push(() => {
+                if (nodeOptions.textDraw) {
+                    nodeOptions.textDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
+                        textSize,
+                        textShiftX,
+                        textShiftY,
+                        textWeight,
+                        textWidth,
+                    }, state);
+                    return;
+                }
+                if (!this.context || !node.x || !node.y || !nodeOptions.text)
+                    return;
+                this.context.beginPath();
+                this.context.globalAlpha = textAlpha;
+                let y = node.y + textShiftY;
+                if (nodeOptions.shape === "circle") {
+                    y += radius;
+                }
+                if (nodeOptions.shape === "square") {
+                    y += height / 2;
+                }
+                drawText({
+                    id: node.id,
+                    cachedNodeText: this.cachedNodeText,
+                    context: this.context,
+                    text: nodeOptions.text,
+                    textAlign: nodeOptions.textAlign,
+                    textColor: nodeOptions.textColor,
+                    textFont: nodeOptions.textFont,
+                    textSize,
+                    x: node.x + textShiftX,
+                    y,
+                    maxWidth: textWidth,
+                    textStyle: nodeOptions.textStyle,
+                    textWeight,
+                    textGap: nodeOptions.textGap,
+                });
+                if (nodeOptions.textExtraDraw) {
+                    nodeOptions.textExtraDraw(node, {
+                        ...nodeOptions,
+                        radius,
+                        alpha,
+                        color,
+                        textAlpha,
+                        textSize,
+                        textShiftX,
+                        textShiftY,
+                        textWeight,
+                        textWidth,
+                    }, state);
+                }
+            });
+        }
+    };
+}
+
+export { getDrawNode };
+//# sourceMappingURL=draw-nodes.js.map