@procaaso/alphinity-ui-components 1.0.5 → 1.0.6

package/dist/index.cjs

@@ -78,6 +78,8 @@ __export(index_exports, {
   mockSymbolLibrary: () => mockSymbolLibrary,
   nodeHasPort: () => nodeHasPort,
   overlayStyles: () => overlayStyles,
+  registerSymbol: () => registerSymbol,
+  registerSymbols: () => registerSymbols,
   useDrag: () => useDrag,
   useKeyboardShortcuts: () => useKeyboardShortcuts,
   useSelection: () => useSelection,
@@ -1794,13 +1796,13 @@ var mockSymbolLibrary = {
     id: "valve-gate",
     name: "Gate Valve (Powered)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 52, height: 52 },
+    viewBox: { x: 0, y: 0, width: 26, height: 26 },
     ports: [
-      { id: "inlet", x: 0, y: 36, type: "inlet", direction: "in" },
-      { id: "outlet", x: 52, y: 36, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 18, type: "inlet", direction: "in" },
+      { id: "outlet", x: 26, y: 18, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Actuator box -->
         <rect x="16.74" y="0" width="18.02" height="18.02" fill="var(--symbol-fill, #edeeef)" stroke="var(--symbol-stroke, #666666)" pointer-events="all"/>
         <!-- Actuator stem -->
@@ -1818,13 +1820,13 @@ var mockSymbolLibrary = {
     id: "pump-positive-displacement",
     name: "Positive Displacement Pump",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 56.25, height: 56.25 },
+    viewBox: { x: 0, y: 0, width: 28.125, height: 28.125 },
     ports: [
-      { id: "inlet", x: 0, y: 28.125, type: "inlet", direction: "in" },
-      { id: "outlet", x: 56.25, y: 28.125, type: "outlet", direction: "out" }
+      { id: "inlet", x: 0, y: 14.0625, type: "inlet", direction: "in" },
+      { id: "outlet", x: 28.125, y: 14.0625, type: "outlet", direction: "out" }
     ],
     svgContent: `
-      <g transform="scale(0.5625)">
+      <g transform="scale(0.28125)">
         <!-- Outer circle -->
         <ellipse 
           cx="50" 
@@ -1866,13 +1868,13 @@ var mockSymbolLibrary = {
     id: "vannefold-bottom",
     name: "Vannefold Block (Bottom)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 88, height: 67.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 44, height: 33.892578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 25, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 65, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 12.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 32.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,29.785156 H 0 v -10 h 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16"
@@ -1930,13 +1932,13 @@ var mockSymbolLibrary = {
     id: "vannefold-middle",
     name: "Vannefold Block (Middle)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 53.097656 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 26.548828 },
     ports: [
-      { id: "left-inlet", x: 0, y: 27.3125, type: "control", direction: "in" },
-      { id: "right-outlet", x: 95, y: 27.3125, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 13.65625, type: "control", direction: "in" },
+      { id: "right-outlet", x: 47.5, y: 13.65625, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe -->
         <path 
           d="M 3,22.3125 H 0 v 10 H 3 m 14,-10 h 3 v 10 h -3 m -15,-8 h 16 m -16,6 h 16"
@@ -1985,13 +1987,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top",
     name: "Vannefold Block (Top)",
     category: "valve",
-    viewBox: { x: -0.5, y: -0.5, width: 95, height: 60.785156 },
+    viewBox: { x: -0.25, y: -0.25, width: 47.5, height: 30.392578 },
     ports: [
-      { id: "bottom-inlet", x: 0, y: 35, type: "control", direction: "in" },
-      { id: "top-outlet", x: 48, y: 0, type: "control", direction: "out" }
+      { id: "bottom-inlet", x: 0, y: 17.5, type: "control", direction: "in" },
+      { id: "top-outlet", x: 24, y: 0, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Bottom inlet pipe -->
         <path 
           d="M 3,30 H 0 V 40 H 3 M 17,30 h 3 V 40 H 17 M 2,32 H 18 M 2,38 H 18"
@@ -2041,13 +2043,13 @@ var mockSymbolLibrary = {
     id: "vannefold-top-top-inlet",
     name: "Vannefold Block (Top, Top Inlet)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 88, height: 67.576004 },
+    viewBox: { x: 0, y: 0, width: 44, height: 33.788002 },
     ports: [
-      { id: "top-inlet", x: 47, y: 0, type: "control", direction: "in" },
-      { id: "bottom-outlet", x: 0, y: 42, type: "control", direction: "out" }
+      { id: "top-inlet", x: 23.5, y: 0, type: "control", direction: "in" },
+      { id: "bottom-outlet", x: 0, y: 21, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Top inlet pipe flange -->
         <path 
           d="M 52,3 V 1.3598666e-8 H 42 V 3 m 10,14 v 3 H 42 V 17 M 50,2 V 18 M 44,2 v 16" 
@@ -2105,13 +2107,13 @@ var mockSymbolLibrary = {
     id: "vannefold-left",
     name: "Vannefold Block (Left)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "left-inlet", x: 0, y: 41.5, type: "control", direction: "in" },
-      { id: "right-outlet", x: 42, y: 87, type: "control", direction: "out" }
+      { id: "left-inlet", x: 0, y: 20.75, type: "control", direction: "in" },
+      { id: "right-outlet", x: 21, y: 43.5, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Left inlet pipe flange -->
         <path 
           d="M 3,46.5 H 2.8789924e-8 v -10 H 3 m 14,10 h 3 v -10 h -3 m -15,8 h 16 m -16,-6 h 16" 
@@ -2168,13 +2170,13 @@ var mockSymbolLibrary = {
     id: "vannefold-right",
     name: "Vannefold Block (Right)",
     category: "valve",
-    viewBox: { x: 0, y: 0, width: 67.785156, height: 88.5 },
+    viewBox: { x: 0, y: 0, width: 33.892578, height: 44.25 },
     ports: [
-      { id: "right-inlet", x: 67.785156, y: 41.5, type: "control", direction: "in" },
-      { id: "left-outlet", x: 24.785156, y: 87.5, type: "control", direction: "out" }
+      { id: "right-inlet", x: 33.892578, y: 20.75, type: "control", direction: "in" },
+      { id: "left-outlet", x: 12.392578, y: 43.75, type: "control", direction: "out" }
     ],
     svgContent: `
-      <g>
+      <g transform="scale(0.5)">
         <!-- Right inlet pipe flange -->
         <path 
           d="m 63.785156,46.5 h 3 v -10 h -3 m -14,10 h -3 v -10 h 3 m 15,8 h -16 m 16,-6 h -16" 
@@ -2231,16 +2233,16 @@ var mockSymbolLibrary = {
     id: "pixer",
     name: "Pixer",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Top mounting flange -->
         <rect 
           width="141.313" 
@@ -2505,16 +2507,16 @@ var mockSymbolLibrary = {
     id: "pixer-barb",
     name: "Pixer (Hose Barb)",
     category: "pump",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 46.6875 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 23.34375 },
     ports: [
-      { id: "right-outlet", x: 50.625, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-outlet", x: 0, y: 30.9375, type: "control", direction: "out" },
-      { id: "left-inlet", x: 50.625, y: 19.6875, type: "control", direction: "in" },
-      { id: "right-inlet", x: 0, y: 19.6875, type: "control", direction: "in" },
-      { id: "top-inlet", x: 25.3125, y: 0, type: "control", direction: "in" }
+      { id: "right-outlet", x: 25.3125, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-outlet", x: 0, y: 15.46875, type: "control", direction: "out" },
+      { id: "left-inlet", x: 25.3125, y: 9.84375, type: "control", direction: "in" },
+      { id: "right-inlet", x: 0, y: 9.84375, type: "control", direction: "in" },
+      { id: "top-inlet", x: 12.65625, y: 0, type: "control", direction: "in" }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -186)">
+      <g transform="scale(0.0984375) translate(-195, -186)">
         <!-- Hose barb ridges at top -->
         <rect 
           width="20" 
@@ -2796,15 +2798,15 @@ var mockSymbolLibrary = {
     id: "vessel-balloon",
     name: "Vessel",
     category: "vessel",
-    viewBox: { x: 0, y: 0, width: 50.625, height: 91 },
+    viewBox: { x: 0, y: 0, width: 25.3125, height: 45.5 },
     ports: [
-      { id: "top", type: "inlet", x: 25.3125, y: 0 },
-      { id: "left", type: "inlet", x: 5, y: 39 },
-      { id: "right", type: "outlet", x: 45.625, y: 39 },
-      { id: "bottom", type: "outlet", x: 25.3125, y: 91 }
+      { id: "top", type: "inlet", x: 12.65625, y: 0 },
+      { id: "left", type: "inlet", x: 2.5, y: 19.5 },
+      { id: "right", type: "outlet", x: 22.8125, y: 19.5 },
+      { id: "bottom", type: "outlet", x: 12.65625, y: 45.5 }
     ],
     svgContent: `
-      <g transform="scale(0.196875) translate(-195, -100)">
+      <g transform="scale(0.0984375) translate(-195, -100)">
         <!-- Top opening nozzle -->
         <rect 
           width="65" 
@@ -2869,19 +2871,53 @@ var mockSymbolLibrary = {
       tags: ["vessel", "storage", "tank", "balloon"]
     }
   },
+  "hollow-fiber": {
+    id: "hollow-fiber",
+    name: "Hollow Fiber",
+    category: "other",
+    viewBox: { x: 0, y: 0, width: 30, height: 109 },
+    ports: [
+      { id: "top-left", type: "outlet", x: 10, y: 2.75 },
+      { id: "top-right", type: "outlet", x: 24.5, y: 22.25 },
+      { id: "bottom-left", type: "inlet", x: 10, y: 106.25 },
+      { id: "bottom-right", type: "inlet", x: 24.5, y: 87.25 }
+    ],
+    svgContent: `
+      <g transform="scale(0.5)">
+        <!-- Top left flange -->
+        <rect x="10.5" y="0.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Top right flange -->
+        <rect x="39.5" y="39.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom left flange -->
+        <rect x="10.5" y="207.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Bottom right flange -->
+        <rect x="39.5" y="169.5" width="20" height="10" rx="1.5" ry="1.5" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+        
+        <!-- Main vessel body -->
+        <rect x="0.5" y="9.5" width="40" height="199.5" rx="6" ry="6" fill="var(--symbol-fill, #eaeaea)" stroke="var(--symbol-stroke, #000000)" />
+      </g>
+    `,
+    metadata: {
+      description: "Hollow fiber filter module with multiple inlet/outlet connections",
+      tags: ["filter", "hollow-fiber", "filtration", "separation", "membrane"]
+    }
+  },
   "psr-f": {
     id: "psr-f",
     name: "PSR F",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2915,15 +2951,15 @@ var mockSymbolLibrary = {
     id: "psr-p",
     name: "PSR P",
     category: "instrument",
-    viewBox: { x: 0, y: 0, width: 57, height: 57 },
+    viewBox: { x: 0, y: 0, width: 28.5, height: 28.5 },
     ports: [
-      { id: "top", type: "signal", x: 28.5, y: 14.25 },
-      { id: "right", type: "signal", x: 42.75, y: 28.5 },
-      { id: "bottom", type: "signal", x: 28.5, y: 42.75 },
-      { id: "left", type: "signal", x: 14.25, y: 28.5 }
+      { id: "top", type: "signal", x: 14.25, y: 7.125 },
+      { id: "right", type: "signal", x: 21.375, y: 14.25 },
+      { id: "bottom", type: "signal", x: 14.25, y: 21.375 },
+      { id: "left", type: "signal", x: 7.125, y: 14.25 }
     ],
     svgContent: `
-      <g transform="scale(0.5) translate(28.5, 28.5)">
+      <g transform="scale(0.25) translate(28.5, 28.5)">
         <!-- Circle background -->
         <ellipse 
           cx="28.5" 
@@ -2954,11 +2990,22 @@ var mockSymbolLibrary = {
     }
   }
 };
+var customSymbols = {};
+function registerSymbol(symbol) {
+  customSymbols[symbol.id] = symbol;
+}
+function registerSymbols(symbols) {
+  if (Array.isArray(symbols)) {
+    symbols.forEach((symbol) => registerSymbol(symbol));
+  } else {
+    Object.values(symbols).forEach((symbol) => registerSymbol(symbol));
+  }
+}
 function getSymbolDefinition(symbolId) {
-  return mockSymbolLibrary[symbolId];
+  return customSymbols[symbolId] ?? mockSymbolLibrary[symbolId];
 }
 function getAvailableSymbols() {
-  return Object.keys(mockSymbolLibrary);
+  return [...Object.keys(customSymbols), ...Object.keys(mockSymbolLibrary)];
 }
 
 // src/components/PIDCanvas/NodeRenderer.tsx
@@ -6588,6 +6635,8 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   mockSymbolLibrary,
   nodeHasPort,
   overlayStyles,
+  registerSymbol,
+  registerSymbols,
   useDrag,
   useKeyboardShortcuts,
   useSelection,