@krainovsd/graph 0.11.0 → 0.12.0-beta.1

package/lib/cjs/index.cjs

@@ -46,8 +46,6 @@ const GRAPH_SETTINGS = {
     translateExtent: [[], []],
     translateExtentEnable: true,
     translateExtentCoefficient: [3, 3],
-    highlightUpFrames: 5,
-    highlightDownFrames: 5,
     dragPlaceCoefficient: dragPlaceCoefficientGetter,
     zoomInitial: null,
     showDrawTime: true,
@@ -57,6 +55,8 @@ const GRAPH_SETTINGS = {
 const HIGHLIGHT_SETTINGS = {
     highlightByHoverNode: true,
     highlightByHoverLink: true,
+    highlightUpFrames: 5,
+    highlightDownFrames: 5,
     linkHoverExtraZone: 2,
     /** Node */
     highlightByNodeOnlyRoot: true,
@@ -64,7 +64,6 @@ const HIGHLIGHT_SETTINGS = {
     highlightByNodeForNodeColor: null,
     highlightByNodeForNodeSizingAdditional: 0.5,
     highlightByNodeForNodeSizingAdditionalCoefficient: 0.35,
-    highlightByNodeForNodeColorFadingMin: 0.15,
     highlightByNodeForNodeFadingMin: 0.21,
     highlightByNodeForNodeBorderColor: null,
     highlightByNodeForNodeBorderSizingAdditional: 0,
@@ -72,7 +71,6 @@ const HIGHLIGHT_SETTINGS = {
     highlightByLinkForNodeColor: null,
     highlightByLinkForNodeSizingAdditional: 0.5,
     highlightByLinkForNodeSizingAdditionalCoefficient: 0.35,
-    highlightByLinkForNodeColorFadingMin: 0.15,
     highlightByLinkForNodeFadingMin: 0.21,
     highlightByLinkForNodeBorderColor: null,
     highlightByLinkForNodeBorderSizingAdditional: 0,
@@ -1046,9 +1044,10 @@ function nodeFade(opts) {
         /** Color Fading */
         const colorRgb = extractRgb(colorToRgb(color));
         if (colorRgb) {
-            const colorRgbFade = fadeRgb(colorRgb, opts.highlightForNodeColorFadingMin);
+            const colorRgbFade = fadeRgb(colorRgb, opts.highlightForNodeFadingMin);
             const colorFadeAnimation = rgbAnimationByProgress(colorRgb, colorRgbFade, opts.highlightProgress);
             color = `rgb(${colorFadeAnimation.r}, ${colorFadeAnimation.g}, ${colorFadeAnimation.b})`;
+            alpha = opts.nodeOptions.alpha;
         }
     }
     return {
@@ -1557,7 +1556,6 @@ function getDrawNode(nodeRenders, textRenders) {
                     nodeOptions,
                     highlightForLabelFadingMin: this.highlightSettings.highlightByNodeForLabelFadingMin,
                     highlightForNodeColorFading: this.highlightSettings.highlightByNodeForNodeColorFading,
-                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByNodeForNodeColorFadingMin,
                     highlightForNodeFadingMin: this.highlightSettings.highlightByNodeForNodeFadingMin,
                     highlightForTextFadingMin: this.highlightSettings.highlightByNodeForTextFadingMin,
                 });
@@ -1608,7 +1606,6 @@ function getDrawNode(nodeRenders, textRenders) {
                     nodeOptions,
                     highlightForLabelFadingMin: this.highlightSettings.highlightByLinkForLabelFadingMin,
                     highlightForNodeColorFading: this.highlightSettings.highlightByLinkForNodeColorFading,
-                    highlightForNodeColorFadingMin: this.highlightSettings.highlightByLinkForNodeColorFadingMin,
                     highlightForNodeFadingMin: this.highlightSettings.highlightByLinkForNodeFadingMin,
                     highlightForTextFadingMin: this.highlightSettings.highlightByLinkForTextFadingMin,
                 });
@@ -1950,7 +1947,7 @@ function initDraw() {
     function calculateHighlight() {
         this.highlightDrawing = true;
         if (!this.highlightWorking && this.highlightProgress > 0) {
-            const highlightDownStep = 1 / this.graphSettings.highlightDownFrames;
+            const highlightDownStep = 1 / this.highlightSettings.highlightDownFrames;
             this.highlightProgress -= highlightDownStep;
             if (!this.simulationWorking) {
                 return void requestAnimationFrame(() => this.draw());
@@ -1959,7 +1956,7 @@ function initDraw() {
                 return;
         }
         if (this.highlightWorking && this.highlightProgress < 1) {
-            const highlightUpStep = 1 / this.graphSettings.highlightUpFrames;
+            const highlightUpStep = 1 / this.highlightSettings.highlightUpFrames;
             this.highlightProgress += highlightUpStep;
             if (!this.simulationWorking) {
                 return void requestAnimationFrame(() => this.draw());
@@ -2236,9 +2233,7 @@ function initResize() {
             observer.disconnect();
             return;
         }
-        requestAnimationFrame(() => {
-            this.updateSize();
-        });
+        this.updateSize();
     });
     document.addEventListener("scroll", this.updateRect.bind(this), {
         capture: true,
@@ -2552,8 +2547,20 @@ class GraphCanvas {
         this.tick();
     }
     updateRect() {
-        if (this.area)
-            this.areaRect = this.area.getBoundingClientRect();
+        if (!this.area)
+            return;
+        this.areaRect = this.area.getBoundingClientRect();
+    }
+    updateSize() {
+        if (!this.area)
+            return;
+        const { width, height } = this.root.getBoundingClientRect();
+        this.width = width;
+        this.height = height;
+        this.area.width = this.dpi * this.width;
+        this.area.height = this.dpi * this.height;
+        this.areaRect = this.area.getBoundingClientRect();
+        this.draw();
     }
     clearCache(keys) {
         if (!keys) {
@@ -2647,16 +2654,6 @@ class GraphCanvas {
                 .restart();
         }
     }
-    updateSize() {
-        this.clearHTMLElements();
-        initArea.call(this);
-        initDnd.call(this);
-        initZoom.call(this);
-        initResize.call(this);
-        initPointer.call(this);
-        if (!this.simulationWorking && !this.highlightWorking)
-            this.draw();
-    }
     init() {
         initArea.call(this);
         initSimulation.call(this);
@@ -2802,27 +2799,6 @@ const FORCE_CONTROLS = [
     },
 ];
 
-const GRAPH_CONTROLS = [
-    {
-        id: "highlightDownFrames",
-        initialValue: GRAPH_SETTINGS.highlightDownFrames,
-        max: 60,
-        min: 1,
-        step: 1,
-        type: "range",
-        label: "Скорость отмены анимации в кадрах",
-    },
-    {
-        id: "highlightUpFrames",
-        initialValue: GRAPH_SETTINGS.highlightUpFrames,
-        max: 60,
-        min: 1,
-        step: 1,
-        type: "range",
-        label: "Скорость применения анимации в кадрах",
-    },
-];
-
 const HIGHLIGHT_COMMON_CONTROLS = [
     {
         id: "highlightByHoverNode",
@@ -2845,6 +2821,24 @@ const HIGHLIGHT_COMMON_CONTROLS = [
         type: "range",
         label: "Расширение границы связи для курсора",
     },
+    {
+        id: "highlightDownFrames",
+        initialValue: HIGHLIGHT_SETTINGS.highlightDownFrames,
+        max: 60,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Скорость отмены анимации в кадрах",
+    },
+    {
+        id: "highlightUpFrames",
+        initialValue: HIGHLIGHT_SETTINGS.highlightUpFrames,
+        max: 60,
+        min: 1,
+        step: 1,
+        type: "range",
+        label: "Скорость применения анимации в кадрах",
+    },
 ];
 const HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS = [
     {
@@ -2874,15 +2868,6 @@ const HIGHLIGHT_BY_NODE_FOR_NODE_CONTROLS = [
         type: "range",
         label: "Граница прозрачности",
     },
-    {
-        id: "highlightByNodeForNodeColorFadingMin",
-        initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeColorFadingMin,
-        max: 1,
-        min: 0.01,
-        step: 0.01,
-        type: "range",
-        label: "Граница прозрачности без альфа канала",
-    },
     {
         id: "highlightByNodeForNodeSizingAdditional",
         initialValue: HIGHLIGHT_SETTINGS.highlightByNodeForNodeSizingAdditional,
@@ -3082,15 +3067,6 @@ const HIGHLIGHT_BY_LINK_FOR_NODE_CONTROLS = [
         type: "range",
         label: "Граница прозрачности",
     },
-    {
-        id: "highlightByLinkForNodeColorFadingMin",
-        initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeColorFadingMin,
-        max: 1,
-        min: 0.01,
-        step: 0.01,
-        type: "range",
-        label: "Граница прозрачности без альфа канала",
-    },
     {
         id: "highlightByLinkForNodeSizingAdditional",
         initialValue: HIGHLIGHT_SETTINGS.highlightByLinkForNodeSizingAdditional,
@@ -3824,7 +3800,6 @@ const NODE_OPTIONS_LABEL_CONTROLS = [
 exports.COMMON_SETTINGS = COMMON_SETTINGS;
 exports.FORCE_CONTROLS = FORCE_CONTROLS;
 exports.FORCE_SETTINGS = FORCE_SETTINGS;
-exports.GRAPH_CONTROLS = GRAPH_CONTROLS;
 exports.GRAPH_SETTINGS = GRAPH_SETTINGS;
 exports.GraphCanvas = GraphCanvas;
 exports.HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS = HIGHLIGHT_BY_LINK_FOR_ARROW_CONTROLS;