@procaaso/alphinity-ui-components 1.12.0 → 1.13.0

package/dist/index.cjs

@@ -88,7 +88,9 @@ __export(index_exports, {
   generateRoutePoints: () => generateRoutePoints,
   getAppearanceDefaults: () => getAppearanceDefaults,
   getAppearanceSchema: () => getAppearanceSchema,
+  getAvailableBadgeGlyphs: () => getAvailableBadgeGlyphs,
   getAvailableSymbols: () => getAvailableSymbols,
+  getBadgeGlyph: () => getBadgeGlyph,
   getPortWorldPosition: () => getPortWorldPosition,
   getSymbolDefinition: () => getSymbolDefinition,
   importDiagram: () => importDiagram,
@@ -97,6 +99,8 @@ __export(index_exports, {
   normalizeDeviceStatus: () => normalizeDeviceStatus,
   overlayStyles: () => overlayStyles,
   readAppearanceValue: () => readAppearanceValue,
+  registerBadgeGlyph: () => registerBadgeGlyph,
+  registerBadgeGlyphs: () => registerBadgeGlyphs,
   registerSymbol: () => registerSymbol,
   registerSymbols: () => registerSymbols,
   resolvePresetColor: () => resolvePresetColor,
@@ -5150,6 +5154,32 @@ function writeAppearanceValue(node, field, value) {
   return { metadata: { ...node.metadata, [field.key]: value } };
 }
 
+// src/diagram/badges/nodeBadgeGlyphs.ts
+var PROHIBIT_GLYPH = {
+  id: "prohibit",
+  svgContent: '<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.4"/><line x1="5.6" y1="18.4" x2="18.4" y2="5.6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>'
+};
+var builtInBadgeGlyphs = {
+  [PROHIBIT_GLYPH.id]: PROHIBIT_GLYPH
+};
+var customBadgeGlyphs = {};
+function registerBadgeGlyph(glyph) {
+  customBadgeGlyphs[glyph.id] = glyph;
+}
+function registerBadgeGlyphs(glyphs) {
+  if (Array.isArray(glyphs)) {
+    glyphs.forEach((glyph) => registerBadgeGlyph(glyph));
+  } else {
+    Object.values(glyphs).forEach((glyph) => registerBadgeGlyph(glyph));
+  }
+}
+function getBadgeGlyph(glyphId) {
+  return customBadgeGlyphs[glyphId] ?? builtInBadgeGlyphs[glyphId];
+}
+function getAvailableBadgeGlyphs() {
+  return [...Object.keys(customBadgeGlyphs), ...Object.keys(builtInBadgeGlyphs)];
+}
+
 // src/components/PIDCanvas/NodeRenderer.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var HATCH_TILE_SIZE = 7;
@@ -5159,6 +5189,75 @@ var HATCH_STRIPE_OPACITY = 85 / 255;
 function isUnknownNode(node) {
   return node.positionUnknown === true || normalizeDeviceStatus(node.status) === "unknown";
 }
+var DEFAULT_BADGE_CORNER = "top-right";
+var DEFAULT_BADGE_SIZE = 14;
+var DEFAULT_BADGE_COLOR = "#111827";
+var DEFAULT_BADGE_BACKGROUND = "#d1d5db";
+var BADGE_GLYPH_BOX = 24;
+var BADGE_BLINK_KEYFRAME_ID = "pid-node-badge-blink-keyframes";
+var BADGE_BLINK_KEYFRAME_NAME = "pid-node-badge-blink";
+function ensureBadgeBlinkKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(BADGE_BLINK_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = BADGE_BLINK_KEYFRAME_ID;
+  style.textContent = `@keyframes ${BADGE_BLINK_KEYFRAME_NAME}{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}`;
+  document.head.appendChild(style);
+}
+function badgeCenter(corner, vb, size) {
+  const margin = size / 4;
+  switch (corner) {
+    case "top-left":
+      return { x: -margin, y: -margin };
+    case "bottom-left":
+      return { x: -margin, y: vb.height + margin };
+    case "bottom-right":
+      return { x: vb.width + margin, y: vb.height + margin };
+    case "top-right":
+    default:
+      return { x: vb.width + margin, y: -margin };
+  }
+}
+function renderNodeBadge(badge, vb, rotation) {
+  const glyphDef = getBadgeGlyph(badge.glyph);
+  const size = badge.size ?? DEFAULT_BADGE_SIZE;
+  const color = badge.color ?? DEFAULT_BADGE_COLOR;
+  const backgroundColor = badge.backgroundColor ?? DEFAULT_BADGE_BACKGROUND;
+  const corner = badge.corner ?? DEFAULT_BADGE_CORNER;
+  const { x: cx, y: cy } = badgeCenter(corner, vb, size);
+  const radius = size / 2;
+  const glyphScale = size / BADGE_GLYPH_BOX;
+  let blinkStyle;
+  if (badge.blink) {
+    ensureBadgeBlinkKeyframes();
+    blinkStyle = {
+      animation: `${BADGE_BLINK_KEYFRAME_NAME} ${badge.blinkPeriodMs}ms ease-in-out infinite`
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "g",
+    {
+      "data-node-badge": badge.glyph,
+      "data-badge-corner": corner,
+      "data-badge-blink": badge.blink ? "true" : "false",
+      "aria-label": badge.label,
+      role: badge.label ? "img" : void 0,
+      transform: rotation ? `translate(${cx}, ${cy}) rotate(${-rotation})` : `translate(${cx}, ${cy})`,
+      style: blinkStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { r: radius, fill: backgroundColor }),
+        glyphDef && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "g",
+          {
+            color,
+            transform: `scale(${glyphScale}) translate(${-BADGE_GLYPH_BOX / 2}, ${-BADGE_GLYPH_BOX / 2})`,
+            dangerouslySetInnerHTML: { __html: glyphDef.svgContent }
+          }
+        )
+      ]
+    }
+  );
+}
 function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
@@ -5365,7 +5464,8 @@ function NodeRendererImpl({
                 transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${labelX}, ${labelY})` : void 0,
                 children: node.label || node.id
               }
-            )
+            ),
+            node.badge && renderNodeBadge(node.badge, vb, node.transform.rotation)
           ]
         },
         node.id
@@ -10461,7 +10561,9 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   generateRoutePoints,
   getAppearanceDefaults,
   getAppearanceSchema,
+  getAvailableBadgeGlyphs,
   getAvailableSymbols,
+  getBadgeGlyph,
   getPortWorldPosition,
   getSymbolDefinition,
   importDiagram,
@@ -10470,6 +10572,8 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   normalizeDeviceStatus,
   overlayStyles,
   readAppearanceValue,
+  registerBadgeGlyph,
+  registerBadgeGlyphs,
   registerSymbol,
   registerSymbols,
   resolvePresetColor,