@pooder/kit 5.3.1 → 5.4.0

package/src/services/ViewportSystem.ts

@@ -1,95 +1,95 @@
-import { Coordinate, Layout, Point, Size } from "../coordinate";
-
-export class ViewportSystem {
-  private _containerSize: Size = { width: 0, height: 0 };
-  private _physicalSize: Size = { width: 0, height: 0 };
-  private _padding: number = 0;
-  private _layout: Layout = {
-    scale: 1,
-    offsetX: 0,
-    offsetY: 0,
-    width: 0,
-    height: 0,
-  };
-
-  constructor(
-    containerSize: Size = { width: 0, height: 0 },
-    physicalSize: Size = { width: 0, height: 0 },
-    padding: number = 40,
-  ) {
-    this._containerSize = containerSize;
-    this._physicalSize = physicalSize;
-    this._padding = padding;
-    this.updateLayout();
-  }
-
-  get layout(): Layout {
-    return this._layout;
-  }
-
-  get scale(): number {
-    return this._layout.scale;
-  }
-
-  get offset(): Point {
-    return { x: this._layout.offsetX, y: this._layout.offsetY };
-  }
-
-  updateContainer(width: number, height: number) {
-    if (
-      this._containerSize.width === width &&
-      this._containerSize.height === height
-    )
-      return;
-    this._containerSize = { width, height };
-    this.updateLayout();
-  }
-
-  updatePhysical(width: number, height: number) {
-    if (
-      this._physicalSize.width === width &&
-      this._physicalSize.height === height
-    )
-      return;
-    this._physicalSize = { width, height };
-    this.updateLayout();
-  }
-
-  setPadding(padding: number) {
-    if (this._padding === padding) return;
-    this._padding = padding;
-    this.updateLayout();
-  }
-
-  private updateLayout() {
-    this._layout = Coordinate.calculateLayout(
-      this._containerSize,
-      this._physicalSize,
-      this._padding,
-    );
-  }
-
-  toPixel(value: number): number {
-    return value * this._layout.scale;
-  }
-
-  toPhysical(value: number): number {
-    return this._layout.scale === 0 ? 0 : value / this._layout.scale;
-  }
-
-  toPixelPoint(point: Point): 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: Point): 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,
-    };
-  }
-}
+import { Coordinate, Layout, Point, Size } from "../coordinate";
+
+export class ViewportSystem {
+  private _containerSize: Size = { width: 0, height: 0 };
+  private _physicalSize: Size = { width: 0, height: 0 };
+  private _padding: number = 0;
+  private _layout: Layout = {
+    scale: 1,
+    offsetX: 0,
+    offsetY: 0,
+    width: 0,
+    height: 0,
+  };
+
+  constructor(
+    containerSize: Size = { width: 0, height: 0 },
+    physicalSize: Size = { width: 0, height: 0 },
+    padding: number = 40,
+  ) {
+    this._containerSize = containerSize;
+    this._physicalSize = physicalSize;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  get layout(): Layout {
+    return this._layout;
+  }
+
+  get scale(): number {
+    return this._layout.scale;
+  }
+
+  get offset(): Point {
+    return { x: this._layout.offsetX, y: this._layout.offsetY };
+  }
+
+  updateContainer(width: number, height: number) {
+    if (
+      this._containerSize.width === width &&
+      this._containerSize.height === height
+    )
+      return;
+    this._containerSize = { width, height };
+    this.updateLayout();
+  }
+
+  updatePhysical(width: number, height: number) {
+    if (
+      this._physicalSize.width === width &&
+      this._physicalSize.height === height
+    )
+      return;
+    this._physicalSize = { width, height };
+    this.updateLayout();
+  }
+
+  setPadding(padding: number) {
+    if (this._padding === padding) return;
+    this._padding = padding;
+    this.updateLayout();
+  }
+
+  private updateLayout() {
+    this._layout = Coordinate.calculateLayout(
+      this._containerSize,
+      this._physicalSize,
+      this._padding,
+    );
+  }
+
+  toPixel(value: number): number {
+    return value * this._layout.scale;
+  }
+
+  toPhysical(value: number): number {
+    return this._layout.scale === 0 ? 0 : value / this._layout.scale;
+  }
+
+  toPixelPoint(point: Point): 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: Point): 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,
+    };
+  }
+}

package/src/services/index.ts

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

package/src/services/renderSpec.ts

