@krainovsd/graph 0.8.4 → 0.10.0-rc1

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

@@ -0,0 +1,172 @@
+import { forceCollide, forceX, forceY, forceManyBody, forceCenter, forceSimulation, forceLink } from 'd3-force';
+import '@krainovsd/js-helpers';
+import { nodeOptionsGetter, nodeRadiusGetter, nodeSizeGetter } from '../lib/settings/node-settings-getter.js';
+import 'd3-array';
+import { nodeIterationExtractor } from '../lib/utils/node-iteration-extractor.js';
+import { getDrawTime, resetDrawTime } from '../../../lib/draw-time.js';
+import { getTextLines } from './draw-text.js';
+
+function initSimulation() {
+    if (!this.simulation) {
+        this.simulation = forceSimulation()
+            .nodes(this.nodes)
+            .force("link", forceLink(this.links).id(this.nodeSettings.idGetter))
+            .on("tick", () => {
+            this.draw();
+        })
+            .on("end", () => {
+            this.listeners.onSimulationEnd?.(this.state);
+            if (this.graphSettings.showDrawTime) {
+                getDrawTime();
+                // eslint-disable-next-line no-console
+                console.log(`nodes: ${this.nodes.length} | links: ${this.links.length}`);
+                resetDrawTime();
+            }
+        });
+        initSimulationForces.call(this);
+    }
+}
+function initSimulationForces() {
+    if (!this.simulation)
+        return;
+    const linkForce = this.simulation.force("link");
+    if (!linkForce)
+        return;
+    if ((!this.forceSettings.forces || !this.forceSettings.xForce) && this.simulation.force("x")) {
+        this.simulation.force("x", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.yForce) && this.simulation.force("y")) {
+        this.simulation.force("y", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.chargeForce) &&
+        this.simulation.force("charge")) {
+        this.simulation.force("charge", null);
+    }
+    if ((!this.forceSettings.forces || !this.forceSettings.centerForce) &&
+        this.simulation.force("center")) {
+        this.simulation.force("center", null);
+    }
+    if (!this.forceSettings.forces || !this.forceSettings.linkForce) {
+        linkForce.distance(0).strength(0).iterations(0);
+    }
+    if (this.forceSettings.forces && this.forceSettings.linkForce) {
+        linkForce
+            .distance(this.forceSettings.linkDistance)
+            .strength(this.forceSettings.linkStrength)
+            .iterations(this.forceSettings.linkIterations);
+    }
+    if (this.forceSettings.forces && this.forceSettings.xForce) {
+        this.simulation.force("x", forceX(this.forceSettings.xPosition).strength(this.forceSettings.xStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.yForce) {
+        this.simulation.force("y", forceY(this.forceSettings.yPosition).strength(this.forceSettings.yStrength));
+    }
+    if (this.forceSettings.forces && this.forceSettings.chargeForce) {
+        this.simulation.force("charge", forceManyBody()
+            .strength(this.forceSettings.chargeStrength)
+            .distanceMax(this.forceSettings.chargeDistanceMax)
+            .distanceMin(this.forceSettings.chargeDistanceMin));
+    }
+    if (this.forceSettings.forces && this.forceSettings.centerForce) {
+        this.simulation.force("center", forceCenter(this.forceSettings.centerPosition.x ?? 0, this.forceSettings.centerPosition.y ?? 0).strength(this.forceSettings.centerStrength));
+    }
+    initCollideForce.call(this, true);
+}
+function initCollideForce(forceUpdate) {
+    if (!this.simulation)
+        return;
+    if ((!this.forceSettings.collideForce || !this.forceSettings.forces) &&
+        this.simulation.force("collide")) {
+        this.simulation.force("collide", null);
+    }
+    if (this.forceSettings.forces && this.forceSettings.collideForce) {
+        const isHasMax = this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;
+        const isMaxCollideNodes = isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;
+        const isMaxCollideLinks = isHasMax && this.forceSettings.collideOffMax.links < this.links.length;
+        if (isMaxCollideNodes && isMaxCollideLinks) {
+            this.simulation.force("collide", null);
+        }
+        else if (!this.simulation.force("collide") || forceUpdate) {
+            this.simulation.force("collide", forceCollide()
+                .radius((node, index) => {
+                const nodeOptions = nodeIterationExtractor(node, index, this.nodes, this.state, this.nodeSettings.options ?? {}, nodeOptionsGetter);
+                switch (nodeOptions.shape) {
+                    case "circle": {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
+                        }
+                        const radius = nodeRadiusGetter({
+                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                            radiusInitial: nodeOptions.radius,
+                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                            linkCount: node.linkCount,
+                        });
+                        return radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                    case "square": {
+                        const { height, width } = nodeSizeGetter({
+                            heightInitial: nodeOptions.width,
+                            widthInitial: nodeOptions.height,
+                            linkCount: node.linkCount,
+                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                            sizeFactor: this.nodeSettings.nodeSizeFactor,
+                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                        });
+                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    case "text": {
+                        let { height, width } = nodeSizeGetter({
+                            heightInitial: nodeOptions.width,
+                            widthInitial: nodeOptions.height,
+                            linkCount: node.linkCount,
+                            sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,
+                            sizeFactor: this.nodeSettings.nodeSizeFactor,
+                            sizeFlexible: this.nodeSettings.nodeSizeFlexible,
+                        });
+                        if (this.context && 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: nodeOptions.textSize,
+                                    maxWidth: width,
+                                    textStyle: nodeOptions.textStyle,
+                                    textWeight: nodeOptions.textWeight,
+                                });
+                            height =
+                                lines.length * nodeOptions.textSize +
+                                    (lines.length - 1) * nodeOptions.textGap +
+                                    nodeOptions.textNodeYPadding;
+                            width += nodeOptions.textNodeXPadding;
+                        }
+                        return (Math.sqrt(width ** 2 + height ** 2) / 2 +
+                            this.forceSettings.collideAdditionalRadius);
+                    }
+                    default: {
+                        if (this.forceSettings.collideRadius) {
+                            return nodeIterationExtractor(node, index, this.nodes, this.state, this.forceSettings.collideRadius, undefined);
+                        }
+                        const radius = nodeRadiusGetter({
+                            radiusFlexible: this.nodeSettings.nodeRadiusFlexible,
+                            radiusInitial: nodeOptions.radius,
+                            radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,
+                            radiusFactor: this.nodeSettings.nodeRadiusFactor,
+                            linkCount: node.linkCount,
+                        });
+                        return radius + this.forceSettings.collideAdditionalRadius;
+                    }
+                }
+            })
+                .strength(this.forceSettings.collideStrength)
+                .iterations(this.forceSettings.collideIterations));
+        }
+    }
+}
+
+export { initCollideForce, initSimulation, initSimulationForces };
+//# sourceMappingURL=init-simulation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"init-simulation.js","sources":["../../../../../src/module/GraphCanvas/slices/init-simulation.ts"],"sourcesContent":["import {\n  type ForceLink,\n  forceCenter,\n  forceCollide,\n  forceLink,\n  forceManyBody,\n  forceSimulation,\n  forceX,\n  forceY,\n} from \"d3-force\";\nimport { getDrawTime, resetDrawTime } from \"@/lib\";\nimport type { LinkInterface, NodeInterface } from \"@/types\";\nimport type { GraphCanvas } from \"../GraphCanvas\";\nimport {\n  nodeIterationExtractor,\n  nodeOptionsGetter,\n  nodeRadiusGetter,\n  nodeSizeGetter,\n} from \"../lib\";\nimport { getTextLines } from \"./draw-text\";\n\nexport function initSimulation<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.simulation) {\n    this.simulation = forceSimulation<NodeInterface<NodeData>, LinkInterface<NodeData, LinkData>>()\n      .nodes(this.nodes)\n      .force(\n        \"link\",\n        forceLink<NodeInterface<NodeData>, LinkInterface<NodeData, LinkData>>(this.links).id(\n          this.nodeSettings.idGetter,\n        ),\n      )\n      .on(\"tick\", () => {\n        this.draw();\n      })\n      .on(\"end\", () => {\n        this.listeners.onSimulationEnd?.(this.state);\n\n        if (this.graphSettings.showDrawTime) {\n          getDrawTime();\n          // eslint-disable-next-line no-console\n          console.log(`nodes: ${this.nodes.length} | links: ${this.links.length}`);\n          resetDrawTime();\n        }\n      });\n\n    initSimulationForces.call<\n      GraphCanvas<NodeData, LinkData>,\n      Parameters<typeof initSimulationForces>,\n      ReturnType<typeof initSimulationForces>\n    >(this);\n  }\n}\n\nexport function initSimulationForces<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>) {\n  if (!this.simulation) return;\n\n  const linkForce = this.simulation.force(\"link\") as\n    | ForceLink<NodeInterface<NodeData>, LinkInterface<NodeData, LinkData>>\n    | undefined;\n\n  if (!linkForce) return;\n\n  if ((!this.forceSettings.forces || !this.forceSettings.xForce) && this.simulation.force(\"x\")) {\n    this.simulation.force(\"x\", null);\n  }\n  if ((!this.forceSettings.forces || !this.forceSettings.yForce) && this.simulation.force(\"y\")) {\n    this.simulation.force(\"y\", null);\n  }\n  if (\n    (!this.forceSettings.forces || !this.forceSettings.chargeForce) &&\n    this.simulation.force(\"charge\")\n  ) {\n    this.simulation.force(\"charge\", null);\n  }\n  if (\n    (!this.forceSettings.forces || !this.forceSettings.centerForce) &&\n    this.simulation.force(\"center\")\n  ) {\n    this.simulation.force(\"center\", null);\n  }\n  if (!this.forceSettings.forces || !this.forceSettings.linkForce) {\n    linkForce.distance(0).strength(0).iterations(0);\n  }\n\n  if (this.forceSettings.forces && this.forceSettings.linkForce) {\n    linkForce\n      .distance(this.forceSettings.linkDistance)\n      .strength(this.forceSettings.linkStrength)\n      .iterations(this.forceSettings.linkIterations);\n  }\n  if (this.forceSettings.forces && this.forceSettings.xForce) {\n    this.simulation.force(\n      \"x\",\n      forceX<NodeInterface<NodeData>>(this.forceSettings.xPosition).strength(\n        this.forceSettings.xStrength,\n      ),\n    );\n  }\n  if (this.forceSettings.forces && this.forceSettings.yForce) {\n    this.simulation.force(\n      \"y\",\n      forceY<NodeInterface<NodeData>>(this.forceSettings.yPosition).strength(\n        this.forceSettings.yStrength,\n      ),\n    );\n  }\n  if (this.forceSettings.forces && this.forceSettings.chargeForce) {\n    this.simulation.force(\n      \"charge\",\n      forceManyBody<NodeInterface<NodeData>>()\n        .strength(this.forceSettings.chargeStrength)\n        .distanceMax(this.forceSettings.chargeDistanceMax)\n        .distanceMin(this.forceSettings.chargeDistanceMin),\n    );\n  }\n  if (this.forceSettings.forces && this.forceSettings.centerForce) {\n    this.simulation.force(\n      \"center\",\n      forceCenter<NodeInterface<NodeData>>(\n        this.forceSettings.centerPosition.x ?? 0,\n        this.forceSettings.centerPosition.y ?? 0,\n      ).strength(this.forceSettings.centerStrength),\n    );\n  }\n\n  initCollideForce.call<\n    GraphCanvas<NodeData, LinkData>,\n    Parameters<typeof initCollideForce>,\n    ReturnType<typeof initCollideForce>\n  >(this, true);\n}\n\nexport function initCollideForce<\n  NodeData extends Record<string, unknown>,\n  LinkData extends Record<string, unknown>,\n>(this: GraphCanvas<NodeData, LinkData>, forceUpdate: boolean) {\n  if (!this.simulation) return;\n\n  if (\n    (!this.forceSettings.collideForce || !this.forceSettings.forces) &&\n    this.simulation.force(\"collide\")\n  ) {\n    this.simulation.force(\"collide\", null);\n  }\n\n  if (this.forceSettings.forces && this.forceSettings.collideForce) {\n    const isHasMax =\n      this.forceSettings.collideOffMax.links != 0 && this.forceSettings.collideOffMax.nodes != 0;\n    const isMaxCollideNodes =\n      isHasMax && this.forceSettings.collideOffMax.nodes < this.nodes.length;\n    const isMaxCollideLinks =\n      isHasMax && this.forceSettings.collideOffMax.links < this.links.length;\n    if (isMaxCollideNodes && isMaxCollideLinks) {\n      this.simulation.force(\"collide\", null);\n    } else if (!this.simulation.force(\"collide\") || forceUpdate) {\n      this.simulation.force(\n        \"collide\",\n        forceCollide<NodeInterface<NodeData>>()\n          .radius((node, index) => {\n            const nodeOptions = nodeIterationExtractor(\n              node,\n              index,\n              this.nodes,\n              this.state,\n              this.nodeSettings.options ?? {},\n              nodeOptionsGetter,\n            );\n\n            switch (nodeOptions.shape) {\n              case \"circle\": {\n                if (this.forceSettings.collideRadius) {\n                  return nodeIterationExtractor(\n                    node,\n                    index,\n                    this.nodes,\n                    this.state,\n                    this.forceSettings.collideRadius,\n                    undefined,\n                  );\n                }\n                const radius = nodeRadiusGetter({\n                  radiusFlexible: this.nodeSettings.nodeRadiusFlexible,\n                  radiusInitial: nodeOptions.radius,\n                  radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,\n                  radiusFactor: this.nodeSettings.nodeRadiusFactor,\n                  linkCount: node.linkCount,\n                });\n\n                return radius + this.forceSettings.collideAdditionalRadius;\n              }\n              case \"square\": {\n                const { height, width } = nodeSizeGetter({\n                  heightInitial: nodeOptions.width,\n                  widthInitial: nodeOptions.height,\n                  linkCount: node.linkCount,\n                  sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,\n                  sizeFactor: this.nodeSettings.nodeSizeFactor,\n                  sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n                });\n\n                return (\n                  Math.sqrt(width ** 2 + height ** 2) / 2 +\n                  this.forceSettings.collideAdditionalRadius\n                );\n              }\n              case \"text\": {\n                let { height, width } = nodeSizeGetter({\n                  heightInitial: nodeOptions.width,\n                  widthInitial: nodeOptions.height,\n                  linkCount: node.linkCount,\n                  sizeCoefficient: this.nodeSettings.nodeSizeCoefficient,\n                  sizeFactor: this.nodeSettings.nodeSizeFactor,\n                  sizeFlexible: this.nodeSettings.nodeSizeFlexible,\n                });\n\n                if (this.context && nodeOptions.text) {\n                  const lines =\n                    this.cachedNodeText[node.id] ??\n                    getTextLines({\n                      context: this.context,\n                      text: nodeOptions.text,\n                      textAlign: nodeOptions.textAlign,\n                      textColor: nodeOptions.textColor,\n                      textFont: nodeOptions.textFont,\n                      textSize: nodeOptions.textSize,\n                      maxWidth: width,\n                      textStyle: nodeOptions.textStyle,\n                      textWeight: nodeOptions.textWeight,\n                    });\n\n                  height =\n                    lines.length * nodeOptions.textSize +\n                    (lines.length - 1) * nodeOptions.textGap +\n                    nodeOptions.textNodeYPadding;\n                  width += nodeOptions.textNodeXPadding;\n                }\n\n                return (\n                  Math.sqrt(width ** 2 + height ** 2) / 2 +\n                  this.forceSettings.collideAdditionalRadius\n                );\n              }\n              default: {\n                if (this.forceSettings.collideRadius) {\n                  return nodeIterationExtractor(\n                    node,\n                    index,\n                    this.nodes,\n                    this.state,\n                    this.forceSettings.collideRadius,\n                    undefined,\n                  );\n                }\n                const radius = nodeRadiusGetter({\n                  radiusFlexible: this.nodeSettings.nodeRadiusFlexible,\n                  radiusInitial: nodeOptions.radius,\n                  radiusCoefficient: this.nodeSettings.nodeRadiusCoefficient,\n                  radiusFactor: this.nodeSettings.nodeRadiusFactor,\n                  linkCount: node.linkCount,\n                });\n\n                return radius + this.forceSettings.collideAdditionalRadius;\n              }\n            }\n          })\n          .strength(this.forceSettings.collideStrength)\n          .iterations(this.forceSettings.collideIterations),\n      );\n    }\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+import { isArray } from '@krainovsd/js-helpers';
+import { select } from 'd3-selection';
+import { zoom, ZoomTransform } from 'd3-zoom';
+
+function initZoom(currentZoom) {
+    if (!this.area)
+        throw new Error("bad init data");
+    const zoomInstance = zoom()
+        .scaleExtent(this.graphSettings.zoomExtent)
+        .on("zoom", (event) => {
+        this.listeners.onZoom?.(event);
+        this.areaTransform = event.transform;
+        this.linkOptionsCache = {};
+        this.nodeOptionsCache = {};
+        if (!this.simulationWorking && !this.highlightWorking)
+            requestAnimationFrame(() => this.draw());
+    });
+    if (this.graphSettings.translateExtentEnable) {
+        const coefficient = this.graphSettings.translateExtentCoefficient;
+        const [coefficientX, coefficientY] = isArray(coefficient)
+            ? coefficient
+            : [coefficient, coefficient];
+        const [[minX = -this.width * coefficientX, minY = -this.height * coefficientY], [maxX = this.width * coefficientX, maxY = this.height * coefficientY],] = this.graphSettings.translateExtent;
+        zoomInstance.translateExtent([
+            [minX, minY],
+            [maxX, maxY],
+        ]);
+    }
+    select(this.area).call(zoomInstance).on("dblclick.zoom", null);
+    const zoomInitial = currentZoom ?? this.graphSettings.zoomInitial;
+    this.areaTransform = new ZoomTransform(zoomInitial?.k ?? 1, zoomInitial?.x ?? this.width / 2, zoomInitial?.y ?? this.height / 2);
+    zoom().transform(select(this.area), this.areaTransform);
+}
+
+export { initZoom };
+//# sourceMappingURL=init-zoom.js.map

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

@@ -0,0 +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?.(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;QACxC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC;AAC9B,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;;;;"}