@pooder/kit 5.3.1 → 6.0.0

package/src/services/index.ts

@@ -1,3 +1,4 @@
 export { default as CanvasService } from "./CanvasService";
 export * from "./renderSpec";
+export * from "./visibility";
 export * from "./ViewportSystem";

package/src/services/renderSpec.ts

@@ -1,6 +1,40 @@
-export type RenderObjectType = "rect" | "image" | "path";
+export type RenderObjectType = "rect" | "image" | "path" | "text";
 
 export type RenderProps = Record<string, any>;
+export type RenderCoordinateSpace = "scene" | "screen";
+export type RenderLayoutLength = number | string;
+export type RenderLayoutAlign = "start" | "center" | "end";
+export type RenderLayoutReference =
+  | "sceneViewport"
+  | "screenViewport"
+  | "custom";
+
+export interface RenderLayoutInsets {
+  top?: RenderLayoutLength;
+  right?: RenderLayoutLength;
+  bottom?: RenderLayoutLength;
+  left?: RenderLayoutLength;
+}
+
+export interface RenderLayoutRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  space?: RenderCoordinateSpace;
+}
+
+export interface RenderObjectLayoutSpec {
+  reference?: RenderLayoutReference;
+  referenceRect?: RenderLayoutRect;
+  inset?: RenderLayoutLength | RenderLayoutInsets;
+  alignX?: RenderLayoutAlign;
+  alignY?: RenderLayoutAlign;
+  offsetX?: RenderLayoutLength;
+  offsetY?: RenderLayoutLength;
+  width?: RenderLayoutLength;
+  height?: RenderLayoutLength;
+}
 
 export interface RenderObjectSpec {
   id: string;
@@ -8,11 +42,42 @@ export interface RenderObjectSpec {
   props: RenderProps;
   data?: Record<string, any>;
   src?: string;
+  space?: RenderCoordinateSpace;
+  layout?: RenderObjectLayoutSpec;
 }
 
-export interface RenderLayerSpec {
+export type LayerObjectCountComparator = ">" | ">=" | "==" | "<" | "<=";
+
+export type VisibilityExpr =
+  | { op: "const"; value: boolean }
+  | { op: "activeToolIn"; ids: string[] }
+  | { op: "sessionActive"; toolId: string }
+  | { op: "layerExists"; layerId: string }
+  | {
+      op: "layerObjectCount";
+      layerId: string;
+      cmp: LayerObjectCountComparator;
+      value: number;
+    }
+  | { op: "not"; expr: VisibilityExpr }
+  | { op: "all"; exprs: VisibilityExpr[] }
+  | { op: "any"; exprs: VisibilityExpr[] };
+
+export interface RenderClipPathEffectSpec {
+  type: "clipPath";
+  id?: string;
+  source: RenderObjectSpec;
+  targetPassIds: string[];
+}
+
+export type RenderEffectSpec = RenderClipPathEffectSpec;
+
+export interface RenderPassSpec {
   id: string;
+  stack?: number;
+  order?: number;
+  replace?: boolean;
+  visibility?: VisibilityExpr;
+  effects?: RenderEffectSpec[];
   objects: RenderObjectSpec[];
-  props?: RenderProps;
 }
-

package/src/services/visibility.ts

@@ -0,0 +1,78 @@
+import type { VisibilityExpr } from "./renderSpec";
+
+export interface VisibilityLayerState {
+  exists: boolean;
+  objectCount: number;
+}
+
+export interface VisibilityEvalContext {
+  activeToolId?: string | null;
+  isSessionActive?: (toolId: string) => boolean;
+  layers: Map<string, VisibilityLayerState>;
+}
+
+function compareLayerObjectCount(
+  actual: number,
+  cmp: ">" | ">=" | "==" | "<" | "<=",
+  expected: number,
+): boolean {
+  if (cmp === ">") return actual > expected;
+  if (cmp === ">=") return actual >= expected;
+  if (cmp === "<") return actual < expected;
+  if (cmp === "<=") return actual <= expected;
+  return actual === expected;
+}
+
+function layerState(
+  context: VisibilityEvalContext,
+  layerId: string,
+): VisibilityLayerState {
+  return context.layers.get(layerId) || { exists: false, objectCount: 0 };
+}
+
+export function evaluateVisibilityExpr(
+  expr: VisibilityExpr | undefined,
+  context: VisibilityEvalContext,
+): boolean {
+  if (!expr) return true;
+
+  if (expr.op === "const") {
+    return Boolean(expr.value);
+  }
+
+  if (expr.op === "activeToolIn") {
+    const activeToolId = context.activeToolId ?? null;
+    return !!activeToolId && expr.ids.includes(activeToolId);
+  }
+
+  if (expr.op === "sessionActive") {
+    const toolId = String(expr.toolId || "").trim();
+    if (!toolId) return false;
+    return context.isSessionActive ? context.isSessionActive(toolId) : false;
+  }
+
+  if (expr.op === "layerExists") {
+    return layerState(context, expr.layerId).exists === true;
+  }
+
+  if (expr.op === "layerObjectCount") {
+    const expected = Number(expr.value);
+    if (!Number.isFinite(expected)) return false;
+    const count = layerState(context, expr.layerId).objectCount;
+    return compareLayerObjectCount(count, expr.cmp, expected);
+  }
+
+  if (expr.op === "not") {
+    return !evaluateVisibilityExpr(expr.expr, context);
+  }
+
+  if (expr.op === "all") {
+    return expr.exprs.every((item) => evaluateVisibilityExpr(item, context));
+  }
+
+  if (expr.op === "any") {
+    return expr.exprs.some((item) => evaluateVisibilityExpr(item, context));
+  }
+
+  return true;
+}

package/tests/run.ts

@@ -1,13 +1,20 @@
-import { pickExitIndex, scoreOutsideAbove } from "../src/bridgeSelection";
-import { sampleWrappedOffsets, wrappedDistance } from "../src/wrappedOffsets";
+import {
+  pickExitIndex,
+  scoreOutsideAbove,
+} from "../src/extensions/bridgeSelection";
+import {
+  sampleWrappedOffsets,
+  wrappedDistance,
+} from "../src/extensions/wrappedOffsets";
 import {
   circularMorphology,
   createMask,
   fillHoles,
   findMinimalConnectRadius,
   isMaskConnected8,
-} from "../src/maskOps";
-import { computeDetectEdgeSize } from "../src/edgeScale";
+} from "../src/extensions/maskOps";
+import { computeDetectEdgeSize } from "../src/extensions/edgeScale";
+import { evaluateVisibilityExpr } from "../src/services/visibility";
 
 function assert(condition: unknown, message: string) {
   if (!condition) throw new Error(message);
@@ -107,11 +114,139 @@ function testEdgeScale() {
   assert(height === 80, `expected height 80, got ${height}`);
 }
 
+function testVisibilityDsl() {
+  const layers = new Map([
+    ["ruler-overlay", { exists: true, objectCount: 2 }],
+    ["feature-overlay", { exists: true, objectCount: 0 }],
+  ]);
+
+  const context = {
+    activeToolId: "pooder.kit.image",
+    isSessionActive: (toolId: string) => toolId === "pooder.kit.feature",
+    layers,
+  };
+
+  assert(
+    evaluateVisibilityExpr({ op: "const", value: true }, context) === true,
+    "const true failed",
+  );
+  assert(
+    evaluateVisibilityExpr({ op: "const", value: false }, context) === false,
+    "const false failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "activeToolIn", ids: ["pooder.kit.image"] },
+      context,
+    ) === true,
+    "activeToolIn true failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "activeToolIn", ids: ["pooder.kit.white-ink"] },
+      context,
+    ) === false,
+    "activeToolIn false failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "sessionActive", toolId: "pooder.kit.feature" },
+      context,
+    ) === true,
+    "sessionActive true failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "sessionActive", toolId: "pooder.kit.ruler" },
+      context,
+    ) === false,
+    "sessionActive false failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "layerExists", layerId: "ruler-overlay" },
+      context,
+    ) === true,
+    "layerExists true failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      { op: "layerExists", layerId: "missing-layer" },
+      context,
+    ) === false,
+    "layerExists false failed",
+  );
+
+  const comparisons: Array<{
+    cmp: ">" | ">=" | "==" | "<" | "<=";
+    value: number;
+    expected: boolean;
+  }> = [
+    { cmp: ">", value: 1, expected: true },
+    { cmp: ">=", value: 2, expected: true },
+    { cmp: "==", value: 2, expected: true },
+    { cmp: "<", value: 2, expected: false },
+    { cmp: "<=", value: 1, expected: false },
+  ];
+  comparisons.forEach((entry) => {
+    assert(
+      evaluateVisibilityExpr(
+        {
+          op: "layerObjectCount",
+          layerId: "ruler-overlay",
+          cmp: entry.cmp,
+          value: entry.value,
+        },
+        context,
+      ) === entry.expected,
+      `layerObjectCount ${entry.cmp} failed`,
+    );
+  });
+
+  assert(
+    evaluateVisibilityExpr(
+      {
+        op: "not",
+        expr: { op: "activeToolIn", ids: ["pooder.kit.white-ink"] },
+      },
+      context,
+    ) === true,
+    "not failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      {
+        op: "all",
+        exprs: [
+          { op: "layerExists", layerId: "ruler-overlay" },
+          { op: "sessionActive", toolId: "pooder.kit.feature" },
+        ],
+      },
+      context,
+    ) === true,
+    "all failed",
+  );
+  assert(
+    evaluateVisibilityExpr(
+      {
+        op: "any",
+        exprs: [
+          { op: "layerExists", layerId: "missing-layer" },
+          { op: "activeToolIn", ids: ["pooder.kit.image"] },
+        ],
+      },
+      context,
+    ) === true,
+    "any failed",
+  );
+}
+
 function main() {
   testWrappedOffsets();
   testBridgeSelection();
   testMaskOps();
   testEdgeScale();
+  testVisibilityDsl();
   console.log("ok");
 }
 

