@pooder/kit 6.1.1 → 6.2.0

package/.test-dist/src/extensions/image/ImageTool.js

@@ -17,6 +17,7 @@ const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
     "scale",
 ];
+const IMAGE_MOVE_SNAP_THRESHOLD_PX = 6;
 const IMAGE_CONTROL_DESCRIPTORS = [
     {
         key: "tl",
@@ -59,12 +60,17 @@ class ImageTool {
         this.renderSeq = 0;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.activeSnapX = null;
+        this.activeSnapY = null;
+        this.movingImageId = null;
+        this.hasRenderedSnapGuides = false;
         this.subscriptions = new subscriptions_1.SubscriptionBag();
         this.imageControlsByCapabilityKey = new Map();
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
             if (!this.isToolActive) {
+                this.endMoveSnapInteraction();
                 this.setImageFocus(null, {
                     syncCanvasSelection: true,
                     skipRender: true,
@@ -110,6 +116,7 @@ class ImageTool {
             this.updateImages();
         };
         this.onSelectionCleared = () => {
+            this.endMoveSnapInteraction();
             this.setImageFocus(null, {
                 syncCanvasSelection: false,
                 skipRender: true,
@@ -118,6 +125,7 @@ class ImageTool {
             this.updateImages();
         };
         this.onSceneLayoutChanged = () => {
+            this.canvasService?.requestRenderAll();
             this.updateImages();
         };
         this.onSceneGeometryChanged = () => {
@@ -131,7 +139,11 @@ class ImageTool {
             const layerId = target?.data?.layerId;
             if (typeof id !== "string" || layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
                 return;
+            if (this.movingImageId === id) {
+                this.applyMoveSnapToTarget(target);
+            }
             const frame = this.getFrameRect();
+            this.endMoveSnapInteraction();
             if (!frame.width || !frame.height)
                 return;
             const center = target.getCenterPoint
@@ -195,6 +207,7 @@ class ImageTool {
                 },
             ],
         }), { priority: 300 });
+        this.bindCanvasInteractionHandlers();
         this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
         this.subscriptions.on(context.eventBus, "object:modified", this.onObjectModified);
         this.subscriptions.on(context.eventBus, "selection:created", this.onSelectionChanged);
@@ -238,6 +251,8 @@ class ImageTool {
         this.imageSpecs = [];
         this.overlaySpecs = [];
         this.imageControlsByCapabilityKey.clear();
+        this.endMoveSnapInteraction();
+        this.unbindCanvasInteractionHandlers();
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
@@ -247,6 +262,271 @@ class ImageTool {
         }
         this.context = undefined;
     }
+    bindCanvasInteractionHandlers() {
+        if (!this.canvasService || this.canvasObjectMovingHandler)
+            return;
+        this.canvasMouseUpHandler = (e) => {
+            const target = this.getActiveImageTarget(e?.target);
+            if (target &&
+                typeof target?.data?.id === "string" &&
+                target.data.id === this.movingImageId) {
+                this.applyMoveSnapToTarget(target);
+            }
+            this.endMoveSnapInteraction();
+        };
+        this.canvasObjectMovingHandler = (e) => {
+            this.handleCanvasObjectMoving(e);
+        };
+        this.canvasBeforeRenderHandler = () => {
+            this.handleCanvasBeforeRender();
+        };
+        this.canvasAfterRenderHandler = () => {
+            this.handleCanvasAfterRender();
+        };
+        this.canvasService.canvas.on("mouse:up", this.canvasMouseUpHandler);
+        this.canvasService.canvas.on("object:moving", this.canvasObjectMovingHandler);
+        this.canvasService.canvas.on("before:render", this.canvasBeforeRenderHandler);
+        this.canvasService.canvas.on("after:render", this.canvasAfterRenderHandler);
+    }
+    unbindCanvasInteractionHandlers() {
+        if (!this.canvasService)
+            return;
+        if (this.canvasMouseUpHandler) {
+            this.canvasService.canvas.off("mouse:up", this.canvasMouseUpHandler);
+        }
+        if (this.canvasObjectMovingHandler) {
+            this.canvasService.canvas.off("object:moving", this.canvasObjectMovingHandler);
+        }
+        if (this.canvasBeforeRenderHandler) {
+            this.canvasService.canvas.off("before:render", this.canvasBeforeRenderHandler);
+        }
+        if (this.canvasAfterRenderHandler) {
+            this.canvasService.canvas.off("after:render", this.canvasAfterRenderHandler);
+        }
+        this.canvasMouseUpHandler = undefined;
+        this.canvasObjectMovingHandler = undefined;
+        this.canvasBeforeRenderHandler = undefined;
+        this.canvasAfterRenderHandler = undefined;
+    }
+    getActiveImageTarget(target) {
+        if (!this.isToolActive)
+            return null;
+        if (!target)
+            return null;
+        if (target?.data?.layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
+            return null;
+        if (typeof target?.data?.id !== "string")
+            return null;
+        return target;
+    }
+    getTargetBoundsScene(target) {
+        if (!this.canvasService || !target)
+            return null;
+        const rawBounds = typeof target.getBoundingRect === "function"
+            ? target.getBoundingRect()
+            : {
+                left: Number(target.left || 0),
+                top: Number(target.top || 0),
+                width: Number(target.width || 0),
+                height: Number(target.height || 0),
+            };
+        return this.canvasService.toSceneRect({
+            left: Number(rawBounds.left || 0),
+            top: Number(rawBounds.top || 0),
+            width: Number(rawBounds.width || 0),
+            height: Number(rawBounds.height || 0),
+        });
+    }
+    getSnapThresholdScene(px) {
+        if (!this.canvasService)
+            return px;
+        return this.canvasService.toSceneLength(px);
+    }
+    pickSnapMatch(candidates) {
+        if (!candidates.length)
+            return null;
+        const snapThreshold = this.getSnapThresholdScene(IMAGE_MOVE_SNAP_THRESHOLD_PX);
+        let best = null;
+        candidates.forEach((candidate) => {
+            if (Math.abs(candidate.deltaScene) > snapThreshold)
+                return;
+            if (!best || Math.abs(candidate.deltaScene) < Math.abs(best.deltaScene)) {
+                best = candidate;
+            }
+        });
+        return best;
+    }
+    computeMoveSnapMatches(bounds, frame) {
+        if (!bounds || frame.width <= 0 || frame.height <= 0) {
+            return { x: null, y: null };
+        }
+        const xCandidates = [
+            {
+                axis: "x",
+                lineId: "frame-left",
+                kind: "edge",
+                lineScene: frame.left,
+                deltaScene: frame.left - bounds.left,
+            },
+            {
+                axis: "x",
+                lineId: "frame-center-x",
+                kind: "center",
+                lineScene: frame.left + frame.width / 2,
+                deltaScene: frame.left + frame.width / 2 - (bounds.left + bounds.width / 2),
+            },
+            {
+                axis: "x",
+                lineId: "frame-right",
+                kind: "edge",
+                lineScene: frame.left + frame.width,
+                deltaScene: frame.left + frame.width - (bounds.left + bounds.width),
+            },
+        ];
+        const yCandidates = [
+            {
+                axis: "y",
+                lineId: "frame-top",
+                kind: "edge",
+                lineScene: frame.top,
+                deltaScene: frame.top - bounds.top,
+            },
+            {
+                axis: "y",
+                lineId: "frame-center-y",
+                kind: "center",
+                lineScene: frame.top + frame.height / 2,
+                deltaScene: frame.top + frame.height / 2 - (bounds.top + bounds.height / 2),
+            },
+            {
+                axis: "y",
+                lineId: "frame-bottom",
+                kind: "edge",
+                lineScene: frame.top + frame.height,
+                deltaScene: frame.top + frame.height - (bounds.top + bounds.height),
+            },
+        ];
+        return {
+            x: this.pickSnapMatch(xCandidates),
+            y: this.pickSnapMatch(yCandidates),
+        };
+    }
+    areSnapMatchesEqual(a, b) {
+        if (!a && !b)
+            return true;
+        if (!a || !b)
+            return false;
+        return a.lineId === b.lineId && a.axis === b.axis && a.kind === b.kind;
+    }
+    updateSnapMatchState(nextX, nextY) {
+        const changed = !this.areSnapMatchesEqual(this.activeSnapX, nextX) ||
+            !this.areSnapMatchesEqual(this.activeSnapY, nextY);
+        this.activeSnapX = nextX;
+        this.activeSnapY = nextY;
+        if (changed) {
+            this.canvasService?.requestRenderAll();
+        }
+    }
+    clearSnapPreview() {
+        this.activeSnapX = null;
+        this.activeSnapY = null;
+        this.hasRenderedSnapGuides = false;
+        this.canvasService?.requestRenderAll();
+    }
+    endMoveSnapInteraction() {
+        this.movingImageId = null;
+        this.clearSnapPreview();
+    }
+    applyMoveSnapToTarget(target) {
+        if (!this.canvasService) {
+            return { x: null, y: null };
+        }
+        const frame = this.getFrameRect();
+        if (frame.width <= 0 || frame.height <= 0) {
+            return { x: null, y: null };
+        }
+        const bounds = this.getTargetBoundsScene(target);
+        const matches = this.computeMoveSnapMatches(bounds, frame);
+        const deltaScreenX = this.canvasService.toScreenLength(matches.x?.deltaScene ?? 0);
+        const deltaScreenY = this.canvasService.toScreenLength(matches.y?.deltaScene ?? 0);
+        if (deltaScreenX || deltaScreenY) {
+            target.set({
+                left: Number(target.left || 0) + deltaScreenX,
+                top: Number(target.top || 0) + deltaScreenY,
+            });
+            target.setCoords();
+        }
+        return matches;
+    }
+    handleCanvasBeforeRender() {
+        if (!this.canvasService)
+            return;
+        if (!this.hasRenderedSnapGuides && !this.activeSnapX && !this.activeSnapY) {
+            return;
+        }
+        this.canvasService.canvas.clearContext(this.canvasService.canvas.contextTop);
+        this.hasRenderedSnapGuides = false;
+    }
+    drawSnapGuideLine(from, to) {
+        if (!this.canvasService)
+            return;
+        const ctx = this.canvasService.canvas.contextTop;
+        if (!ctx)
+            return;
+        const color = this.getConfig("image.control.borderColor", "#1677ff") ||
+            "#1677ff";
+        ctx.save();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(from.x, from.y);
+        ctx.lineTo(to.x, to.y);
+        ctx.stroke();
+        ctx.restore();
+    }
+    handleCanvasAfterRender() {
+        if (!this.canvasService || !this.isImageEditingVisible()) {
+            return;
+        }
+        const frame = this.getFrameRect();
+        if (frame.width <= 0 || frame.height <= 0) {
+            return;
+        }
+        const frameScreen = this.getFrameRectScreen(frame);
+        let drew = false;
+        if (this.activeSnapX) {
+            const x = this.canvasService.toScreenPoint({
+                x: this.activeSnapX.lineScene,
+                y: frame.top,
+            }).x;
+            this.drawSnapGuideLine({ x, y: frameScreen.top }, { x, y: frameScreen.top + frameScreen.height });
+            drew = true;
+        }
+        if (this.activeSnapY) {
+            const y = this.canvasService.toScreenPoint({
+                x: frame.left,
+                y: this.activeSnapY.lineScene,
+            }).y;
+            this.drawSnapGuideLine({ x: frameScreen.left, y }, { x: frameScreen.left + frameScreen.width, y });
+            drew = true;
+        }
+        this.hasRenderedSnapGuides = drew;
+    }
+    handleCanvasObjectMoving(e) {
+        const target = this.getActiveImageTarget(e?.target);
+        if (!target || !this.canvasService)
+            return;
+        this.movingImageId =
+            typeof target?.data?.id === "string" ? target.data.id : null;
+        const frame = this.getFrameRect();
+        if (frame.width <= 0 || frame.height <= 0) {
+            this.endMoveSnapInteraction();
+            return;
+        }
+        const rawBounds = this.getTargetBoundsScene(target);
+        const matches = this.computeMoveSnapMatches(rawBounds, frame);
+        this.updateSnapMatchState(matches.x, matches.y);
+    }
     syncToolActiveFromWorkbench(fallbackId) {
         const wb = this.context?.services.get("WorkbenchService");
         const activeId = wb?.activeToolId;
@@ -864,33 +1144,9 @@ class ImageTool {
                         originY: "top",
                         fill: hatchFill,
                         opacity: patternFill ? 1 : 0.8,
-                        stroke: null,
-                        fillRule: "evenodd",
-                        selectable: false,
-                        evented: false,
-                        excludeFromExport: true,
-                        objectCaching: false,
-                    },
-                },
-                {
-                    id: "image.cropShapePath",
-                    type: "path",
-                    data: { id: "image.cropShapePath", zIndex: 6 },
-                    layout: {
-                        reference: "custom",
-                        referenceRect: frameRect,
-                        alignX: "start",
-                        alignY: "start",
-                        offsetX: shapeBounds.x,
-                        offsetY: shapeBounds.y,
-                    },
-                    props: {
-                        pathData: shapePathData,
-                        originX: "left",
-                        originY: "top",
-                        fill: "rgba(0,0,0,0)",
                         stroke: "rgba(255, 0, 0, 0.9)",
                         strokeWidth: this.canvasService?.toSceneLength(1) ?? 1,
+                        fillRule: "evenodd",
                         selectable: false,
                         evented: false,
                         excludeFromExport: true,

package/.test-dist/src/shared/constants/layers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYER_IDS = exports.FILM_LAYER_ID = exports.RULER_LAYER_ID = exports.FEATURE_OVERLAY_LAYER_ID = exports.DIELINE_LAYER_ID = exports.WHITE_INK_OVERLAY_LAYER_ID = exports.WHITE_INK_COVER_LAYER_ID = exports.WHITE_INK_OBJECT_LAYER_ID = exports.IMAGE_OVERLAY_LAYER_ID = exports.IMAGE_OBJECT_LAYER_ID = exports.BACKGROUND_LAYER_ID = void 0;
+exports.LAYER_IDS = exports.FILM_LAYER_ID = exports.RULER_LAYER_ID = exports.FEATURE_OVERLAY_LAYER_ID = exports.FEATURE_DIELINE_LAYER_ID = exports.DIELINE_LAYER_ID = exports.WHITE_INK_OVERLAY_LAYER_ID = exports.WHITE_INK_COVER_LAYER_ID = exports.WHITE_INK_OBJECT_LAYER_ID = exports.IMAGE_OVERLAY_LAYER_ID = exports.IMAGE_OBJECT_LAYER_ID = exports.BACKGROUND_LAYER_ID = void 0;
 exports.BACKGROUND_LAYER_ID = "background";
 exports.IMAGE_OBJECT_LAYER_ID = "image.user";
 exports.IMAGE_OVERLAY_LAYER_ID = "image-overlay";
@@ -8,6 +8,7 @@ exports.WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 exports.WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 exports.WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 exports.DIELINE_LAYER_ID = "dieline-overlay";
+exports.FEATURE_DIELINE_LAYER_ID = "feature-dieline-overlay";
 exports.FEATURE_OVERLAY_LAYER_ID = "feature-overlay";
 exports.RULER_LAYER_ID = "ruler-overlay";
 exports.FILM_LAYER_ID = "overlay";
@@ -19,6 +20,7 @@ exports.LAYER_IDS = {
     whiteInkCover: exports.WHITE_INK_COVER_LAYER_ID,
     whiteInkOverlay: exports.WHITE_INK_OVERLAY_LAYER_ID,
     dieline: exports.DIELINE_LAYER_ID,
+    featureDieline: exports.FEATURE_DIELINE_LAYER_ID,
     featureOverlay: exports.FEATURE_OVERLAY_LAYER_ID,
     rulerOverlay: exports.RULER_LAYER_ID,
     filmOverlay: exports.FILM_LAYER_ID,

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pooder/kit
 
+## 6.2.0
+
+### Minor Changes
+
+- refactor the dieline feature and modify the image snap
+
+## 6.1.2
+
+### Patch Changes
+
+- snapping
+
 ## 6.1.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,9 +1,23 @@
 import * as _pooder_core from '@pooder/core';
-import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, Service, ServiceContext, EventBus } from '@pooder/core';
+import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, ConfigurationService, Service, ServiceContext, EventBus } from '@pooder/core';
 import { Canvas, FabricObject } from 'fabric';
 
 type BackgroundLayerKind = "color" | "image";
 type BackgroundFitMode = "cover" | "contain" | "stretch";
+type BackgroundRegionUnit = "normalized" | "px";
+type BackgroundRegistrationFrame = "trim" | "cut" | "bleed" | "focus" | "viewport";
+interface BackgroundRegistrationRegion {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    unit: BackgroundRegionUnit;
+}
+interface BackgroundRegistration {
+    sourceRegion?: BackgroundRegistrationRegion;
+    targetFrame?: BackgroundRegistrationFrame;
+    fit?: BackgroundFitMode;
+}
 interface BackgroundLayer {
     id: string;
     kind: BackgroundLayerKind;
@@ -15,6 +29,7 @@ interface BackgroundLayer {
     exportable: boolean;
     color?: string;
     src?: string;
+    registration?: BackgroundRegistration;
 }
 interface BackgroundConfig {
     version: number;
@@ -47,8 +62,11 @@ declare class BackgroundTool implements Extension {
     private getViewportRect;
     private resolveSceneLayout;
     private resolveFocusRect;
+    private resolveTargetFrameRect;
     private resolveAnchorRect;
     private resolveImagePlacement;
+    private resolveRegistrationRegion;
+    private resolveRegistrationPlacement;
     private buildColorLayerSpec;
     private buildImageLayerSpec;
     private buildBackgroundSpecs;
@@ -92,6 +110,14 @@ declare class ImageTool implements Extension {
     private cropShapeHatchPatternKey?;
     private imageSpecs;
     private overlaySpecs;
+    private activeSnapX;
+    private activeSnapY;
+    private movingImageId;
+    private hasRenderedSnapGuides;
+    private canvasObjectMovingHandler?;
+    private canvasMouseUpHandler?;
+    private canvasBeforeRenderHandler?;
+    private canvasAfterRenderHandler?;
     private renderProducerDisposable?;
     private readonly subscriptions;
     private imageControlsByCapabilityKey;
@@ -102,6 +128,22 @@ declare class ImageTool implements Extension {
     private onSelectionCleared;
     private onSceneLayoutChanged;
     private onSceneGeometryChanged;
+    private bindCanvasInteractionHandlers;
+    private unbindCanvasInteractionHandlers;
+    private getActiveImageTarget;
+    private getTargetBoundsScene;
+    private getSnapThresholdScene;
+    private pickSnapMatch;
+    private computeMoveSnapMatches;
+    private areSnapMatchesEqual;
+    private updateSnapMatchState;
+    private clearSnapPreview;
+    private endMoveSnapInteraction;
+    private applyMoveSnapToTarget;
+    private handleCanvasBeforeRender;
+    private drawSnapGuideLine;
+    private handleCanvasAfterRender;
+    private handleCanvasObjectMoving;
     private syncToolActiveFromWorkbench;
     private isImageEditingVisible;
     private getEnabledImageControlCapabilities;
@@ -293,6 +335,9 @@ interface DielineState {
     customSourceWidthPx?: number;
     customSourceHeightPx?: number;
 }
+declare function createDefaultDielineState(): DielineState;
+declare function readDielineState(configService: ConfigurationService, fallback?: Partial<DielineState>): DielineState;
+
 declare class DielineTool implements Extension {
     id: string;
     metadata: {
@@ -325,7 +370,6 @@ declare class DielineTool implements Extension {
     private createHatchPattern;
     private getConfigService;
     private hasImageItems;
-    private syncSizeState;
     private buildDielineSpecs;
     private buildImageClipEffects;
     updateDieline(_emitEvent?: boolean): void;
@@ -719,7 +763,9 @@ declare class FeatureTool implements Extension {
     private hasWorkingChanges;
     private dirtyTrackerDisposable?;
     private renderProducerDisposable?;
-    private specs;
+    private markerSpecs;
+    private sessionDielineSpecs;
+    private sessionDielineEffects;
     private renderSeq;
     private readonly subscriptions;
     private handleMoving;
@@ -733,6 +779,7 @@ declare class FeatureTool implements Extension {
     deactivate(context: ExtensionContext): void;
     private onToolActivated;
     private updateVisibility;
+    private isSessionVisible;
     contribute(): {
         [ContributionPointIds.TOOLS]: {
             id: string;
@@ -754,8 +801,10 @@ declare class FeatureTool implements Extension {
     private getConfigService;
     private getCommittedFeatures;
     private updateCommittedFeatures;
+    private hasFeatureSessionDraft;
     private clearFeatureSessionState;
-    private restoreSessionFeaturesToConfig;
+    private restoreCommittedFeaturesToConfig;
+    private suspendFeatureSession;
     private emitWorkingChange;
     private refreshGeometry;
     private resetWorkingFeaturesFromSource;
@@ -767,6 +816,7 @@ declare class FeatureTool implements Extension {
     private getGeometryForFeature;
     private setup;
     private teardown;
+    private createHatchPattern;
     private getDraggableMarkerTarget;
     private getFeatureForMarker;
     private constrainPosition;
@@ -775,7 +825,9 @@ declare class FeatureTool implements Extension {
     private syncGroupFromCanvas;
     private redraw;
     private redrawAsync;
-    private buildFeatureSpecs;
+    private buildSessionDielineRender;
+    private hasImageItems;
+    private buildMarkerSpecs;
     private appendMarkerSpecs;
     private buildMarkerData;
     private markerId;
@@ -1008,4 +1060,4 @@ declare function createWhiteInkCommands(tool: any): CommandContribution[];
 
 declare function createWhiteInkConfigurations(): ConfigurationContribution[];
 
-export { type BackgroundConfig, type BackgroundFitMode, type BackgroundLayer, type BackgroundLayerKind, BackgroundTool, CanvasService, type DielineGeometry, type DielineState, DielineTool, FeatureTool, FilmTool, type ImageItem, ImageTool, type LayerObjectCountComparator, type LineStyle, MirrorTool, type RenderClipPathEffectSpec, type RenderCoordinateSpace, type RenderEffectSpec, type RenderLayoutAlign, type RenderLayoutInsets, type RenderLayoutLength, type RenderLayoutRect, type RenderLayoutReference, type RenderObjectLayoutSpec, type RenderObjectSpec, type RenderObjectType, type RenderPassSpec, type RenderProps, RulerTool, SceneLayoutService, SizeTool, ViewportSystem, type VisibilityEvalContext, type VisibilityExpr, type VisibilityLayerState, type WhiteInkItem, WhiteInkTool, getCoverScale as computeImageCoverScale, getCoverScale as computeWhiteInkCoverScale, createDielineCommands, createDielineConfigurations, createImageCommands, createImageConfigurations, createWhiteInkCommands, createWhiteInkConfigurations, evaluateVisibilityExpr };
+export { type BackgroundConfig, type BackgroundFitMode, type BackgroundLayer, type BackgroundLayerKind, type BackgroundRegionUnit, type BackgroundRegistration, type BackgroundRegistrationFrame, type BackgroundRegistrationRegion, BackgroundTool, CanvasService, type DielineGeometry, type DielineState, DielineTool, FeatureTool, FilmTool, type ImageItem, ImageTool, type LayerObjectCountComparator, type LineStyle, MirrorTool, type RenderClipPathEffectSpec, type RenderCoordinateSpace, type RenderEffectSpec, type RenderLayoutAlign, type RenderLayoutInsets, type RenderLayoutLength, type RenderLayoutRect, type RenderLayoutReference, type RenderObjectLayoutSpec, type RenderObjectSpec, type RenderObjectType, type RenderPassSpec, type RenderProps, RulerTool, SceneLayoutService, SizeTool, ViewportSystem, type VisibilityEvalContext, type VisibilityExpr, type VisibilityLayerState, type WhiteInkItem, WhiteInkTool, getCoverScale as computeImageCoverScale, getCoverScale as computeWhiteInkCoverScale, createDefaultDielineState, createDielineCommands, createDielineConfigurations, createImageCommands, createImageConfigurations, createWhiteInkCommands, createWhiteInkConfigurations, evaluateVisibilityExpr, readDielineState };