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

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

@@ -1 +1 @@
-{"version":3,"file":"init-zoom.js","sources":["../../../../../src/module/GraphCanvas/slices/init-zoom.ts"],"sourcesContent":["import { isArray } from \"@krainovsd/js-helpers\";\nimport { select as d3Select } from \"d3-selection\";\nimport { ZoomTransform, zoom } from \"d3-zoom\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport type { ZoomEventInterface } from \"../types\";\n\nexport function initZoom<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>, currentZoom?: ZoomTransform) {\n  if (!this.area) throw new Error(\"bad init data\");\n\n  const zoomInstance = zoom<HTMLCanvasElement, unknown>()\n    .scaleExtent(this.graphSettings.zoomExtent)\n    .on(\"zoom\", (event: ZoomEventInterface) => {\n      this.listeners.onZoom?.call?.(this, event);\n      this.areaTransform = event.transform;\n      this.linkOptionsCache = {};\n      this.nodeOptionsCache = {};\n\n      if (!this.simulationWorking && !this.highlightWorking)\n        requestAnimationFrame(() => this.draw());\n    });\n\n  if (this.graphSettings.translateExtentEnable) {\n    const coefficient = this.graphSettings.translateExtentCoefficient;\n    const [coefficientX, coefficientY] = isArray(coefficient)\n      ? coefficient\n      : [coefficient, coefficient];\n\n    const [\n      [minX = -this.width * coefficientX, minY = -this.height * coefficientY],\n      [maxX = this.width * coefficientX, maxY = this.height * coefficientY],\n    ] = this.graphSettings.translateExtent;\n\n    zoomInstance.translateExtent([\n      [minX, minY],\n      [maxX, maxY],\n    ]);\n  }\n\n  d3Select(this.area).call(zoomInstance).on(\"dblclick.zoom\", null);\n\n  const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;\n  this.areaTransform = new ZoomTransform(\n    zoomInitial?.k ?? 1,\n    zoomInitial?.x ?? this.width / 2,\n    zoomInitial?.y ?? this.height / 2,\n  );\n  zoom<HTMLCanvasElement, unknown>().transform(d3Select(this.area), this.areaTransform);\n}\n"],"names":["d3Select"],"mappings":";;;;AAMM,SAAU,QAAQ,CAGiB,WAA2B,EAAA;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC;IAEhD,MAAM,YAAY,GAAG,IAAI;AACtB,SAAA,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;AACzC,SAAA,EAAE,CAAC,MAAM,EAAE,CAAC,KAAyB,KAAI;AACxC,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,CAAC;AAC1C,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS;AACpC,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;AAC1B,QAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;QAE1B,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YACnD,qBAAqB,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,KAAC,CAAC;AAEJ,IAAA,IAAI,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC5C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,0BAA0B;QACjE,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,OAAO,CAAC,WAAW;AACtD,cAAE;AACF,cAAE,CAAC,WAAW,EAAE,WAAW,CAAC;QAE9B,MAAM,CACJ,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,EACvE,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,EACtE,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe;QAEtC,YAAY,CAAC,eAAe,CAAC;YAC3B,CAAC,IAAI,EAAE,IAAI,CAAC;YACZ,CAAC,IAAI,EAAE,IAAI,CAAC;AACb,SAAA,CAAC;;AAGJ,IAAAA,MAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC;IAEhE,MAAM,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,WAAW;AACjE,IAAA,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CACpC,WAAW,EAAE,CAAC,IAAI,CAAC,EACnB,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAChC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAClC;AACD,IAAA,IAAI,EAA8B,CAAC,SAAS,CAACA,MAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC;AACvF;;;;"}
+{"version":3,"file":"init-zoom.js","sources":["../../../../../src/module/GraphCanvas/slices/init-zoom.ts"],"sourcesContent":["import { isArray } from \"@krainovsd/js-helpers\";\nimport { select as d3Select } from \"d3-selection\";\nimport { ZoomTransform, zoom } from \"d3-zoom\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport type { ZoomEventInterface } from \"../types\";\nimport { updateLinkCache } from \"./update-link-cache\";\nimport { updateNodeCache } from \"./update-node-cache\";\n\nexport function initZoom<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>, currentZoom?: ZoomTransform) {\n  if (!this.area) throw new Error(\"bad init data\");\n\n  const zoomInstance = zoom<HTMLCanvasElement, unknown>()\n    .scaleExtent(this.graphSettings.zoomExtent)\n    .on(\"zoom\", (event: ZoomEventInterface) => {\n      this.listeners.onZoom?.call?.(this, event);\n      this.areaTransform = event.transform;\n      updateLinkCache.call<\n        GraphCanvas<NodeData, LinkData>,\n        Parameters<typeof updateLinkCache>,\n        ReturnType<typeof updateLinkCache>\n      >(this);\n      updateNodeCache.call<\n        GraphCanvas<NodeData, LinkData>,\n        Parameters<typeof updateNodeCache>,\n        ReturnType<typeof updateNodeCache>\n      >(this);\n\n      if (!this.simulationWorking && !this.highlightWorking)\n        requestAnimationFrame(() => this.draw());\n    });\n\n  if (this.graphSettings.translateExtentEnable) {\n    const coefficient = this.graphSettings.translateExtentCoefficient;\n    const [coefficientX, coefficientY] = isArray(coefficient)\n      ? coefficient\n      : [coefficient, coefficient];\n\n    const [\n      [minX = -this.width * coefficientX, minY = -this.height * coefficientY],\n      [maxX = this.width * coefficientX, maxY = this.height * coefficientY],\n    ] = this.graphSettings.translateExtent;\n\n    zoomInstance.translateExtent([\n      [minX, minY],\n      [maxX, maxY],\n    ]);\n  }\n\n  d3Select(this.area).call(zoomInstance).on(\"dblclick.zoom\", null);\n\n  const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;\n  this.areaTransform = new ZoomTransform(\n    zoomInitial?.k ?? 1,\n    zoomInitial?.x ?? this.width / 2,\n    zoomInitial?.y ?? this.height / 2,\n  );\n  zoom<HTMLCanvasElement, unknown>().transform(d3Select(this.area), this.areaTransform);\n}\n"],"names":["d3Select"],"mappings":";;;;;;AAQM,SAAU,QAAQ,CAGiB,WAA2B,EAAA;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC;IAEhD,MAAM,YAAY,GAAG,IAAI;AACtB,SAAA,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU;AACzC,SAAA,EAAE,CAAC,MAAM,EAAE,CAAC,KAAyB,KAAI;AACxC,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,CAAC;AAC1C,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS;AACpC,QAAA,eAAe,CAAC,IAAI,CAIlB,IAAI,CAAC;AACP,QAAA,eAAe,CAAC,IAAI,CAIlB,IAAI,CAAC;QAEP,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,gBAAgB;YACnD,qBAAqB,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,KAAC,CAAC;AAEJ,IAAA,IAAI,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE;AAC5C,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,0BAA0B;QACjE,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,OAAO,CAAC,WAAW;AACtD,cAAE;AACF,cAAE,CAAC,WAAW,EAAE,WAAW,CAAC;QAE9B,MAAM,CACJ,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,YAAY,EAAE,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,EACvE,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,EACtE,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe;QAEtC,YAAY,CAAC,eAAe,CAAC;YAC3B,CAAC,IAAI,EAAE,IAAI,CAAC;YACZ,CAAC,IAAI,EAAE,IAAI,CAAC;AACb,SAAA,CAAC;;AAGJ,IAAAA,MAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC;IAEhE,MAAM,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,WAAW;AACjE,IAAA,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CACpC,WAAW,EAAE,CAAC,IAAI,CAAC,EACnB,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAChC,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAClC;AACD,IAAA,IAAI,EAA8B,CAAC,SAAS,CAACA,MAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC;AACvF;;;;"}

