@procaaso/alphinity-ui-components 1.0.2 → 1.0.3
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/IMPLEMENTATION_GUIDE.md +1351 -0
- package/README.md +9 -22
- package/dist/index.cjs +70 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +70 -10
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
package/dist/index.d.cts
CHANGED
|
@@ -447,6 +447,7 @@ interface NodeInstance {
|
|
|
447
447
|
x: number;
|
|
448
448
|
y: number;
|
|
449
449
|
};
|
|
450
|
+
labelFontSize?: number;
|
|
450
451
|
metadata?: Record<string, unknown>;
|
|
451
452
|
}
|
|
452
453
|
interface Transform {
|
|
@@ -541,6 +542,7 @@ interface DiagramMetadata {
|
|
|
541
542
|
modified?: string;
|
|
542
543
|
tags?: string[];
|
|
543
544
|
description?: string;
|
|
545
|
+
backgroundColor?: string;
|
|
544
546
|
}
|
|
545
547
|
|
|
546
548
|
interface SymbolDefinition {
|
|
@@ -888,6 +890,10 @@ interface PIDCanvasFeatures {
|
|
|
888
890
|
allowSymbolDrop?: boolean;
|
|
889
891
|
/** Enable connection drawing mode to create pipes between nodes (default: false) */
|
|
890
892
|
connectionMode?: boolean;
|
|
893
|
+
/** Show background grid (default: true) */
|
|
894
|
+
showGrid?: boolean;
|
|
895
|
+
/** Background color for canvas (default: '#ffffff') */
|
|
896
|
+
backgroundColor?: string;
|
|
891
897
|
}
|
|
892
898
|
interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
|
|
893
899
|
/** The diagram to render */
|
package/dist/index.d.ts
CHANGED
|
@@ -447,6 +447,7 @@ interface NodeInstance {
|
|
|
447
447
|
x: number;
|
|
448
448
|
y: number;
|
|
449
449
|
};
|
|
450
|
+
labelFontSize?: number;
|
|
450
451
|
metadata?: Record<string, unknown>;
|
|
451
452
|
}
|
|
452
453
|
interface Transform {
|
|
@@ -541,6 +542,7 @@ interface DiagramMetadata {
|
|
|
541
542
|
modified?: string;
|
|
542
543
|
tags?: string[];
|
|
543
544
|
description?: string;
|
|
545
|
+
backgroundColor?: string;
|
|
544
546
|
}
|
|
545
547
|
|
|
546
548
|
interface SymbolDefinition {
|
|
@@ -888,6 +890,10 @@ interface PIDCanvasFeatures {
|
|
|
888
890
|
allowSymbolDrop?: boolean;
|
|
889
891
|
/** Enable connection drawing mode to create pipes between nodes (default: false) */
|
|
890
892
|
connectionMode?: boolean;
|
|
893
|
+
/** Show background grid (default: true) */
|
|
894
|
+
showGrid?: boolean;
|
|
895
|
+
/** Background color for canvas (default: '#ffffff') */
|
|
896
|
+
backgroundColor?: string;
|
|
891
897
|
}
|
|
892
898
|
interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
|
|
893
899
|
/** The diagram to render */
|
package/dist/index.js
CHANGED
|
@@ -1964,9 +1964,10 @@ function NodeRenderer({
|
|
|
1964
1964
|
x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
|
|
1965
1965
|
y: symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0),
|
|
1966
1966
|
textAnchor: "middle",
|
|
1967
|
-
fontSize:
|
|
1967
|
+
fontSize: node.labelFontSize ?? 10,
|
|
1968
1968
|
fontWeight: "600",
|
|
1969
1969
|
fill: isSelected ? "#3b82f6" : "#1f2937",
|
|
1970
|
+
transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0)}, ${symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0)})` : void 0,
|
|
1970
1971
|
children: node.label || node.id
|
|
1971
1972
|
}
|
|
1972
1973
|
)
|
|
@@ -3544,21 +3545,32 @@ function PIDCanvas({
|
|
|
3544
3545
|
onDrop: handleDrop,
|
|
3545
3546
|
onDragLeave: handleDragLeave,
|
|
3546
3547
|
children: [
|
|
3547
|
-
/* @__PURE__ */ jsxs12(
|
|
3548
|
-
/* @__PURE__ */
|
|
3549
|
-
|
|
3550
|
-
/* @__PURE__ */
|
|
3551
|
-
|
|
3552
|
-
|
|
3553
|
-
|
|
3554
|
-
|
|
3548
|
+
features.showGrid !== false ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
|
|
3549
|
+
/* @__PURE__ */ jsxs12("defs", { children: [
|
|
3550
|
+
/* @__PURE__ */ jsx16("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx16("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
|
|
3551
|
+
/* @__PURE__ */ jsxs12("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
|
|
3552
|
+
/* @__PURE__ */ jsx16("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
|
|
3553
|
+
/* @__PURE__ */ jsx16("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
|
|
3554
|
+
] })
|
|
3555
|
+
] }),
|
|
3556
|
+
/* @__PURE__ */ jsx16(
|
|
3557
|
+
"rect",
|
|
3558
|
+
{
|
|
3559
|
+
x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
|
|
3560
|
+
y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
|
|
3561
|
+
width: Math.ceil(viewBox.width * 3 / 25) * 25,
|
|
3562
|
+
height: Math.ceil(viewBox.height * 3 / 25) * 25,
|
|
3563
|
+
fill: "url(#grid-major)"
|
|
3564
|
+
}
|
|
3565
|
+
)
|
|
3566
|
+
] }) : /* @__PURE__ */ jsx16(
|
|
3555
3567
|
"rect",
|
|
3556
3568
|
{
|
|
3557
3569
|
x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
|
|
3558
3570
|
y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
|
|
3559
3571
|
width: Math.ceil(viewBox.width * 3 / 25) * 25,
|
|
3560
3572
|
height: Math.ceil(viewBox.height * 3 / 25) * 25,
|
|
3561
|
-
fill: "
|
|
3573
|
+
fill: features.backgroundColor ?? "#ffffff"
|
|
3562
3574
|
}
|
|
3563
3575
|
),
|
|
3564
3576
|
/* @__PURE__ */ jsx16(
|
|
@@ -3991,6 +4003,54 @@ function NodeConfigPanel({
|
|
|
3991
4003
|
}
|
|
3992
4004
|
)
|
|
3993
4005
|
] })
|
|
4006
|
+
] }),
|
|
4007
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
4008
|
+
/* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
|
|
4009
|
+
/* @__PURE__ */ jsx18(
|
|
4010
|
+
"input",
|
|
4011
|
+
{
|
|
4012
|
+
type: "number",
|
|
4013
|
+
min: "6",
|
|
4014
|
+
max: "24",
|
|
4015
|
+
value: node.labelFontSize ?? 10,
|
|
4016
|
+
onChange: (e) => onUpdateNode({
|
|
4017
|
+
labelFontSize: parseFloat(e.target.value) || 10
|
|
4018
|
+
}),
|
|
4019
|
+
style: {
|
|
4020
|
+
width: "100%",
|
|
4021
|
+
padding: "6px 8px",
|
|
4022
|
+
borderRadius: "4px",
|
|
4023
|
+
border: "1px solid #cbd5e1",
|
|
4024
|
+
fontSize: "0.875rem"
|
|
4025
|
+
}
|
|
4026
|
+
}
|
|
4027
|
+
)
|
|
4028
|
+
] }),
|
|
4029
|
+
/* @__PURE__ */ jsxs14("div", { children: [
|
|
4030
|
+
/* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
|
|
4031
|
+
/* @__PURE__ */ jsx18(
|
|
4032
|
+
"input",
|
|
4033
|
+
{
|
|
4034
|
+
type: "number",
|
|
4035
|
+
min: "0",
|
|
4036
|
+
max: "360",
|
|
4037
|
+
step: "15",
|
|
4038
|
+
value: node.transform.rotation ?? 0,
|
|
4039
|
+
onChange: (e) => onUpdateNode({
|
|
4040
|
+
transform: {
|
|
4041
|
+
...node.transform,
|
|
4042
|
+
rotation: parseFloat(e.target.value) || 0
|
|
4043
|
+
}
|
|
4044
|
+
}),
|
|
4045
|
+
style: {
|
|
4046
|
+
width: "100%",
|
|
4047
|
+
padding: "6px 8px",
|
|
4048
|
+
borderRadius: "4px",
|
|
4049
|
+
border: "1px solid #cbd5e1",
|
|
4050
|
+
fontSize: "0.875rem"
|
|
4051
|
+
}
|
|
4052
|
+
}
|
|
4053
|
+
)
|
|
3994
4054
|
] })
|
|
3995
4055
|
] }),
|
|
3996
4056
|
/* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [
|