@krainovsd/graph 0.13.0-beta1 → 0.14.0-beta.1

package/lib/esm/module/GraphCanvas/lib/utils/get-particle-position.js

@@ -1,39 +1,49 @@
+const FRAME_INTERVAL = 1000 / 60;
 function getParticlePosition(opts) {
-    const prevStepDifference = opts.particle.step - (opts.particle.prev?.step ?? 0);
-    const nextStepDifference = (opts.particle.next?.step ?? 0) - opts.particle.step;
-    const needWait = opts.particle.next &&
-        opts.particle.next.step > opts.particle.step &&
-        nextStepDifference <= opts.distance;
-    const needSpeed = opts.particle.prev &&
-        opts.particle.prev.step !== 0 &&
-        opts.particle.prev.step < opts.particle.step &&
-        prevStepDifference < opts.distance;
-    if (opts.particle.step === 0 && needWait) {
-        opts.particle.x = undefined;
-        opts.particle.y = undefined;
-        return;
+    const now = performance.now();
+    const particle = opts.particle;
+    if (particle._lastTime == undefined) {
+        particle._distanceTraveled = (opts.distance / opts.totalCount) * particle.index;
+        particle._lastTime = now;
+        particle._lastDistance = opts.distance;
     }
-    const remainingSteps = opts.totalSteps - opts.particle.step;
-    const progress = opts.particle.step / opts.totalSteps;
-    if (remainingSteps <= 0) {
-        opts.particle.x = opts.xEnd;
-        opts.particle.y = opts.yEnd;
-        opts.particle.step = 0;
-        return;
+    const lastDistance = particle._lastDistance ?? 0;
+    if (lastDistance !== opts.distance && lastDistance > 0) {
+        const scale = opts.distance / lastDistance;
+        particle._distanceTraveled = ((particle._distanceTraveled ?? 0) * scale) % opts.distance;
+        particle._lastDistance = opts.distance;
     }
-    const dx = opts.xEnd - opts.xStart;
-    const dy = opts.yEnd - opts.yStart;
-    const newX = opts.xStart + dx * progress;
-    const newY = opts.yStart + dy * progress;
-    opts.particle.x = newX;
-    opts.particle.y = newY;
-    if (needSpeed) {
-        opts.particle.step += prevStepDifference <= 3 ? prevStepDifference : 3;
+    const delta = Math.min(now - particle._lastTime, FRAME_INTERVAL);
+    particle._lastTime = now;
+    particle._distanceTraveled =
+        ((particle._distanceTraveled ?? 0) + opts.speed * delta) % opts.distance;
+    const progress = particle._distanceTraveled / opts.distance;
+    if (opts.xControl !== 0 && opts.yControl !== 0) {
+        const t = 1 - progress;
+        particle.x =
+            t * t * opts.xStart + 2 * t * progress * opts.xControl + progress * progress * opts.xEnd;
+        particle.y =
+            t * t * opts.yStart + 2 * t * progress * opts.yControl + progress * progress * opts.yEnd;
     }
     else {
-        opts.particle.step++;
+        const dx = opts.xEnd - opts.xStart;
+        const dy = opts.yEnd - opts.yStart;
+        particle.x = opts.xStart + dx * progress;
+        particle.y = opts.yStart + dy * progress;
     }
 }
+function approximateQuadraticBezierLength(x0, y0, x1, y1, x2, y2) {
+    const dx01 = x1 - x0;
+    const dy01 = y1 - y0;
+    const dx12 = x2 - x1;
+    const dy12 = y2 - y1;
+    const dx02 = x2 - x0;
+    const dy02 = y2 - y0;
+    const a = Math.sqrt(dx01 * dx01 + dy01 * dy01);
+    const b = Math.sqrt(dx12 * dx12 + dy12 * dy12);
+    const c = Math.sqrt(dx02 * dx02 + dy02 * dy02);
+    return (a + b + c) / 2;
+}
 
-export { getParticlePosition };
+export { approximateQuadraticBezierLength, getParticlePosition };
 //# sourceMappingURL=get-particle-position.js.map

package/lib/esm/module/GraphCanvas/lib/utils/get-particle-position.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-particle-position.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/get-particle-position.ts"],"sourcesContent":["import type { LinkParticle } from \"../../types\";\n\ntype GetParticlePositionOptions = {\n  particle: LinkParticle;\n  xStart: number;\n  yStart: number;\n  xEnd: number;\n  yEnd: number;\n  totalSteps: number;\n  totalCount: number;\n  distance: number;\n};\n\nexport function getParticlePosition(opts: GetParticlePositionOptions) {\n  const prevStepDifference = opts.particle.step - (opts.particle.prev?.step ?? 0);\n  const nextStepDifference = (opts.particle.next?.step ?? 0) - opts.particle.step;\n\n  const needWait =\n    opts.particle.next &&\n    opts.particle.next.step > opts.particle.step &&\n    nextStepDifference <= opts.distance;\n  const needSpeed =\n    opts.particle.prev &&\n    opts.particle.prev.step !== 0 &&\n    opts.particle.prev.step < opts.particle.step &&\n    prevStepDifference < opts.distance;\n\n  if (opts.particle.step === 0 && needWait) {\n    opts.particle.x = undefined;\n    opts.particle.y = undefined;\n\n    return;\n  }\n\n  const remainingSteps = opts.totalSteps - opts.particle.step;\n  const progress = opts.particle.step / opts.totalSteps;\n\n  if (remainingSteps <= 0) {\n    opts.particle.x = opts.xEnd;\n    opts.particle.y = opts.yEnd;\n    opts.particle.step = 0;\n\n    return;\n  }\n\n  const dx = opts.xEnd - opts.xStart;\n  const dy = opts.yEnd - opts.yStart;\n\n  const newX = opts.xStart + dx * progress;\n  const newY = opts.yStart + dy * progress;\n\n  opts.particle.x = newX;\n  opts.particle.y = newY;\n\n  if (needSpeed) {\n    opts.particle.step += prevStepDifference <= 3 ? prevStepDifference : 3;\n  } else {\n    opts.particle.step++;\n  }\n}\n"],"names":[],"mappings":"AAaM,SAAU,mBAAmB,CAAC,IAAgC,EAAA;AAClE,IAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,CAAC;AAC/E,IAAA,MAAM,kBAAkB,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;AAE/E,IAAA,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ,CAAC,IAAI;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI;AAC5C,QAAA,kBAAkB,IAAI,IAAI,CAAC,QAAQ;AACrC,IAAA,MAAM,SAAS,GACb,IAAI,CAAC,QAAQ,CAAC,IAAI;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI;AAC5C,QAAA,kBAAkB,GAAG,IAAI,CAAC,QAAQ;IAEpC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,IAAI,QAAQ,EAAE;AACxC,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS;QAE3B;;IAGF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI;IAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU;AAErD,IAAA,IAAI,cAAc,IAAI,CAAC,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI;QAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI;AAC3B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC;QAEtB;;IAGF,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM;IAClC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM;IAElC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,QAAQ;IACxC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,QAAQ;AAExC,IAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI;AACtB,IAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI;IAEtB,IAAI,SAAS,EAAE;AACb,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,kBAAkB,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC;;SACjE;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;AAExB;;;;"}
+{"version":3,"file":"get-particle-position.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/get-particle-position.ts"],"sourcesContent":["import type { LinkParticle } from \"../../types\";\n\ntype GetParticlePositionOptions = {\n  particle: LinkParticle;\n  xStart: number;\n  yStart: number;\n  xEnd: number;\n  yEnd: number;\n  xControl: number;\n  yControl: number;\n  distance: number;\n  totalCount: number;\n  speed: number;\n};\n\nconst FRAME_INTERVAL = 1000 / 60;\n\nexport function getParticlePosition(opts: GetParticlePositionOptions) {\n  const now = performance.now();\n  const particle = opts.particle;\n\n  if (particle._lastTime == undefined) {\n    particle._distanceTraveled = (opts.distance / opts.totalCount) * particle.index;\n    particle._lastTime = now;\n    particle._lastDistance = opts.distance;\n  }\n\n  const lastDistance = particle._lastDistance ?? 0;\n  if (lastDistance !== opts.distance && lastDistance > 0) {\n    const scale = opts.distance / lastDistance;\n    particle._distanceTraveled = ((particle._distanceTraveled ?? 0) * scale) % opts.distance;\n    particle._lastDistance = opts.distance;\n  }\n\n  const delta = Math.min(now - particle._lastTime, FRAME_INTERVAL);\n  particle._lastTime = now;\n  particle._distanceTraveled =\n    ((particle._distanceTraveled ?? 0) + opts.speed * delta) % opts.distance;\n\n  const progress = particle._distanceTraveled / opts.distance;\n  if (opts.xControl !== 0 && opts.yControl !== 0) {\n    const t = 1 - progress;\n    particle.x =\n      t * t * opts.xStart + 2 * t * progress * opts.xControl + progress * progress * opts.xEnd;\n    particle.y =\n      t * t * opts.yStart + 2 * t * progress * opts.yControl + progress * progress * opts.yEnd;\n  } else {\n    const dx = opts.xEnd - opts.xStart;\n    const dy = opts.yEnd - opts.yStart;\n    particle.x = opts.xStart + dx * progress;\n    particle.y = opts.yStart + dy * progress;\n  }\n}\n\nexport function approximateQuadraticBezierLength(\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n): number {\n  const dx01 = x1 - x0;\n  const dy01 = y1 - y0;\n  const dx12 = x2 - x1;\n  const dy12 = y2 - y1;\n  const dx02 = x2 - x0;\n  const dy02 = y2 - y0;\n  const a = Math.sqrt(dx01 * dx01 + dy01 * dy01);\n  const b = Math.sqrt(dx12 * dx12 + dy12 * dy12);\n  const c = Math.sqrt(dx02 * dx02 + dy02 * dy02);\n\n  return (a + b + c) / 2;\n}\n"],"names":[],"mappings":"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"}

