@synetics/ui 0.7.0-alpha

package/src/showcase/svg-canvas/shape/entity/create-shape.ts

@@ -0,0 +1,69 @@
+/** Shape factory helpers — create typed IShape instances from kind + geometry. */
+
+import type { IShape } from '../model/i-shape';
+import { ShapeKind } from '../model/i-shape';
+import { CanvasDiamond } from './canvas-diamond';
+import { CanvasRectangle } from './canvas-rectangle';
+import { CanvasSquare } from './canvas-square';
+
+// ── ID sequence (shared within the module) ────────────────────────────────────
+
+let _seq = 0;
+
+export const nextShapeId = (prefix = 'e'): string => `${prefix}-${++_seq}`;
+export const resetShapeIdSequence = (): void => {
+  _seq = 0;
+};
+
+// ── Factories ─────────────────────────────────────────────────────────────────
+
+export const createSquare = (x: number, y: number, size: number): IShape => {
+  const id = nextShapeId('sq');
+  return new (CanvasSquare as unknown as new (
+    id: string,
+    code: string,
+    name: string,
+    x: number,
+    y: number,
+    size: number
+  ) => IShape)(id, id, `Square ${_seq}`, x, y, size);
+};
+
+export const createRectangle = (x: number, y: number, width: number, height: number): IShape => {
+  const id = nextShapeId('rect');
+  return new (CanvasRectangle as unknown as new (
+    id: string,
+    code: string,
+    name: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) => IShape)(id, id, `Rect ${_seq}`, x, y, width, height);
+};
+
+export const createDiamond = (x: number, y: number, width: number, height: number): IShape => {
+  const id = nextShapeId('dia');
+  return new (CanvasDiamond as unknown as new (
+    id: string,
+    code: string,
+    name: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) => IShape)(id, id, `Diamond ${_seq}`, x, y, width, height);
+};
+
+/** Generic factory — dispatches to the right constructor by ShapeKind. */
+export const createShape = (
+  kind: ShapeKind,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+): IShape => {
+  if (kind === ShapeKind.Square) return createSquare(x, y, Math.max(width, height));
+  if (kind === ShapeKind.Diamond) return createDiamond(x, y, width, height);
+  return createRectangle(x, y, width, height);
+};

package/src/showcase/svg-canvas/shape/model/i-shape.ts

@@ -0,0 +1,37 @@
+/** IShape, IAnchor, ShapeKind — shape feature slice model. */
+
+import type { AnchorPosition, IEntity } from '../../shared/model/i-entity';
+
+// ── Shape kind ────────────────────────────────────────────────────────────────
+
+export enum ShapeKind {
+  Square = 'square',
+  Rectangle = 'rectangle',
+  Diamond = 'diamond',
+}
+
+// ── Anchor ────────────────────────────────────────────────────────────────────
+
+export interface IAnchor {
+  id: string;
+  position: AnchorPosition;
+  /** Absolute SVG x coordinate */
+  x: number;
+  /** Absolute SVG y coordinate */
+  y: number;
+  /** ID of the parent IShape entity */
+  entityId: string;
+}
+
+// ── Shape ─────────────────────────────────────────────────────────────────────
+
+export interface IShape extends IEntity {
+  kind: ShapeKind;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  anchors: IAnchor[];
+  /** Whether the entity card body is collapsed (header-only view) */
+  collapsed: boolean;
+}

package/src/showcase/svg-canvas/shape/store/canvas-shape.slice.ts