@@ -1,18 +1,53 @@
-export type RenderObjectType = "rect" | "image" | "path";
-
-export type RenderProps = Record<string, any>;
-
-export interface RenderObjectSpec {
-  id: string;
-  type: RenderObjectType;
-  props: RenderProps;
-  data?: Record<string, any>;
-  src?: string;
-}
-
-export interface RenderLayerSpec {
-  id: string;
-  objects: RenderObjectSpec[];
-  props?: RenderProps;
-}
-
+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;
+  type: RenderObjectType;
+  props: RenderProps;
+  data?: Record<string, any>;
+  src?: string;
+  space?: RenderCoordinateSpace;
+  layout?: RenderObjectLayoutSpec;
+}
+
+export interface RenderLayerSpec {
+  id: string;
+  objects: RenderObjectSpec[];
+  props?: RenderProps;
+}

package/src/units.ts

@@ -1,27 +1,27 @@
-import { Coordinate, Unit } from "./coordinate";
-
-export function parseLengthToMm(input: number | string, defaultUnit: Unit): number {
-  if (typeof input === "number") {
-    if (!Number.isFinite(input)) return 0;
-    return Coordinate.convertUnit(input, defaultUnit, "mm");
-  }
-
-  const raw = input.trim();
-  if (!raw) return 0;
-
-  const match = raw.match(/^([+-]?\d+(?:\.\d+)?)\s*(px|mm|cm|in)?$/i);
-  if (!match) return 0;
-
-  const value = Number(match[1]);
-  if (!Number.isFinite(value)) return 0;
-
-  const unit = (match[2]?.toLowerCase() as Unit | undefined) ?? defaultUnit;
-  return Coordinate.convertUnit(value, unit, "mm");
-}
-
-export function formatMm(valueMm: number, displayUnit: Unit, fractionDigits: number = 2): string {
-  if (!Number.isFinite(valueMm)) return "0";
-  const value = Coordinate.convertUnit(valueMm, "mm", displayUnit);
-  const rounded = Number(value.toFixed(fractionDigits));
-  return rounded.toString();
-}
+import { Coordinate, Unit } from "./coordinate";
+
+export function parseLengthToMm(input: number | string, defaultUnit: Unit): number {
+  if (typeof input === "number") {
+    if (!Number.isFinite(input)) return 0;
+    return Coordinate.convertUnit(input, defaultUnit, "mm");
+  }
+
+  const raw = input.trim();
+  if (!raw) return 0;
+
+  const match = raw.match(/^([+-]?\d+(?:\.\d+)?)\s*(px|mm|cm|in)?$/i);
+  if (!match) return 0;
+
+  const value = Number(match[1]);
+  if (!Number.isFinite(value)) return 0;
+
+  const unit = (match[2]?.toLowerCase() as Unit | undefined) ?? defaultUnit;
+  return Coordinate.convertUnit(value, unit, "mm");
+}
+
+export function formatMm(valueMm: number, displayUnit: Unit, fractionDigits: number = 2): string {
+  if (!Number.isFinite(valueMm)) return "0";
+  const value = Coordinate.convertUnit(valueMm, "mm", displayUnit);
+  const rounded = Number(value.toFixed(fractionDigits));
+  return rounded.toString();
+}

package/tests/run.ts

