@pooder/kit 6.2.1 → 6.3.0

package/src/extensions/image/commands.ts

@@ -1,4 +1,5 @@
 import type { CommandContribution } from "@pooder/core";
+import type { ImageOperation } from "./imageOperations";
 
 export function createImageCommands(tool: any): CommandContribution[] {
   return [
@@ -23,30 +24,43 @@ export function createImageCommands(tool: any): CommandContribution[] {
       },
     },
     {
-      command: "getWorkingImages",
-      id: "getWorkingImages",
-      title: "Get Working Images",
+      command: "applyImageOperation",
+      id: "applyImageOperation",
+      title: "Apply Image Operation",
+      handler: async (
+        id: string,
+        operation: ImageOperation,
+        options: Record<string, any> = {},
+      ) => {
+        await tool.applyImageOperation(id, operation, options);
+      },
+    },
+    {
+      command: "getImageViewState",
+      id: "getImageViewState",
+      title: "Get Image View State",
       handler: () => {
-        return tool.cloneItems(tool.workingItems);
+        return tool.getImageViewState();
       },
     },
     {
-      command: "setWorkingImage",
-      id: "setWorkingImage",
-      title: "Set Working Image",
-      handler: (id: string, updates: Record<string, any>) => {
-        tool.updateImageInWorking(id, updates);
+      command: "setImageTransform",
+      id: "setImageTransform",
+      title: "Set Image Transform",
+      handler: async (
+        id: string,
+        updates: Record<string, any>,
+        options: Record<string, any> = {},
+      ) => {
+        await tool.setImageTransform(id, updates, options);
       },
     },
     {
-      command: "resetWorkingImages",
-      id: "resetWorkingImages",
-      title: "Reset Working Images",
+      command: "imageSessionReset",
+      id: "imageSessionReset",
+      title: "Reset Image Session",
       handler: () => {
-        tool.workingItems = tool.cloneItems(tool.items);
-        tool.hasWorkingChanges = false;
-        tool.updateImages();
-        tool.emitWorkingChange();
+        tool.resetImageSession();
       },
     },
     {
@@ -65,30 +79,6 @@ export function createImageCommands(tool: any): CommandContribution[] {
         return await tool.exportUserCroppedImage(options);
       },
     },
-    {
-      command: "fitImageToArea",
-      id: "fitImageToArea",
-      title: "Fit Image to Area",
-      handler: async (
-        id: string,
-        area: {
-          width: number;
-          height: number;
-          left?: number;
-          top?: number;
-        },
-      ) => {
-        await tool.fitImageToArea(id, area);
-      },
-    },
-    {
-      command: "fitImageToDefaultArea",
-      id: "fitImageToDefaultArea",
-      title: "Fit Image to Default Area",
-      handler: async (id: string) => {
-        await tool.fitImageToDefaultArea(id);
-      },
-    },
     {
       command: "focusImage",
       id: "focusImage",
@@ -105,9 +95,10 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "removeImage",
       title: "Remove Image",
       handler: (id: string) => {
-        const removed = tool.items.find((item: any) => item.id === id);
-        const next = tool.items.filter((item: any) => item.id !== id);
-        if (next.length !== tool.items.length) {
+        const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+        const removed = sourceItems.find((item: any) => item.id === id);
+        const next = sourceItems.filter((item: any) => item.id !== id);
+        if (next.length !== sourceItems.length) {
           tool.purgeSourceSizeCacheForItem(removed);
           if (tool.focusedImageId === id) {
             tool.setImageFocus(null, {
@@ -115,6 +106,13 @@ export function createImageCommands(tool: any): CommandContribution[] {
               skipRender: true,
             });
           }
+          if (tool.isToolActive) {
+            tool.workingItems = tool.cloneItems(next);
+            tool.hasWorkingChanges = true;
+            tool.updateImages();
+            tool.emitWorkingChange(id);
+            return;
+          }
           tool.updateConfig(next);
         }
       },
@@ -141,6 +139,13 @@ export function createImageCommands(tool: any): CommandContribution[] {
           syncCanvasSelection: true,
           skipRender: true,
         });
+        if (tool.isToolActive) {
+          tool.workingItems = [];
+          tool.hasWorkingChanges = true;
+          tool.updateImages();
+          tool.emitWorkingChange();
+          return;
+        }
         tool.updateConfig([]);
       },
     },
@@ -149,11 +154,19 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "bringToFront",
       title: "Bring Image to Front",
       handler: (id: string) => {
-        const index = tool.items.findIndex((item: any) => item.id === id);
-        if (index !== -1 && index < tool.items.length - 1) {
-          const next = [...tool.items];
+        const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+        const index = sourceItems.findIndex((item: any) => item.id === id);
+        if (index !== -1 && index < sourceItems.length - 1) {
+          const next = [...sourceItems];
           const [item] = next.splice(index, 1);
           next.push(item);
+          if (tool.isToolActive) {
+            tool.workingItems = tool.cloneItems(next);
+            tool.hasWorkingChanges = true;
+            tool.updateImages();
+            tool.emitWorkingChange(id);
+            return;
+          }
           tool.updateConfig(next);
         }
       },
@@ -163,11 +176,19 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "sendToBack",
       title: "Send Image to Back",
       handler: (id: string) => {
-        const index = tool.items.findIndex((item: any) => item.id === id);
+        const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+        const index = sourceItems.findIndex((item: any) => item.id === id);
         if (index > 0) {
-          const next = [...tool.items];
+          const next = [...sourceItems];
           const [item] = next.splice(index, 1);
           next.unshift(item);
+          if (tool.isToolActive) {
+            tool.workingItems = tool.cloneItems(next);
+            tool.hasWorkingChanges = true;
+            tool.updateImages();
+            tool.emitWorkingChange(id);
+            return;
+          }
           tool.updateConfig(next);
         }
       },

package/src/extensions/image/imageOperations.ts

@@ -0,0 +1,135 @@
+import type { FrameRect } from "../../shared/scene/frame";
+import {
+  getCoverScale as getCoverScaleFromRect,
+  type SourceSize,
+} from "../../shared/imaging/sourceSizeCache";
+
+export interface ImageOperationArea {
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+}
+
+export interface ImageOperationViewport {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export type ImageOperationAreaSpec =
+  | { type: "frame" }
+  | { type: "viewport" }
+  | ({
+      type: "custom";
+    } & ImageOperationArea);
+
+export type ImageOperation =
+  | { type: "cover"; area?: ImageOperationAreaSpec }
+  | { type: "contain"; area?: ImageOperationAreaSpec }
+  | { type: "maximizeWidth"; area?: ImageOperationAreaSpec }
+  | { type: "maximizeHeight"; area?: ImageOperationAreaSpec }
+  | { type: "center"; area?: ImageOperationAreaSpec }
+  | { type: "resetTransform" };
+
+export interface ComputeImageOperationArgs {
+  frame: FrameRect;
+  source: SourceSize;
+  operation: ImageOperation;
+  area: ImageOperationArea;
+}
+
+function clampNormalizedAnchor(value: number): number {
+  return Math.max(-1, Math.min(2, value));
+}
+
+function toNormalizedAnchor(center: number, start: number, size: number): number {
+  return clampNormalizedAnchor((center - start) / Math.max(1, size));
+}
+
+function resolveAbsoluteScale(
+  operation: ImageOperation,
+  area: ImageOperationArea,
+  source: SourceSize,
+): number | null {
+  const widthScale = Math.max(1, area.width) / Math.max(1, source.width);
+  const heightScale = Math.max(1, area.height) / Math.max(1, source.height);
+
+  switch (operation.type) {
+    case "cover":
+      return Math.max(widthScale, heightScale);
+    case "contain":
+      return Math.min(widthScale, heightScale);
+    case "maximizeWidth":
+      return widthScale;
+    case "maximizeHeight":
+      return heightScale;
+    default:
+      return null;
+  }
+}
+
+export function resolveImageOperationArea(args: {
+  frame: FrameRect;
+  viewport: ImageOperationViewport;
+  area?: ImageOperationAreaSpec;
+}): ImageOperationArea {
+  const spec = args.area || { type: "frame" };
+
+  if (spec.type === "custom") {
+    return {
+      width: Math.max(1, spec.width),
+      height: Math.max(1, spec.height),
+      centerX: spec.centerX,
+      centerY: spec.centerY,
+    };
+  }
+
+  if (spec.type === "viewport") {
+    return {
+      width: Math.max(1, args.viewport.width),
+      height: Math.max(1, args.viewport.height),
+      centerX: args.viewport.left + args.viewport.width / 2,
+      centerY: args.viewport.top + args.viewport.height / 2,
+    };
+  }
+
+  return {
+    width: Math.max(1, args.frame.width),
+    height: Math.max(1, args.frame.height),
+    centerX: args.frame.left + args.frame.width / 2,
+    centerY: args.frame.top + args.frame.height / 2,
+  };
+}
+
+export function computeImageOperationUpdates(
+  args: ComputeImageOperationArgs,
+): { scale?: number; left?: number; top?: number; angle?: number } {
+  const { frame, source, operation, area } = args;
+
+  if (operation.type === "resetTransform") {
+    return {
+      scale: 1,
+      left: 0.5,
+      top: 0.5,
+      angle: 0,
+    };
+  }
+
+  const left = toNormalizedAnchor(area.centerX, frame.left, frame.width);
+  const top = toNormalizedAnchor(area.centerY, frame.top, frame.height);
+
+  if (operation.type === "center") {
+    return { left, top };
+  }
+
+  const absoluteScale = resolveAbsoluteScale(operation, area, source);
+  const coverScale = getCoverScaleFromRect(frame, source);
+
+  return {
+    scale: Math.max(0.05, (absoluteScale || coverScale) / coverScale),
+    left,
+    top,
+  };
+}

package/src/extensions/image/index.ts

@@ -1,5 +1,6 @@
 export * from "./ImageTool";
 export * from "./commands";
 export * from "./config";
+export * from "./imageOperations";
 export * from "./model";
 export * from "./renderer";

package/src/extensions/image/model.ts

@@ -1 +1,13 @@
-export type { ImageItem } from "./ImageTool";
+export type {
+  ImageItem,
+  ImageTransformUpdates,
+  ImageViewState,
+} from "./ImageTool";
+
+import type { ImageViewState } from "./ImageTool";
+
+export function hasAnyImageInViewState(
+  state: ImageViewState | null | undefined,
+): boolean {
+  return Boolean(state?.hasAnyImage);
+}

package/src/extensions/image/sessionOverlay.ts

@@ -0,0 +1,206 @@
+import type { Pattern } from "fabric";
+import type { RenderObjectSpec } from "../../services";
+import type {
+  SceneGeometrySnapshot,
+  SceneLayoutSnapshot,
+  SceneRect,
+} from "../../shared/scene/sceneLayoutModel";
+import { generateDielinePath } from "../geometry";
+
+export interface ImageSessionOverlayVisualConfig {
+  strokeColor: string;
+  strokeWidth: number;
+  strokeStyle: "solid" | "dashed" | "hidden";
+  dashLength: number;
+  innerBackground: string;
+  outerBackground: string;
+}
+
+export interface ImageSessionOverlayViewport {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface BuiltinShapeOverlayPaths {
+  hatchPathData: string;
+  shapePathData: string;
+}
+
+const EPSILON = 0.0001;
+const SHAPE_OUTLINE_COLOR = "rgba(255, 0, 0, 0.9)";
+const DEFAULT_HATCH_FILL = "rgba(255, 0, 0, 0.22)";
+
+function buildRectPath(width: number, height: number): string {
+  return `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`;
+}
+
+function buildViewportMaskPath(
+  viewport: ImageSessionOverlayViewport,
+  cutRect: SceneRect,
+): string {
+  const cutLeft = cutRect.left - viewport.left;
+  const cutTop = cutRect.top - viewport.top;
+  return [
+    buildRectPath(viewport.width, viewport.height),
+    `M ${cutLeft} ${cutTop} L ${cutLeft + cutRect.width} ${cutTop} L ${
+      cutLeft + cutRect.width
+    } ${cutTop + cutRect.height} L ${cutLeft} ${cutTop + cutRect.height} Z`,
+  ].join(" ");
+}
+
+function resolveCutShapeRadiusPx(
+  geometry: SceneGeometrySnapshot,
+  cutRect: SceneRect,
+): number {
+  const visualRadius = Number.isFinite(geometry.radius)
+    ? Math.max(0, geometry.radius)
+    : 0;
+  const visualOffset = Number.isFinite(geometry.offset) ? geometry.offset : 0;
+  const rawCutRadius =
+    visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
+  const maxRadius = Math.max(0, Math.min(cutRect.width, cutRect.height) / 2);
+  return Math.max(0, Math.min(maxRadius, rawCutRadius));
+}
+
+function buildBuiltinShapeOverlayPaths(
+  cutRect: SceneRect,
+  geometry: SceneGeometrySnapshot | null,
+): BuiltinShapeOverlayPaths | null {
+  if (!geometry || geometry.shape === "custom") {
+    return null;
+  }
+
+  const radius = resolveCutShapeRadiusPx(geometry, cutRect);
+  if (geometry.shape === "rect" && radius <= EPSILON) {
+    return null;
+  }
+
+  const shapePathData = generateDielinePath({
+    shape: geometry.shape,
+    shapeStyle: geometry.shapeStyle,
+    width: Math.max(1, cutRect.width),
+    height: Math.max(1, cutRect.height),
+    radius,
+    x: cutRect.width / 2,
+    y: cutRect.height / 2,
+    features: [],
+    canvasWidth: Math.max(1, cutRect.width),
+    canvasHeight: Math.max(1, cutRect.height),
+  });
+  if (!shapePathData) {
+    return null;
+  }
+
+  return {
+    shapePathData,
+    hatchPathData: `${buildRectPath(cutRect.width, cutRect.height)} ${shapePathData}`,
+  };
+}
+
+export function buildImageSessionOverlaySpecs(args: {
+  viewport: ImageSessionOverlayViewport;
+  layout: SceneLayoutSnapshot;
+  geometry: SceneGeometrySnapshot | null;
+  visual: ImageSessionOverlayVisualConfig;
+  hatchPattern?: Pattern;
+}): RenderObjectSpec[] {
+  const { viewport, layout, geometry, visual, hatchPattern } = args;
+  const cutRect = layout.cutRect;
+  const specs: RenderObjectSpec[] = [];
+
+  specs.push({
+    id: "image.cropMask.rect",
+    type: "path",
+    space: "screen",
+    data: { id: "image.cropMask.rect", zIndex: 1 },
+    props: {
+      pathData: buildViewportMaskPath(viewport, cutRect),
+      left: viewport.left,
+      top: viewport.top,
+      originX: "left",
+      originY: "top",
+      fill: visual.outerBackground,
+      stroke: null,
+      fillRule: "evenodd",
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+      objectCaching: false,
+    },
+  });
+
+  const shapeOverlay = buildBuiltinShapeOverlayPaths(cutRect, geometry);
+  if (shapeOverlay) {
+    specs.push({
+      id: "image.cropShapeHatch",
+      type: "path",
+      space: "screen",
+      data: { id: "image.cropShapeHatch", zIndex: 5 },
+      props: {
+        pathData: shapeOverlay.hatchPathData,
+        left: cutRect.left,
+        top: cutRect.top,
+        originX: "left",
+        originY: "top",
+        fill: hatchPattern || DEFAULT_HATCH_FILL,
+        opacity: hatchPattern ? 1 : 0.8,
+        stroke: null,
+        fillRule: "evenodd",
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+      },
+    });
+    specs.push({
+      id: "image.cropShapeOutline",
+      type: "path",
+      space: "screen",
+      data: { id: "image.cropShapeOutline", zIndex: 6 },
+      props: {
+        pathData: shapeOverlay.shapePathData,
+        left: cutRect.left,
+        top: cutRect.top,
+        originX: "left",
+        originY: "top",
+        fill: "transparent",
+        stroke: SHAPE_OUTLINE_COLOR,
+        strokeWidth: 1,
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+      },
+    });
+  }
+
+  specs.push({
+    id: "image.cropFrame",
+    type: "rect",
+    space: "screen",
+    data: { id: "image.cropFrame", zIndex: 7 },
+    props: {
+      left: cutRect.left,
+      top: cutRect.top,
+      width: cutRect.width,
+      height: cutRect.height,
+      originX: "left",
+      originY: "top",
+      fill: visual.innerBackground,
+      stroke:
+        visual.strokeStyle === "hidden" ? "rgba(0,0,0,0)" : visual.strokeColor,
+      strokeWidth: visual.strokeStyle === "hidden" ? 0 : visual.strokeWidth,
+      strokeDashArray:
+        visual.strokeStyle === "dashed"
+          ? [visual.dashLength, visual.dashLength]
+          : undefined,
+      selectable: false,
+      evented: false,
+      excludeFromExport: true,
+    },
+  });
+
+  return specs;
+}

package/tests/run.ts

@@ -25,6 +25,7 @@ import {
   normalizePointInGeometry,
   resolveFeaturePosition,
 } from "../src/extensions/featureCoordinates";
+import { hasAnyImageInViewState } from "../src/extensions/image/model";
 
 function assert(condition: unknown, message: string) {
   if (!condition) throw new Error(message);
@@ -288,6 +289,46 @@ function testVisibilityDsl() {
   );
 }
 
+function testImageViewStateHelper() {
+  assert(hasAnyImageInViewState(null) === false, "null image state should be empty");
+  assert(
+    hasAnyImageInViewState({
+      items: [],
+      hasAnyImage: false,
+      focusedId: null,
+      focusedItem: null,
+      isToolActive: false,
+      isImageSelectionActive: false,
+      hasWorkingChanges: false,
+      source: "committed",
+    }) === false,
+    "empty image state should report false",
+  );
+  assert(
+    hasAnyImageInViewState({
+      items: [
+        {
+          id: "img-1",
+          url: "blob:test",
+          opacity: 1,
+        },
+      ],
+      hasAnyImage: true,
+      focusedId: "img-1",
+      focusedItem: {
+        id: "img-1",
+        url: "blob:test",
+        opacity: 1,
+      },
+      isToolActive: true,
+      isImageSelectionActive: true,
+      hasWorkingChanges: true,
+      source: "working",
+    }) === true,
+    "non-empty image state should report true",
+  );
+}
+
 function testContributionCompatibility() {
   const imageCommandNames = createImageCommands({} as any).map(
     (entry) => entry.command,
@@ -303,13 +344,12 @@ function testContributionCompatibility() {
   const expectedImageCommands = [
     "addImage",
     "upsertImage",
-    "getWorkingImages",
-    "setWorkingImage",
-    "resetWorkingImages",
+    "applyImageOperation",
+    "getImageViewState",
+    "setImageTransform",
+    "imageSessionReset",
     "completeImages",
     "exportUserCroppedImage",
-    "fitImageToArea",
-    "fitImageToDefaultArea",
     "focusImage",
     "removeImage",
     "updateImage",
@@ -432,9 +472,10 @@ function main() {
   testBridgeSelection();
   testMaskOps();
   testEdgeScale();
-  testFeaturePlacementProjection();
-  testVisibilityDsl();
-  testContributionCompatibility();
+testFeaturePlacementProjection();
+testVisibilityDsl();
+testImageViewStateHelper();
+testContributionCompatibility();
   console.log("ok");
 }