@@ -0,0 +1,38 @@
+/** Shape slice — reducer, actions, initial state. */
+
+import type { IStoreAction } from '@synetics/synetics.dev';
+import type { IShape } from '../model/i-shape';
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+export interface IShapeSliceState {
+  items: IShape[];
+}
+
+export const shapeInitialState: IShapeSliceState = { items: [] };
+
+// ── Actions ───────────────────────────────────────────────────────────────────
+
+export type IShapeAction =
+  | { type: 'SHAPES/SET'; payload: IShape[] }
+  | { type: 'SHAPES/ADD'; payload: IShape }
+  | { type: 'SHAPES/UPDATE'; payload: IShape }
+  | { type: 'SHAPES/REMOVE'; payload: string }; // shape id
+
+// ── Reducer ───────────────────────────────────────────────────────────────────
+
+export function shapeReducer(state: IShapeSliceState, action: IStoreAction): IShapeSliceState {
+  const a = action as IShapeAction;
+  switch (a.type) {
+    case 'SHAPES/SET':
+      return { items: a.payload };
+    case 'SHAPES/ADD':
+      return { items: [...state.items, a.payload] };
+    case 'SHAPES/UPDATE':
+      return { items: state.items.map((s) => (s.id === a.payload.id ? a.payload : s)) };
+    case 'SHAPES/REMOVE':
+      return { items: state.items.filter((s) => s.id !== a.payload) };
+    default:
+      return state;
+  }
+}

package/src/showcase/svg-canvas/shared/atoms/canvas-badge.syn

@@ -0,0 +1,34 @@
+/**
+ * CanvasBadge — pill chip appearing in the badge list below the canvas.
+ * Shows entity name and a remove button.
+ */
+
+interface ICanvasBadgeProps {
+  label:    string
+  active:   boolean
+  onClick:  () => void
+  onDelete: (e: MouseEvent) => void
+}
+
+export component CanvasBadge({
+  label,
+  active,
+  onClick,
+  onDelete,
+}: ICanvasBadgeProps) {
+  const border = active ? '#22d3ee'               : '#1e293b';
+  const bg     = active ? 'rgba(34,211,238,0.07)' : '#060e1a';
+  const color  = active ? '#22d3ee'               : '#475569';
+  return (
+    <div
+      onClick={onClick}
+      style={`display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 12px;border:1px solid ${border};border-radius:20px;background:${bg};cursor:pointer;font-size:12px;color:${color};transition:border-color 0.15s,color 0.15s;user-select:none;`}>
+      <span>{label}</span>
+      <button
+        onClick={(e: MouseEvent) => onDelete(e)}
+        style="background:none;border:none;color:#475569;cursor:pointer;font-size:15px;padding:0;line-height:1;display:flex;align-items:center;">
+        ×
+      </button>
+    </div>
+  );
+}

package/src/showcase/svg-canvas/shared/atoms/canvas-icon-btn.syn

@@ -0,0 +1,32 @@
+/**
+ * CanvasIconBtn — tiny transparent icon button used throughout the canvas card UI.
+ * Always stops mousedown propagation by default to avoid interfering with shape drag.
+ */
+
+interface ICanvasIconBtnProps {
+  title:        string
+  icon:         string
+  danger?:      boolean
+  small?:       boolean
+  onClick:      () => void
+}
+
+export component CanvasIconBtn({
+  title,
+  icon,
+  danger  = false,
+  small   = false,
+  onClick,
+}: ICanvasIconBtnProps) {
+  const color   = danger ? '#ef4444' : '#64748b';
+  const fsz     = small  ? '9px'     : '10px';
+  return (
+    <button
+      title={title}
+      onMouseDown={(e: MouseEvent) => e.stopPropagation()}
+      onClick={onClick}
+      style={`background:transparent;border:none;cursor:pointer;color:${color};padding:0 2px;font-size:${fsz};line-height:1;`}>
+      {icon}
+    </button>
+  );
+}

package/src/showcase/svg-canvas/shared/atoms/canvas-text-input.syn

@@ -0,0 +1,27 @@
+/**
+ * CanvasTextInput — transparent inline text input used inside the entity card.
+ * Always stops mousedown propagation so the parent drag handler is not triggered.
+ */
+
+interface ICanvasTextInputProps {
+  value:    string
+  small?:   boolean
+  onBlur:   (value: string) => void
+}
+
+export component CanvasTextInput({
+  value,
+  small  = false,
+  onBlur,
+}: ICanvasTextInputProps) {
+  const color = small ? '#94a3b8' : '#e2e8f0';
+  return (
+    <input
+      type="text"
+      value={value}
+      onMouseDown={(e: MouseEvent) => e.stopPropagation()}
+      onBlur={(e: FocusEvent) => onBlur((e.target as HTMLInputElement).value)}
+      style={`flex:1;background:transparent;border:none;outline:none;color:${color};font-size:11px;min-width:0;cursor:text;`}
+    />
+  );
+}

