polly-graph 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +45 -259
- package/dist/index.js +45 -259
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -4816,7 +4816,17 @@ function renderLinks(ctx, links) {
|
|
|
4816
4816
|
|
|
4817
4817
|
// src/renderer/nodes.ts
|
|
4818
4818
|
function renderNodes(ctx, nodes) {
|
|
4819
|
-
return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").
|
|
4819
|
+
return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").call((selection2) => {
|
|
4820
|
+
selection2.each(function(node) {
|
|
4821
|
+
const element = this;
|
|
4822
|
+
if (node.style?.stroke !== void 0) {
|
|
4823
|
+
element.setAttribute("stroke", node.style.stroke);
|
|
4824
|
+
}
|
|
4825
|
+
if (node.style?.strokeWidth !== void 0) {
|
|
4826
|
+
element.setAttribute("stroke-width", String(node.style.strokeWidth));
|
|
4827
|
+
}
|
|
4828
|
+
});
|
|
4829
|
+
}).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
|
|
4820
4830
|
}
|
|
4821
4831
|
|
|
4822
4832
|
// src/renderer/node-labels.ts
|
|
@@ -5107,269 +5117,34 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
|
|
|
5107
5117
|
});
|
|
5108
5118
|
}
|
|
5109
5119
|
|
|
5110
|
-
// src/utils/node-style-manager.ts
|
|
5111
|
-
var NodeStyleManager = class {
|
|
5112
|
-
styleStates = /* @__PURE__ */ new Map();
|
|
5113
|
-
/**
|
|
5114
|
-
* Initialize a node's style state by capturing its original styles
|
|
5115
|
-
*/
|
|
5116
|
-
initializeNode(element, node) {
|
|
5117
|
-
if (this.styleStates.has(element)) {
|
|
5118
|
-
return;
|
|
5119
|
-
}
|
|
5120
|
-
const domBackup = {
|
|
5121
|
-
stroke: element.getAttribute("stroke"),
|
|
5122
|
-
strokeWidth: element.getAttribute("stroke-width"),
|
|
5123
|
-
opacity: element.getAttribute("opacity"),
|
|
5124
|
-
fill: element.getAttribute("fill")
|
|
5125
|
-
};
|
|
5126
|
-
const originalStyle = {
|
|
5127
|
-
stroke: node.style?.stroke || void 0,
|
|
5128
|
-
strokeWidth: node.style?.strokeWidth || void 0,
|
|
5129
|
-
opacity: node.style?.opacity || void 0,
|
|
5130
|
-
fill: node.style?.fill || void 0
|
|
5131
|
-
};
|
|
5132
|
-
this.styleStates.set(element, {
|
|
5133
|
-
original: originalStyle,
|
|
5134
|
-
current: { ...originalStyle },
|
|
5135
|
-
domBackup
|
|
5136
|
-
});
|
|
5137
|
-
}
|
|
5138
|
-
/**
|
|
5139
|
-
* Apply temporary styles (e.g., hover effects) that will be reset later
|
|
5140
|
-
*/
|
|
5141
|
-
applyTemporaryStyles(element, styles) {
|
|
5142
|
-
this.applyStylesToDOM(element, styles);
|
|
5143
|
-
}
|
|
5144
|
-
/**
|
|
5145
|
-
* Apply permanent styles that become the new base styles
|
|
5146
|
-
*/
|
|
5147
|
-
applyPermanentStyles(element, styles) {
|
|
5148
|
-
const state = this.styleStates.get(element);
|
|
5149
|
-
if (!state) {
|
|
5150
|
-
console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
|
|
5151
|
-
return;
|
|
5152
|
-
}
|
|
5153
|
-
this.applyStylesToDOM(element, styles);
|
|
5154
|
-
Object.assign(state.current, styles);
|
|
5155
|
-
}
|
|
5156
|
-
/**
|
|
5157
|
-
* Reset node to its current base styles (removes temporary styles)
|
|
5158
|
-
*/
|
|
5159
|
-
resetToBase(element) {
|
|
5160
|
-
const state = this.styleStates.get(element);
|
|
5161
|
-
if (!state) {
|
|
5162
|
-
this.clearAllStyles(element);
|
|
5163
|
-
return;
|
|
5164
|
-
}
|
|
5165
|
-
this.clearAllStyles(element);
|
|
5166
|
-
this.applyStylesToDOM(element, state.current);
|
|
5167
|
-
}
|
|
5168
|
-
/**
|
|
5169
|
-
* Reset node to its original styles (as captured during initialization)
|
|
5170
|
-
*/
|
|
5171
|
-
resetToOriginal(element) {
|
|
5172
|
-
const state = this.styleStates.get(element);
|
|
5173
|
-
if (!state) {
|
|
5174
|
-
this.clearAllStyles(element);
|
|
5175
|
-
return;
|
|
5176
|
-
}
|
|
5177
|
-
this.clearAllStyles(element);
|
|
5178
|
-
this.restoreOriginalDOM(element, state.domBackup);
|
|
5179
|
-
state.current = { ...state.original };
|
|
5180
|
-
}
|
|
5181
|
-
/**
|
|
5182
|
-
* Check if node is in a specific state (selected, hovered, etc.)
|
|
5183
|
-
*/
|
|
5184
|
-
hasState(element, stateName) {
|
|
5185
|
-
return element.dataset[stateName] === "true";
|
|
5186
|
-
}
|
|
5187
|
-
/**
|
|
5188
|
-
* Set state marker on node
|
|
5189
|
-
*/
|
|
5190
|
-
setState(element, stateName, value) {
|
|
5191
|
-
if (value) {
|
|
5192
|
-
element.dataset[stateName] = "true";
|
|
5193
|
-
} else {
|
|
5194
|
-
delete element.dataset[stateName];
|
|
5195
|
-
}
|
|
5196
|
-
}
|
|
5197
|
-
/**
|
|
5198
|
-
* Get the original styles for a node
|
|
5199
|
-
*/
|
|
5200
|
-
getOriginalStyles(element) {
|
|
5201
|
-
const state = this.styleStates.get(element);
|
|
5202
|
-
return state ? { ...state.original } : null;
|
|
5203
|
-
}
|
|
5204
|
-
/**
|
|
5205
|
-
* Get the current base styles for a node
|
|
5206
|
-
*/
|
|
5207
|
-
getCurrentStyles(element) {
|
|
5208
|
-
const state = this.styleStates.get(element);
|
|
5209
|
-
return state ? { ...state.current } : null;
|
|
5210
|
-
}
|
|
5211
|
-
/**
|
|
5212
|
-
* Remove a node from management (cleanup)
|
|
5213
|
-
*/
|
|
5214
|
-
removeNode(element) {
|
|
5215
|
-
this.styleStates.delete(element);
|
|
5216
|
-
}
|
|
5217
|
-
/**
|
|
5218
|
-
* Clear all managed nodes (for cleanup)
|
|
5219
|
-
*/
|
|
5220
|
-
clear() {
|
|
5221
|
-
this.styleStates.clear();
|
|
5222
|
-
}
|
|
5223
|
-
/**
|
|
5224
|
-
* Private: Apply styles to DOM element
|
|
5225
|
-
*/
|
|
5226
|
-
applyStylesToDOM(element, styles) {
|
|
5227
|
-
if (styles.stroke !== void 0) {
|
|
5228
|
-
if (styles.stroke === null || styles.stroke === "") {
|
|
5229
|
-
element.removeAttribute("stroke");
|
|
5230
|
-
element.style.stroke = "";
|
|
5231
|
-
} else {
|
|
5232
|
-
element.style.stroke = styles.stroke;
|
|
5233
|
-
}
|
|
5234
|
-
}
|
|
5235
|
-
if (styles.strokeWidth !== void 0) {
|
|
5236
|
-
if (styles.strokeWidth === null || styles.strokeWidth === 0) {
|
|
5237
|
-
element.removeAttribute("stroke-width");
|
|
5238
|
-
element.style.strokeWidth = "";
|
|
5239
|
-
} else {
|
|
5240
|
-
element.style.strokeWidth = String(styles.strokeWidth);
|
|
5241
|
-
}
|
|
5242
|
-
}
|
|
5243
|
-
if (styles.opacity !== void 0) {
|
|
5244
|
-
if (styles.opacity === null || styles.opacity === 1) {
|
|
5245
|
-
element.removeAttribute("opacity");
|
|
5246
|
-
element.style.opacity = "";
|
|
5247
|
-
} else {
|
|
5248
|
-
element.style.opacity = String(styles.opacity);
|
|
5249
|
-
}
|
|
5250
|
-
}
|
|
5251
|
-
if (styles.fill !== void 0) {
|
|
5252
|
-
if (styles.fill === null || styles.fill === "") {
|
|
5253
|
-
element.removeAttribute("fill");
|
|
5254
|
-
element.style.fill = "";
|
|
5255
|
-
} else {
|
|
5256
|
-
element.style.fill = styles.fill;
|
|
5257
|
-
}
|
|
5258
|
-
}
|
|
5259
|
-
if (styles.radius !== void 0) {
|
|
5260
|
-
if (styles.radius === null || styles.radius === 0) {
|
|
5261
|
-
element.removeAttribute("r");
|
|
5262
|
-
element.style.removeProperty("r");
|
|
5263
|
-
} else {
|
|
5264
|
-
element.setAttribute("r", String(styles.radius));
|
|
5265
|
-
}
|
|
5266
|
-
}
|
|
5267
|
-
}
|
|
5268
|
-
/**
|
|
5269
|
-
* Private: Clear all inline styles and remove hover-related attributes
|
|
5270
|
-
*/
|
|
5271
|
-
clearAllStyles(element) {
|
|
5272
|
-
element.style.stroke = "";
|
|
5273
|
-
element.style.strokeWidth = "";
|
|
5274
|
-
element.style.opacity = "";
|
|
5275
|
-
element.style.fill = "";
|
|
5276
|
-
element.style.removeProperty("r");
|
|
5277
|
-
this.removeIfHoverAttribute(element, "stroke");
|
|
5278
|
-
this.removeIfHoverAttribute(element, "stroke-width");
|
|
5279
|
-
this.removeIfHoverAttribute(element, "opacity");
|
|
5280
|
-
}
|
|
5281
|
-
/**
|
|
5282
|
-
* Private: Restore original DOM attributes
|
|
5283
|
-
*/
|
|
5284
|
-
restoreOriginalDOM(element, domBackup) {
|
|
5285
|
-
if (domBackup.stroke !== void 0) {
|
|
5286
|
-
if (domBackup.stroke === null) {
|
|
5287
|
-
element.removeAttribute("stroke");
|
|
5288
|
-
} else {
|
|
5289
|
-
element.setAttribute("stroke", domBackup.stroke);
|
|
5290
|
-
}
|
|
5291
|
-
}
|
|
5292
|
-
if (domBackup.strokeWidth !== void 0) {
|
|
5293
|
-
if (domBackup.strokeWidth === null) {
|
|
5294
|
-
element.removeAttribute("stroke-width");
|
|
5295
|
-
} else {
|
|
5296
|
-
element.setAttribute("stroke-width", domBackup.strokeWidth);
|
|
5297
|
-
}
|
|
5298
|
-
}
|
|
5299
|
-
if (domBackup.opacity !== void 0) {
|
|
5300
|
-
if (domBackup.opacity === null) {
|
|
5301
|
-
element.removeAttribute("opacity");
|
|
5302
|
-
} else {
|
|
5303
|
-
element.setAttribute("opacity", domBackup.opacity);
|
|
5304
|
-
}
|
|
5305
|
-
}
|
|
5306
|
-
if (domBackup.fill !== void 0) {
|
|
5307
|
-
if (domBackup.fill === null) {
|
|
5308
|
-
element.removeAttribute("fill");
|
|
5309
|
-
} else {
|
|
5310
|
-
element.setAttribute("fill", domBackup.fill);
|
|
5311
|
-
}
|
|
5312
|
-
}
|
|
5313
|
-
}
|
|
5314
|
-
/**
|
|
5315
|
-
* Private: Remove attribute only if it looks like it was set by hover/interaction
|
|
5316
|
-
*/
|
|
5317
|
-
removeIfHoverAttribute(element, attr) {
|
|
5318
|
-
const value = element.getAttribute(attr);
|
|
5319
|
-
if (!value) return;
|
|
5320
|
-
const hoverPatterns = {
|
|
5321
|
-
"stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
|
|
5322
|
-
// Common hover stroke colors
|
|
5323
|
-
"stroke-width": ["2", "2.5", "3", "4"],
|
|
5324
|
-
// Common hover stroke widths
|
|
5325
|
-
"opacity": ["0.8", "0.9", "0.7"]
|
|
5326
|
-
// Common hover opacity values
|
|
5327
|
-
};
|
|
5328
|
-
const patterns = hoverPatterns[attr];
|
|
5329
|
-
if (patterns && patterns.includes(value)) {
|
|
5330
|
-
element.removeAttribute(attr);
|
|
5331
|
-
}
|
|
5332
|
-
}
|
|
5333
|
-
};
|
|
5334
|
-
var nodeStyleManager = new NodeStyleManager();
|
|
5335
|
-
function applyHoverStyles(element, node, hoverStyle) {
|
|
5336
|
-
if (nodeStyleManager.hasState(element, "selected")) {
|
|
5337
|
-
return;
|
|
5338
|
-
}
|
|
5339
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5340
|
-
nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
|
|
5341
|
-
nodeStyleManager.setState(element, "hovered", true);
|
|
5342
|
-
}
|
|
5343
|
-
function removeHoverStyles(element, node) {
|
|
5344
|
-
if (nodeStyleManager.hasState(element, "selected")) {
|
|
5345
|
-
return;
|
|
5346
|
-
}
|
|
5347
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5348
|
-
nodeStyleManager.resetToBase(element);
|
|
5349
|
-
nodeStyleManager.setState(element, "hovered", false);
|
|
5350
|
-
}
|
|
5351
|
-
function applySelectionStyles(element, node, selectionStyle) {
|
|
5352
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5353
|
-
nodeStyleManager.applyPermanentStyles(element, selectionStyle);
|
|
5354
|
-
nodeStyleManager.setState(element, "selected", true);
|
|
5355
|
-
}
|
|
5356
|
-
function removeSelectionStyles(element, node) {
|
|
5357
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5358
|
-
nodeStyleManager.resetToOriginal(element);
|
|
5359
|
-
nodeStyleManager.setState(element, "selected", false);
|
|
5360
|
-
}
|
|
5361
|
-
|
|
5362
5120
|
// src/interactions/create-node-hover.ts
|
|
5363
5121
|
function createNodeHover(nodeSelection, hoverStyle) {
|
|
5364
5122
|
const firstNode = nodeSelection.node();
|
|
5365
5123
|
if (!firstNode) return;
|
|
5366
5124
|
if (hoverStyle) {
|
|
5367
|
-
nodeSelection.on("mouseenter.hover", function(_event,
|
|
5125
|
+
nodeSelection.on("mouseenter.hover", function(_event, _node) {
|
|
5368
5126
|
const circle = this;
|
|
5369
|
-
|
|
5370
|
-
|
|
5127
|
+
if (circle.dataset.selected === "true") {
|
|
5128
|
+
return;
|
|
5129
|
+
}
|
|
5130
|
+
if (hoverStyle.stroke !== void 0) {
|
|
5131
|
+
circle.style.stroke = hoverStyle.stroke;
|
|
5132
|
+
}
|
|
5133
|
+
if (hoverStyle.strokeWidth !== void 0) {
|
|
5134
|
+
circle.style.strokeWidth = String(hoverStyle.strokeWidth);
|
|
5135
|
+
}
|
|
5136
|
+
if (hoverStyle.opacity !== void 0) {
|
|
5137
|
+
circle.style.opacity = String(hoverStyle.opacity);
|
|
5138
|
+
}
|
|
5139
|
+
}).on("mouseleave.hover", function(_event, _node) {
|
|
5371
5140
|
const circle = this;
|
|
5372
|
-
|
|
5141
|
+
clearAllHoverLayers();
|
|
5142
|
+
if (circle.dataset.selected === "true") {
|
|
5143
|
+
return;
|
|
5144
|
+
}
|
|
5145
|
+
circle.style.stroke = "";
|
|
5146
|
+
circle.style.strokeWidth = "";
|
|
5147
|
+
circle.style.opacity = "";
|
|
5373
5148
|
});
|
|
5374
5149
|
}
|
|
5375
5150
|
const svgElement = firstNode.ownerSVGElement;
|
|
@@ -6069,7 +5844,12 @@ var SelectionManager = class {
|
|
|
6069
5844
|
this.clearSelection();
|
|
6070
5845
|
this.bringNodeToFront(nodeElement, nodeData);
|
|
6071
5846
|
if (this.config.nodeStyle) {
|
|
6072
|
-
|
|
5847
|
+
const style = this.config.nodeStyle;
|
|
5848
|
+
if (style.fill !== void 0) nodeElement.style.fill = style.fill;
|
|
5849
|
+
if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
|
|
5850
|
+
if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
|
|
5851
|
+
if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
|
|
5852
|
+
if (style.radius !== void 0) nodeElement.setAttribute("r", String(style.radius));
|
|
6073
5853
|
}
|
|
6074
5854
|
this.root.selectAll(".link-label").filter((item) => {
|
|
6075
5855
|
if (item.style.label.visibility !== "hover") return false;
|
|
@@ -6120,7 +5900,13 @@ var SelectionManager = class {
|
|
|
6120
5900
|
if (!this.state.selectedNode) return;
|
|
6121
5901
|
const { element, data } = this.state.selectedNode;
|
|
6122
5902
|
this.restoreSelectedElements(data);
|
|
6123
|
-
|
|
5903
|
+
element.style.fill = "";
|
|
5904
|
+
element.style.stroke = "";
|
|
5905
|
+
element.style.strokeWidth = "";
|
|
5906
|
+
element.style.opacity = "";
|
|
5907
|
+
const originalRadius = data.style?.radius ?? 8;
|
|
5908
|
+
element.setAttribute("r", String(originalRadius));
|
|
5909
|
+
delete element.dataset.selected;
|
|
6124
5910
|
this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
|
|
6125
5911
|
this.state.selectedNode = null;
|
|
6126
5912
|
this.eventEmitter.emit("nodeDeselect", { node: data, element });
|
package/dist/index.js
CHANGED
|
@@ -4784,7 +4784,17 @@ function renderLinks(ctx, links) {
|
|
|
4784
4784
|
|
|
4785
4785
|
// src/renderer/nodes.ts
|
|
4786
4786
|
function renderNodes(ctx, nodes) {
|
|
4787
|
-
return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").
|
|
4787
|
+
return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").call((selection2) => {
|
|
4788
|
+
selection2.each(function(node) {
|
|
4789
|
+
const element = this;
|
|
4790
|
+
if (node.style?.stroke !== void 0) {
|
|
4791
|
+
element.setAttribute("stroke", node.style.stroke);
|
|
4792
|
+
}
|
|
4793
|
+
if (node.style?.strokeWidth !== void 0) {
|
|
4794
|
+
element.setAttribute("stroke-width", String(node.style.strokeWidth));
|
|
4795
|
+
}
|
|
4796
|
+
});
|
|
4797
|
+
}).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
|
|
4788
4798
|
}
|
|
4789
4799
|
|
|
4790
4800
|
// src/renderer/node-labels.ts
|
|
@@ -5075,269 +5085,34 @@ function createDragBehavior(simulation, onDragStart, canvasBounds) {
|
|
|
5075
5085
|
});
|
|
5076
5086
|
}
|
|
5077
5087
|
|
|
5078
|
-
// src/utils/node-style-manager.ts
|
|
5079
|
-
var NodeStyleManager = class {
|
|
5080
|
-
styleStates = /* @__PURE__ */ new Map();
|
|
5081
|
-
/**
|
|
5082
|
-
* Initialize a node's style state by capturing its original styles
|
|
5083
|
-
*/
|
|
5084
|
-
initializeNode(element, node) {
|
|
5085
|
-
if (this.styleStates.has(element)) {
|
|
5086
|
-
return;
|
|
5087
|
-
}
|
|
5088
|
-
const domBackup = {
|
|
5089
|
-
stroke: element.getAttribute("stroke"),
|
|
5090
|
-
strokeWidth: element.getAttribute("stroke-width"),
|
|
5091
|
-
opacity: element.getAttribute("opacity"),
|
|
5092
|
-
fill: element.getAttribute("fill")
|
|
5093
|
-
};
|
|
5094
|
-
const originalStyle = {
|
|
5095
|
-
stroke: node.style?.stroke || void 0,
|
|
5096
|
-
strokeWidth: node.style?.strokeWidth || void 0,
|
|
5097
|
-
opacity: node.style?.opacity || void 0,
|
|
5098
|
-
fill: node.style?.fill || void 0
|
|
5099
|
-
};
|
|
5100
|
-
this.styleStates.set(element, {
|
|
5101
|
-
original: originalStyle,
|
|
5102
|
-
current: { ...originalStyle },
|
|
5103
|
-
domBackup
|
|
5104
|
-
});
|
|
5105
|
-
}
|
|
5106
|
-
/**
|
|
5107
|
-
* Apply temporary styles (e.g., hover effects) that will be reset later
|
|
5108
|
-
*/
|
|
5109
|
-
applyTemporaryStyles(element, styles) {
|
|
5110
|
-
this.applyStylesToDOM(element, styles);
|
|
5111
|
-
}
|
|
5112
|
-
/**
|
|
5113
|
-
* Apply permanent styles that become the new base styles
|
|
5114
|
-
*/
|
|
5115
|
-
applyPermanentStyles(element, styles) {
|
|
5116
|
-
const state = this.styleStates.get(element);
|
|
5117
|
-
if (!state) {
|
|
5118
|
-
console.warn("[NodeStyleManager] Node not initialized, cannot apply permanent styles");
|
|
5119
|
-
return;
|
|
5120
|
-
}
|
|
5121
|
-
this.applyStylesToDOM(element, styles);
|
|
5122
|
-
Object.assign(state.current, styles);
|
|
5123
|
-
}
|
|
5124
|
-
/**
|
|
5125
|
-
* Reset node to its current base styles (removes temporary styles)
|
|
5126
|
-
*/
|
|
5127
|
-
resetToBase(element) {
|
|
5128
|
-
const state = this.styleStates.get(element);
|
|
5129
|
-
if (!state) {
|
|
5130
|
-
this.clearAllStyles(element);
|
|
5131
|
-
return;
|
|
5132
|
-
}
|
|
5133
|
-
this.clearAllStyles(element);
|
|
5134
|
-
this.applyStylesToDOM(element, state.current);
|
|
5135
|
-
}
|
|
5136
|
-
/**
|
|
5137
|
-
* Reset node to its original styles (as captured during initialization)
|
|
5138
|
-
*/
|
|
5139
|
-
resetToOriginal(element) {
|
|
5140
|
-
const state = this.styleStates.get(element);
|
|
5141
|
-
if (!state) {
|
|
5142
|
-
this.clearAllStyles(element);
|
|
5143
|
-
return;
|
|
5144
|
-
}
|
|
5145
|
-
this.clearAllStyles(element);
|
|
5146
|
-
this.restoreOriginalDOM(element, state.domBackup);
|
|
5147
|
-
state.current = { ...state.original };
|
|
5148
|
-
}
|
|
5149
|
-
/**
|
|
5150
|
-
* Check if node is in a specific state (selected, hovered, etc.)
|
|
5151
|
-
*/
|
|
5152
|
-
hasState(element, stateName) {
|
|
5153
|
-
return element.dataset[stateName] === "true";
|
|
5154
|
-
}
|
|
5155
|
-
/**
|
|
5156
|
-
* Set state marker on node
|
|
5157
|
-
*/
|
|
5158
|
-
setState(element, stateName, value) {
|
|
5159
|
-
if (value) {
|
|
5160
|
-
element.dataset[stateName] = "true";
|
|
5161
|
-
} else {
|
|
5162
|
-
delete element.dataset[stateName];
|
|
5163
|
-
}
|
|
5164
|
-
}
|
|
5165
|
-
/**
|
|
5166
|
-
* Get the original styles for a node
|
|
5167
|
-
*/
|
|
5168
|
-
getOriginalStyles(element) {
|
|
5169
|
-
const state = this.styleStates.get(element);
|
|
5170
|
-
return state ? { ...state.original } : null;
|
|
5171
|
-
}
|
|
5172
|
-
/**
|
|
5173
|
-
* Get the current base styles for a node
|
|
5174
|
-
*/
|
|
5175
|
-
getCurrentStyles(element) {
|
|
5176
|
-
const state = this.styleStates.get(element);
|
|
5177
|
-
return state ? { ...state.current } : null;
|
|
5178
|
-
}
|
|
5179
|
-
/**
|
|
5180
|
-
* Remove a node from management (cleanup)
|
|
5181
|
-
*/
|
|
5182
|
-
removeNode(element) {
|
|
5183
|
-
this.styleStates.delete(element);
|
|
5184
|
-
}
|
|
5185
|
-
/**
|
|
5186
|
-
* Clear all managed nodes (for cleanup)
|
|
5187
|
-
*/
|
|
5188
|
-
clear() {
|
|
5189
|
-
this.styleStates.clear();
|
|
5190
|
-
}
|
|
5191
|
-
/**
|
|
5192
|
-
* Private: Apply styles to DOM element
|
|
5193
|
-
*/
|
|
5194
|
-
applyStylesToDOM(element, styles) {
|
|
5195
|
-
if (styles.stroke !== void 0) {
|
|
5196
|
-
if (styles.stroke === null || styles.stroke === "") {
|
|
5197
|
-
element.removeAttribute("stroke");
|
|
5198
|
-
element.style.stroke = "";
|
|
5199
|
-
} else {
|
|
5200
|
-
element.style.stroke = styles.stroke;
|
|
5201
|
-
}
|
|
5202
|
-
}
|
|
5203
|
-
if (styles.strokeWidth !== void 0) {
|
|
5204
|
-
if (styles.strokeWidth === null || styles.strokeWidth === 0) {
|
|
5205
|
-
element.removeAttribute("stroke-width");
|
|
5206
|
-
element.style.strokeWidth = "";
|
|
5207
|
-
} else {
|
|
5208
|
-
element.style.strokeWidth = String(styles.strokeWidth);
|
|
5209
|
-
}
|
|
5210
|
-
}
|
|
5211
|
-
if (styles.opacity !== void 0) {
|
|
5212
|
-
if (styles.opacity === null || styles.opacity === 1) {
|
|
5213
|
-
element.removeAttribute("opacity");
|
|
5214
|
-
element.style.opacity = "";
|
|
5215
|
-
} else {
|
|
5216
|
-
element.style.opacity = String(styles.opacity);
|
|
5217
|
-
}
|
|
5218
|
-
}
|
|
5219
|
-
if (styles.fill !== void 0) {
|
|
5220
|
-
if (styles.fill === null || styles.fill === "") {
|
|
5221
|
-
element.removeAttribute("fill");
|
|
5222
|
-
element.style.fill = "";
|
|
5223
|
-
} else {
|
|
5224
|
-
element.style.fill = styles.fill;
|
|
5225
|
-
}
|
|
5226
|
-
}
|
|
5227
|
-
if (styles.radius !== void 0) {
|
|
5228
|
-
if (styles.radius === null || styles.radius === 0) {
|
|
5229
|
-
element.removeAttribute("r");
|
|
5230
|
-
element.style.removeProperty("r");
|
|
5231
|
-
} else {
|
|
5232
|
-
element.setAttribute("r", String(styles.radius));
|
|
5233
|
-
}
|
|
5234
|
-
}
|
|
5235
|
-
}
|
|
5236
|
-
/**
|
|
5237
|
-
* Private: Clear all inline styles and remove hover-related attributes
|
|
5238
|
-
*/
|
|
5239
|
-
clearAllStyles(element) {
|
|
5240
|
-
element.style.stroke = "";
|
|
5241
|
-
element.style.strokeWidth = "";
|
|
5242
|
-
element.style.opacity = "";
|
|
5243
|
-
element.style.fill = "";
|
|
5244
|
-
element.style.removeProperty("r");
|
|
5245
|
-
this.removeIfHoverAttribute(element, "stroke");
|
|
5246
|
-
this.removeIfHoverAttribute(element, "stroke-width");
|
|
5247
|
-
this.removeIfHoverAttribute(element, "opacity");
|
|
5248
|
-
}
|
|
5249
|
-
/**
|
|
5250
|
-
* Private: Restore original DOM attributes
|
|
5251
|
-
*/
|
|
5252
|
-
restoreOriginalDOM(element, domBackup) {
|
|
5253
|
-
if (domBackup.stroke !== void 0) {
|
|
5254
|
-
if (domBackup.stroke === null) {
|
|
5255
|
-
element.removeAttribute("stroke");
|
|
5256
|
-
} else {
|
|
5257
|
-
element.setAttribute("stroke", domBackup.stroke);
|
|
5258
|
-
}
|
|
5259
|
-
}
|
|
5260
|
-
if (domBackup.strokeWidth !== void 0) {
|
|
5261
|
-
if (domBackup.strokeWidth === null) {
|
|
5262
|
-
element.removeAttribute("stroke-width");
|
|
5263
|
-
} else {
|
|
5264
|
-
element.setAttribute("stroke-width", domBackup.strokeWidth);
|
|
5265
|
-
}
|
|
5266
|
-
}
|
|
5267
|
-
if (domBackup.opacity !== void 0) {
|
|
5268
|
-
if (domBackup.opacity === null) {
|
|
5269
|
-
element.removeAttribute("opacity");
|
|
5270
|
-
} else {
|
|
5271
|
-
element.setAttribute("opacity", domBackup.opacity);
|
|
5272
|
-
}
|
|
5273
|
-
}
|
|
5274
|
-
if (domBackup.fill !== void 0) {
|
|
5275
|
-
if (domBackup.fill === null) {
|
|
5276
|
-
element.removeAttribute("fill");
|
|
5277
|
-
} else {
|
|
5278
|
-
element.setAttribute("fill", domBackup.fill);
|
|
5279
|
-
}
|
|
5280
|
-
}
|
|
5281
|
-
}
|
|
5282
|
-
/**
|
|
5283
|
-
* Private: Remove attribute only if it looks like it was set by hover/interaction
|
|
5284
|
-
*/
|
|
5285
|
-
removeIfHoverAttribute(element, attr) {
|
|
5286
|
-
const value = element.getAttribute(attr);
|
|
5287
|
-
if (!value) return;
|
|
5288
|
-
const hoverPatterns = {
|
|
5289
|
-
"stroke": ["#6366f1", "#8b5cf6", "#3b82f6", "#ffffff", "#fff", "white"],
|
|
5290
|
-
// Common hover stroke colors
|
|
5291
|
-
"stroke-width": ["2", "2.5", "3", "4"],
|
|
5292
|
-
// Common hover stroke widths
|
|
5293
|
-
"opacity": ["0.8", "0.9", "0.7"]
|
|
5294
|
-
// Common hover opacity values
|
|
5295
|
-
};
|
|
5296
|
-
const patterns = hoverPatterns[attr];
|
|
5297
|
-
if (patterns && patterns.includes(value)) {
|
|
5298
|
-
element.removeAttribute(attr);
|
|
5299
|
-
}
|
|
5300
|
-
}
|
|
5301
|
-
};
|
|
5302
|
-
var nodeStyleManager = new NodeStyleManager();
|
|
5303
|
-
function applyHoverStyles(element, node, hoverStyle) {
|
|
5304
|
-
if (nodeStyleManager.hasState(element, "selected")) {
|
|
5305
|
-
return;
|
|
5306
|
-
}
|
|
5307
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5308
|
-
nodeStyleManager.applyTemporaryStyles(element, hoverStyle);
|
|
5309
|
-
nodeStyleManager.setState(element, "hovered", true);
|
|
5310
|
-
}
|
|
5311
|
-
function removeHoverStyles(element, node) {
|
|
5312
|
-
if (nodeStyleManager.hasState(element, "selected")) {
|
|
5313
|
-
return;
|
|
5314
|
-
}
|
|
5315
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5316
|
-
nodeStyleManager.resetToBase(element);
|
|
5317
|
-
nodeStyleManager.setState(element, "hovered", false);
|
|
5318
|
-
}
|
|
5319
|
-
function applySelectionStyles(element, node, selectionStyle) {
|
|
5320
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5321
|
-
nodeStyleManager.applyPermanentStyles(element, selectionStyle);
|
|
5322
|
-
nodeStyleManager.setState(element, "selected", true);
|
|
5323
|
-
}
|
|
5324
|
-
function removeSelectionStyles(element, node) {
|
|
5325
|
-
nodeStyleManager.initializeNode(element, node);
|
|
5326
|
-
nodeStyleManager.resetToOriginal(element);
|
|
5327
|
-
nodeStyleManager.setState(element, "selected", false);
|
|
5328
|
-
}
|
|
5329
|
-
|
|
5330
5088
|
// src/interactions/create-node-hover.ts
|
|
5331
5089
|
function createNodeHover(nodeSelection, hoverStyle) {
|
|
5332
5090
|
const firstNode = nodeSelection.node();
|
|
5333
5091
|
if (!firstNode) return;
|
|
5334
5092
|
if (hoverStyle) {
|
|
5335
|
-
nodeSelection.on("mouseenter.hover", function(_event,
|
|
5093
|
+
nodeSelection.on("mouseenter.hover", function(_event, _node) {
|
|
5336
5094
|
const circle = this;
|
|
5337
|
-
|
|
5338
|
-
|
|
5095
|
+
if (circle.dataset.selected === "true") {
|
|
5096
|
+
return;
|
|
5097
|
+
}
|
|
5098
|
+
if (hoverStyle.stroke !== void 0) {
|
|
5099
|
+
circle.style.stroke = hoverStyle.stroke;
|
|
5100
|
+
}
|
|
5101
|
+
if (hoverStyle.strokeWidth !== void 0) {
|
|
5102
|
+
circle.style.strokeWidth = String(hoverStyle.strokeWidth);
|
|
5103
|
+
}
|
|
5104
|
+
if (hoverStyle.opacity !== void 0) {
|
|
5105
|
+
circle.style.opacity = String(hoverStyle.opacity);
|
|
5106
|
+
}
|
|
5107
|
+
}).on("mouseleave.hover", function(_event, _node) {
|
|
5339
5108
|
const circle = this;
|
|
5340
|
-
|
|
5109
|
+
clearAllHoverLayers();
|
|
5110
|
+
if (circle.dataset.selected === "true") {
|
|
5111
|
+
return;
|
|
5112
|
+
}
|
|
5113
|
+
circle.style.stroke = "";
|
|
5114
|
+
circle.style.strokeWidth = "";
|
|
5115
|
+
circle.style.opacity = "";
|
|
5341
5116
|
});
|
|
5342
5117
|
}
|
|
5343
5118
|
const svgElement = firstNode.ownerSVGElement;
|
|
@@ -6037,7 +5812,12 @@ var SelectionManager = class {
|
|
|
6037
5812
|
this.clearSelection();
|
|
6038
5813
|
this.bringNodeToFront(nodeElement, nodeData);
|
|
6039
5814
|
if (this.config.nodeStyle) {
|
|
6040
|
-
|
|
5815
|
+
const style = this.config.nodeStyle;
|
|
5816
|
+
if (style.fill !== void 0) nodeElement.style.fill = style.fill;
|
|
5817
|
+
if (style.stroke !== void 0) nodeElement.style.stroke = style.stroke;
|
|
5818
|
+
if (style.strokeWidth !== void 0) nodeElement.style.strokeWidth = String(style.strokeWidth);
|
|
5819
|
+
if (style.opacity !== void 0) nodeElement.style.opacity = String(style.opacity);
|
|
5820
|
+
if (style.radius !== void 0) nodeElement.setAttribute("r", String(style.radius));
|
|
6041
5821
|
}
|
|
6042
5822
|
this.root.selectAll(".link-label").filter((item) => {
|
|
6043
5823
|
if (item.style.label.visibility !== "hover") return false;
|
|
@@ -6088,7 +5868,13 @@ var SelectionManager = class {
|
|
|
6088
5868
|
if (!this.state.selectedNode) return;
|
|
6089
5869
|
const { element, data } = this.state.selectedNode;
|
|
6090
5870
|
this.restoreSelectedElements(data);
|
|
6091
|
-
|
|
5871
|
+
element.style.fill = "";
|
|
5872
|
+
element.style.stroke = "";
|
|
5873
|
+
element.style.strokeWidth = "";
|
|
5874
|
+
element.style.opacity = "";
|
|
5875
|
+
const originalRadius = data.style?.radius ?? 8;
|
|
5876
|
+
element.setAttribute("r", String(originalRadius));
|
|
5877
|
+
delete element.dataset.selected;
|
|
6092
5878
|
this.root.selectAll(".link-label.label-selection-pinned").classed("label-selection-pinned", false).interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
|
|
6093
5879
|
this.state.selectedNode = null;
|
|
6094
5880
|
this.eventEmitter.emit("nodeDeselect", { node: data, element });
|
package/package.json
CHANGED