@@ -1,118 +1,118 @@
-import { pickExitIndex, scoreOutsideAbove } from "../src/bridgeSelection";
-import { sampleWrappedOffsets, wrappedDistance } from "../src/wrappedOffsets";
-import {
-  circularMorphology,
-  createMask,
-  fillHoles,
-  findMinimalConnectRadius,
-  isMaskConnected8,
-} from "../src/maskOps";
-import { computeDetectEdgeSize } from "../src/edgeScale";
-
-function assert(condition: unknown, message: string) {
-  if (!condition) throw new Error(message);
-}
-
-function testWrappedOffsets() {
-  assert(wrappedDistance(100, 10, 30) === 20, "distance 10->30 should be 20");
-  assert(wrappedDistance(100, 90, 10) === 20, "distance 90->10 should wrap to 20");
-
-  const a = sampleWrappedOffsets(100, 10, 30, 5);
-  assert(
-    JSON.stringify(a) === JSON.stringify([10, 15, 20, 25, 30]),
-    `unexpected sample: ${JSON.stringify(a)}`,
-  );
-
-  const b = sampleWrappedOffsets(100, 90, 10, 3);
-  assert(
-    JSON.stringify(b) === JSON.stringify([90, 0, 10]),
-    `unexpected wrap sample: ${JSON.stringify(b)}`,
-  );
-}
-
-function testBridgeSelection() {
-  const idx = pickExitIndex([
-    { insideAbove: true, insideBelow: true },
-    { insideAbove: false, insideBelow: true },
-    { insideAbove: false, insideBelow: false },
-  ]);
-  assert(idx === 1, `expected exit index 1, got ${idx}`);
-
-  const none = pickExitIndex([{ insideAbove: true, insideBelow: true }]);
-  assert(none === -1, `expected -1, got ${none}`);
-
-  const score = scoreOutsideAbove([
-    { outsideAbove: true },
-    { outsideAbove: false },
-    { outsideAbove: true },
-  ]);
-  assert(score === 2, `expected score 2, got ${score}`);
-}
-
-function testMaskOps() {
-  const width = 50;
-  const height = 50;
-  const mask = new Uint8Array(width * height);
-  mask[10 * width + 10] = 1;
-  mask[10 * width + 20] = 1;
-
-  const r = findMinimalConnectRadius(mask, width, height, 20);
-  const closed = circularMorphology(mask, width, height, r, "closing");
-  assert(isMaskConnected8(closed, width, height), `closed mask should be connected (r=${r})`);
-  if (r > 0) {
-    const closedPrev = circularMorphology(mask, width, height, r - 1, "closing");
-    assert(
-      !isMaskConnected8(closedPrev, width, height),
-      `r should be minimal (r=${r})`,
-    );
-  }
-
-  const donut = new Uint8Array(9 * 9);
-  for (let y = 1; y <= 7; y++) {
-    for (let x = 1; x <= 7; x++) donut[y * 9 + x] = 1;
-  }
-  for (let y = 3; y <= 5; y++) {
-    for (let x = 3; x <= 5; x++) donut[y * 9 + x] = 0;
-  }
-  const filled = fillHoles(donut, 9, 9);
-  assert(filled[4 * 9 + 4] === 1, "hole should be filled");
-
-  const imgW = 2;
-  const imgH = 1;
-  const rgba = new Uint8ClampedArray([
-    255, 255, 255, 255, 10, 10, 10, 254,
-  ]);
-  const imageData = { width: imgW, height: imgH, data: rgba } as unknown as ImageData;
-  const paddedWidth = imgW + 4;
-  const paddedHeight = imgH + 4;
-  const created = createMask(imageData, {
-    threshold: 10,
-    padding: 2,
-    paddedWidth,
-    paddedHeight,
-    maskMode: "auto",
-    alphaOpaqueCutoff: 250,
-  });
-  assert(created[2 * paddedWidth + 2] === 0, "white pixel should be background");
-  assert(created[2 * paddedWidth + 3] === 1, "non-white pixel should be foreground");
-}
-
-function testEdgeScale() {
-  const currentMax = 100;
-  const baseBounds = { width: 50, height: 20 };
-  const expandedBounds = { width: 70, height: 40 };
-  const { width, height, scale } = computeDetectEdgeSize(currentMax, baseBounds, expandedBounds);
-  assert(scale === 2, `expected scale 2, got ${scale}`);
-  assert(width === 140, `expected width 140, got ${width}`);
-  assert(height === 80, `expected height 80, got ${height}`);
-}
-
-function main() {
-  testWrappedOffsets();
-  testBridgeSelection();
-  testMaskOps();
-  testEdgeScale();
-  console.log("ok");
-}
-
-main();
+import { pickExitIndex, scoreOutsideAbove } from "../src/bridgeSelection";
+import { sampleWrappedOffsets, wrappedDistance } from "../src/wrappedOffsets";
+import {
+  circularMorphology,
+  createMask,
+  fillHoles,
+  findMinimalConnectRadius,
+  isMaskConnected8,
+} from "../src/maskOps";
+import { computeDetectEdgeSize } from "../src/edgeScale";
+
+function assert(condition: unknown, message: string) {
+  if (!condition) throw new Error(message);
+}
+
+function testWrappedOffsets() {
+  assert(wrappedDistance(100, 10, 30) === 20, "distance 10->30 should be 20");
+  assert(wrappedDistance(100, 90, 10) === 20, "distance 90->10 should wrap to 20");
+
+  const a = sampleWrappedOffsets(100, 10, 30, 5);
+  assert(
+    JSON.stringify(a) === JSON.stringify([10, 15, 20, 25, 30]),
+    `unexpected sample: ${JSON.stringify(a)}`,
+  );
+
+  const b = sampleWrappedOffsets(100, 90, 10, 3);
+  assert(
+    JSON.stringify(b) === JSON.stringify([90, 0, 10]),
+    `unexpected wrap sample: ${JSON.stringify(b)}`,
+  );
+}
+
+function testBridgeSelection() {
+  const idx = pickExitIndex([
+    { insideAbove: true, insideBelow: true },
+    { insideAbove: false, insideBelow: true },
+    { insideAbove: false, insideBelow: false },
+  ]);
+  assert(idx === 1, `expected exit index 1, got ${idx}`);
+
+  const none = pickExitIndex([{ insideAbove: true, insideBelow: true }]);
+  assert(none === -1, `expected -1, got ${none}`);
+
+  const score = scoreOutsideAbove([
+    { outsideAbove: true },
+    { outsideAbove: false },
+    { outsideAbove: true },
+  ]);
+  assert(score === 2, `expected score 2, got ${score}`);
+}
+
+function testMaskOps() {
+  const width = 50;
+  const height = 50;
+  const mask = new Uint8Array(width * height);
+  mask[10 * width + 10] = 1;
+  mask[10 * width + 20] = 1;
+
+  const r = findMinimalConnectRadius(mask, width, height, 20);
+  const closed = circularMorphology(mask, width, height, r, "closing");
+  assert(isMaskConnected8(closed, width, height), `closed mask should be connected (r=${r})`);
+  if (r > 0) {
+    const closedPrev = circularMorphology(mask, width, height, r - 1, "closing");
+    assert(
+      !isMaskConnected8(closedPrev, width, height),
+      `r should be minimal (r=${r})`,
+    );
+  }
+
+  const donut = new Uint8Array(9 * 9);
+  for (let y = 1; y <= 7; y++) {
+    for (let x = 1; x <= 7; x++) donut[y * 9 + x] = 1;
+  }
+  for (let y = 3; y <= 5; y++) {
+    for (let x = 3; x <= 5; x++) donut[y * 9 + x] = 0;
+  }
+  const filled = fillHoles(donut, 9, 9);
+  assert(filled[4 * 9 + 4] === 1, "hole should be filled");
+
+  const imgW = 2;
+  const imgH = 1;
+  const rgba = new Uint8ClampedArray([
+    255, 255, 255, 255, 10, 10, 10, 254,
+  ]);
+  const imageData = { width: imgW, height: imgH, data: rgba } as unknown as ImageData;
+  const paddedWidth = imgW + 4;
+  const paddedHeight = imgH + 4;
+  const created = createMask(imageData, {
+    threshold: 10,
+    padding: 2,
+    paddedWidth,
+    paddedHeight,
+    maskMode: "auto",
+    alphaOpaqueCutoff: 250,
+  });
+  assert(created[2 * paddedWidth + 2] === 0, "white pixel should be background");
+  assert(created[2 * paddedWidth + 3] === 1, "non-white pixel should be foreground");
+}
+
+function testEdgeScale() {
+  const currentMax = 100;
+  const baseBounds = { width: 50, height: 20 };
+  const expandedBounds = { width: 70, height: 40 };
+  const { width, height, scale } = computeDetectEdgeSize(currentMax, baseBounds, expandedBounds);
+  assert(scale === 2, `expected scale 2, got ${scale}`);
+  assert(width === 140, `expected width 140, got ${width}`);
+  assert(height === 80, `expected height 80, got ${height}`);
+}
+
+function main() {
+  testWrappedOffsets();
+  testBridgeSelection();
+  testMaskOps();
+  testEdgeScale();
+  console.log("ok");
+}
+
+main();

package/tsconfig.test.json

@@ -1,15 +1,15 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "CommonJS",
-    "lib": ["ES2020", "DOM"],
-    "moduleResolution": "Node",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "outDir": ".test-dist",
-    "rootDir": "."
-  },
-  "include": ["tests/**/*.ts", "src/**/*.ts"]
-}
-
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["ES2020", "DOM"],
+    "moduleResolution": "Node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": ".test-dist",
+    "rootDir": "."
+  },
+  "include": ["tests/**/*.ts", "src/**/*.ts"]
+}
+