package/lib/esm/module/GraphCanvas/slices/update-link-cache.js

@@ -0,0 +1,19 @@
+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 { extractLinkPointIds } from '../lib/utils/extract-link-point-ids.js';
+
+function updateLinkCache() {
+    this.linkOptionsCache = {};
+    for (let i = 0; i < this.links.length; i++) {
+        const link = this.links[i];
+        const { sourceId, targetId } = extractLinkPointIds(link);
+        const linkOptions = linkIterationExtractor(link, i, this.links, this, this.linkSettings.options ?? {}, linkOptionsGetter);
+        const id = `${targetId}${sourceId}`;
+        this.linkOptionsCache[id] = linkOptions;
+    }
+}
+
+export { updateLinkCache };
+//# sourceMappingURL=update-link-cache.js.map

package/lib/esm/module/GraphCanvas/slices/update-link-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-link-cache.js","sources":["../../../../../src/module/GraphCanvas/slices/update-link-cache.ts"],"sourcesContent":["import type { GraphCanvas } from \"../GraphCanvas\";\nimport { extractLinkPointIds, linkIterationExtractor, linkOptionsGetter } from \"../lib\";\n\nexport function updateLinkCache<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  this.linkOptionsCache = {};\n\n  for (let i = 0; i < this.links.length; i++) {\n    const link = this.links[i];\n    const { sourceId, targetId } = extractLinkPointIds(link);\n\n    const linkOptions = linkIterationExtractor(\n      link,\n      i,\n      this.links,\n      this,\n      this.linkSettings.options ?? {},\n      linkOptionsGetter,\n    );\n    const id = `${targetId}${sourceId}`;\n    this.linkOptionsCache[id] = linkOptions;\n  }\n}\n"],"names":[],"mappings":";;;;;;SAGgB,eAAe,GAAA;AAI7B,IAAA,IAAI,CAAC,gBAAgB,GAAG,EAAE;AAE1B,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1B,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC;QAExD,MAAM,WAAW,GAAG,sBAAsB,CACxC,IAAI,EACJ,CAAC,EACD,IAAI,CAAC,KAAK,EACV,IAAI,EACJ,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,EAAE,EAC/B,iBAAiB,CAClB;AACD,QAAA,MAAM,EAAE,GAAG,CAAA,EAAG,QAAQ,CAAG,EAAA,QAAQ,EAAE;AACnC,QAAA,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,GAAG,WAAW;;AAE3C;;;;"}