package/lib/esm/module/GraphCanvas/lib/utils/is-empty-object.js

@@ -0,0 +1,11 @@
+function isEmptyObject(obj) {
+    for (const key in obj) {
+        if (Object.hasOwn(obj, key)) {
+            return false;
+        }
+    }
+    return true;
+}
+
+export { isEmptyObject };
+//# sourceMappingURL=is-empty-object.js.map

package/lib/esm/module/GraphCanvas/lib/utils/is-empty-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-empty-object.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/is-empty-object.ts"],"sourcesContent":["export function isEmptyObject(obj: Record<string, unknown>) {\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      return false;\n    }\n  }\n  return true;\n}\n"],"names":[],"mappings":"AAAM,SAAU,aAAa,CAAC,GAA4B,EAAA;AACxD,IAAA,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;QACrB,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;AAC3B,YAAA,OAAO,KAAK;;;AAGhB,IAAA,OAAO,IAAI;AACb;;;;"}

package/lib/esm/module/GraphCanvas/lib/utils/is-node-visible.js

@@ -1,6 +1,9 @@
 import { COMMON_SETTINGS } from '../../constants/common-settings.js';
-import '@krainovsd/js-helpers';
-import 'd3-array';
+import '../../constants/force-settings.js';
+import '../../constants/graph-settings.js';
+import '../../constants/highlight-settings.js';
+import '../../constants/link-settings.js';
+import '../../constants/node-settings.js';
 
 const ADDITIONAL_VIEWPORT = 10;
 function isNodeVisible(opts) {

package/lib/esm/module/GraphCanvas/lib/utils/is-node-visible.js.map

@@ -1 +1 @@
-{"version":3,"file":"is-node-visible.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/is-node-visible.ts"],"sourcesContent":["import type { ZoomTransform } from \"d3-zoom\";\nimport { COMMON_SETTINGS } from \"../../constants\";\nimport type { NodeInterface } from \"../../types\";\n\ntype IsNodeVisibleOptions<NodeData extends Record<string, unknown>> = {\n  width: number;\n  height: number;\n  transform: ZoomTransform;\n  node: NodeInterface<NodeData>;\n};\n\nconst ADDITIONAL_VIEWPORT = 10;\n\nexport function isNodeVisible<NodeData extends Record<string, unknown>>(\n  opts: IsNodeVisibleOptions<NodeData>,\n) {\n  const left = -opts.transform.x / opts.transform.k;\n  const right = (opts.width - opts.transform.x) / opts.transform.k;\n  const top = -opts.transform.y / opts.transform.k;\n  const bottom = (opts.height - opts.transform.y) / opts.transform.k;\n\n  if (opts.node.x == undefined || opts.node.y == undefined) return false;\n\n  switch (opts.node._shape) {\n    case \"circle\": {\n      const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;\n\n      return (\n        left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n    case \"square\":\n    case \"text\": {\n      const width = opts.node._width ?? COMMON_SETTINGS.nodeSize;\n      const height = opts.node._height ?? COMMON_SETTINGS.nodeSize;\n\n      return (\n        left < opts.node.x + width + ADDITIONAL_VIEWPORT &&\n        opts.node.x - width - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + height + ADDITIONAL_VIEWPORT &&\n        opts.node.y - height - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n    default: {\n      const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;\n\n      return (\n        left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,mBAAmB,GAAG,EAAE;AAExB,SAAU,aAAa,CAC3B,IAAoC,EAAA;AAEpC,IAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AACjD,IAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;AAChE,IAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AAChD,IAAA,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;AAElE,IAAA,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,SAAS;AAAE,QAAA,OAAO,KAAK;AAEtE,IAAA,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;QACtB,KAAK,QAAQ,EAAE;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,UAAU;YAE9D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,KAAK;gBAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;AAGvD,QAAA,KAAK,QAAQ;QACb,KAAK,MAAM,EAAE;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,QAAQ;YAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ;YAE5D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,mBAAmB,GAAG,KAAK;gBACjD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;QAGvD,SAAS;YACP,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,UAAU;YAE9D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,KAAK;gBAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;;AAI3D;;;;"}
+{"version":3,"file":"is-node-visible.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/is-node-visible.ts"],"sourcesContent":["import type { ZoomTransform } from \"d3-zoom\";\nimport { COMMON_SETTINGS } from \"../../constants\";\nimport type { NodeInterface } from \"../../types\";\n\ntype IsNodeVisibleOptions<NodeData extends Record<string, unknown>> = {\n  width: number;\n  height: number;\n  transform: ZoomTransform;\n  node: NodeInterface<NodeData>;\n};\n\nconst ADDITIONAL_VIEWPORT = 10;\n\nexport function isNodeVisible<NodeData extends Record<string, unknown>>(\n  opts: IsNodeVisibleOptions<NodeData>,\n) {\n  const left = -opts.transform.x / opts.transform.k;\n  const right = (opts.width - opts.transform.x) / opts.transform.k;\n  const top = -opts.transform.y / opts.transform.k;\n  const bottom = (opts.height - opts.transform.y) / opts.transform.k;\n\n  if (opts.node.x == undefined || opts.node.y == undefined) return false;\n\n  switch (opts.node._shape) {\n    case \"circle\": {\n      const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;\n\n      return (\n        left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n    case \"square\":\n    case \"text\": {\n      const width = opts.node._width ?? COMMON_SETTINGS.nodeSize;\n      const height = opts.node._height ?? COMMON_SETTINGS.nodeSize;\n\n      return (\n        left < opts.node.x + width + ADDITIONAL_VIEWPORT &&\n        opts.node.x - width - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + height + ADDITIONAL_VIEWPORT &&\n        opts.node.y - height - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n    default: {\n      const radius = opts.node._radius ?? COMMON_SETTINGS.nodeRadius;\n\n      return (\n        left < opts.node.x + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.x - radius - ADDITIONAL_VIEWPORT < right &&\n        top < opts.node.y + radius + ADDITIONAL_VIEWPORT &&\n        opts.node.y - radius - ADDITIONAL_VIEWPORT < bottom\n      );\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,mBAAmB,GAAG,EAAE;AAExB,SAAU,aAAa,CAC3B,IAAoC,EAAA;AAEpC,IAAA,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AACjD,IAAA,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;AAChE,IAAA,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;AAChD,IAAA,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;AAElE,IAAA,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,SAAS;AAAE,QAAA,OAAO,KAAK;AAEtE,IAAA,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;QACtB,KAAK,QAAQ,EAAE;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,UAAU;YAE9D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,KAAK;gBAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;AAGvD,QAAA,KAAK,QAAQ;QACb,KAAK,MAAM,EAAE;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,QAAQ;YAC1D,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,QAAQ;YAE5D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,mBAAmB,GAAG,KAAK;gBACjD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;QAGvD,SAAS;YACP,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC,UAAU;YAE9D,QACE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBACjD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,KAAK;gBAClD,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB;gBAChD,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG,mBAAmB,GAAG,MAAM;;;AAI3D;;;;"}

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

@@ -2,31 +2,34 @@ import { isObject } from '@krainovsd/js-helpers';
 import { greatest } from 'd3-array';
 import { pointerGetter } from './pointer-getter.js';
 
-function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, }) {
+function linkByPointerGetter({ areaRect, areaTransform, mouseEvent, links, linkHoverExtraZone, curve, }) {
     if (!areaRect)
         return undefined;
     const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);
     return greatest(links, (link) => {
-        if (isNearLink(pointerX, pointerY, link, linkHoverExtraZone))
-            return link.index;
+        if (!isObject(link.source) ||
+            !isObject(link.target) ||
+            link.source.visible === false ||
+            link.target.visible === false)
+            return;
+        const x1 = (link._x1 ?? link.source.x);
+        const y1 = (link._y1 ?? link.source.y);
+        const x2 = (link._x2 ?? link.target.x);
+        const y2 = (link._y2 ?? link.target.y);
+        const cx = link._cx ?? 0;
+        const cy = link._cy ?? 0;
+        return curve
+            ? hitTestQuadratic(pointerX, pointerY, x1, y1, cx, cy, x2, y2, linkHoverExtraZone)
+                ? link.index
+                : undefined
+            : isNearLink(pointerX, pointerY, x1, y1, x2, y2, linkHoverExtraZone)
+                ? link.index
+                : undefined;
     });
 }
