@spiffcommerce/core 0.2.1 → 0.2.2

package/dist/types.d.ts

@@ -1,15 +1,15 @@
 import { StepAspect, Workflow, AnyStepData, Step, Asset, AssetType, IServerModel, MaterialResource, VariantResource, CameraAnimation, ModelAnimation, OptionResource, StepType, TextStepData } from "papyrus/build/main/generation/Workflow";
-import { PatternImageData, ScaleAxis, UnitOfMeasurement } from "papyrus/build/main/types";
+import { PatternImageData, Point, ScaleAxis, UnitOfMeasurement } from "papyrus/build/main/types";
 import { FrameOffsets, ILayout, SerializableStep, StepStorage, Region, LayoutsState as _LayoutsState1, LayoutElement, LayoutsState, TextboxElement, ImageElement } from "papyrus/build/main/LayoutsState/types";
 import { ApolloClient } from "@apollo/client";
 import { ModuleProduct } from "papyrus/build/main/module/ModuleProduct";
 import { CanvasCommand, CreateElementCommand, FontAlignmentCommand, FontColorCommand, TextChangeCommand } from "papyrus/build/main/command";
 import { CommandState, CommandContext as _CommandContext1, LayoutData as _LayoutData1, CommandContext, LayoutData } from "papyrus/build/main/CommandContext";
-import { Dispatch, FunctionComponent, ReactNode, MouseEvent, PointerEvent } from "react";
+import { ReactNode, Dispatch, FunctionComponent, RefObject, PointerEvent, KeyboardEvent, MouseEvent } from "react";
 import { ThreeDPreviewService as _ThreeDPreviewService1, SpiffCommerce3DPreviewService } from "spiff-preview";
 import { LayoutElementFactory } from "papyrus/build/main/Elements/factory";
 export const gatherVaryingStepAspects: (workflow: Workflow) => StepAspect[];
-interface WorkflowScene {
+export interface WorkflowScene {
     name: string;
     title: string;
     renderableSteps: Step<AnyStepData>[];
@@ -898,6 +898,16 @@ export const useLayouts: () => {
 export type CommandDispatcher = (command: CanvasCommand) => void;
 export type LayoutGetter = (layoutId: string) => _LayoutData1;
 export type LayoutsGetter = () => _LayoutData1[];
+/**
+ * Details about a guideline that can be drawn on the canvas.
+ */
+interface SnapPoint {
+    type: "x" | "y" | "rotation";
+    value: number;
+    svgNode?: ReactNode;
+    anchorPoint: number;
+    guidelineCoordinates?: Point[];
+}
 enum ElementEventType {
     Translate = "Translate",
     Rotate = "Rotate",
@@ -1021,6 +1031,53 @@ export const useEditorState: () => {
     uiDispatcher: Dispatch<UICommand>;
     state: AdvancedEditorState;
 };
+/**
+ * The minimum zoom that can be applied to a canvas.
+ */
+export const minZoom = 0.5;
+export const useEditorInteraction: (editorRef: RefObject<SVGRectElement>, interactionRef: RefObject<HTMLDivElement>, zoomableElementRef: RefObject<HTMLDivElement>, defaultAdjustmentZoom: number | undefined, mode: "adjustment" | "advanced", canvasDispatcher: CommandDispatcher, guidelinePrimaryColor?: string) => {
+    guidelines: SnapPoint[];
+    scale: number;
+    zoomableElementRef: RefObject<HTMLDivElement>;
+    setElementEvent: (newEvent: ElementEvent | undefined) => void;
+    handleZoom: (_event: any, value: any) => void;
+    handleKeyDown: (event: KeyboardEvent, adjustmentBoundary?: Region) => void;
+    handleKeyUp: (event: KeyboardEvent) => void;
+    handlePointerPressedBackground: () => void;
+    handlePointerReleased: () => void;
+    handlePointerMove: (e: PointerEvent, adjustmentBoundary?: Region) => void;
+    handleScroll: () => void;
+    handleSequenceStart: () => void;
+};
+export const EditorCore: FunctionComponent<{
+    color?: string;
+    editorRef: RefObject<SVGRectElement>;
+    zoomableElementRef: RefObject<HTMLDivElement>;
+    interactionElementRef: RefObject<HTMLDivElement>;
+    guidelines: SnapPoint[];
+    isMakingAdjustments?: boolean;
+    viewmask?: {
+        x: number;
+        y: number;
+        height: number;
+        width: number;
+    };
+    visibleLayoutId: string;
+    xTranslation: number;
+    yTranslation: number;
+    targetedElements?: string[];
+    borderRadius?: number;
+    handleContextMenu?: (e: any) => void;
+    handleKeyDown: (event: KeyboardEvent, adjustmentBoundary?: Region) => void;
+    handleKeyUp: (event: KeyboardEvent) => void;
+    handlePointerMove: (e: PointerEvent, adjustmentBoundary?: Region) => void;
+    handlePointerPressedBackground: () => void;
+    handlePointerReleased: () => void;
+    handleScroll: () => void;
+    onSequenceStart: () => void;
+    setElementEvent: (e: ElementEvent | undefined) => void;
+    onElementSelected: (elementId: string | undefined, event: PointerEvent) => void;
+}>;
 /**
  * The advanced editor encapsulates the logic required to allow users to manipulate a design
  * with more granular control such as toolbars, direct element manipulation, and more.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/main.js",