package/.test-dist/src/CanvasService.js

@@ -1,249 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-const ViewportSystem_1 = require("./ViewportSystem");
-class CanvasService {
-    constructor(el, options) {
-        if (el instanceof fabric_1.Canvas) {
-            this.canvas = el;
-        }
-        else {
-            this.canvas = new fabric_1.Canvas(el, {
-                preserveObjectStacking: true,
-                ...options,
-            });
-        }
-        this.viewport = new ViewportSystem_1.ViewportSystem();
-        if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
-            this.viewport.updateContainer(this.canvas.width, this.canvas.height);
-        }
-        if (options?.eventBus) {
-            this.setEventBus(options.eventBus);
-        }
-    }
-    setEventBus(eventBus) {
-        this.eventBus = eventBus;
-        this.setupEvents();
-    }
-    setupEvents() {
-        if (!this.eventBus)
-            return;
-        const bus = this.eventBus;
-        const forward = (name) => (e) => bus.emit(name, e);
-        this.canvas.on("selection:created", forward("selection:created"));
-        this.canvas.on("selection:updated", forward("selection:updated"));
-        this.canvas.on("selection:cleared", forward("selection:cleared"));
-        this.canvas.on("object:modified", forward("object:modified"));
-        this.canvas.on("object:added", forward("object:added"));
-        this.canvas.on("object:removed", forward("object:removed"));
-    }
-    dispose() {
-        this.canvas.dispose();
-    }
-    /**
-     * Get a layer (Group) by its ID.
-     * We assume layers are Groups directly on the canvas with a data.id property.
-     */
-    getLayer(id) {
-        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
-    }
-    /**
-     * Create a layer (Group) with the given ID if it doesn't exist.
-     */
-    createLayer(id, options = {}) {
-        let layer = this.getLayer(id);
-        if (!layer) {
-            const defaultOptions = {
-                selectable: false,
-                evented: false,
-                ...options,
-                data: { ...options.data, id },
-            };
-            layer = new fabric_1.Group([], defaultOptions);
-            this.canvas.add(layer);
-        }
-        return layer;
-    }
-    /**
-     * Find an object by ID, optionally within a specific layer.
-     */
-    getObject(id, layerId) {
-        if (layerId) {
-            const layer = this.getLayer(layerId);
-            if (!layer)
-                return undefined;
-            return layer.getObjects().find((obj) => obj.data?.id === id);
-        }
-        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
-    }
-    requestRenderAll() {
-        this.canvas.requestRenderAll();
-    }
-    resize(width, height) {
-        this.canvas.setDimensions({ width, height });
-        this.viewport.updateContainer(width, height);
-        this.eventBus?.emit("canvas:resized", { width, height });
-        this.requestRenderAll();
-    }
-    async applyLayerSpec(spec) {
-        const layer = this.createLayer(spec.id, spec.props || {});
-        await this.applyObjectSpecsToContainer(layer, spec.objects);
-    }
-    async applyObjectSpecsToLayer(layerId, objects) {
-        const layer = this.createLayer(layerId, {});
-        await this.applyObjectSpecsToContainer(layer, objects);
-    }
-    getRootLayerObjects(layerId) {
-        return this.canvas
-            .getObjects()
-            .filter((obj) => obj?.data?.layerId === layerId);
-    }
-    async applyObjectSpecsToRootLayer(layerId, specs) {
-        const desiredIds = new Set(specs.map((s) => s.id));
-        const existing = this.getRootLayerObjects(layerId);
-        existing.forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string" && !desiredIds.has(id)) {
-                this.canvas.remove(obj);
-            }
-        });
-        const byId = new Map();
-        this.getRootLayerObjects(layerId).forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string")
-                byId.set(id, obj);
-        });
-        for (let index = 0; index < specs.length; index += 1) {
-            const spec = specs[index];
-            let current = byId.get(spec.id);
-            if (current &&
-                spec.type === "image" &&
-                spec.src &&
-                current.getSrc &&
-                current.getSrc() !== spec.src) {
-                this.canvas.remove(current);
-                byId.delete(spec.id);
-                current = undefined;
-            }
-            if (!current) {
-                const created = await this.createFabricObject(spec);
-                if (!created)
-                    continue;
-                this.patchFabricObject(created, spec, { layerId });
-                this.canvas.add(created);
-                byId.set(spec.id, created);
-                continue;
-            }
-            this.patchFabricObject(current, spec, { layerId });
-        }
-        this.requestRenderAll();
-    }
-    async applyObjectSpecsToContainer(container, specs) {
-        const desiredIds = new Set(specs.map((s) => s.id));
-        const existing = container.getObjects();
-        existing.forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string" && !desiredIds.has(id)) {
-                container.remove(obj);
-            }
-        });
-        const byId = new Map();
-        container.getObjects().forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string")
-                byId.set(id, obj);
-        });
-        for (let index = 0; index < specs.length; index += 1) {
-            const spec = specs[index];
-            let current = byId.get(spec.id);
-            if (current &&
-                spec.type === "image" &&
-                spec.src &&
-                current.getSrc &&
-                current.getSrc() !== spec.src) {
-                container.remove(current);
-                byId.delete(spec.id);
-                current = undefined;
-            }
-            if (!current) {
-                const created = await this.createFabricObject(spec);
-                if (!created)
-                    continue;
-                container.add(created);
-                current = created;
-                byId.set(spec.id, current);
-            }
-            else {
-                this.patchFabricObject(current, spec);
-            }
-            this.moveObjectInContainer(container, current, index);
-        }
-        container.dirty = true;
-        this.requestRenderAll();
-    }
-    patchFabricObject(obj, spec, extraData) {
-        const nextData = {
-            ...(obj.data || {}),
-            ...(spec.data || {}),
-            ...(extraData || {}),
-            id: spec.id,
-        };
-        obj.set({ ...(spec.props || {}), data: nextData });
-        obj.setCoords();
-    }
-    moveObjectInContainer(container, obj, index) {
-        if (!obj)
-            return;
-        const moveObjectTo = container.moveObjectTo;
-        if (typeof moveObjectTo === "function") {
-            moveObjectTo.call(container, obj, index);
-            return;
-        }
-        const list = container._objects;
-        if (!Array.isArray(list))
-            return;
-        const from = list.indexOf(obj);
-        if (from < 0 || from === index)
-            return;
-        list.splice(from, 1);
-        const target = Math.max(0, Math.min(index, list.length));
-        list.splice(target, 0, obj);
-        if (typeof container._onStackOrderChanged === "function") {
-            container._onStackOrderChanged();
-        }
-    }
-    async createFabricObject(spec) {
-        if (spec.type === "rect") {
-            const rect = new fabric_1.Rect({
-                ...(spec.props || {}),
-                data: { ...(spec.data || {}), id: spec.id },
-            });
-            rect.setCoords();
-            return rect;
-        }
-        if (spec.type === "path") {
-            const pathData = spec.props?.path || spec.props?.pathData;
-            if (!pathData)
-                return undefined;
-            const path = new fabric_1.Path(pathData, {
-                ...(spec.props || {}),
-                data: { ...(spec.data || {}), id: spec.id },
-            });
-            path.setCoords();
-            return path;
-        }
-        if (spec.type === "image") {
-            if (!spec.src)
-                return undefined;
-            const image = await fabric_1.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
-            image.set({
-                ...(spec.props || {}),
-                data: { ...(spec.data || {}), id: spec.id },
-            });
-            image.setCoords();
-            return image;
-        }
-        return undefined;
-    }
-}
-exports.default = CanvasService;

