@ship-ui/core 0.15.18 → 0.15.22

package/index.d.ts

@@ -1,6 +1,6 @@
 import * as _ship_ui_core from '@ship-ui/core';
 import * as _angular_core from '@angular/core';
-import { ElementRef, QueryList, ComponentRef, OutputRefSubscription, Type, AfterContentInit, TemplateRef, WritableSignal, OnDestroy, InjectionToken } from '@angular/core';
+import { ElementRef, QueryList, ComponentRef, OutputRefSubscription, Type, OutputEmitterRef, AfterViewInit, OnDestroy, AfterContentInit, TemplateRef, WritableSignal, InjectionToken } from '@angular/core';
 import { NgModel } from '@angular/forms';
 
 type ShipAlertItem = {
@@ -118,13 +118,110 @@ declare class ShipDialogService {
     compClosedSub: OutputRefSubscription | null;
     open<T, K = any>(component: Type<T>, options?: ShipDialogServiceOptions<K>): {
         component: T;
-        close: () => void;
+        close: <U>(arg?: U | undefined) => void;
+        closed: OutputEmitterRef<void>;
     };
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipDialogService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ShipDialogService>;
 }
 
+type Port = {
+    id: string;
+    name: string;
+};
+type BlueprintNode = {
+    id: string;
+    name?: string;
+    coordinates: Coordinates;
+    inputs: Port[];
+    outputs: Port[];
+    connections: Connection[];
+};
+type Connection = {
+    fromNode: string;
+    fromPort: string;
+    toNode: string;
+    toPort: string;
+};
+type DragState = {
+    fromNode: string;
+    fromPort: string;
+    x2: number;
+    y2: number;
+};
+type Coordinates = [x: number, y: number];
+declare const TEST_NODES: BlueprintNode[];
+type ValidationErrors = {
+    duplicateNodeIds: string[];
+    duplicatePortIds: {
+        nodeId: string;
+        duplicatePortIds: string[];
+    }[];
+};
+declare class ShipBlueprintComponent implements AfterViewInit, OnDestroy {
+    #private;
+    asDots: _angular_core.Signal<boolean>;
+    lightMode: _angular_core.Signal<boolean>;
+    forceUnique: _angular_core.InputSignal<boolean>;
+    autoLayout: _angular_core.InputSignal<boolean>;
+    gridSize: _angular_core.InputSignal<number>;
+    snapToGrid: _angular_core.InputSignal<boolean>;
+    gridColor: _angular_core.InputSignal<[string, string]>;
+    nodes: _angular_core.ModelSignal<BlueprintNode[]>;
+    panX: _angular_core.WritableSignal<number>;
+    panY: _angular_core.WritableSignal<number>;
+    zoomLevel: _angular_core.WritableSignal<number>;
+    gridSnapSize: _angular_core.WritableSignal<number>;
+    isHoveringNode: _angular_core.WritableSignal<boolean>;
+    midpointDivPosition: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    } | null>;
+    showMidpointDiv: _angular_core.WritableSignal<boolean>;
+    isLocked: _angular_core.WritableSignal<boolean>;
+    draggingConnection: _angular_core.WritableSignal<DragState | null>;
+    validationErrors: _angular_core.WritableSignal<ValidationErrors | null>;
+    highlightedConnection: _angular_core.WritableSignal<Connection | null>;
+    canvasRef: ElementRef<HTMLCanvasElement>;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    applyAutolayout(): void;
+    updateCanvasSize(): void;
+    drawCanvas(): void;
+    drawGrid(ctx: CanvasRenderingContext2D): void;
+    drawConnections(ctx: CanvasRenderingContext2D): void;
+    drawDraggingPath(ctx: CanvasRenderingContext2D): void;
+    drawCurvedPath(ctx: CanvasRenderingContext2D, start: Coordinates, end: Coordinates): void;
+    onMouseUp(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    onEscape(event: KeyboardEvent): void;
+    onMouseMove(event: MouseEvent): void;
+    onTouchMove(event: TouchEvent): void;
+    startNodeDrag(event: MouseEvent | TouchEvent, nodeId: string): void;
+    endNodeDrag(): void;
+    nodeDrag(event: MouseEvent | Touch): void;
+    startPortDrag(event: MouseEvent, nodeId: string, portId: string): void;
+    endPortDrag(_: MouseEvent, toNodeId: string, toPortId: string): void;
+    cancelPortDrag(): void;
+    updatePathOnMove(event: MouseEvent | Touch): void;
+    getNodePortPosition(nodeId: string, portId: string): Coordinates;
+    startPan(event: MouseEvent): void;
+    endPan(): void;
+    pan(event: MouseEvent): void;
+    zoom(event: WheelEvent): void;
+    handleTouchStart(event: TouchEvent): void;
+    handleTouchMove(event: TouchEvent): void;
+    handleTouchEnd(): void;
+    closeMidpointDiv(): void;
+    getDisplayCoordinates(node: BlueprintNode): string;
+    removeConnection(): void;
+    getNewNodeCoordinates(panToCoordinates?: boolean): Coordinates;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipBlueprintComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipBlueprintComponent, "sh-blueprint", never, { "forceUnique": { "alias": "forceUnique"; "required": false; "isSignal": true; }; "autoLayout": { "alias": "autoLayout"; "required": false; "isSignal": true; }; "gridSize": { "alias": "gridSize"; "required": false; "isSignal": true; }; "snapToGrid": { "alias": "snapToGrid"; "required": false; "isSignal": true; }; "gridColor": { "alias": "gridColor"; "required": false; "isSignal": true; }; "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; }, never, ["*"], true, never>;
+}
+
 declare class ShipButtonGroupComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipButtonGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipButtonGroupComponent, "sh-button-group", never, {}, {}, never, ["*"], true, never>;
@@ -778,5 +875,5 @@ interface ShipConfig {
     sidenavType?: 'overlay' | 'simple';
 }
 
-export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, moveIndex, watchHostClass };
-export type { AfterDropResponse, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipDialogOptions, ShipDialogReturn, ShipDialogServiceOptions, ShipPopoverOptions, ShipProgressBarMode, ShipSidenavType };
+export { GridSortableDirective, SHIP_CONFIG, ShipAlertComponent, ShipAlertContainerComponent, ShipAlertModule, ShipAlertService, ShipBlueprintComponent, ShipButtonComponent, ShipButtonGroupComponent, ShipCardComponent, ShipCheckboxComponent, ShipChipComponent, ShipColorPickerComponent, ShipDatepickerComponent, ShipDatepickerInputComponent, ShipDaterangeInputComponent, ShipDialogComponent, ShipDialogService, ShipDividerComponent, ShipEventCardComponent, ShipFileDragDropDirective, ShipFileUploadComponent, ShipFormFieldComponent, ShipIconComponent, ShipListComponent, ShipMenuComponent, ShipPopoverComponent, ShipPreventWheelDirective, ShipProgressBarComponent, ShipRadioComponent, ShipRangeSliderComponent, ShipResizeDirective, ShipSelectComponent, ShipSidenavComponent, ShipSortDirective, ShipSortableComponent, ShipSortableDirective, ShipSpinnerComponent, ShipStepperComponent, ShipStickyColumnsDirective, ShipTableComponent, ShipTabsComponent, ShipToggleCardComponent, ShipToggleComponent, ShipTooltipComponent, ShipTooltipDirective, ShipTooltipWrapper, ShipVirtualScrollComponent, TEST_NODES, moveIndex, watchHostClass };
+export type { AfterDropResponse, BlueprintNode, Coordinates, ShipAlertItem, ShipAlertItemInternal, ShipAlertType, ShipDialogOptions, ShipDialogReturn, ShipDialogServiceOptions, ShipPopoverOptions, ShipProgressBarMode, ShipSidenavType };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.15.18",
+  "version": "0.15.22",
   "peerDependencies": {
     "@angular/common": ">=19",
     "@angular/core": ">=19"
@@ -41,6 +41,9 @@
     "calendar",
     "minus-bold",
     "info",
+    "list",
+    "trash",
+    "tree-structure",
     "check-bold",
     "check-circle",
     "warning-octagon",

package/styles/components/ship-blueprint.component.scss

@@ -0,0 +1,238 @@
+@use '../helpers.scss' as *;
+$shipBlueprint: true !default;
+
+@if $shipBlueprint == true {
+  sh-blueprint {
+    --bp-bg: var(--base-1);
+    --bp-icon-c: var(--base-6);
+    --bp-stroke-c: var(--base-7);
+    --bp-stroke-ca: var(--primary-8);
+
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    > * {
+      box-sizing: border-box;
+    }
+
+    sh-icon {
+      font-size: p2r(16);
+      color: var(--bp-icon-c);
+    }
+
+    .validation-errors {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: p2r(16);
+    }
+
+    .midpoint-div {
+      position: absolute;
+      background-color: var(--base-2);
+      border: 1px solid var(--base-4);
+      padding: p2r(8);
+      gap: p2r(8);
+      border-radius: var(--shape-2);
+      transform: translate(-50%, -50%);
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      sh-icon {
+        color: var(--base-12);
+      }
+    }
+
+    .canvas-container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+
+      &.hovering-connection {
+        cursor: pointer;
+      }
+
+      &.locked {
+        .node {
+          pointer-events: none;
+        }
+      }
+    }
+
+    .action-panel {
+      position: absolute;
+      top: p2r(8);
+      right: p2r(8);
+      gap: p2r(8);
+      display: flex;
+      align-items: center;
+      z-index: 1000;
+    }
+
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .nodes-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      will-change: transform;
+    }
+    .canvas {
+      height: 100%;
+      width: 100%;
+      background-color: var(--bp-bg);
+      overflow: hidden;
+      touch-action: none;
+      position: relative;
+    }
+
+    .grid {
+      position: absolute;
+      inset: 0;
+      will-change: transform;
+    }
+
+    .tile {
+      position: absolute;
+      box-sizing: border-box;
+      width: 800px;
+      height: 800px;
+      background-image:
+        repeating-linear-gradient(0deg, var(--bp-grid-c) 0 2px, transparent 2px 100%),
+        repeating-linear-gradient(90deg, var(--bp-grid-c) 0 2px, transparent 2px 100%);
+      background-size: 20px 20px;
+    }
+
+    .node {
+      position: absolute;
+      min-width: 150px;
+      // min-height: 100px;
+      padding: 0;
+      transition: box-shadow 0.2s ease-in-out;
+      box-shadow: var(--box-shadow-10);
+      will-change: transform;
+
+      display: flex;
+      flex-direction: column;
+
+      header {
+        padding: p2r(8);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: var(--base-2);
+        border-bottom: 1px solid var(--base-4);
+        cursor: grab;
+        user-select: none;
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
+
+      &:has(header:hover) {
+        box-shadow: 0 0 10px 2px var(--primary-6);
+      }
+    }
+
+    .ports {
+      padding: p2r(8 0);
+      display: flex;
+      gap: p2r(8);
+    }
+
+    .inputs,
+    .outputs {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      flex: 1 0;
+      height: 100%;
+    }
+
+    .inputs {
+      .port {
+        border-radius: 0 50% 50% 0;
+        border-left-width: 0;
+      }
+    }
+
+    .outputs {
+      align-items: flex-end;
+
+      .port {
+        border-radius: 50% 0 0 50%;
+        border-right-width: 0;
+      }
+    }
+
+    .port-wrap {
+      display: flex;
+      gap: p2r(4);
+      align-items: center;
+    }
+
+    .port {
+      width: p2r(12);
+      height: p2r(12);
+      background-color: var(--bp-stroke-c);
+      border-radius: 50%;
+      border: 1px solid var(--base-8);
+      cursor: pointer;
+      position: relative;
+    }
+
+    .port:hover {
+      background-color: var(--bp-stroke-ca);
+    }
+
+    .port-name {
+      font: var(--paragraph-40);
+      color: var(--base-12);
+      white-space: nowrap;
+    }
+
+    .svg-wrap {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .connections-svg {
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    .connection-path {
+      stroke: var(--bp-stroke-c);
+      stroke-width: 3;
+      fill: none;
+      pointer-events: none;
+    }
+
+    .drag-path {
+      stroke: var(--bp-stroke-ca);
+      stroke-width: 3;
+      fill: none;
+      stroke-dasharray: 5, 5;
+      pointer-events: none;
+    }
+  }
+}

package/styles/index.scss

@@ -17,6 +17,7 @@ $shipButtonShadow: false !default;
 $shipChipShadow: false !default;
 
 $shipAlert: true !default;
+$shipBlueprint: true !default;
 $shipToggle: true !default;
 $shipButton: true !default;
 $shipProgressBar: true !default;
@@ -55,6 +56,9 @@ $shipFileUpload: true !default;
 @use './components/ship-alert.component.scss' with (
   $shipAlert: $shipAlert
 );
+@use './components/ship-blueprint.component.scss' with (
+  $shipBlueprint: $shipBlueprint
+);
 @use './components/ship-toggle.component.scss' with (
   $shipToggle: $shipToggle
 );