Merge pull request #115 from synergycodes/WB-234-nodeAsPortWrapper-incorrect-bounds-pos-fix

Wb 234 node as port wrapper incorrect bounds pos fix

Author: bondzioyo

packages/ui/src/components/node/node-as-port-wrapper/node-as-port-wrapper.tsx

@@ -8,10 +8,15 @@ type Position = 'left' | 'top' | 'right' | 'bottom';
 type Props = {
   isConnecting: boolean;
   targetPortPosition: Position;
+  offset?: {
+    x?: number;
+    y?: number;
+  };
 };
 
 export const NodeAsPortWrapper = memo(function NodeAsPortWrapper({
   isConnecting,
+  offset = { x: 0, y: 0 },
   targetPortPosition,
   children,
 }: PropsWithChildren<Props>) {
@@ -25,8 +30,8 @@ export const NodeAsPortWrapper = memo(function NodeAsPortWrapper({
         '--ax-node-as-port-height': `${ref.current?.offsetHeight}px`,
         '--ax-node-as-port-position':
           targetPortPosition === 'left'
-            ? `translate(-10%, -50%)`
-            : `translate(-50%, -10%)`,
+            ? `translate(calc(-10% + ${offset.x}px), calc(-50% + ${offset.y}px))`
+            : `translate(calc(-50% + ${offset.x}px), calc(-10% + ${offset.y}px))`,
       }
     : null;
 

packages/website/generated/path-types.ts

@@ -1,4 +1,4 @@
 
-    export type AxiomTSXRelativePath = "components/accordion/accordion.tsx" | "components/avatar/avatar.tsx" | "components/button/base-button/base-button.tsx" | "components/button/nav-button/nav-button.tsx" | "components/button/nav-button/nav-icon-button/nav-icon-button.tsx" | "components/button/nav-button/nav-icon-label-button/nav-icon-label-button.tsx" | "components/button/nav-button/nav-label-button/nav-label-button.tsx" | "components/button/regular-button/button.tsx" | "components/button/regular-button/icon-button/icon-button.tsx" | "components/button/regular-button/icon-label-button/icon-label-button.tsx" | "components/button/regular-button/label-button/label-button.tsx" | "components/checkbox/checkbox.tsx" | "components/date-picker/date-picker.tsx" | "components/edge/edge-label/edge-label.tsx" | "components/edge/use-edge-styles/use-edge-styles.tsx" | "components/input/clear-button/clear-button.tsx" | "components/input/input.tsx" | "components/menu/menu-item.tsx" | "components/menu/menu.tsx" | "components/menu/test.tsx" | "components/modal/modal.tsx" | "components/node/node-as-port-wrapper/node-as-port-wrapper.tsx" | "components/node/node-description/node-description.tsx" | "components/node/node-icon/node-icon.tsx" | "components/node/node-panel/node-panel.tsx" | "components/radio-button/radio.tsx" | "components/segment-picker/item/segment-picker-item.tsx" | "components/segment-picker/segment-picker.tsx" | "components/select/select-button/select-button.tsx" | "components/select/select-option/select-option.tsx" | "components/select/select-value/select-value.tsx" | "components/select/select.tsx" | "components/separator/separator.tsx" | "components/snackbar/components/action-buttons.tsx" | "components/snackbar/components/icon.tsx" | "components/snackbar/components/message.tsx" | "components/snackbar/snackbar.tsx" | "components/status/status.tsx" | "components/switch/icon-switch/icon-switch.tsx" | "components/switch/switch.tsx" | "components/text-area/text-area.tsx" | "components/tooltip/tooltip-content.tsx" | "components/tooltip/tooltip-trigger.tsx" | "components/tooltip/tooltip.tsx" | "components/tooltip/use-tooltip.tsx";
+    export type AxiomTSXRelativePath = "components/accordion/accordion.tsx" | "components/avatar/avatar.tsx" | "components/button/base-button/base-button.tsx" | "components/button/nav-button/nav-button.tsx" | "components/button/nav-button/nav-icon-button/nav-icon-button.tsx" | "components/button/nav-button/nav-icon-label-button/nav-icon-label-button.tsx" | "components/button/nav-button/nav-label-button/nav-label-button.tsx" | "components/button/regular-button/button.tsx" | "components/button/regular-button/icon-button/icon-button.tsx" | "components/button/regular-button/icon-label-button/icon-label-button.tsx" | "components/button/regular-button/label-button/label-button.tsx" | "components/checkbox/checkbox.tsx" | "components/date-picker/date-picker.tsx" | "components/edge/edge-label/edge-label.tsx" | "components/edge/use-edge-styles/use-edge-styles.tsx" | "components/input/clear-button/clear-button.tsx" | "components/input/input.tsx" | "components/menu/menu-item.tsx" | "components/menu/menu.tsx" | "components/menu/test.tsx" | "components/menu/utils/create-trigger-button.tsx" | "components/modal/modal.tsx" | "components/node/node-as-port-wrapper/node-as-port-wrapper.tsx" | "components/node/node-description/node-description.tsx" | "components/node/node-icon/node-icon.tsx" | "components/node/node-panel/node-panel.tsx" | "components/radio-button/radio.tsx" | "components/segment-picker/item/segment-picker-item.tsx" | "components/segment-picker/segment-picker.tsx" | "components/select/select-button/select-button.tsx" | "components/select/select-option/select-option.tsx" | "components/select/select-value/select-value.tsx" | "components/select/select.tsx" | "components/separator/separator.tsx" | "components/snackbar/components/action-buttons.tsx" | "components/snackbar/components/icon.tsx" | "components/snackbar/components/message.tsx" | "components/snackbar/snackbar.tsx" | "components/status/status.tsx" | "components/switch/icon-switch/icon-switch.tsx" | "components/switch/switch.tsx" | "components/text-area/text-area.tsx" | "components/tooltip/tooltip-content.tsx" | "components/tooltip/tooltip-trigger.tsx" | "components/tooltip/tooltip.tsx" | "components/tooltip/use-tooltip.tsx";
     export type AxiomCSSRelativePath = "components/accordion/accordion.module.css" | "components/avatar/avatar.module.css" | "components/button/base-button/base-button.module.css" | "components/button/nav-button/nav-icon-button/nav-icon-button.module.css" | "components/button/nav-button/nav-icon-button/nav-icon-padding.module.css" | "components/button/nav-button/nav-icon-label-button/nav-button-gap.module.css" | "components/button/nav-button/nav-icon-label-button/nav-icon-label-button-padding.module.css" | "components/button/nav-button/nav-label-button/nav-label-button-padding.module.css" | "components/button/nav-button/styles/nav-button-border-radius.module.css" | "components/button/nav-button/styles/nav-button-font-size.module.css" | "components/button/nav-button/styles/nav-button.module.css" | "components/button/nav-button/styles/nav-icon-size.module.css" | "components/button/regular-button/label-button/loader.module.css" | "components/button/styles/border-radius.module.css" | "components/button/styles/font-size.module.css" | "components/button/styles/gap.module.css" | "components/button/styles/icon-label-button-padding.module.css" | "components/button/styles/icon-padding.module.css" | "components/button/styles/icon-size.module.css" | "components/button/styles/label-button-padding.module.css" | "components/button/styles/variant.module.css" | "components/checkbox/checkbox.module.css" | "components/date-picker/data-picker-mantine.css" | "components/date-picker/date-picker.module.css" | "components/date-picker/variables.css" | "components/edge/edge-label/edge-label-size.module.css" | "components/edge/edge-label/edge-label.module.css" | "components/edge/use-edge-styles/use-edge-styles.css" | "components/input/clear-button/clear-button.module.css" | "components/input/input-root.module.css" | "components/input/input.module.css" | "components/input/variables.css" | "components/modal/modal.module.css" | "components/node/node-as-port-wrapper/node-as-port.css" | "components/node/node-description/node-description.module.css" | "components/node/node-icon/node-icon.module.css" | "components/node/node-panel/handle.module.css" | "components/node/node-panel/node-panel.module.css" | "components/radio-button/radio-size.module.css" | "components/radio-button/radio.module.css" | "components/segment-picker/border-radius-size.module.css" | "components/segment-picker/item/segment-picker-item-shape.module.css" | "components/segment-picker/segment-picker.module.css" | "components/select/select-button/select-button.module.css" | "components/select/select-value/select-value.module.css" | "components/select/select.module.css" | "components/separator/separator.module.css" | "components/snackbar/components/action-buttons.module.css" | "components/snackbar/components/icon.module.css" | "components/snackbar/components/message.module.css" | "components/snackbar/snackbar.module.css" | "components/status/status.module.css" | "components/switch/icon-switch/icon-switch.module.css" | "components/switch/switch-size.module.css" | "components/switch/switch.module.css" | "components/text-area/text-area.module.css" | "components/tooltip/tooltip.module.css";
 

packages/website/generated/props.json

@@ -1440,6 +1440,37 @@
             "name": "boolean"
           }
         },
+        "offset": {
+          "defaultValue": {
+            "computed": false,
+            "value": "{ x: 0, y: 0 }"
+          },
+          "description": "",
+          "required": false,
+          "tsType": {
+            "name": "signature",
+            "raw": "{\n  x?: number;\n  y?: number;\n}",
+            "signature": {
+              "properties": [
+                {
+                  "key": "x",
+                  "value": {
+                    "name": "number",
+                    "required": false
+                  }
+                },
+                {
+                  "key": "y",
+                  "value": {
+                    "name": "number",
+                    "required": false
+                  }
+                }
+              ]
+            },
+            "type": "object"
+          }
+        },
         "targetPortPosition": {
           "description": "",
           "required": true,