package/.test-dist/src/ViewportSystem.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportSystem = void 0;
-const coordinate_1 = require("./coordinate");
-class ViewportSystem {
-    constructor(containerSize = { width: 0, height: 0 }, physicalSize = { width: 0, height: 0 }, padding = 40) {
-        this._containerSize = { width: 0, height: 0 };
-        this._physicalSize = { width: 0, height: 0 };
-        this._padding = 0;
-        this._layout = {
-            scale: 1,
-            offsetX: 0,
-            offsetY: 0,
-            width: 0,
-            height: 0,
-        };
-        this._containerSize = containerSize;
-        this._physicalSize = physicalSize;
-        this._padding = padding;
-        this.updateLayout();
-    }
-    get layout() {
-        return this._layout;
-    }
-    get scale() {
-        return this._layout.scale;
-    }
-    get offset() {
-        return { x: this._layout.offsetX, y: this._layout.offsetY };
-    }
-    updateContainer(width, height) {
-        if (this._containerSize.width === width &&
-            this._containerSize.height === height)
-            return;
-        this._containerSize = { width, height };
-        this.updateLayout();
-    }
-    updatePhysical(width, height) {
-        if (this._physicalSize.width === width && this._physicalSize.height === height)
-            return;
-        this._physicalSize = { width, height };
-        this.updateLayout();
-    }
-    setPadding(padding) {
-        if (this._padding === padding)
-            return;
-        this._padding = padding;
-        this.updateLayout();
-    }
-    updateLayout() {
-        this._layout = coordinate_1.Coordinate.calculateLayout(this._containerSize, this._physicalSize, this._padding);
-    }
-    toPixel(value) {
-        return value * this._layout.scale;
-    }
-    toPhysical(value) {
-        return this._layout.scale === 0 ? 0 : value / this._layout.scale;
-    }
-    toPixelPoint(point) {
-        return {
-            x: point.x * this._layout.scale + this._layout.offsetX,
-            y: point.y * this._layout.scale + this._layout.offsetY,
-        };
-    }
-    // Convert screen coordinate (e.g. mouse event) to physical coordinate (relative to content origin)
-    toPhysicalPoint(point) {
-        if (this._layout.scale === 0)
-            return { x: 0, y: 0 };
-        return {
-            x: (point.x - this._layout.offsetX) / this._layout.scale,
-            y: (point.y - this._layout.offsetY) / this._layout.scale,
-        };
-    }
-}
-exports.ViewportSystem = ViewportSystem;