-function isNearLink(mouseX, mouseY, link, threshold = 2) {
-    if (!isObject(link.source) ||
-        !isObject(link.target) ||
-        link.source.visible === false ||
-        link.target.visible === false)
-        return false;
-    const x1 = link.source.x;
-    const y1 = link.source.y;
-    const x2 = link.target.x;
-    const y2 = link.target.y;
-    const distance = distanceToLine(mouseX, mouseY, x1, y1, x2, y2);
-    return distance <= threshold;
-}
-function distanceToLine(x, y, x1, y1, x2, y2) {
-    const A = x - x1;
-    const B = y - y1;
+function isNearLink(px, py, x1, y1, x2, y2, threshold = 2) {
+    const A = px - x1;
+    const B = py - y1;
     const C = x2 - x1;
     const D = y2 - y1;
     const dot = A * C + B * D;
@@ -48,9 +51,56 @@ function distanceToLine(x, y, x1, y1, x2, y2) {
         xx = x1 + param * C;
         yy = y1 + param * D;
     }
-    const dx = x - xx;
-    const dy = y - yy;
-    return Math.sqrt(dx * dx + dy * dy);
+    const dx = px - xx;
+    const dy = py - yy;
+    return Math.sqrt(dx * dx + dy * dy) <= threshold;
+}
+function hitTestQuadratic(px, py, x0, y0, xc, yc, x2, y2, tol) {
+    const bb = bezierBBox(x0, y0, xc, yc, x2, y2);
+    if (px < bb.minX - tol || px > bb.maxX + tol || py < bb.minY - tol || py > bb.maxY + tol) {
+        return false;
+    }
+    const chord = Math.hypot(x2 - x0, y2 - y0);
+    const contLen = Math.hypot(xc - x0, yc - y0) + Math.hypot(x2 - xc, y2 - yc);
+    const approxLen = (chord + contLen) / 2;
+    const steps = Math.max(16, Math.ceil(approxLen / 1));
+    const tol2 = tol * tol;
+    for (let i = 0; i <= steps; i++) {
+        const t = i / steps;
+        const mt = 1 - t;
+        const x = mt * mt * x0 + 2 * mt * t * xc + t * t * x2;
+        const y = mt * mt * y0 + 2 * mt * t * yc + t * t * y2;
+        const dx = px - x;
+        const dy = py - y;
+        if (dx * dx + dy * dy <= tol2)
+            return true;
+    }
+    return false;
+}
+function bezierBBox(x0, y0, x1, y1, x2, y2) {
+    function extrema(p0, p1, p2) {
+        const denom = p0 - 2 * p1 + p2;
+        if (denom === 0)
+            return [];
+        const t = (p0 - p1) / denom;
+        return t > 0 && t < 1 ? [t] : [];
+    }
+    const ts = [...extrema(x0, x1, x2), ...extrema(y0, y1, y2), 0, 1];
+    let maxX = -Infinity, maxY = -Infinity, minX = Infinity, minY = Infinity;
+    for (const t of ts) {
+        const mt = 1 - t;
+        const x = mt * mt * x0 + 2 * mt * t * x1 + t * t * x2;
+        const y = mt * mt * y0 + 2 * mt * t * y1 + t * t * y2;
+        if (x < minX)
+            minX = x;
+        if (x > maxX)
+            maxX = x;
+        if (y < minY)
+            minY = y;
+        if (y > maxY)
+            maxY = y;
+    }
+    return { minX, minY, maxX, maxY };
 }
 
 export { linkByPointerGetter };

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

@@ -1 +1 @@
-{"version":3,"file":"link-by-pointer-getter.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/link-by-pointer-getter.ts"],"sourcesContent":["import { isObject } from \"@krainovsd/js-helpers\";\nimport { greatest } from \"d3-array\";\nimport type { ZoomTransform } from \"d3-zoom\";\nimport type { LinkInterface } from \"../../types\";\nimport { pointerGetter } from \"./pointer-getter\";\n\nexport type LinkByPointerGetterOptions<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n> = {\n  mouseEvent: MouseEvent | TouchEvent;\n  areaRect: DOMRect | undefined;\n  areaTransform: ZoomTransform;\n  links: LinkInterface<NodeData, LinkData>[];\n  linkHoverExtraZone: number;\n};\n\nexport function linkByPointerGetter<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>({\n  areaRect,\n  areaTransform,\n  mouseEvent,\n  links,\n  linkHoverExtraZone,\n}: LinkByPointerGetterOptions<NodeData, LinkData>): LinkInterface<NodeData, LinkData> | undefined {\n  if (!areaRect) return undefined;\n\n  const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);\n\n  return greatest(links, (link) => {\n    if (isNearLink(pointerX, pointerY, link, linkHoverExtraZone)) return link.index;\n  });\n}\n\nfunction isNearLink<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(mouseX: number, mouseY: number, link: LinkInterface<NodeData, LinkData>, threshold = 2) {\n  if (\n    !isObject(link.source) ||\n    !isObject(link.target) ||\n    link.source.visible === false ||\n    link.target.visible === false\n  )\n    return false;\n\n  const x1 = link.source.x as number;\n  const y1 = link.source.y as number;\n  const x2 = link.target.x as number;\n  const y2 = link.target.y as number;\n\n  const distance = distanceToLine(mouseX, mouseY, x1, y1, x2, y2);\n\n  return distance <= threshold;\n}\n\nfunction distanceToLine(x: number, y: number, x1: number, y1: number, x2: number, y2: number) {\n  const A = x - x1;\n  const B = y - y1;\n  const C = x2 - x1;\n  const D = y2 - y1;\n\n  const dot = A * C + B * D;\n  const lenSq = C * C + D * D;\n  let param = -1;\n\n  if (lenSq !== 0) {\n    param = dot / lenSq;\n  }\n\n  let xx, yy;\n\n  if (param < 0) {\n    xx = x1;\n    yy = y1;\n  } else if (param > 1) {\n    xx = x2;\n    yy = y2;\n  } else {\n    xx = x1 + param * C;\n    yy = y1 + param * D;\n  }\n\n  const dx = x - xx;\n  const dy = y - yy;\n\n  return Math.sqrt(dx * dx + dy * dy);\n}\n"],"names":[],"mappings":";;;;AAiBgB,SAAA,mBAAmB,CAGjC,EACA,QAAQ,EACR,aAAa,EACb,UAAU,EACV,KAAK,EACL,kBAAkB,GAC6B,EAAA;AAC/C,IAAA,IAAI,CAAC,QAAQ;AAAE,QAAA,OAAO,SAAS;AAE/B,IAAA,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,CAAC;AAE/E,IAAA,OAAO,QAAQ,CAAC,KAAK,EAAE,CAAC,IAAI,KAAI;QAC9B,IAAI,UAAU,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,kBAAkB,CAAC;YAAE,OAAO,IAAI,CAAC,KAAK;AACjF,KAAC,CAAC;AACJ;AAEA,SAAS,UAAU,CAGjB,MAAc,EAAE,MAAc,EAAE,IAAuC,EAAE,SAAS,GAAG,CAAC,EAAA;AACtF,IAAA,IACE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;AACtB,QAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;AACtB,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK;AAC7B,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK;AAE7B,QAAA,OAAO,KAAK;AAEd,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAW;AAClC,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAW;AAClC,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAW;AAClC,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAW;AAElC,IAAA,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IAE/D,OAAO,QAAQ,IAAI,SAAS;AAC9B;AAEA,SAAS,cAAc,CAAC,CAAS,EAAE,CAAS,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU,EAAA;AAC1F,IAAA,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;AAChB,IAAA,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;AAChB,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE;AACjB,IAAA,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE;IAEjB,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;IACzB,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;AAC3B,IAAA,IAAI,KAAK,GAAG,EAAE;AAEd,IAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,QAAA,KAAK,GAAG,GAAG,GAAG,KAAK;;IAGrB,IAAI,EAAE,EAAE,EAAE;AAEV,IAAA,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,EAAE,GAAG,EAAE;QACP,EAAE,GAAG,EAAE;;AACF,SAAA,IAAI,KAAK,GAAG,CAAC,EAAE;QACpB,EAAE,GAAG,EAAE;QACP,EAAE,GAAG,EAAE;;SACF;AACL,QAAA,EAAE,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;AACnB,QAAA,EAAE,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;;AAGrB,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE;AACjB,IAAA,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE;AAEjB,IAAA,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACrC;;;;"}
+{"version":3,"file":"link-by-pointer-getter.js","sources":["../../../../../../src/module/GraphCanvas/lib/utils/link-by-pointer-getter.ts"],"sourcesContent":["import { isObject } from \"@krainovsd/js-helpers\";\nimport { greatest } from \"d3-array\";\nimport type { ZoomTransform } from \"d3-zoom\";\nimport type { LinkInterface } from \"../../types\";\nimport { pointerGetter } from \"./pointer-getter\";\n\nexport type LinkByPointerGetterOptions<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n> = {\n  mouseEvent: MouseEvent | TouchEvent;\n  areaRect: DOMRect | undefined;\n  areaTransform: ZoomTransform;\n  links: LinkInterface<NodeData, LinkData>[];\n  linkHoverExtraZone: number;\n  curve: boolean;\n};\n\nexport function linkByPointerGetter<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>({\n  areaRect,\n  areaTransform,\n  mouseEvent,\n  links,\n  linkHoverExtraZone,\n  curve,\n}: LinkByPointerGetterOptions<NodeData, LinkData>): LinkInterface<NodeData, LinkData> | undefined {\n  if (!areaRect) return undefined;\n\n  const [pointerX, pointerY] = pointerGetter(mouseEvent, areaRect, areaTransform);\n\n  return greatest(links, (link) => {\n    if (\n      !isObject(link.source) ||\n      !isObject(link.target) ||\n      link.source.visible === false ||\n      link.target.visible === false\n    )\n      return;\n\n    const x1 = (link._x1 ?? link.source.x) as number;\n    const y1 = (link._y1 ?? link.source.y) as number;\n    const x2 = (link._x2 ?? link.target.x) as number;\n    const y2 = (link._y2 ?? link.target.y) as number;\n    const cx = link._cx ?? 0;\n    const cy = link._cy ?? 0;\n\n    return curve\n      ? hitTestQuadratic(pointerX, pointerY, x1, y1, cx, cy, x2, y2, linkHoverExtraZone)\n        ? link.index\n        : undefined\n      : isNearLink(pointerX, pointerY, x1, y1, x2, y2, linkHoverExtraZone)\n        ? link.index\n        : undefined;\n  });\n}\n\nfunction isNearLink(\n  px: number,\n  py: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n  threshold = 2,\n) {\n  const A = px - x1;\n  const B = py - y1;\n  const C = x2 - x1;\n  const D = y2 - y1;\n\n  const dot = A * C + B * D;\n  const lenSq = C * C + D * D;\n  let param = -1;\n\n  if (lenSq !== 0) {\n    param = dot / lenSq;\n  }\n\n  let xx, yy;\n\n  if (param < 0) {\n    xx = x1;\n    yy = y1;\n  } else if (param > 1) {\n    xx = x2;\n    yy = y2;\n  } else {\n    xx = x1 + param * C;\n    yy = y1 + param * D;\n  }\n\n  const dx = px - xx;\n  const dy = py - yy;\n\n  return Math.sqrt(dx * dx + dy * dy) <= threshold;\n}\n\nfunction hitTestQuadratic(\n  px: number,\n  py: number,\n  x0: number,\n  y0: number,\n  xc: number,\n  yc: number,\n  x2: number,\n  y2: number,\n  tol: number,\n): boolean {\n  const bb = bezierBBox(x0, y0, xc, yc, x2, y2);\n  if (px < bb.minX - tol || px > bb.maxX + tol || py < bb.minY - tol || py > bb.maxY + tol) {\n    return false;\n  }\n\n  const chord = Math.hypot(x2 - x0, y2 - y0);\n  const contLen = Math.hypot(xc - x0, yc - y0) + Math.hypot(x2 - xc, y2 - yc);\n  const approxLen = (chord + contLen) / 2;\n  const steps = Math.max(16, Math.ceil(approxLen / 1));\n\n  const tol2 = tol * tol;\n  for (let i = 0; i <= steps; i++) {\n    const t = i / steps;\n    const mt = 1 - t;\n    const x = mt * mt * x0 + 2 * mt * t * xc + t * t * x2;\n    const y = mt * mt * y0 + 2 * mt * t * yc + t * t * y2;\n    const dx = px - x;\n    const dy = py - y;\n    if (dx * dx + dy * dy <= tol2) return true;\n  }\n  return false;\n}\n\nfunction bezierBBox(\n  x0: number,\n  y0: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n): { minX: number; maxX: number; minY: number; maxY: number } {\n  function extrema(p0: number, p1: number, p2: number): number[] {\n    const denom = p0 - 2 * p1 + p2;\n    if (denom === 0) return [];\n    const t = (p0 - p1) / denom;\n    return t > 0 && t < 1 ? [t] : [];\n  }\n\n  const ts = [...extrema(x0, x1, x2), ...extrema(y0, y1, y2), 0, 1];\n\n  let maxX = -Infinity,\n    maxY = -Infinity,\n    minX = Infinity,\n    minY = Infinity;\n\n  for (const t of ts) {\n    const mt = 1 - t;\n    const x = mt * mt * x0 + 2 * mt * t * x1 + t * t * x2;\n    const y = mt * mt * y0 + 2 * mt * t * y1 + t * t * y2;\n    if (x < minX) minX = x;\n    if (x > maxX) maxX = x;\n    if (y < minY) minY = y;\n    if (y > maxY) maxY = y;\n  }\n\n  return { minX, minY, maxX, maxY };\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,17 @@
+import '../constants/force-settings.js';
+import '../constants/graph-settings.js';
+import '../constants/highlight-settings.js';
+import '../constants/link-settings.js';
+import '../constants/node-settings.js';
 import '@krainovsd/js-helpers';
 import 'd3-array';
 import { calculateLinkPositionByNode } from '../lib/utils/calculate-link-position-by-node.js';
-import { getParticlePosition } from '../lib/utils/get-particle-position.js';
+import { getParticlePosition, approximateQuadraticBezierLength } from '../lib/utils/get-particle-position.js';
 import { linkFade, linkHighlight } from '../lib/utils/link-highlight.js';
+import { calculateCurveLinkPositionByNode } from '../lib/utils/calculate-curve-link-position-by-node.js';
 
 function getDrawLink() {
-    return function drawLink(link) {
+    return function drawLink(link, index) {
         if (!this.context ||
             typeof link.source !== "object" ||
             typeof link.target !== "object" ||
@@ -20,8 +26,7 @@ function getDrawLink() {
             return;
         if (!link.source._visible && !link.target._visible)
             return;
-        const id = `${link.target.id}${link.source.id}`;
-        const linkOptions = this.linkOptionsCache[id];
+        const linkOptions = this.linkOptionsCache[index];
         if (!linkOptions)
             return;
         if (linkOptions.drawLink) {
@@ -36,10 +41,12 @@ function getDrawLink() {
         let arrowSize = linkOptions.arrowSize;
         let arrowBorderWidth = linkOptions.arrowBorderWidth;
         let arrowBorderColor = linkOptions.arrowBorderColor;
+        const currentNodeHighlighted = this.highlightedNode &&
+            (this.highlightedNode.id == link.source.id || this.highlightedNode.id == link.target.id);
         /** Highlight */
         if (this.highlightedNeighbors && this.highlightedNode) {
             /** By Node Not Highlight */
-            if (this.highlightedNode.id != link.source.id && this.highlightedNode.id != link.target.id) {
+            if (!currentNodeHighlighted) {
                 const fadeOptions = linkFade({
                     arrow: this.linkSettings.arrow,
                     arrowByHighlight: this.linkSettings.arrowByHighlight,
@@ -73,9 +80,10 @@ function getDrawLink() {
                 arrowBorderColor = highlightOptions.arrowBorderColor;
             }
         }
+        const currentLinkHighlighted = this.highlightedLink === link;
         if (this.highlightedNeighbors && this.highlightedLink) {
             /** By Link Not Highlight */
-            if (this.highlightedLink !== link) {
+            if (!currentLinkHighlighted) {
                 const fadeOptions = linkFade({
                     arrow: this.linkSettings.arrow,
                     arrowByHighlight: this.linkSettings.arrowByHighlight,
@@ -119,99 +127,129 @@ function getDrawLink() {
         let yStart = link.source.y;
         let xEnd = link.target.x;
         let yEnd = link.target.y;
+        let xControl = 0;
+        let yControl = 0;
+        let xEndArrow = xEnd;
+        let yEndArrow = yEnd;
         let linkDistance = 0;
-        if (this.linkSettings.prettyDraw ||
-            this.linkSettings.particleFlexSpeed ||
-            (this.linkSettings.arrow && arrowAlpha > 0)) {
-            const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
-            const position = calculateLinkPositionByNode(link, isHasArrow ? arrowSize : 0);
-            if (position) {
-                xStart = position.x1;
-                xEnd = position.x2;
-                yStart = position.y1;
-                yEnd = position.y2;
+        const isHasArrow = this.linkSettings.arrow && arrowAlpha > 0;
+        if (!this.linkSettings.curve) {
+            if (this.linkSettings.prettyDraw ||
+                (this.linkSettings.arrow && arrowAlpha > 0) ||
+                (this.particles && (currentNodeHighlighted || currentLinkHighlighted))) {
+                const position = calculateLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, isHasArrow ? arrowSize : 0);
+                xStart = position.xStart;
+                xEnd = position.xEnd;
+                yStart = position.yStart;
+                yEnd = position.yEnd;
+                xEndArrow = position.xEndArrow;
+                yEndArrow = position.yEndArrow;
                 linkDistance = position.distance;
             }
+            link._x1 = xStart;
+            link._y1 = yStart;
+            link._x2 = xEnd;
+            link._y2 = yEnd;
+            link._ax = xEndArrow;
+            link._ay = yEndArrow;
+            this.context.moveTo(xStart, yStart);
+            this.context.lineTo(xEnd, yEnd);
+            this.context.stroke();
+        }
+        else {
+            const position = calculateCurveLinkPositionByNode(xStart, yStart, xEnd, yEnd, link.source, link.target, link._groupIndex ?? 0, isHasArrow ? arrowSize : 0);
+            xStart = position.xStart;
+            yStart = position.yStart;
+            xEnd = position.xEnd;
+            yEnd = position.yEnd;
+            xControl = position.xControl;
+            yControl = position.yControl;
+            xEndArrow = position.xEndArrow;
+            yEndArrow = position.yEndArrow;
+            link._x1 = position.xStart;
+            link._y1 = position.yStart;
+            link._x2 = position.xEnd;
+            link._y2 = position.yEnd;
+            link._cx = position.xControl;
+            link._cy = position.yControl;
+            link._ax = position.xEndArrow;
+            link._ay = position.yEndArrow;
+            linkDistance = approximateQuadraticBezierLength(position.xStart, position.yStart, position.xControl, position.yControl, position.xEnd, position.yEnd);
+            this.context.beginPath();
+            this.context.moveTo(position.xStart, position.yStart);
+            this.context.quadraticCurveTo(position.xControl, position.yControl, position.xEnd, position.yEnd);
+            this.context.setLineDash([]);
+            // if (isDashed) {
+            // this.context.setLineDash([10, 5]);
+            // }
+            this.context.stroke();
         }
-        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;
+        if (this.linkSettings.particles && (currentLinkHighlighted || currentNodeHighlighted)) {
+            const speed = (1 / this.linkSettings.particleSpeedByDistance) * (1 + 0.5);
+            if (!this.particles[index]) {
+                const particleCount = Math.max(1, Math.floor(linkDistance / this.linkSettings.particleCountByDistance));
                 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;
+                this.particles[index] = 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();
-                        if (linkOptions.particleBorderWidth > 0) {
-                            this.context.stroke();
-                        }
-                    }
+            this.particles[index].forEach((particle, _, particles) => {
+                if (!this.context)
+                    return;
+                getParticlePosition({
+                    distance: linkDistance,
+                    particle,
+                    totalCount: particles.length,
+                    xEnd,
+                    xStart,
+                    yEnd,
+                    yStart,
+                    xControl,
+                    yControl,
+                    speed,
                 });
-            }
+                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();
+                    if (linkOptions.particleBorderWidth > 0) {
+                        this.context.stroke();
+                    }
+                }
+            });
         }
         /** Arrow */
         if (this.linkSettings.arrow && arrowAlpha > 0) {
+            let angle = 0;
+            if (!this.linkSettings.curve) {
+                angle = Math.atan2(yEndArrow - yStart, xEndArrow - xStart);
+            }
+            else {
+                const tangentX = 2 * (xEndArrow - xControl);
+                const tangentY = 2 * (yEndArrow - yControl);
+                if (Math.abs(tangentX) < 0.001 && Math.abs(tangentY) < 0.001) {
+                    angle = Math.atan2(yEndArrow - yControl, xEndArrow - xControl);
+                }
+                else {
+                    angle = Math.atan2(tangentY, tangentX);
+                }
+            }
             this.context.beginPath();
             this.context.globalAlpha = arrowAlpha;
             this.context.strokeStyle = arrowBorderColor;
             this.context.lineWidth = arrowBorderWidth;
             this.context.fillStyle = arrowColor;
-            const angle = Math.atan2(yEnd - yStart, xEnd - xStart);
-            this.context.moveTo(xEnd, yEnd);
-            this.context.lineTo(xEnd - arrowSize * Math.cos(angle - Math.PI / 6), yEnd - arrowSize * Math.sin(angle - Math.PI / 6));
-            this.context.lineTo(xEnd - arrowSize * Math.cos(angle + Math.PI / 6), yEnd - arrowSize * Math.sin(angle + Math.PI / 6));
+            this.context.moveTo(xEndArrow, yEndArrow);
+            this.context.lineTo(xEndArrow - arrowSize * Math.cos(angle - Math.PI / 6), yEndArrow - arrowSize * Math.sin(angle - Math.PI / 6));
+            this.context.lineTo(xEndArrow - arrowSize * Math.cos(angle + Math.PI / 6), yEndArrow - arrowSize * Math.sin(angle + Math.PI / 6));
             this.context.closePath();
             this.context.fill();
             if (arrowBorderWidth > 0) {