@industry-theme/principal-view-panels 0.12.110 → 0.12.111
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/panels.bundle.js +13 -36
- package/dist/panels.bundle.js.map +1 -1
- package/package.json +3 -4
package/dist/panels.bundle.js
CHANGED
|
@@ -86784,7 +86784,7 @@ function useNodeBehavior(options) {
|
|
|
86784
86784
|
handleResizeEnd
|
|
86785
86785
|
};
|
|
86786
86786
|
}
|
|
86787
|
-
function hexToLightColor$
|
|
86787
|
+
function hexToLightColor$3(hexColor, lightness = 0.88) {
|
|
86788
86788
|
const hex2 = hexColor.replace("#", "");
|
|
86789
86789
|
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
86790
86790
|
const g = parseInt(hex2.substring(2, 4), 16);
|
|
@@ -86863,7 +86863,7 @@ const OtelSpanConventionNode = ({ data, selected: selected2, dragging }) => {
|
|
|
86863
86863
|
right: hexagonBorderWidth,
|
|
86864
86864
|
bottom: hexagonBorderWidth,
|
|
86865
86865
|
clipPath: hexagonClipPath,
|
|
86866
|
-
backgroundColor: hexToLightColor$
|
|
86866
|
+
backgroundColor: hexToLightColor$3(fillColor),
|
|
86867
86867
|
color: "#000",
|
|
86868
86868
|
display: "flex",
|
|
86869
86869
|
flexDirection: "column",
|
|
@@ -86898,17 +86898,6 @@ const OtelSpanConventionNode = ({ data, selected: selected2, dragging }) => {
|
|
|
86898
86898
|
transition: "box-shadow 0.2s ease"
|
|
86899
86899
|
}, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx(NodeBadges, { shape: "hexagon", status, sourceFiles, references, opacity: nodeOpacity }), jsx("div", { style: hexagonBorderStyle, className: getAnimationClass(), children: jsx("div", { style: hexagonInnerStyle, children: jsx(NodeContent, { displayName, identifier: identifier2, icon, state, stateDefinitions, hasViolations, workflowChips, onWorkflowChipClick, selectedWorkflowId }) }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: nodeData.otel, sources: nodeData.sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: handleStyle })] });
|
|
86900
86900
|
};
|
|
86901
|
-
function hexToLightColor$4(hexColor, lightness = 0.88) {
|
|
86902
|
-
const hex2 = hexColor.replace("#", "");
|
|
86903
|
-
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
86904
|
-
const g = parseInt(hex2.substring(2, 4), 16);
|
|
86905
|
-
const b = parseInt(hex2.substring(4, 6), 16);
|
|
86906
|
-
const newR = Math.round(r2 + (255 - r2) * lightness);
|
|
86907
|
-
const newG = Math.round(g + (255 - g) * lightness);
|
|
86908
|
-
const newB = Math.round(b + (255 - b) * lightness);
|
|
86909
|
-
const toHex = (n) => n.toString(16).padStart(2, "0");
|
|
86910
|
-
return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
|
|
86911
|
-
}
|
|
86912
86901
|
const OtelEventNode = ({ data, selected: selected2, dragging }) => {
|
|
86913
86902
|
var _a2, _b2, _c;
|
|
86914
86903
|
const { theme: theme2 } = useTheme();
|
|
@@ -86918,8 +86907,7 @@ const OtelEventNode = ({ data, selected: selected2, dragging }) => {
|
|
|
86918
86907
|
const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
|
|
86919
86908
|
const scopeColor = nodeData.scopeColor;
|
|
86920
86909
|
const spanColor = nodeData.spanColor;
|
|
86921
|
-
const
|
|
86922
|
-
const baseFillColor = nodeDataColor || scopeColor || typeDefinition.color || "#3b82f6";
|
|
86910
|
+
const baseFillColor = scopeColor || typeDefinition.color || "#3b82f6";
|
|
86923
86911
|
const fillColor = baseFillColor;
|
|
86924
86912
|
const nodeDataStroke = nodeData.stroke;
|
|
86925
86913
|
const strokeColor = nodeDataStroke || spanColor || fillColor;
|
|
@@ -86949,7 +86937,7 @@ const OtelEventNode = ({ data, selected: selected2, dragging }) => {
|
|
|
86949
86937
|
const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
|
|
86950
86938
|
const rectangleStyle = {
|
|
86951
86939
|
padding: "12px 16px",
|
|
86952
|
-
backgroundColor:
|
|
86940
|
+
backgroundColor: fillColor,
|
|
86953
86941
|
color: "#000",
|
|
86954
86942
|
border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
|
|
86955
86943
|
fontSize: theme2.fontSizes[0],
|
|
@@ -86974,7 +86962,7 @@ const OtelEventNode = ({ data, selected: selected2, dragging }) => {
|
|
|
86974
86962
|
const handleStyle = editable ? { background: fillColor, width: 12, height: 12, border: "2px solid white", boxShadow: "0 0 0 1px " + fillColor } : { background: fillColor, width: 8, height: 8, opacity: 0, pointerEvents: "none" };
|
|
86975
86963
|
return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth: 40, minHeight: 30, onResizeEnd: handleResizeEnd, handleStyle: { width: 8, height: 8, borderRadius: 2, zIndex: 20 }, lineStyle: { borderWidth: 1, zIndex: 20 } }), jsx(Handle, { type: "target", position: Position.Top, id: "top", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Bottom, id: "bottom", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Left, id: "left", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Right, id: "right", style: handleStyle }), jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx(NodeBadges, { shape: "rectangle", status, sourceFiles, references, opacity: nodeOpacity }), jsx("div", { style: rectangleStyle, className: getAnimationClass(), children: jsx(NodeContent, { displayName, identifier: identifier2, icon, state, stateDefinitions, hasViolations }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: nodeData.otel, sources: nodeData.sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: handleStyle })] });
|
|
86976
86964
|
};
|
|
86977
|
-
function hexToLightColor$
|
|
86965
|
+
function hexToLightColor$2(hexColor, lightness = 0.88) {
|
|
86978
86966
|
const hex2 = hexColor.replace("#", "");
|
|
86979
86967
|
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
86980
86968
|
const g = parseInt(hex2.substring(2, 4), 16);
|
|
@@ -87025,7 +87013,7 @@ const OtelScopeNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87025
87013
|
const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
|
|
87026
87014
|
const circleStyle = {
|
|
87027
87015
|
padding: "8px",
|
|
87028
|
-
backgroundColor: hexToLightColor$
|
|
87016
|
+
backgroundColor: hexToLightColor$2(fillColor),
|
|
87029
87017
|
color: "#000",
|
|
87030
87018
|
border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
|
|
87031
87019
|
fontSize: theme2.fontSizes[0],
|
|
@@ -87050,7 +87038,7 @@ const OtelScopeNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87050
87038
|
const handleStyle = editable ? { background: fillColor, width: 12, height: 12, border: "2px solid white", boxShadow: "0 0 0 1px " + fillColor } : { background: fillColor, width: 8, height: 8, opacity: 0, pointerEvents: "none" };
|
|
87051
87039
|
return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth: 40, minHeight: 40, keepAspectRatio: true, onResizeEnd: handleResizeEnd, handleStyle: { width: 8, height: 8, borderRadius: 2, zIndex: 20 }, lineStyle: { borderWidth: 1, zIndex: 20 } }), jsx(Handle, { type: "target", position: Position.Top, id: "top", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Bottom, id: "bottom", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Left, id: "left", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Right, id: "right", style: handleStyle }), jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx(NodeBadges, { shape: "circle", status, sourceFiles, references, opacity: nodeOpacity }), jsx("div", { style: circleStyle, className: getAnimationClass(), children: jsx(NodeContent, { displayName, identifier: identifier2, icon, state, stateDefinitions, hasViolations }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: nodeData.otel, sources: nodeData.sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: handleStyle })] });
|
|
87052
87040
|
};
|
|
87053
|
-
function hexToLightColor$
|
|
87041
|
+
function hexToLightColor$1(hexColor, lightness = 0.88) {
|
|
87054
87042
|
const hex2 = hexColor.replace("#", "");
|
|
87055
87043
|
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
87056
87044
|
const g = parseInt(hex2.substring(2, 4), 16);
|
|
@@ -87127,7 +87115,7 @@ const OtelResourceNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87127
87115
|
right: diamondBorderWidth,
|
|
87128
87116
|
bottom: diamondBorderWidth,
|
|
87129
87117
|
clipPath: diamondClipPath,
|
|
87130
|
-
backgroundColor: hexToLightColor$
|
|
87118
|
+
backgroundColor: hexToLightColor$1(fillColor),
|
|
87131
87119
|
color: "#000",
|
|
87132
87120
|
display: "flex",
|
|
87133
87121
|
flexDirection: "column",
|
|
@@ -87148,7 +87136,7 @@ const OtelResourceNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87148
87136
|
transition: "box-shadow 0.2s ease"
|
|
87149
87137
|
}, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx(NodeBadges, { shape: "diamond", status, sourceFiles, references, opacity: nodeOpacity }), jsx("div", { style: diamondBorderStyle, className: getAnimationClass(), children: jsx("div", { style: diamondInnerStyle, children: jsx(NodeContent, { displayName, identifier: identifier2, icon, state, stateDefinitions, hasViolations }) }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: nodeData.otel, sources: nodeData.sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: handleStyle })] });
|
|
87150
87138
|
};
|
|
87151
|
-
function hexToLightColor
|
|
87139
|
+
function hexToLightColor(hexColor, lightness = 0.88) {
|
|
87152
87140
|
const hex2 = hexColor.replace("#", "");
|
|
87153
87141
|
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
87154
87142
|
const g = parseInt(hex2.substring(2, 4), 16);
|
|
@@ -87199,7 +87187,7 @@ const OtelBoundaryNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87199
87187
|
const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
|
|
87200
87188
|
const boundaryStyle = {
|
|
87201
87189
|
padding: "12px 16px",
|
|
87202
|
-
backgroundColor: hexToLightColor
|
|
87190
|
+
backgroundColor: hexToLightColor(fillColor),
|
|
87203
87191
|
color: "#000",
|
|
87204
87192
|
border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
|
|
87205
87193
|
fontSize: theme2.fontSizes[0],
|
|
@@ -87225,17 +87213,6 @@ const OtelBoundaryNode = ({ data, selected: selected2, dragging }) => {
|
|
|
87225
87213
|
const handleStyle = editable ? { background: fillColor, width: 12, height: 12, border: "2px solid white", boxShadow: "0 0 0 1px " + fillColor } : { background: fillColor, width: 8, height: 8, opacity: 0, pointerEvents: "none" };
|
|
87226
87214
|
return jsxs(Fragment, { children: [editable && jsx(NodeResizer, { color: strokeColor, isVisible: selected2, minWidth: 40, minHeight: 30, onResizeEnd: handleResizeEnd, handleStyle: { width: 8, height: 8, borderRadius: 2, zIndex: 20 }, lineStyle: { borderWidth: 1, zIndex: 20 } }), jsx(Handle, { type: "target", position: Position.Top, id: "top", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Bottom, id: "bottom", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Left, id: "left", style: handleStyle }), jsx(Handle, { type: "target", position: Position.Right, id: "right", style: handleStyle }), jsxs("div", { ref: nodeRef, style: { position: "relative", width: "100%", height: "100%" }, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [jsx(NodeBadges, { shape: "rectangle", status, sourceFiles, references, boundary: boundaryData, opacity: nodeOpacity }), jsx("div", { style: boundaryStyle, className: getAnimationClass(), children: jsx(NodeContent, { displayName, identifier: identifier2, icon, state, stateDefinitions, hasViolations }) }), tooltipsEnabled && jsx(NodeTooltip, { description, otel: nodeData.otel, sources: nodeData.sources, references, visible: showTooltip, nodeRef })] }), jsx(Handle, { type: "source", position: Position.Top, id: "top-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Left, id: "left-out", style: handleStyle }), jsx(Handle, { type: "source", position: Position.Right, id: "right-out", style: handleStyle })] });
|
|
87227
87215
|
};
|
|
87228
|
-
function hexToLightColor(hexColor, lightness = 0.88) {
|
|
87229
|
-
const hex2 = hexColor.replace("#", "");
|
|
87230
|
-
const r2 = parseInt(hex2.substring(0, 2), 16);
|
|
87231
|
-
const g = parseInt(hex2.substring(2, 4), 16);
|
|
87232
|
-
const b = parseInt(hex2.substring(4, 6), 16);
|
|
87233
|
-
const newR = Math.round(r2 + (255 - r2) * lightness);
|
|
87234
|
-
const newG = Math.round(g + (255 - g) * lightness);
|
|
87235
|
-
const newB = Math.round(b + (255 - b) * lightness);
|
|
87236
|
-
const toHex = (n) => n.toString(16).padStart(2, "0");
|
|
87237
|
-
return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
|
|
87238
|
-
}
|
|
87239
87216
|
const CustomNode = (props) => {
|
|
87240
87217
|
var _a2, _b2, _c, _d, _e4, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
87241
87218
|
const { data, selected: selected2, dragging } = props;
|
|
@@ -87561,7 +87538,7 @@ const CustomNode = (props) => {
|
|
|
87561
87538
|
const borderStyle = status === "draft" ? "dotted" : status === "approved" ? "dashed" : "solid";
|
|
87562
87539
|
const baseStyles = {
|
|
87563
87540
|
padding: "12px 16px",
|
|
87564
|
-
backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" :
|
|
87541
|
+
backgroundColor: isGroup ? "rgba(255, 255, 255, 0.7)" : fillColor,
|
|
87565
87542
|
color: "#000",
|
|
87566
87543
|
border: `2px ${borderStyle} ${hasViolations ? "#D0021B" : strokeColor}`,
|
|
87567
87544
|
fontSize: theme2.fontSizes[0],
|
|
@@ -87656,7 +87633,7 @@ const CustomNode = (props) => {
|
|
|
87656
87633
|
right: hexagonBorderWidth,
|
|
87657
87634
|
bottom: hexagonBorderWidth,
|
|
87658
87635
|
clipPath: hexagonClipPath,
|
|
87659
|
-
backgroundColor:
|
|
87636
|
+
backgroundColor: fillColor,
|
|
87660
87637
|
color: "#000",
|
|
87661
87638
|
display: "flex",
|
|
87662
87639
|
flexDirection: "column",
|
|
@@ -87690,7 +87667,7 @@ const CustomNode = (props) => {
|
|
|
87690
87667
|
right: diamondBorderWidth,
|
|
87691
87668
|
bottom: diamondBorderWidth,
|
|
87692
87669
|
clipPath: diamondClipPath,
|
|
87693
|
-
backgroundColor:
|
|
87670
|
+
backgroundColor: fillColor,
|
|
87694
87671
|
color: "#000",
|
|
87695
87672
|
display: "flex",
|
|
87696
87673
|
flexDirection: "column",
|