package/lib/esm/module/GraphCanvas/slices/update-node-cache.js

@@ -0,0 +1,136 @@
+import { nodeOptionsGetter, nodeRadiusGetter, nodeSizeGetter } from '../lib/settings/node-settings-getter.js';
+import '@krainovsd/js-helpers';
+import 'd3-array';
+import { nodeIterationExtractor } from '../lib/utils/node-iteration-extractor.js';
+import { getTextLines } from './draw-text.js';
+
+function updateNodeCache() {
+    this.nodeOptionsCache = {};
+    if (!this.context)
+        return;
+    for (let i = 0; i < this.nodes.length; i++) {
+        const node = this.nodes[i];
+        const nodeOptions = nodeIterationExtractor(node, i, this.nodes, this, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+        const radius = nodeOptions.shape === "circle"
+            ? nodeRadiusGetter({
+                radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                radiusInitial: nodeOptions.radius,
+                radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,
+                radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,
+                radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,
+                radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,
+                radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,
+                linkCount: node.linkCount,
+            })
+            : nodeOptions.radius;
+        let width = nodeOptions.width;
+        let height = nodeOptions.height;
+        let labelSize = nodeOptions.labelSize;
+        if (nodeOptions.shape === "square") {
+            const size = nodeSizeGetter({
+                heightInitial: nodeOptions.height,
+                widthInitial: nodeOptions.width,
+                linkCount: node.linkCount,
+                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
+            });
+            width = size.width;
+            height = size.height;
+        }
+        if (nodeOptions.shape === "text") {
+            width = nodeOptions.width;
+            const size = nodeSizeGetter({
+                heightInitial: nodeOptions.height,
+                widthInitial: width,
+                linkCount: node.linkCount,
+                sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,
+                sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,
+                sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,
+                sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,
+                sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,
+            });
+            labelSize *= size.additionalSizeCoefficient;
+        }
+        /** label in not text shape */
+        if (nodeOptions.shape !== "text" && nodeOptions.label) {
+            this.context.font = `${nodeOptions.labelStyle} normal ${nodeOptions.labelWeight} ${nodeOptions.labelSize}px ${nodeOptions.labelFont}`;
+            this.context.fillStyle = nodeOptions.labelColor;
+            this.context.textAlign = nodeOptions.labelAlign;
+            if (nodeOptions.labelWidth == undefined ||
+                this.context.measureText(nodeOptions.label).width <= nodeOptions.labelWidth) {
+                this.cachedNodeLabel[node.id] = [nodeOptions.label];
+            }
+            const { lines } = getTextLines({
+                context: this.context,
+                maxWidth: nodeOptions.labelWidth,
+                text: nodeOptions.label,
+                textAlign: nodeOptions.labelAlign,
+                textColor: nodeOptions.labelColor,
+                textFont: nodeOptions.labelFont,
+                textSize: nodeOptions.labelSize,
+                textStyle: nodeOptions.labelStyle,
+                textWeight: nodeOptions.labelWeight,
+            });
+            this.cachedNodeLabel[node.id] = lines;
+        }
+        /** label in text shape */
+        if (nodeOptions.shape === "text" && nodeOptions.label) {
+            const textInfo = getTextLines({
+                context: this.context,
+                text: nodeOptions.label,
+                textAlign: nodeOptions.labelAlign,
+                textColor: nodeOptions.labelColor,
+                textFont: nodeOptions.labelFont,
+                textSize: labelSize,
+                maxWidth: nodeOptions.labelWidth,
+                textStyle: nodeOptions.labelStyle,
+                textWeight: nodeOptions.textWeight,
+            });
+            const textNodeParameters = [textInfo.currentMaxSize, labelSize];
+            const lines = textInfo.lines;
+            const textSizeCoefficient = labelSize / textNodeParameters[1];
+            const maxSize = textNodeParameters[0] * textSizeCoefficient;
+            height =
+                lines.length * labelSize +
+                    (lines.length - 1) * nodeOptions.labelGap +
+                    nodeOptions.labelYPadding;
+            width = maxSize + nodeOptions.labelXPadding;
+            this.cachedNodeLabel[node.id] = lines;
+        }
+        nodeOptions.width = width;
+        nodeOptions.height = height;
+        nodeOptions.radius = radius;
+        nodeOptions.labelSize = labelSize;
+        /** text */
+        if (nodeOptions.text) {
+            this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;
+            this.context.fillStyle = nodeOptions.textColor;
+            this.context.textAlign = nodeOptions.textAlign;
+            if (nodeOptions.textWidth == undefined ||
+                this.context.measureText(nodeOptions.text).width <= nodeOptions.textWidth) {
+                this.cachedNodeText[node.id] = [nodeOptions.text];
+            }
+            const { lines } = getTextLines({
+                context: this.context,
+                maxWidth: nodeOptions.textWidth,
+                text: nodeOptions.text,
+                textAlign: nodeOptions.textAlign,
+                textColor: nodeOptions.textColor,
+                textFont: nodeOptions.textFont,
+                textSize: nodeOptions.textSize,
+                textStyle: nodeOptions.textStyle,
+                textWeight: nodeOptions.textWeight,
+            });
+            this.cachedNodeText[node.id] = lines;
+        }
+        this.nodeOptionsCache[node.id] = nodeOptions;
+    }
+}
+
+export { updateNodeCache };
+//# sourceMappingURL=update-node-cache.js.map

package/lib/esm/module/GraphCanvas/slices/update-node-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-node-cache.js","sources":["../../../../../src/module/GraphCanvas/slices/update-node-cache.ts"],"sourcesContent":["import type { GraphCanvas } from \"../GraphCanvas\";\nimport {\n  nodeIterationExtractor,\n  nodeOptionsGetter,\n  nodeRadiusGetter,\n  nodeSizeGetter,\n} from \"../lib\";\nimport { getTextLines } from \"./draw-text\";\n\nexport function updateNodeCache<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  this.nodeOptionsCache = {};\n  if (!this.context) return;\n\n  for (let i = 0; i < this.nodes.length; i++) {\n    const node = this.nodes[i];\n    const nodeOptions = nodeIterationExtractor(\n      node,\n      i,\n      this.nodes,\n      this,\n      this.nodeSettings.options ?? {},\n      nodeOptionsGetter,\n    );\n    const radius =\n      nodeOptions.shape === \"circle\"\n        ? nodeRadiusGetter({\n            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,\n            radiusInitial: nodeOptions.radius,\n            radiusIncrementByStep: this.nodeSettings.nodeRadiusIncrementByStep,\n            radiusLinkCountForStep: this.nodeSettings.nodeRadiusLinkCountForStep,\n            radiusMaxLinearSteps: this.nodeSettings.nodeRadiusMaxLinearSteps,\n            radiusLogFactor: this.nodeSettings.nodeRadiusLogFactor,\n            radiusLinkCountDividerForLog: this.nodeSettings.nodeRadiusLinkCountDividerForLog,\n            linkCount: node.linkCount,\n          })\n        : nodeOptions.radius;\n\n    let width = nodeOptions.width;\n    let height = nodeOptions.height;\n    let labelSize = nodeOptions.labelSize;\n    if (nodeOptions.shape === \"square\") {\n      const size = nodeSizeGetter({\n        heightInitial: nodeOptions.height,\n        widthInitial: nodeOptions.width,\n        linkCount: node.linkCount,\n        sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n        sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,\n        sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,\n        sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,\n        sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,\n        sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,\n      });\n      width = size.width;\n      height = size.height;\n    }\n    if (nodeOptions.shape === \"text\") {\n      width = nodeOptions.width;\n      const size = nodeSizeGetter({\n        heightInitial: nodeOptions.height,\n        widthInitial: width,\n        linkCount: node.linkCount,\n        sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n        sizeIncrementByStep: this.nodeSettings.nodeSizeIncrementByStep,\n        sizeLinkCountForStep: this.nodeSettings.nodeSizeLinkCountForStep,\n        sizeMaxLinearSteps: this.nodeSettings.nodeSizeMaxLinearSteps,\n        sizeLogFactor: this.nodeSettings.nodeSizeLogFactor,\n        sizeLinkCountDividerForLog: this.nodeSettings.nodeSizeLinkCountDividerForLog,\n      });\n\n      labelSize *= size.additionalSizeCoefficient;\n    }\n    /** label in not text shape */\n    if (nodeOptions.shape !== \"text\" && nodeOptions.label) {\n      this.context.font = `${nodeOptions.labelStyle} normal ${nodeOptions.labelWeight} ${nodeOptions.labelSize}px ${nodeOptions.labelFont}`;\n      this.context.fillStyle = nodeOptions.labelColor;\n      this.context.textAlign = nodeOptions.labelAlign;\n\n      if (\n        nodeOptions.labelWidth == undefined ||\n        this.context.measureText(nodeOptions.label).width <= nodeOptions.labelWidth\n      ) {\n        this.cachedNodeLabel[node.id] = [nodeOptions.label];\n      }\n\n      const { lines } = getTextLines({\n        context: this.context,\n        maxWidth: nodeOptions.labelWidth,\n        text: nodeOptions.label,\n        textAlign: nodeOptions.labelAlign,\n        textColor: nodeOptions.labelColor,\n        textFont: nodeOptions.labelFont,\n        textSize: nodeOptions.labelSize,\n        textStyle: nodeOptions.labelStyle,\n        textWeight: nodeOptions.labelWeight,\n      });\n      this.cachedNodeLabel[node.id] = lines;\n    }\n    /** label in text shape */\n    if (nodeOptions.shape === \"text\" && nodeOptions.label) {\n      const textInfo = getTextLines({\n        context: this.context,\n        text: nodeOptions.label,\n        textAlign: nodeOptions.labelAlign,\n        textColor: nodeOptions.labelColor,\n        textFont: nodeOptions.labelFont,\n        textSize: labelSize,\n        maxWidth: nodeOptions.labelWidth,\n        textStyle: nodeOptions.labelStyle,\n        textWeight: nodeOptions.textWeight,\n      });\n      const textNodeParameters = [textInfo.currentMaxSize, labelSize];\n      const lines = textInfo.lines;\n      const textSizeCoefficient = labelSize / textNodeParameters[1];\n      const maxSize = textNodeParameters[0] * textSizeCoefficient;\n\n      height =\n        lines.length * labelSize +\n        (lines.length - 1) * nodeOptions.labelGap +\n        nodeOptions.labelYPadding;\n\n      width = maxSize + nodeOptions.labelXPadding;\n      this.cachedNodeLabel[node.id] = lines;\n    }\n\n    nodeOptions.width = width;\n    nodeOptions.height = height;\n    nodeOptions.radius = radius;\n    nodeOptions.labelSize = labelSize;\n\n    /** text */\n    if (nodeOptions.text) {\n      this.context.font = `${nodeOptions.textStyle} normal ${nodeOptions.textWeight} ${nodeOptions.textSize}px ${nodeOptions.textFont}`;\n      this.context.fillStyle = nodeOptions.textColor;\n      this.context.textAlign = nodeOptions.textAlign;\n\n      if (\n        nodeOptions.textWidth == undefined ||\n        this.context.measureText(nodeOptions.text).width <= nodeOptions.textWidth\n      ) {\n        this.cachedNodeText[node.id] = [nodeOptions.text];\n      }\n\n      const { lines } = getTextLines({\n        context: this.context,\n        maxWidth: nodeOptions.textWidth,\n        text: nodeOptions.text,\n        textAlign: nodeOptions.textAlign,\n        textColor: nodeOptions.textColor,\n        textFont: nodeOptions.textFont,\n        textSize: nodeOptions.textSize,\n        textStyle: nodeOptions.textStyle,\n        textWeight: nodeOptions.textWeight,\n      });\n      this.cachedNodeText[node.id] = lines;\n    }\n\n    this.nodeOptionsCache[node.id] = nodeOptions;\n  }\n}\n"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -25,12 +25,6 @@ interface NodeInterface<NodeData extends Record<string, unknown>> extends Simula
 type NodeShape = "circle" | "square" | "text";
 type TextStyleEnum = "normal" | "italic" | "oblique";
 type CachedNodeTextInterface = Record<string | number, string[] | undefined>;
-type CachedTextNodeParametersMap = Record<string | number, [number, number] | undefined>;
-/**
- * 1. Initial max size of text
- * 2. Initial size of text
- */
-type CachedTextNodeParametersInterface = [number, number];
 
 interface LinkInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> extends SimulationLinkDatum<NodeInterface<NodeData>> {
     data?: LinkData;
@@ -177,7 +171,6 @@ type HighlightByLinkForArrowSettingsInterface = {
 };
 
 type LinkSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
-    cacheOptions?: boolean;
     prettyDraw?: boolean;
     arrow?: boolean;
     arrowByHighlight?: boolean;
@@ -236,13 +229,18 @@ type ListenersInterface<NodeData extends Record<string, unknown>, LinkData exten
 };
 
 type NodeSettingsInterface<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>> = {
-    cacheOptions?: boolean;
     nodeRadiusFlexible?: boolean;
-    nodeRadiusCoefficient?: number;
-    nodeRadiusFactor?: number;
+    nodeRadiusLinkCountForStep?: number;
+    nodeRadiusIncrementByStep?: number;
+    nodeRadiusMaxLinearSteps?: number;
+    nodeRadiusLogFactor?: number;
+    nodeRadiusLinkCountDividerForLog?: number;
     nodeSizeFlexible?: boolean;
-    nodeSizeCoefficient?: number;
-    nodeSizeFactor?: number;
+    nodeSizeLinkCountForStep?: number;
+    nodeSizeIncrementByStep?: number;
+    nodeSizeMaxLinearSteps?: number;
+    nodeSizeLogFactor?: number;
+    nodeSizeLinkCountDividerForLog?: number;
     textNodeDebug?: boolean;
     textScaleMin?: number;
     textScaleMax?: number;
@@ -335,11 +333,10 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
     protected simulation: GraphCanvasSimulation<NodeData, LinkData> | undefined;
     protected areaTransform: ZoomTransform;
     protected areaRect: DOMRect | undefined;
-    protected draw: (this: GraphCanvas<NodeData, LinkData>) => void;
+    protected draw: (this: GraphCanvas<NodeData, LinkData>, recursive?: boolean) => void;
     protected eventAbortController: AbortController;
     protected cachedNodeText: CachedNodeTextInterface;
     protected cachedNodeLabel: CachedNodeTextInterface;
-    protected cachedTextNodeParameters: CachedTextNodeParametersMap;
     protected linkOptionsCache: Record<string, Required<LinkOptionsInterface<NodeData, LinkData>>>;
     protected nodeOptionsCache: Record<string, Required<NodeOptionsInterface<NodeData, LinkData>>>;
     protected isDragging: boolean;
@@ -348,16 +345,15 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
     protected highlightedNeighbors: Set<string | number> | null;
     protected highlightProgress: number;
     protected highlightWorking: boolean;
-    protected highlightDrawing: boolean;
     protected get simulationWorking(): boolean;
     constructor({ links, nodes, root, forceSettings, linkSettings, listeners, nodeSettings, graphSettings, highlightSettings, }: GraphCanvasInterface<NodeData, LinkData>);
     get dpi(): number;
     getData(): Pick<GraphCanvasInterface<NodeData, LinkData>, "nodes" | "links">;
-    changeData(options: Pick<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes">, alpha?: number): void;
-    changeSettings(options: Omit<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes" | "listeners">): undefined;
+    changeData(options: Pick<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes">, alpha?: number, clearCache?: boolean): void;
+    changeSettings(options: Omit<Partial<GraphCanvasInterface<NodeData, LinkData>>, "links" | "nodes" | "listeners">, clearCache?: boolean): undefined;
     updateRect(): void;
     updateSize(): void;
-    clearCache(keys?: ("nodeOptionsCache" | "linkOptionsCache" | "cachedNodeText" | "cachedNodeLabel" | "cachedTextNodeParameters")[]): void;
+    clearCache(keys?: ("nodeOptionsCache" | "linkOptionsCache")[]): void;
     tick(): void;
     restart(alpha?: number): void;
     start(): void;
@@ -367,7 +363,7 @@ declare class GraphCanvas<NodeData extends Record<string, unknown>, LinkData ext
     protected clearHTMLElements(): void;
     protected updateSimulation(): void;
     protected clearState(): void;
-    protected updateData(alpha?: number): void;
+    protected updateData(alpha?: number, clearCache?: boolean): void;
     protected init(): void;
 }
 
@@ -389,20 +385,26 @@ declare function nodeTextSizeGetter<NodeData extends Record<string, unknown>, Li
 type NodeRadiusGetterOptions = {
     linkCount: number | undefined;
     radiusFlexible: boolean;
-    radiusCoefficient: number;
-    radiusFactor: number;
     radiusInitial: number;
+    radiusLinkCountForStep: number;
+    radiusIncrementByStep: number;
+    radiusMaxLinearSteps: number;
+    radiusLogFactor: number;
+    radiusLinkCountDividerForLog: number;
 };
-declare function nodeRadiusGetter({ radiusFlexible, radiusInitial, linkCount, radiusCoefficient, radiusFactor, }: NodeRadiusGetterOptions): number;
+declare function nodeRadiusGetter({ radiusFlexible, linkCount, radiusInitial, radiusIncrementByStep, radiusLinkCountDividerForLog, radiusLinkCountForStep, radiusLogFactor, radiusMaxLinearSteps, }: NodeRadiusGetterOptions): number;
 type NodeSizeGetterOptions = {
     linkCount: number | undefined;
     sizeFlexible: boolean;
-    sizeCoefficient: number;
-    sizeFactor: number;
     widthInitial: number;
     heightInitial: number;
+    sizeLinkCountForStep: number;
+    sizeIncrementByStep: number;
+    sizeMaxLinearSteps: number;
+    sizeLogFactor: number;
+    sizeLinkCountDividerForLog: number;
 };
-declare function nodeSizeGetter({ heightInitial, linkCount, sizeCoefficient, sizeFactor, sizeFlexible, widthInitial, }: NodeSizeGetterOptions): {
+declare function nodeSizeGetter({ heightInitial, linkCount, sizeFlexible, widthInitial, sizeIncrementByStep, sizeLinkCountDividerForLog, sizeLinkCountForStep, sizeLogFactor, sizeMaxLinearSteps, }: NodeSizeGetterOptions): {
     width: number;
     height: number;
     additionalSizeCoefficient: number;
@@ -554,15 +556,14 @@ declare function extractLinkPointIds<NodeData extends Record<string, unknown>, L
     targetId: string | number;
 };
 
-declare function getDrawLink<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(): (this: GraphCanvas<NodeData, LinkData>, link: LinkInterface<NodeData, LinkData>, index: number) => void;
+declare function getDrawLink<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(): (this: GraphCanvas<NodeData, LinkData>, link: LinkInterface<NodeData, LinkData>) => void;
 
-declare function getDrawNode<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(nodeRenders: (() => void)[], textRenders: (() => void)[]): (this: GraphCanvas<NodeData, LinkData>, node: NodeInterface<NodeData>, index: number) => void;
+declare function getDrawNode<NodeData extends Record<string, unknown>, LinkData extends Record<string, unknown>>(nodeRenders: (() => void)[], textRenders: (() => void)[]): (this: GraphCanvas<NodeData, LinkData>, node: NodeInterface<NodeData>) => void;
 
 type DrawTextOptions = {
-    id: string | number;
+    lines: string[];
     x: number;
     y: number;
-    text: string;
     textSize: number;
     textStyle: TextStyleEnum;
     textWeight: number;
@@ -571,10 +572,8 @@ type DrawTextOptions = {
     textGap: number;
     textAlign: CanvasTextAlign;
     context: CanvasRenderingContext2D;
-    cachedNodeText: CachedNodeTextInterface;
-    maxWidth?: number;
 };
-declare function drawText({ context, id, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, text, x, y, cachedNodeText, maxWidth, }: DrawTextOptions): void;
+declare function drawText({ context, textAlign, textColor, textFont, textStyle, textGap, textWeight, textSize, x, y, lines, }: DrawTextOptions): void;
 
 declare const COMMON_SETTINGS: {
     nodeRadius: number;
@@ -675,4 +674,4 @@ declare const NODE_OPTIONS_TEXT_CONTROLS: GraphSettingsInputInterface<keyof Node
 declare const NODE_OPTIONS_LABEL_CONTROLS: GraphSettingsInputInterface<keyof NodeOptionsLabelInterface>[];
 
 export { COMMON_SETTINGS, FORCE_CONTROLS, FORCE_SETTINGS, GRAPH_SETTINGS, GraphCanvas, HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS, HIGHLIGHT_BY_LINK_FOR_LABEL_CONTROLS, HIGHLIGHT_BY_LINK_FOR_LINK_CONTROLS, HIGHLIGHT_BY_LINK_FOR_NODE_CONTROLS, HIGHLIGHT_BY_LINK_FOR_TEXT_CONTROLS, HIGHLIGHT_BY_NODE_FOR_ARROW_CONTROLS, HIGHLIGHT_BY_NODE_FOR_LABEL_CONTROLS, HIGHLIGHT_BY_NODE_FOR_LINK_CONTROLS, HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS, HIGHLIGHT_BY_NODE_FOR_TEXT_CONTROLS, HIGHLIGHT_COMMON_CONTROLS, HIGHLIGHT_SETTINGS, LINK_OPTIONS, LINK_OPTIONS_ARROW_CONTROLS, LINK_OPTIONS_LINK_CONTROLS, LINK_OPTIONS_PARTICLE_CONTROLS, LINK_SETTINGS, LINK_SETTINGS_CONTROLS, NODE_OPTIONS, NODE_OPTIONS_LABEL_CONTROLS, NODE_OPTIONS_NODE_CONTROLS, NODE_OPTIONS_TEXT_CONTROLS, NODE_SETTINGS, NODE_SETTINGS_CONTROLS, animationByProgress, calculateLinkPositionByNode, colorGetter, colorToRgb, dragPlaceCoefficientGetter, drawText, extractLinkPointIds, extractRgb, fadeRgb, forceSettingsGetter, getDrawLink, getDrawNode, getParticlePosition, graphSettingsGetter, highlightSettingsGetter, isNodeVisible, isOverlapsNode, linkByPointerGetter, linkFade, linkHighlight, linkIterationExtractor, linkOptionsGetter, linkSettingsGetter, listenersGetter, nodeByPointerGetter, nodeFade, nodeHighlight, nodeIdGetter, nodeIterationExtractor, nodeOptionsGetter, nodeRadiusGetter, nodeSettingsGetter, nodeSizeGetter, nodeTextSizeGetter, pointerGetter, rgbAnimationByProgress };
-export type { CachedNodeTextInterface, CachedTextNodeParametersInterface, CachedTextNodeParametersMap, DragEventInterface, ForceSettingsInterface, GraphCanvasInterface, GraphCanvasSimulation, GraphSettingsInputInterface, GraphSettingsInterface, HighlighCommonSettingsInterface, HighlightByLinkForArrowSettingsInterface, HighlightByLinkForLabelSettingsInterface, HighlightByLinkForLinkSettingsInterface, HighlightByLinkForNodeSettingsInterface, HighlightByLinkForTextSettingsInterface, HighlightByNodeForArrowSettingsInterface, HighlightByNodeForLabelSettingsInterface, HighlightByNodeForLinkSettingsInterface, HighlightByNodeForNodeSettingsInterface, HighlightByNodeForTextSettingsInterface, HighlightSettingsInterface, LinkByPointerGetterOptions, LinkInterface, LinkIterationPropsInterface, LinkIterationPropsNoThisInterface, LinkOptionsArrowInterface, LinkOptionsInterface, LinkOptionsLinkInterface, LinkOptionsParticleInterface, LinkParticle, LinkSettingsInterface, ListenersInterface, NodeByPointerGetterOptions, NodeInterface, NodeIterationPropsInterface, NodeIterationPropsNoThisInterface, NodeOptionsInterface, NodeOptionsLabelInterface, NodeOptionsNodeInterface, NodeOptionsTextInterface, NodeRadiusGetterOptions, NodeSettingsInterface, NodeShape, NodeSizeGetterOptions, RGB, TextStyleEnum, ZoomEventInterface };
+export type { CachedNodeTextInterface, DragEventInterface, ForceSettingsInterface, GraphCanvasInterface, GraphCanvasSimulation, GraphSettingsInputInterface, GraphSettingsInterface, HighlighCommonSettingsInterface, HighlightByLinkForArrowSettingsInterface, HighlightByLinkForLabelSettingsInterface, HighlightByLinkForLinkSettingsInterface, HighlightByLinkForNodeSettingsInterface, HighlightByLinkForTextSettingsInterface, HighlightByNodeForArrowSettingsInterface, HighlightByNodeForLabelSettingsInterface, HighlightByNodeForLinkSettingsInterface, HighlightByNodeForNodeSettingsInterface, HighlightByNodeForTextSettingsInterface, HighlightSettingsInterface, LinkByPointerGetterOptions, LinkInterface, LinkIterationPropsInterface, LinkIterationPropsNoThisInterface, LinkOptionsArrowInterface, LinkOptionsInterface, LinkOptionsLinkInterface, LinkOptionsParticleInterface, LinkParticle, LinkSettingsInterface, ListenersInterface, NodeByPointerGetterOptions, NodeInterface, NodeIterationPropsInterface, NodeIterationPropsNoThisInterface, NodeOptionsInterface, NodeOptionsLabelInterface, NodeOptionsNodeInterface, NodeOptionsTextInterface, NodeRadiusGetterOptions, NodeSettingsInterface, NodeShape, NodeSizeGetterOptions, RGB, TextStyleEnum, ZoomEventInterface };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krainovsd/graph",
-  "version": "0.12.0-beta.2",
+  "version": "0.12.0-beta.4",
   "description": "Krainov graph",
   "type": "module",
   "author": "KrainovSD <denislosev48@gmail.com>",
@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "publish-package": "npm run lint && npm run build && npm publish",
-    "dev": "vite --host",
+    "dev": "vite --host --force",
     "clear": "rm -rf ./lib",
     "build-dev": "vite build",
     "build": "npm run clear && npm run build:types && npm run build:js",
@@ -56,8 +56,12 @@
     "@types/d3-array": "3.2.1",
     "vite": "6.2.1",
     "@types/lodash": "4.17.14",
-    "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "svelte": "5.23.2"
+    "vue-tsc": "3.1.0",
+    "vue": "3.5.14",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@krainovsd/vue-ui": "0.4.0-beta.23",
+    "@krainovsd/vue-icons": "0.1.4",
+    "sass-embedded": "1.81.0"
   },
   "dependencies": {
     "@krainovsd/js-helpers": "^0.16.5",