@flowscape-ui/core-sdk 1.0.3 → 1.0.4

package/dist/index.d.cts

@@ -260,6 +260,85 @@ interface GroupNodeHandle extends NodeHandle {
         height: number;
     }): this;
 }
+/**
+ * Handle for SvgNode
+ */
+interface SvgNodeHandle extends NodeHandle {
+    setSrc(url: string, onLoad?: (node: unknown) => void, onError?: (error: Error) => void): Promise<unknown>;
+    setSize(size: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    setOpacity(opacity: number): this;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    getCornerRadius(): number;
+    getOpacity(): number;
+    isLoading(): boolean;
+    isLoaded(): boolean;
+}
+/**
+ * Handle for VideoNode
+ */
+interface VideoNodeHandle extends NodeHandle {
+    setSrc(url: string, options?: Record<string, unknown>): Promise<unknown>;
+    play(): Promise<unknown>;
+    pause(): this;
+    stop(): this;
+    setCurrentTime(time: number): this;
+    getCurrentTime(): number;
+    getDuration(): number;
+    setVolume(volume: number): this;
+    getVolume(): number;
+    setMuted(muted: boolean): this;
+    isMuted(): boolean;
+    setLoop(loop: boolean): this;
+    isLoop(): boolean;
+    setPlaybackRate(rate: number): this;
+    getPlaybackRate(): number;
+    isPlaying(): boolean;
+    isLoaded(): boolean;
+    getVideoElement(): HTMLVideoElement | null;
+    setSize(size: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    setOpacity(opacity: number): this;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    getCornerRadius(): number;
+    getOpacity(): number;
+}
+/**
+ * Handle for GifNode
+ */
+interface GifNodeHandle extends NodeHandle {
+    setSrc(url: string, options?: Record<string, unknown>): Promise<unknown>;
+    play(): this;
+    pause(): this;
+    isPlaying(): boolean;
+    isLoaded(): boolean;
+    getFrameIndex(): number;
+    getCanvas(): HTMLCanvasElement | null;
+    setSize(size: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    setOpacity(opacity: number): this;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    getCornerRadius(): number;
+    getOpacity(): number;
+}
 
 interface BaseNodeOptions {
     id?: string;
@@ -447,6 +526,97 @@ interface EllipseNodeOptions extends BaseNodeOptions {
     strokeWidth?: number;
 }
 
+interface MediaPlaceholderOptions {
+    text: string;
+    textColor: string;
+    font: string;
+    backgroundColor: string;
+    borderColor: string;
+    baseSpinnerColor: string;
+    accentSpinnerColor: string;
+    lineWidth: number;
+    fallbackWidth: number;
+    fallbackHeight: number;
+}
+declare class MediaPlaceholder {
+    private readonly _node;
+    private _options;
+    private _rafId;
+    private _startTime;
+    private _lastDrawTime;
+    private _canvas;
+    private _ctx;
+    private _logicalWidth;
+    private _logicalHeight;
+    private _pixelRatio;
+    private readonly _maxPixelRatio;
+    private readonly _maxCanvasPixels;
+    private readonly _targetFps;
+    constructor(node: Konva.Image, options?: Partial<MediaPlaceholderOptions>);
+    setOptions(options: Partial<MediaPlaceholderOptions>): void;
+    start(): void;
+    stop(): void;
+    private _tick;
+    private _getPixelRatio;
+    private _draw;
+}
+
+declare global {
+    interface Window {
+        gifler?: (url: string) => GiflerInstance;
+    }
+    interface GiflerInstance {
+        frames: (canvas: HTMLCanvasElement, onDrawFrame: (ctx: CanvasRenderingContext2D, frame: GiflerFrame) => void) => void;
+    }
+    interface GiflerFrame {
+        width: number;
+        height: number;
+        buffer: HTMLCanvasElement;
+    }
+}
+interface GifNodeOptions extends BaseNodeOptions {
+    src?: string;
+    width?: number;
+    height?: number;
+    cornerRadius?: number | number[];
+    autoplay?: boolean;
+    placeholder?: Partial<MediaPlaceholderOptions>;
+    onLoad?: (node: GifNode) => void;
+    onError?: (error: Error) => void;
+    onFrame?: (node: GifNode, frameIndex: number) => void;
+}
+declare class GifNode extends BaseNode<Konva.Image> {
+    private _canvas;
+    private _placeholder;
+    private _isLoaded;
+    private _isPlaying;
+    private _giflerLoaded;
+    private _frameIndex;
+    constructor(options?: GifNodeOptions);
+    setSrc(url: string, options?: Omit<GifNodeOptions, 'src' | 'x' | 'y' | 'width' | 'height'>): Promise<this>;
+    play(): this;
+    pause(): this;
+    isPlaying(): boolean;
+    isLoaded(): boolean;
+    getFrameIndex(): number;
+    getCanvas(): HTMLCanvasElement | null;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    getCornerRadius(): number;
+    setOpacity(opacity: number): this;
+    getOpacity(): number;
+    private _ensureGiflerLibrary;
+    private _cleanup;
+    remove(): void;
+}
+
 interface GroupNodeOptions extends BaseNodeOptions {
     draggable?: boolean;
     listening?: boolean;
@@ -464,8 +634,11 @@ interface ImageNodeOptions extends BaseNodeOptions {
     src?: string;
     width?: number;
     height?: number;
+    cornerRadius?: number | number[];
+    placeholder?: Partial<MediaPlaceholderOptions>;
 }
 declare class ImageNode extends BaseNode<Konva.Image> {
+    private _placeholder;
     constructor(options?: ImageNodeOptions);
     getSize(): {
         width: number;
@@ -487,6 +660,7 @@ declare class ImageNode extends BaseNode<Konva.Image> {
     setCornerRadius(radius: number | number[]): this;
     getCornerRadius(): number;
     private _loadHTMLImage;
+    remove(): void;
 }
 
 interface RegularPolygonNodeOptions extends BaseNodeOptions {
@@ -536,6 +710,38 @@ interface StarNodeOptions extends BaseNodeOptions {
     strokeWidth?: number;
 }
 
+interface SvgNodeOptions extends BaseNodeOptions {
+    src?: string;
+    width?: number;
+    height?: number;
+    cornerRadius?: number | number[];
+    placeholder?: Partial<MediaPlaceholderOptions>;
+    onLoad?: (node: SvgNode) => void;
+    onError?: (error: Error) => void;
+}
+declare class SvgNode extends BaseNode<Konva.Image> {
+    private _isLoading;
+    private _isLoaded;
+    private _placeholder;
+    constructor(options?: SvgNodeOptions);
+    isLoading(): boolean;
+    isLoaded(): boolean;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    setSrc(url: string, onLoad?: (node: SvgNode) => void, onError?: (error: Error) => void): Promise<this>;
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    getCornerRadius(): number;
+    setOpacity(opacity: number): this;
+    getOpacity(): number;
+    remove(): void;
+}
+
 interface TextNodeOptions extends BaseNodeOptions {
     text?: string;
     fontSize?: number;
@@ -612,11 +818,77 @@ declare class TextNode extends BaseNode<Konva.Text> {
     private _keyHandler;
     private _clickHandler;
     private _syncTextareaRafId;
+    private _inputHandler;
+    private _prevWrap;
+    private _getWrappedLineCount;
+    private _ensureHeightFitsWrappedText;
+    private _ensureWidthFitsText;
+    private _syncNodeSizeFromTextarea;
     private _syncTextareaPosition;
     private _openTextarea;
     private _saveAndClose;
 }
 
+interface VideoNodeOptions extends BaseNodeOptions {
+    src?: string;
+    width?: number;
+    height?: number;
+    cornerRadius?: number | number[];
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    currentTime?: number;
+    volume?: number;
+    playbackRate?: number;
+    placeholder?: Partial<MediaPlaceholderOptions>;
+    onLoadedMetadata?: (node: VideoNode, video: HTMLVideoElement) => void;
+    onError?: (error: Error) => void;
+    onPlay?: (node: VideoNode) => void;
+    onPause?: (node: VideoNode) => void;
+    onEnded?: (node: VideoNode) => void;
+}
+declare class VideoNode extends BaseNode<Konva.Image> {
+    private _videoElement;
+    private _animation;
+    private _placeholder;
+    private _isPlaying;
+    private _isLoaded;
+    constructor(options?: VideoNodeOptions);
+    setSrc(url: string, options?: Omit<VideoNodeOptions, 'src' | 'x' | 'y' | 'width' | 'height'>): Promise<this>;
+    play(): Promise<this>;
+    pause(): this;
+    stop(): this;
+    setCurrentTime(time: number): this;
+    getCurrentTime(): number;
+    getDuration(): number;
+    setVolume(volume: number): this;
+    getVolume(): number;
+    setMuted(muted: boolean): this;
+    isMuted(): boolean;
+    setLoop(loop: boolean): this;
+    isLoop(): boolean;
+    setPlaybackRate(rate: number): this;
+    getPlaybackRate(): number;
+    isPlaying(): boolean;
+    isLoaded(): boolean;
+    getVideoElement(): HTMLVideoElement | null;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    setSize({ width, height }: {
+        width: number;
+        height: number;
+    }): this;
+    setCornerRadius(radius: number | number[]): this;
+    getCornerRadius(): number;
+    setOpacity(opacity: number): this;
+    getOpacity(): number;
+    private _ensureAnimation;
+    private _cleanup;
+    remove(): void;
+}
+
 declare class NodeManager {
     private _layer;
     private _world;
@@ -642,6 +914,9 @@ declare class NodeManager {
     addRing(options: RingNodeOptions): RingNodeHandle;
     addRegularPolygon(options: RegularPolygonNodeOptions): RegularPolygonNodeHandle;
     addGroup(options: GroupNodeOptions): GroupNodeHandle;
+    addSvg(options: SvgNodeOptions): SvgNodeHandle;
+    addVideo(options: VideoNodeOptions): VideoNodeHandle;
+    addGif(options: GifNodeOptions): GifNodeHandle;
     remove(node: BaseNode): void;
     findById(id: string): BaseNode | undefined;
     list(): BaseNode[];
@@ -1113,10 +1388,16 @@ declare class AreaSelectionPlugin extends Plugin {
     private _selecting;
     private _skipNextClick;
     private _lastPickedBaseNodes;
+    private _autoPanRafId;
+    private _autoPanActive;
+    private _autoPanEdgePx;
+    private _autoPanMaxSpeedPx;
     private _options;
     constructor(options?: AreaSelectionPluginOptions);
     protected onAttach(core: CoreEngine): void;
     protected onDetach(core: CoreEngine): void;
+    private _startAutoPanLoop;
+    private _stopAutoPanLoop;
     private _finalizeArea;
     private _clearSelection;
     private _getSelectionPlugin;
@@ -1162,6 +1443,43 @@ declare class CameraHotkeysPlugin extends Plugin {
     private _pan;
 }
 
+interface ContentFromClipboardPluginOptions {
+    target?: Window | Document | HTMLElement | EventTarget;
+    ignoreEditableTargets?: boolean;
+    maxImageSize?: number;
+    enableDragDrop?: boolean;
+}
+declare class ContentFromClipboardPlugin extends Plugin {
+    private _core?;
+    private _options;
+    private _dragDropAddon;
+    constructor(options?: ContentFromClipboardPluginOptions);
+    protected onAttach(core: CoreEngine): void;
+    protected onDetach(_core: CoreEngine): void;
+    private _onPaste;
+    private _handlePaste;
+    handleDrop(e: DragEvent): Promise<void>;
+    private _handleDataTransfer;
+    private _pasteSvgText;
+    private _pasteSvgFile;
+    private _pasteImageFile;
+    private _pasteVideoFile;
+    private _fitIntoMaxSize;
+    private _isEditableTarget;
+    private _getPastePosition;
+    private _isPointerOnScreen;
+    private _getScreenCenter;
+    private _getAsString;
+    private _looksLikeVideoFile;
+    private _htmlToText;
+    private _readFileAsText;
+    private _extractSvgMarkup;
+    private _svgTextToSrc;
+    private _parseSvgNumber;
+    private _extractSvgSize;
+    private _loadImageSize;
+}
+
 interface GridPluginOptions {
     stepX?: number;
     stepY?: number;
@@ -1384,6 +1702,7 @@ declare class NodeHotkeysPlugin extends Plugin {
     constructor(options?: NodeHotkeysOptions);
     protected onAttach(core: CoreEngine): void;
     protected onDetach(_core: CoreEngine): void;
+    private _onPaste;
     private _onKeyDown;
     private _isEditableTarget;
     private _handleCopy;
@@ -1682,6 +2001,90 @@ declare class RulerPlugin extends Plugin {
     isVisible(): boolean;
 }
 
+interface VideoOverlayAddonOptions {
+    zIndex?: number;
+    marginPx?: number;
+    controlsHeightPx?: number;
+    speeds?: number[];
+    minWidthPx?: number;
+    minHeightPx?: number;
+    maxWorldScaleToShow?: number | null;
+    hideDuringCameraZoomMs?: number;
+    uiBackgroundColor?: string;
+    uiBorderColor?: string;
+    uiTextColor?: string;
+    uiMutedTextColor?: string;
+    uiAccentColor?: string;
+    uiTrackColor?: string;
+    uiTrackFilledColor?: string;
+}
+declare class VideoOverlayAddon extends PluginAddon<SelectionPlugin> {
+    private _core;
+    private _rootEl;
+    private _controlsEl;
+    private _playBtn;
+    private _muteBtn;
+    private _speedBtn;
+    private _timeLabel;
+    private _seekInput;
+    private _volInput;
+    private _selectedVideoNode;
+    private _selectedVideoEl;
+    private _hiddenForDrag;
+    private _hiddenForSize;
+    private _hiddenForTransform;
+    private _hiddenForZoom;
+    private _hiddenForWorldScale;
+    private _hiddenForNotReady;
+    private _uiMode;
+    private _zoomUnhideTimeoutId;
+    private _onKonvaDragStart;
+    private _onKonvaDragEnd;
+    private _onKonvaTransformStart;
+    private _onKonvaTransformEnd;
+    private _onLayerTransformStart;
+    private _onLayerTransformEnd;
+    private _onLayerDragStart;
+    private _onLayerDragEnd;
+    private _rafId;
+    private _options;
+    private _onNodeSelected;
+    private _onNodeDeselected;
+    private _onSelectionCleared;
+    private _onNodeTransformed;
+    private _onStageResized;
+    private _onCameraChanged;
+    private _onWorldChanged;
+    private _onTimeUpdate;
+    private _onLoadedMetadata;
+    private _onCanPlay;
+    private _onPlayPauseSync;
+    constructor(options?: VideoOverlayAddonOptions);
+    protected onAttach(_plugin: SelectionPlugin, core: CoreEngine): void;
+    protected onDetach(_plugin: SelectionPlugin, core: CoreEngine): void;
+    private _ensureDom;
+    private _updateRangeFill;
+    private _tryShowForNode;
+    private _show;
+    private _hide;
+    private _bindLayerInteractionEvents;
+    private _unbindLayerInteractionEvents;
+    private _bindKonvaDragEvents;
+    private _unbindKonvaDragEvents;
+    private _bindKonvaTransformEvents;
+    private _unbindKonvaTransformEvents;
+    private _hideTemporarilyForZoom;
+    private _bindVideoEvents;
+    private _unbindVideoEvents;
+    private _isVideoReady;
+    private _maybeShowWhenReady;
+    private _scheduleSync;
+    private _syncPosition;
+    private _syncControls;
+    private _formatTime;
+    private _applyUiMode;
+}
+
 interface MultiGroupControllerDeps {
     ensureTempMulti: (nodes: BaseNode[]) => void;
     destroyTempMulti: () => void;
@@ -1716,6 +2119,7 @@ interface SelectionPluginOptions {
     autoPanEnabled?: boolean;
     autoPanEdgePx?: number;
     autoPanMaxSpeedPx?: number;
+    enableVideoOverlay?: boolean | VideoOverlayAddonOptions;
 }
 /**
  * Universal selection and dragging plugin for nodes compatible with BaseNode.
@@ -1804,6 +2208,7 @@ declare class SelectionPlugin extends Plugin {
      */
     private _computeUnionBBox;
     private _ensureTempMulti;
+    private _destroyTempMultiOverlayOnly;
     private _destroyTempMulti;
     private _commitTempMultiToGroup;
     private _tryUngroupSelectedGroup;
@@ -1819,6 +2224,14 @@ declare class SelectionPlugin extends Plugin {
     private _setupRotateHandles;
     private _destroyRotateHandles;
     private _getNodeCenterAbs;
+    /**
+     * Set custom rotation cursor with dynamic angle based on handle position
+     */
+    private _setRotateCursor;
+    /**
+     * Apply rotated cursor by creating a rotated SVG data URL
+     */
+    private _applyRotatedCursor;
     private _updateRotateHandlesPosition;
     private _setupSizeLabel;
     private _scheduleUIUpdate;
@@ -2046,4 +2459,4 @@ declare class ThrottleHelper {
     getThrottle(): number;
 }
 
-export { type ArcNodeHandle, type ArcNodeOptions, AreaSelectionPlugin, type AreaSelectionPluginOptions, type ArrowNodeHandle, type ArrowNodeOptions, type BaseNodeOptions, type CameraHotkeysOptions, CameraHotkeysPlugin, CameraManager, type CircleNodeHandle, type CircleNodeOptions, CoreEngine, type CoreEngineOptions, type CoreEvents, DebounceHelper, type EllipseNodeHandle, type EllipseNodeOptions, EventBus, GridPlugin, type GridPluginOptions, type GroupNodeHandle, type GroupNodeOptions, type HistoryAction, HistoryManager, HistoryPlugin, type HistoryPluginOptions, ImageHoverFilterAddon, type ImageNodeHandle, type ImageNodeOptions, type ImageSource, type KonvaArc, type KonvaArrow, type KonvaCircle, type KonvaEllipse, type KonvaGroup, type KonvaGroupConfig, type KonvaImage, type KonvaLayer, type KonvaNode, type KonvaNodeConfig, type KonvaRegularPolygon, type KonvaRing, type KonvaShape, type KonvaStage, type KonvaStar, type KonvaText, type LogoOptions, LogoPlugin, NodeAddon, NodeAddons, type NodeAddonsHandle, type NodeHandle, type NodeHotkeysOptions, NodeHotkeysPlugin, NodeManager, PluginAddon, Plugins, type RegularPolygonNodeHandle, type RegularPolygonNodeOptions, type RingNodeHandle, type RingNodeOptions, RulerGuidesAddon, RulerGuidesPlugin, type RulerGuidesPluginOptions, RulerHighlightAddon, RulerHighlightPlugin, type RulerHighlightPluginOptions, RulerManagerAddon, RulerManagerPlugin, type RulerManagerPluginOptions, RulerPlugin, type RulerPluginOptions, SelectionPlugin, type SelectionPluginOptions, ShapeHoverHighlightAddon, type ShapeNodeHandle, type ShapeNodeOptions, type StarNodeHandle, type StarNodeOptions, TextAutoTrimAddon, type TextNodeHandle, type TextNodeOptions, ThrottleHelper, VisualGuidesPlugin, type VisualGuidesPluginOptions };
+export { type ArcNodeHandle, type ArcNodeOptions, AreaSelectionPlugin, type AreaSelectionPluginOptions, type ArrowNodeHandle, type ArrowNodeOptions, type BaseNodeOptions, type CameraHotkeysOptions, CameraHotkeysPlugin, CameraManager, type CircleNodeHandle, type CircleNodeOptions, ContentFromClipboardPlugin, type ContentFromClipboardPluginOptions, CoreEngine, type CoreEngineOptions, type CoreEvents, DebounceHelper, type EllipseNodeHandle, type EllipseNodeOptions, EventBus, type GifNodeHandle, type GifNodeOptions, GridPlugin, type GridPluginOptions, type GroupNodeHandle, type GroupNodeOptions, type HistoryAction, HistoryManager, HistoryPlugin, type HistoryPluginOptions, ImageHoverFilterAddon, type ImageNodeHandle, type ImageNodeOptions, type ImageSource, type KonvaArc, type KonvaArrow, type KonvaCircle, type KonvaEllipse, type KonvaGroup, type KonvaGroupConfig, type KonvaImage, type KonvaLayer, type KonvaNode, type KonvaNodeConfig, type KonvaRegularPolygon, type KonvaRing, type KonvaShape, type KonvaStage, type KonvaStar, type KonvaText, type LogoOptions, LogoPlugin, MediaPlaceholder, type MediaPlaceholderOptions, NodeAddon, NodeAddons, type NodeAddonsHandle, type NodeHandle, type NodeHotkeysOptions, NodeHotkeysPlugin, NodeManager, PluginAddon, Plugins, type RegularPolygonNodeHandle, type RegularPolygonNodeOptions, type RingNodeHandle, type RingNodeOptions, RulerGuidesAddon, RulerGuidesPlugin, type RulerGuidesPluginOptions, RulerHighlightAddon, RulerHighlightPlugin, type RulerHighlightPluginOptions, RulerManagerAddon, RulerManagerPlugin, type RulerManagerPluginOptions, RulerPlugin, type RulerPluginOptions, SelectionPlugin, type SelectionPluginOptions, ShapeHoverHighlightAddon, type ShapeNodeHandle, type ShapeNodeOptions, type StarNodeHandle, type StarNodeOptions, type SvgNodeHandle, type SvgNodeOptions, TextAutoTrimAddon, type TextNodeHandle, type TextNodeOptions, ThrottleHelper, type VideoNodeHandle, type VideoNodeOptions, VideoOverlayAddon, type VideoOverlayAddonOptions, VisualGuidesPlugin, type VisualGuidesPluginOptions };