@designa8/vibedesign-stripe-deepseek-85ea 0.1.0 → 0.1.2
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/README.md +1 -1
- package/dist/index.cjs +44 -21
- package/dist/index.js +44 -21
- package/package.json +1 -1
- package/src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx +35 -8
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @designa8/vibedesign-stripe-deepseek-85ea
|
|
2
2
|
|
|
3
|
-
Complete design system generated by Atoms Design, version **0.1.
|
|
3
|
+
Complete design system generated by Atoms Design, version **0.1.2**.
|
|
4
4
|
Tokens, atoms, molecules, organisms, and templates — import from the package root;
|
|
5
5
|
never hardcode visual values in consumer code.
|
|
6
6
|
|
package/dist/index.cjs
CHANGED
|
@@ -12277,6 +12277,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12277
12277
|
const [panelOpen, setPanelOpen] = React62.useState(true);
|
|
12278
12278
|
const [zoom, setZoom] = React62.useState(1);
|
|
12279
12279
|
const [fit, setFit] = React62.useState(1);
|
|
12280
|
+
const [planeHeight, setPlaneHeight] = React62.useState(PLANE_H);
|
|
12280
12281
|
const [pan, setPan] = React62.useState({ x: 0, y: 0 });
|
|
12281
12282
|
const [issuesOpen, setIssuesOpen] = React62.useState(false);
|
|
12282
12283
|
const [priority, setPriority] = React62.useState([
|
|
@@ -12295,6 +12296,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12295
12296
|
const triggerRef = React62.useRef(null);
|
|
12296
12297
|
const nodeRefs = React62.useRef({});
|
|
12297
12298
|
const suppressClick = React62.useRef(false);
|
|
12299
|
+
const nodeDragActive = React62.useRef(false);
|
|
12298
12300
|
React62.useEffect(() => {
|
|
12299
12301
|
setLocalNodes(incomingNodes);
|
|
12300
12302
|
}, [incomingNodes]);
|
|
@@ -12303,8 +12305,16 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12303
12305
|
if (!plane) return;
|
|
12304
12306
|
const measure = () => {
|
|
12305
12307
|
const width = plane.clientWidth;
|
|
12306
|
-
|
|
12307
|
-
|
|
12308
|
+
const height = plane.clientHeight;
|
|
12309
|
+
if (!width || !height) return;
|
|
12310
|
+
setFit(
|
|
12311
|
+
Math.min(
|
|
12312
|
+
1,
|
|
12313
|
+
(width - PLANE_PAD * 2) / SCENE_W,
|
|
12314
|
+
(height - PLANE_PAD * 2) / SCENE_H
|
|
12315
|
+
)
|
|
12316
|
+
);
|
|
12317
|
+
setPlaneHeight(height);
|
|
12308
12318
|
};
|
|
12309
12319
|
measure();
|
|
12310
12320
|
const observer = new ResizeObserver(measure);
|
|
@@ -12376,6 +12386,8 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12376
12386
|
};
|
|
12377
12387
|
const beginDrag = (event, node) => {
|
|
12378
12388
|
if (event.button !== 0) return;
|
|
12389
|
+
event.stopPropagation();
|
|
12390
|
+
nodeDragActive.current = true;
|
|
12379
12391
|
const startX = event.clientX;
|
|
12380
12392
|
const startY = event.clientY;
|
|
12381
12393
|
const scale2 = fit * zoom || 1;
|
|
@@ -12396,6 +12408,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12396
12408
|
);
|
|
12397
12409
|
};
|
|
12398
12410
|
const end = () => {
|
|
12411
|
+
nodeDragActive.current = false;
|
|
12399
12412
|
window.removeEventListener("pointermove", move);
|
|
12400
12413
|
if (!moved) return;
|
|
12401
12414
|
suppressClick.current = true;
|
|
@@ -12410,6 +12423,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12410
12423
|
};
|
|
12411
12424
|
const beginPan = (event) => {
|
|
12412
12425
|
if (event.button !== 0) return;
|
|
12426
|
+
if (nodeDragActive.current) return;
|
|
12413
12427
|
const startX = event.clientX;
|
|
12414
12428
|
const startY = event.clientY;
|
|
12415
12429
|
const origin = pan;
|
|
@@ -12476,7 +12490,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12476
12490
|
else if (ref) ref.current = node;
|
|
12477
12491
|
},
|
|
12478
12492
|
className: cn54(
|
|
12479
|
-
"flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
12493
|
+
"flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
12480
12494
|
className
|
|
12481
12495
|
),
|
|
12482
12496
|
"data-simulating": replaying || void 0,
|
|
@@ -12532,7 +12546,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12532
12546
|
] })
|
|
12533
12547
|
] }),
|
|
12534
12548
|
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
|
|
12535
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
12549
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
|
|
12536
12550
|
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
12537
12551
|
"div",
|
|
12538
12552
|
{
|
|
@@ -12558,11 +12572,13 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12558
12572
|
}
|
|
12559
12573
|
},
|
|
12560
12574
|
className: cn54(
|
|
12561
|
-
"relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
12575
|
+
"relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
12562
12576
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset"
|
|
12563
12577
|
),
|
|
12564
12578
|
style: {
|
|
12565
|
-
height
|
|
12579
|
+
// Grows with the host height, never collapses below the
|
|
12580
|
+
// stand-alone look when the parent has no explicit height.
|
|
12581
|
+
minHeight: PLANE_H,
|
|
12566
12582
|
backgroundImage: "radial-gradient(var(--color-hairline) 1px, transparent 1px)",
|
|
12567
12583
|
backgroundSize: "16px 16px"
|
|
12568
12584
|
},
|
|
@@ -12574,7 +12590,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12574
12590
|
style: {
|
|
12575
12591
|
width: SCENE_W,
|
|
12576
12592
|
height: SCENE_H,
|
|
12577
|
-
transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((
|
|
12593
|
+
transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
|
|
12578
12594
|
transformOrigin: "0 0",
|
|
12579
12595
|
transition: "transform 200ms ease-out"
|
|
12580
12596
|
},
|
|
@@ -12735,22 +12751,29 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12735
12751
|
] })
|
|
12736
12752
|
] })
|
|
12737
12753
|
] }),
|
|
12738
|
-
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
12739
|
-
|
|
12754
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
12755
|
+
"div",
|
|
12740
12756
|
{
|
|
12741
|
-
|
|
12742
|
-
|
|
12743
|
-
|
|
12744
|
-
|
|
12745
|
-
|
|
12746
|
-
|
|
12747
|
-
|
|
12748
|
-
|
|
12749
|
-
|
|
12750
|
-
|
|
12751
|
-
|
|
12757
|
+
className: "flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline",
|
|
12758
|
+
style: { width: PANEL_W },
|
|
12759
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
12760
|
+
NodeConfigPanel,
|
|
12761
|
+
{
|
|
12762
|
+
open: panelOpen,
|
|
12763
|
+
nodeType: focusedNode?.type ?? "condition",
|
|
12764
|
+
title: focusedNode?.title ?? "Select a node",
|
|
12765
|
+
rule: priority[0]?.label ?? "",
|
|
12766
|
+
priorities: priority,
|
|
12767
|
+
fallbackEnabled,
|
|
12768
|
+
onClose: closePanel,
|
|
12769
|
+
onPrioritiesChange: setPriority,
|
|
12770
|
+
onFallbackChange: setFallbackEnabled,
|
|
12771
|
+
onRemove: () => setPanelOpen(false),
|
|
12772
|
+
onSave: () => setPanelOpen(true)
|
|
12773
|
+
}
|
|
12774
|
+
)
|
|
12752
12775
|
}
|
|
12753
|
-
)
|
|
12776
|
+
)
|
|
12754
12777
|
] }),
|
|
12755
12778
|
ReactDOM10.createPortal(
|
|
12756
12779
|
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
package/dist/index.js
CHANGED
|
@@ -12141,6 +12141,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12141
12141
|
const [panelOpen, setPanelOpen] = React62.useState(true);
|
|
12142
12142
|
const [zoom, setZoom] = React62.useState(1);
|
|
12143
12143
|
const [fit, setFit] = React62.useState(1);
|
|
12144
|
+
const [planeHeight, setPlaneHeight] = React62.useState(PLANE_H);
|
|
12144
12145
|
const [pan, setPan] = React62.useState({ x: 0, y: 0 });
|
|
12145
12146
|
const [issuesOpen, setIssuesOpen] = React62.useState(false);
|
|
12146
12147
|
const [priority, setPriority] = React62.useState([
|
|
@@ -12159,6 +12160,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12159
12160
|
const triggerRef = React62.useRef(null);
|
|
12160
12161
|
const nodeRefs = React62.useRef({});
|
|
12161
12162
|
const suppressClick = React62.useRef(false);
|
|
12163
|
+
const nodeDragActive = React62.useRef(false);
|
|
12162
12164
|
React62.useEffect(() => {
|
|
12163
12165
|
setLocalNodes(incomingNodes);
|
|
12164
12166
|
}, [incomingNodes]);
|
|
@@ -12167,8 +12169,16 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12167
12169
|
if (!plane) return;
|
|
12168
12170
|
const measure = () => {
|
|
12169
12171
|
const width = plane.clientWidth;
|
|
12170
|
-
|
|
12171
|
-
|
|
12172
|
+
const height = plane.clientHeight;
|
|
12173
|
+
if (!width || !height) return;
|
|
12174
|
+
setFit(
|
|
12175
|
+
Math.min(
|
|
12176
|
+
1,
|
|
12177
|
+
(width - PLANE_PAD * 2) / SCENE_W,
|
|
12178
|
+
(height - PLANE_PAD * 2) / SCENE_H
|
|
12179
|
+
)
|
|
12180
|
+
);
|
|
12181
|
+
setPlaneHeight(height);
|
|
12172
12182
|
};
|
|
12173
12183
|
measure();
|
|
12174
12184
|
const observer = new ResizeObserver(measure);
|
|
@@ -12240,6 +12250,8 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12240
12250
|
};
|
|
12241
12251
|
const beginDrag = (event, node) => {
|
|
12242
12252
|
if (event.button !== 0) return;
|
|
12253
|
+
event.stopPropagation();
|
|
12254
|
+
nodeDragActive.current = true;
|
|
12243
12255
|
const startX = event.clientX;
|
|
12244
12256
|
const startY = event.clientY;
|
|
12245
12257
|
const scale2 = fit * zoom || 1;
|
|
@@ -12260,6 +12272,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12260
12272
|
);
|
|
12261
12273
|
};
|
|
12262
12274
|
const end = () => {
|
|
12275
|
+
nodeDragActive.current = false;
|
|
12263
12276
|
window.removeEventListener("pointermove", move);
|
|
12264
12277
|
if (!moved) return;
|
|
12265
12278
|
suppressClick.current = true;
|
|
@@ -12274,6 +12287,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12274
12287
|
};
|
|
12275
12288
|
const beginPan = (event) => {
|
|
12276
12289
|
if (event.button !== 0) return;
|
|
12290
|
+
if (nodeDragActive.current) return;
|
|
12277
12291
|
const startX = event.clientX;
|
|
12278
12292
|
const startY = event.clientY;
|
|
12279
12293
|
const origin = pan;
|
|
@@ -12340,7 +12354,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12340
12354
|
else if (ref) ref.current = node;
|
|
12341
12355
|
},
|
|
12342
12356
|
className: cn54(
|
|
12343
|
-
"flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
12357
|
+
"flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
12344
12358
|
className
|
|
12345
12359
|
),
|
|
12346
12360
|
"data-simulating": replaying || void 0,
|
|
@@ -12396,7 +12410,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12396
12410
|
] })
|
|
12397
12411
|
] }),
|
|
12398
12412
|
/* @__PURE__ */ jsxs59("div", { className: "flex min-h-0 flex-1 items-stretch", children: [
|
|
12399
|
-
/* @__PURE__ */ jsxs59("div", { className: "flex min-w-0 flex-1 flex-col", children: [
|
|
12413
|
+
/* @__PURE__ */ jsxs59("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
|
|
12400
12414
|
/* @__PURE__ */ jsxs59(
|
|
12401
12415
|
"div",
|
|
12402
12416
|
{
|
|
@@ -12422,11 +12436,13 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12422
12436
|
}
|
|
12423
12437
|
},
|
|
12424
12438
|
className: cn54(
|
|
12425
|
-
"relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
12439
|
+
"relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
12426
12440
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset"
|
|
12427
12441
|
),
|
|
12428
12442
|
style: {
|
|
12429
|
-
height
|
|
12443
|
+
// Grows with the host height, never collapses below the
|
|
12444
|
+
// stand-alone look when the parent has no explicit height.
|
|
12445
|
+
minHeight: PLANE_H,
|
|
12430
12446
|
backgroundImage: "radial-gradient(var(--color-hairline) 1px, transparent 1px)",
|
|
12431
12447
|
backgroundSize: "16px 16px"
|
|
12432
12448
|
},
|
|
@@ -12438,7 +12454,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12438
12454
|
style: {
|
|
12439
12455
|
width: SCENE_W,
|
|
12440
12456
|
height: SCENE_H,
|
|
12441
|
-
transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((
|
|
12457
|
+
transform: `translate(${PLANE_PAD + pan.x}px, ${Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y}px) scale(${scale})`,
|
|
12442
12458
|
transformOrigin: "0 0",
|
|
12443
12459
|
transition: "transform 200ms ease-out"
|
|
12444
12460
|
},
|
|
@@ -12599,22 +12615,29 @@ var PaymentRoutingCanvas = React62.forwardRef(
|
|
|
12599
12615
|
] })
|
|
12600
12616
|
] })
|
|
12601
12617
|
] }),
|
|
12602
|
-
/* @__PURE__ */ jsx62(
|
|
12603
|
-
|
|
12618
|
+
/* @__PURE__ */ jsx62(
|
|
12619
|
+
"div",
|
|
12604
12620
|
{
|
|
12605
|
-
|
|
12606
|
-
|
|
12607
|
-
|
|
12608
|
-
|
|
12609
|
-
|
|
12610
|
-
|
|
12611
|
-
|
|
12612
|
-
|
|
12613
|
-
|
|
12614
|
-
|
|
12615
|
-
|
|
12621
|
+
className: "flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline",
|
|
12622
|
+
style: { width: PANEL_W },
|
|
12623
|
+
children: /* @__PURE__ */ jsx62(
|
|
12624
|
+
NodeConfigPanel,
|
|
12625
|
+
{
|
|
12626
|
+
open: panelOpen,
|
|
12627
|
+
nodeType: focusedNode?.type ?? "condition",
|
|
12628
|
+
title: focusedNode?.title ?? "Select a node",
|
|
12629
|
+
rule: priority[0]?.label ?? "",
|
|
12630
|
+
priorities: priority,
|
|
12631
|
+
fallbackEnabled,
|
|
12632
|
+
onClose: closePanel,
|
|
12633
|
+
onPrioritiesChange: setPriority,
|
|
12634
|
+
onFallbackChange: setFallbackEnabled,
|
|
12635
|
+
onRemove: () => setPanelOpen(false),
|
|
12636
|
+
onSave: () => setPanelOpen(true)
|
|
12637
|
+
}
|
|
12638
|
+
)
|
|
12616
12639
|
}
|
|
12617
|
-
)
|
|
12640
|
+
)
|
|
12618
12641
|
] }),
|
|
12619
12642
|
ReactDOM10.createPortal(
|
|
12620
12643
|
/* @__PURE__ */ jsxs59(
|
package/package.json
CHANGED
|
@@ -23,6 +23,7 @@ const CONDITION_X = 316;
|
|
|
23
23
|
const PROCESSOR_X = 632;
|
|
24
24
|
const SCENE_W = 860;
|
|
25
25
|
const SCENE_H = 342;
|
|
26
|
+
/** Minimum plane height, used when the host gives the canvas no explicit height. */
|
|
26
27
|
const PLANE_H = 372;
|
|
27
28
|
const PLANE_PAD = 18;
|
|
28
29
|
const PANEL_W = 296;
|
|
@@ -287,6 +288,8 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
287
288
|
const [panelOpen, setPanelOpen] = React.useState(true);
|
|
288
289
|
const [zoom, setZoom] = React.useState(1);
|
|
289
290
|
const [fit, setFit] = React.useState(1);
|
|
291
|
+
/** Measured plane height — the scene centres against this, not a constant. */
|
|
292
|
+
const [planeHeight, setPlaneHeight] = React.useState(PLANE_H);
|
|
290
293
|
const [pan, setPan] = React.useState({ x: 0, y: 0 });
|
|
291
294
|
const [issuesOpen, setIssuesOpen] = React.useState(false);
|
|
292
295
|
const [priority, setPriority] = React.useState<ConfigPriority[]>([
|
|
@@ -306,6 +309,8 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
306
309
|
const triggerRef = React.useRef<HTMLButtonElement>(null);
|
|
307
310
|
const nodeRefs = React.useRef<Record<string, HTMLDivElement | null>>({});
|
|
308
311
|
const suppressClick = React.useRef(false);
|
|
312
|
+
/** A node drag owns the gesture — the plane must not pan under it. */
|
|
313
|
+
const nodeDragActive = React.useRef(false);
|
|
309
314
|
|
|
310
315
|
React.useEffect(() => {
|
|
311
316
|
setLocalNodes(incomingNodes);
|
|
@@ -316,8 +321,18 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
316
321
|
if (!plane) return;
|
|
317
322
|
const measure = () => {
|
|
318
323
|
const width = plane.clientWidth;
|
|
319
|
-
|
|
320
|
-
|
|
324
|
+
const height = plane.clientHeight;
|
|
325
|
+
if (!width || !height) return;
|
|
326
|
+
// Fit the scene into the plane on BOTH axes so a taller host height
|
|
327
|
+
// widens the fitted scene instead of leaving dead space.
|
|
328
|
+
setFit(
|
|
329
|
+
Math.min(
|
|
330
|
+
1,
|
|
331
|
+
(width - PLANE_PAD * 2) / SCENE_W,
|
|
332
|
+
(height - PLANE_PAD * 2) / SCENE_H,
|
|
333
|
+
),
|
|
334
|
+
);
|
|
335
|
+
setPlaneHeight(height);
|
|
321
336
|
};
|
|
322
337
|
measure();
|
|
323
338
|
const observer = new ResizeObserver(measure);
|
|
@@ -401,6 +416,10 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
401
416
|
|
|
402
417
|
const beginDrag = (event: React.PointerEvent, node: CanvasNode) => {
|
|
403
418
|
if (event.button !== 0) return;
|
|
419
|
+
// The node owns this gesture: without this the pointerdown bubbles to the
|
|
420
|
+
// plane's beginPan, both move listeners run, and the node drag also pans.
|
|
421
|
+
event.stopPropagation();
|
|
422
|
+
nodeDragActive.current = true;
|
|
404
423
|
const startX = event.clientX;
|
|
405
424
|
const startY = event.clientY;
|
|
406
425
|
const scale = fit * zoom || 1;
|
|
@@ -425,6 +444,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
425
444
|
};
|
|
426
445
|
|
|
427
446
|
const end = () => {
|
|
447
|
+
nodeDragActive.current = false;
|
|
428
448
|
window.removeEventListener("pointermove", move);
|
|
429
449
|
if (!moved) return;
|
|
430
450
|
suppressClick.current = true;
|
|
@@ -441,6 +461,8 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
441
461
|
|
|
442
462
|
const beginPan = (event: React.PointerEvent) => {
|
|
443
463
|
if (event.button !== 0) return;
|
|
464
|
+
// Defensive: a gesture already claimed by a node must never pan.
|
|
465
|
+
if (nodeDragActive.current) return;
|
|
444
466
|
const startX = event.clientX;
|
|
445
467
|
const startY = event.clientY;
|
|
446
468
|
const origin = pan;
|
|
@@ -519,7 +541,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
519
541
|
else if (ref) ref.current = node;
|
|
520
542
|
}}
|
|
521
543
|
className={cn(
|
|
522
|
-
"flex w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
544
|
+
"flex min-h-0 w-full flex-col overflow-hidden rounded-lg border border-hairline bg-surface shadow-card",
|
|
523
545
|
className,
|
|
524
546
|
)}
|
|
525
547
|
data-simulating={replaying || undefined}
|
|
@@ -576,7 +598,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
576
598
|
</div>
|
|
577
599
|
|
|
578
600
|
<div className="flex min-h-0 flex-1 items-stretch">
|
|
579
|
-
<div className="flex min-w-0 flex-1 flex-col">
|
|
601
|
+
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
|
|
580
602
|
<div
|
|
581
603
|
ref={planeRef}
|
|
582
604
|
role="application"
|
|
@@ -600,11 +622,13 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
600
622
|
}
|
|
601
623
|
}}
|
|
602
624
|
className={cn(
|
|
603
|
-
"relative min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
625
|
+
"relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
|
|
604
626
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset",
|
|
605
627
|
)}
|
|
606
628
|
style={{
|
|
607
|
-
height
|
|
629
|
+
// Grows with the host height, never collapses below the
|
|
630
|
+
// stand-alone look when the parent has no explicit height.
|
|
631
|
+
minHeight: PLANE_H,
|
|
608
632
|
backgroundImage:
|
|
609
633
|
"radial-gradient(var(--color-hairline) 1px, transparent 1px)",
|
|
610
634
|
backgroundSize: "16px 16px",
|
|
@@ -616,7 +640,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
616
640
|
width: SCENE_W,
|
|
617
641
|
height: SCENE_H,
|
|
618
642
|
transform: `translate(${PLANE_PAD + pan.x}px, ${
|
|
619
|
-
Math.max((
|
|
643
|
+
Math.max((planeHeight - SCENE_H * scale) / 2, 0) + pan.y
|
|
620
644
|
}px) scale(${scale})`,
|
|
621
645
|
transformOrigin: "0 0",
|
|
622
646
|
transition: "transform 200ms ease-out",
|
|
@@ -796,7 +820,10 @@ export const PaymentRoutingCanvas = React.forwardRef<
|
|
|
796
820
|
</div>
|
|
797
821
|
</div>
|
|
798
822
|
|
|
799
|
-
<div
|
|
823
|
+
<div
|
|
824
|
+
className="flex min-h-0 shrink-0 flex-col self-stretch border-l border-hairline"
|
|
825
|
+
style={{ width: PANEL_W }}
|
|
826
|
+
>
|
|
800
827
|
<NodeConfigPanel
|
|
801
828
|
open={panelOpen}
|
|
802
829
|
nodeType={focusedNode?.type ?? "condition"}
|