footprint-explainable-ui 0.7.2 → 0.7.4

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.
Files changed (5) hide show
  1. package/dist/flowchart.cjs +77 -59
  2. package/dist/flowchart.cjs.map +1 -1
  3. package/dist/flowchart.js +77 -59
  4. package/dist/flowchart.js.map +1 -1
  5. package/package.json +8 -1
package/dist/flowchart.cjs CHANGED
@@ -351,7 +351,7 @@ var StageNode = (0, import_react3.memo)(function StageNode2({
351
351
  position: "absolute",
352
352
  inset: -6,
353
353
  borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
354
- transform: isDecider ? "rotate(45deg)" : void 0,
354
+ clipPath: isDecider ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : void 0,
355
355
  border: `2px solid ${theme.primary}`,
356
356
  opacity: 0.4,
357
357
  animation: "fp-pulse 2s ease-in-out infinite"
@@ -365,77 +365,95 @@ var StageNode = (0, import_react3.memo)(function StageNode2({
365
365
  position: "absolute",
366
366
  inset: -6,
367
367
  borderRadius: isDecider ? 0 : `calc(${theme.radius} + 4px)`,
368
- transform: isDecider ? "rotate(45deg)" : void 0,
368
+ clipPath: isDecider ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : void 0,
369
369
  border: `2px solid ${theme.primary}`,
370
370
  opacity: 0.3,
371
371
  animation: "fp-pulse 1.5s ease-out infinite"
372
372
  }
373
373
  }
374
374
  ),
375
- isDecider ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
376
- "div",
377
- {
378
- style: {
379
- background: bg,
380
- border: `2px ${isLazyUnresolved ? "dashed" : "solid"} ${borderColor}`,
381
- borderRadius: 4,
382
- transform: "rotate(45deg)",
383
- padding: 20,
384
- boxShadow: shadow,
385
- transition: "all 0.3s ease",
386
- display: "flex",
387
- alignItems: "center",
388
- justifyContent: "center"
389
- },
390
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
391
- "div",
392
- {
393
- style: {
394
- transform: "rotate(-45deg)",
395
- display: "flex",
396
- flexDirection: "column",
397
- alignItems: "center",
398
- gap: 2,
399
- fontFamily: theme.fontSans
400
- },
401
- children: [
402
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [
403
- icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StageIcon, { type: icon, color: textColor }),
404
- !icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 10, color: textColor }, children: "\u25C7" }),
405
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
406
- "span",
407
- {
408
- style: {
409
- fontSize: 12,
410
- fontWeight: 600,
411
- color: textColor,
412
- whiteSpace: "nowrap"
413
- },
414
- children: label
415
- }
416
- )
417
- ] }),
418
- description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
375
+ isDecider ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", width: 120, height: 72 }, children: [
376
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
377
+ "div",
378
+ {
379
+ style: {
380
+ position: "absolute",
381
+ inset: 0,
382
+ background: bg,
383
+ clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
384
+ border: "none",
385
+ boxShadow: shadow,
386
+ transition: "all 0.3s ease"
387
+ }
388
+ }
389
+ ),
390
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
391
+ "div",
392
+ {
393
+ style: {
394
+ position: "absolute",
395
+ inset: -2,
396
+ clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
397
+ background: borderColor,
398
+ zIndex: -1,
399
+ ...isLazyUnresolved ? {
400
+ background: "transparent"
401
+ // Dashed border via SVG for clip-path (CSS border doesn't work with clip-path)
402
+ } : {}
403
+ }
404
+ }
405
+ ),
406
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
407
+ "div",
408
+ {
409
+ style: {
410
+ position: "absolute",
411
+ inset: 0,
412
+ display: "flex",
413
+ flexDirection: "column",
414
+ alignItems: "center",
415
+ justifyContent: "center",
416
+ gap: 1,
417
+ fontFamily: theme.fontSans,
418
+ zIndex: 1
419
+ },
420
+ children: [
421
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
422
+ effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StageIcon, { type: effectiveIcon, color: textColor }),
423
+ !effectiveIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 9, color: textColor }, children: "\u25C7" }),
424
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
419
425
  "span",
420
426
  {
421
427
  style: {
422
- fontSize: 9,
423
- fontWeight: 400,
428
+ fontSize: 11,
429
+ fontWeight: 600,
424
430
  color: textColor,
425
- opacity: 0.7,
426
- whiteSpace: "nowrap",
427
- overflow: "hidden",
428
- textOverflow: "ellipsis",
429
- maxWidth: 130
431
+ whiteSpace: "nowrap"
430
432
  },
431
- children: description
433
+ children: label
432
434
  }
433
435
  )
434
- ]
435
- }
436
- )
437
- }
438
- ) : (
436
+ ] }),
437
+ description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
438
+ "span",
439
+ {
440
+ style: {
441
+ fontSize: 8,
442
+ fontWeight: 400,
443
+ color: textColor,
444
+ opacity: 0.7,
445
+ whiteSpace: "nowrap",
446
+ overflow: "hidden",
447
+ textOverflow: "ellipsis",
448
+ maxWidth: 100
449
+ },
450
+ children: description
451
+ }
452
+ )
453
+ ]
454
+ }
455
+ )
456
+ ] }) : (
439
457
  /* Standard rectangular node */
440
458
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
441
459
  "div",