package/src/showcase/svg-canvas/shared/helpers/canvas-dom-ops.ts

@@ -0,0 +1,187 @@
+/**
+ * Direct DOM mutation operations for the SVG canvas.
+ * Called inside requestAnimationFrame callbacks during drag — no signals touched.
+ */
+
+import type { ICanvasLine } from '../../line/model/i-canvas-line';
+import { buildDiamondAnchors } from '../../shape/entity/canvas-diamond';
+import { buildSquareAnchors } from '../../shape/entity/canvas-square';
+import type { IShape } from '../../shape/model/i-shape';
+import { ShapeKind } from '../../shape/model/i-shape';
+import { routeOrthogonal, waypointsToPoints } from './route-orthogonal';
+
+// ---------------------------------------------------------------------------
+// Shape body + label position
+// ---------------------------------------------------------------------------
+
+/** Moves the body element (rect/polygon) and text label for a shape in the DOM. */
+export const updateShapeBodyDom = (
+  g: SVGGElement,
+  s: IShape,
+  nx: number,
+  ny: number,
+  nw: number,
+  nh: number
+): void => {
+  const rectEl = g.querySelector('rect');
+  const polyEl = g.querySelector('polygon');
+
+  if (rectEl) {
+    rectEl.setAttribute('x', String(nx));
+    rectEl.setAttribute('y', String(ny));
+    rectEl.setAttribute('width', String(nw));
+    rectEl.setAttribute('height', s.collapsed ? '32' : String(nh));
+  } else if (polyEl) {
+    const cx = nx + nw / 2;
+    const cy = ny + nh / 2;
+    polyEl.setAttribute('points', `${cx},${ny} ${nx + nw},${cy} ${cx},${ny + nh} ${nx},${cy}`);
+  }
+
+  const txt = g.querySelector('text');
+  if (txt) {
+    txt.setAttribute('x', String(nx + nw / 2));
+    txt.setAttribute('y', String(ny + nh / 2));
+  }
+
+  // foreignObject card (rect / square shapes)
+  const fo = g.querySelector('foreignObject');
+  if (fo) {
+    fo.setAttribute('x', String(nx));
+    fo.setAttribute('y', String(ny));
+    fo.setAttribute('width', String(nw));
+    fo.setAttribute('height', s.collapsed ? '32' : String(nh));
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Anchor circles
+// ---------------------------------------------------------------------------
+
+/**
+ * Repositions all anchor circles inside [data-anchor-group] for a shape.
+ * Returns the freshly computed anchor list so callers can reuse it
+ * for `updateConnectedLinesDom` without a second build pass.
+ */
+export const rebuildAnchorsDom = (
+  g: SVGGElement,
+  s: IShape,
+  nx: number,
+  ny: number,
+  nw: number,
+  nh: number
+): Array<{ id: string; x: number; y: number }> => {
+  const newAnchors =
+    s.kind === ShapeKind.Diamond
+      ? buildDiamondAnchors(s.id, nx, ny, nw, nh)
+      : buildSquareAnchors(s.id, nx, ny, nw, nh);
+
+  const ag = g.querySelector(`[data-anchor-group="${s.id}"]`);
+  if (ag) {
+    for (const a of newAnchors) {
+      const circle = ag.querySelector<SVGCircleElement>(`[data-anchor-pos="${a.position}"]`);
+      if (circle) {
+        circle.setAttribute('cx', String(a.x));
+        circle.setAttribute('cy', String(a.y));
+      }
+    }
+  }
+
+  return newAnchors;
+};
+
+// ---------------------------------------------------------------------------
+// Connected line endpoints
+// ---------------------------------------------------------------------------
+
+/**
+ * Moves every SVG line element whose connected endpoint belongs to the given shape.
+ * Reuses the anchor list returned by `rebuildAnchorsDom` — no extra computation.
+ * Pass `shapes` to also re-route orthogonal polylines during live drag.
+ */
+export const updateConnectedLinesDom = (
+  svgEl: SVGSVGElement,
+  shapeId: string,
+  anchors: Array<{ id: string; x: number; y: number }>,
+  lines: ICanvasLine[],
+  shapes?: IShape[]
+): void => {
+  for (const ln of lines) {
+    const isStart = ln.startConnection?.shapeId === shapeId;
+    const isEnd = ln.endConnection?.shapeId === shapeId;
+    if (!isStart && !isEnd) continue;
+
+    const lg = svgEl.querySelector<SVGGElement>(`[data-entity-id="${ln.id}"]`);
+    if (!lg) continue;
+
+    // Resolve new endpoint coordinates.
+    let newX1 = ln.x1,
+      newY1 = ln.y1,
+      newX2 = ln.x2,
+      newY2 = ln.y2;
+    if (isStart) {
+      const a = anchors.find((a) => a.id === ln.startConnection!.anchorId);
+      if (a) {
+        newX1 = a.x;
+        newY1 = a.y;
+      }
+    }
+    if (isEnd) {
+      const a = anchors.find((a) => a.id === ln.endConnection!.anchorId);
+      if (a) {
+        newX2 = a.x;
+        newY2 = a.y;
+      }
+    }
+
+    if (ln.mode === 'orthogonal') {
+      // Resolve exit directions from stored anchor positions.
+      const posA =
+        shapes
+          ?.find((s) => s.id === ln.startConnection?.shapeId)
+          ?.anchors.find((a) => a.id === ln.startConnection?.anchorId)?.position ?? null;
+      const posB =
+        shapes
+          ?.find((s) => s.id === ln.endConnection?.shapeId)
+          ?.anchors.find((a) => a.id === ln.endConnection?.anchorId)?.position ?? null;
+
+      // Route without bbox avoidance during live drag (fast; commitConnectedLines
+      // re-routes with full shape data on mouse-up).
+      const pts = routeOrthogonal(newX1, newY1, posA, newX2, newY2, posB, null, null);
+      const ptsStr = waypointsToPoints(pts);
+
+      lg.querySelector<SVGPolylineElement>('[data-line-visual]')?.setAttribute('points', ptsStr);
+      lg.querySelector<SVGPolylineElement>('[data-line-hit]')?.setAttribute('points', ptsStr);
+
+      // Keep hit <line> in sync in case the mode just changed.
+      lg.querySelectorAll('line').forEach((el) => {
+        el.setAttribute('x1', String(newX1));
+        el.setAttribute('y1', String(newY1));
+        el.setAttribute('x2', String(newX2));
+        el.setAttribute('y2', String(newY2));
+      });
+    } else {
+      // Linear: update all <line> elements.
+      lg.querySelectorAll('line').forEach((el) => {
+        if (isStart) {
+          el.setAttribute('x1', String(newX1));
+          el.setAttribute('y1', String(newY1));
+        }
+        if (isEnd) {
+          el.setAttribute('x2', String(newX2));
+          el.setAttribute('y2', String(newY2));
+        }
+      });
+    }
+
+    // Reposition mid-label to new line centre.
+    const label = lg.querySelector('[data-line-label]');
+    if (label) {
+      const midX = Math.round((newX1 + newX2) / 2);
+      const midY = Math.round((newY1 + newY2) / 2);
+      label.querySelector('rect')?.setAttribute('x', String(midX - 28));
+      label.querySelector('rect')?.setAttribute('y', String(midY - 9));
+      label.querySelector('text')?.setAttribute('x', String(midX));
+      label.querySelector('text')?.setAttribute('y', String(midY + 4));
+    }
+  }
+};

package/src/showcase/svg-canvas/shared/helpers/canvas-helpers.ts

@@ -0,0 +1,112 @@
+/**
+ * Pure math and signal-free helpers for the SVG canvas.
+ * No DOM side-effects — safe to call anywhere.
+ */
+
+import type { ILineConnection } from '../../line/model/i-canvas-line';
+import { buildDiamondAnchors } from '../../shape/entity/canvas-diamond';
+import { buildSquareAnchors } from '../../shape/entity/canvas-square';
+import type { IShape } from '../../shape/model/i-shape';
+import { ShapeKind } from '../../shape/model/i-shape';
+import type { AnchorHit } from '../model/i-drag';
+import { MIN_SIZE, SNAP_RADIUS } from '../model/i-drag';
+import { AnchorPosition } from '../model/i-entity';
+
+// ---------------------------------------------------------------------------
+// SVG coordinate helpers
+// ---------------------------------------------------------------------------
+
+export const getSvgCoords = (
+  e: MouseEvent,
+  svgEl: SVGSVGElement | null
+): { x: number; y: number } => {
+  const r = (svgEl ?? (e.currentTarget as SVGSVGElement)).getBoundingClientRect();
+  return { x: Math.round(e.clientX - r.left), y: Math.round(e.clientY - r.top) };
+};
+
+// ---------------------------------------------------------------------------
+// Anchor snap helpers
+// ---------------------------------------------------------------------------
+
+export const findAnchorAt = (px: number, py: number, shapes: IShape[]): AnchorHit | null => {
+  for (const s of shapes) {
+    for (const a of s.anchors) {
+      if (Math.hypot(a.x - px, a.y - py) <= SNAP_RADIUS)
+        return { x: a.x, y: a.y, conn: { shapeId: s.id, anchorId: a.id } };
+    }
+  }
+  return null;
+};
+
+export const snapToAnchor = (
+  px: number,
+  py: number,
+  shapes: IShape[]
+): { x: number; y: number; conn: ILineConnection | null } => {
+  const hit = findAnchorAt(px, py, shapes);
+  return hit ? { x: hit.x, y: hit.y, conn: hit.conn } : { x: px, y: py, conn: null };
+};
+
+// ---------------------------------------------------------------------------
+// Shape model rebuild
+// ---------------------------------------------------------------------------
+
+export const rebuildShape = (
+  s: IShape,
+  nx: number,
+  ny: number,
+  nw?: number,
+  nh?: number
+): IShape => {
+  const w = nw ?? s.width;
+  const h = nh ?? s.height;
+  const anchors =
+    s.kind === ShapeKind.Diamond
+      ? buildDiamondAnchors(s.id, nx, ny, w, h)
+      : buildSquareAnchors(s.id, nx, ny, w, h);
+  return { ...s, x: nx, y: ny, width: w, height: h, anchors };
+};
+
+// ---------------------------------------------------------------------------
+// Resize geometry — pure math, no side-effects
+// ---------------------------------------------------------------------------
+
+export const calcResizeGeom = (
+  origX: number,
+  origY: number,
+  origW: number,
+  origH: number,
+  anchorPos: AnchorPosition,
+  dx: number,
+  dy: number
+): { rx: number; ry: number; rw: number; rh: number } => {
+  let rx = origX,
+    ry = origY,
+    rw = origW,
+    rh = origH;
+
+  if (anchorPos === AnchorPosition.TopLeft) {
+    rx = origX + dx;
+    ry = origY + dy;
+    rw = Math.max(MIN_SIZE, origW - dx);
+    rh = Math.max(MIN_SIZE, origH - dy);
+    if (rw === MIN_SIZE) rx = origX + origW - MIN_SIZE;
+    if (rh === MIN_SIZE) ry = origY + origH - MIN_SIZE;
+  } else if (anchorPos === AnchorPosition.TopRight) {
+    ry = origY + dy;
+    rw = Math.max(MIN_SIZE, origW + dx);
+    rh = Math.max(MIN_SIZE, origH - dy);
+    if (rh === MIN_SIZE) ry = origY + origH - MIN_SIZE;
+  } else if (anchorPos === AnchorPosition.BottomLeft) {
+    rx = origX + dx;
+    rw = Math.max(MIN_SIZE, origW - dx);
+    rh = Math.max(MIN_SIZE, origH + dy);
+    if (rw === MIN_SIZE) rx = origX + origW - MIN_SIZE;
+  } else {
+    // BottomRight
+    rw = Math.max(MIN_SIZE, origW + dx);
+    rh = Math.max(MIN_SIZE, origH + dy);
+  }
+
+  return { rx, ry, rw, rh };
+};