@geekybones/editor-kit 2.0.0

package/dist/index.d.ts

@@ -0,0 +1,742 @@
+import { Container } from 'pixi.js';
+import { Graphics } from 'pixi.js';
+import { Mesh } from 'pixi.js';
+import { MeshGeometry } from 'pixi.js';
+import { Shader } from 'pixi.js';
+import { Text as Text_3 } from 'pixi.js';
+
+export declare type AlignmentAccessor = {
+    align(mode: AlignmentMode, ids?: readonly string[]): Promise<void>;
+};
+
+export declare type AlignmentMode = 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';
+
+declare abstract class BaseElement<TOptions extends BaseOptions> {
+    protected options: TOptions;
+    protected displayObject: Container;
+    constructor(options: TOptions);
+    abstract init(): void | Promise<void>;
+    abstract update(next: Partial<TOptions>): void | Promise<void>;
+    abstract destroy(): void;
+    applyDefaultPosition(x: number, y: number): void;
+    getId(): string;
+    getType(): string;
+    getOptions(): TOptions;
+    getDisplayObject(): Container;
+    setZIndex(zIndex: number): void;
+    protected applyBaseTransform(): void;
+    protected centerPivot(): void;
+}
+
+declare interface BaseOptions {
+    readonly id: string;
+    name?: string;
+    type: string;
+    visible?: boolean;
+    selectable?: boolean;
+    x?: number;
+    y?: number;
+    rotationDeg?: number;
+    scaleX?: number;
+    scaleY?: number;
+    zIndex?: number;
+    custom?: Record<string, unknown>;
+}
+
+declare abstract class BaseTextElement<TOptions extends BaseTextOptions> extends BaseElement<TOptions> {
+    protected vectorState: VectorTextState | null;
+    protected standardTextNode: Text_3 | null;
+    protected backgroundNode: Graphics | null;
+    protected decorationNode: Graphics | null;
+    protected renderVersion: number;
+    protected destroyed: boolean;
+    protected initTextElement(): Promise<void>;
+    destroy(): void;
+    protected beforeDestroy(): void;
+    protected beforeInitialRender(): Promise<void>;
+    protected clearContent(): void;
+    protected refreshTextResolution(scaleX?: number, scaleY?: number): void;
+    protected dispatchUpdate(next: Partial<TOptions>): Promise<void>;
+    protected getResolvedFontSize(): number;
+    protected handleSpecializedUpdate(_next: Partial<TOptions>, _keys: string[]): Promise<boolean>;
+    protected afterOptionsAssigned(_next: Partial<TOptions>, _prevFontSize: number): void;
+    protected renderContent(): Promise<void>;
+    protected setStandardTextNode(textNode: Text_3): void;
+    protected renderDecorations(): void;
+    protected renderBackground(): void;
+    private clearBackgroundNode;
+    protected getContentBounds(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    protected getDecorationSegments(): Array<{
+        x: number;
+        width: number;
+        underlineY: number;
+        strikethroughY: number;
+    }>;
+    protected getDecorationThickness(fontSize?: number): number;
+    protected abstract renderStandardContent(): void;
+    protected abstract getVectorRenderOptions(): VectorTextRenderOptions | null;
+}
+
+declare interface BaseTextOptions extends BaseOptions, TextStyleOptions {
+    /**
+     * Used for vector text rendering (glyph outlines). Optional for standard raster text.
+     * If you enable vector effects and omit this, we fall back to a default font URL.
+     */
+    fontUrl?: string;
+    effect?: TextEffectOptions;
+}
+
+export declare type CameraAccessor = {
+    getState(): CameraState;
+    setState(next: Partial<CameraState>): void;
+    setZoom(zoom: number, anchorX?: number, anchorY?: number): void;
+    screenToWorld(screenX: number, screenY: number): CameraPoint;
+    worldToScreen(worldX: number, worldY: number): CameraPoint;
+};
+
+export declare interface CameraConfig {
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    zoomStep?: number;
+    wheelZoom?: boolean;
+}
+
+export declare type CameraPoint = {
+    x: number;
+    y: number;
+};
+
+declare type CameraState = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+
+declare const Circle: "shape:circle";
+
+export declare interface CircleOptions extends BaseOptions {
+    readonly type: 'shape:circle';
+    radius?: number;
+    width?: number;
+    height?: number;
+    fill?: number;
+    fillAlpha?: number;
+    stroke?: number;
+    strokeWidth?: number;
+    strokeAlpha?: number;
+    strokeAlign?: StrokeAlign;
+}
+
+declare class CircleShape extends BaseElement<CircleOptions> {
+    private graphics;
+    init(): void;
+    update(next: Partial<CircleOptions>): void;
+    destroy(): void;
+    private draw;
+}
+
+declare function clearVectorTemplateCache(): void;
+
+export declare type ContextMenuAccessor = {
+    open(id: string, options: ContextMenuOpenOptions): void;
+    close(): void;
+};
+
+export declare interface ContextMenuAction {
+    delete: () => void;
+    duplicate: () => void;
+    bringToFront: () => void;
+    sendToBack: () => void;
+    bringForward: () => void;
+    sendBackward: () => void;
+    normalizeZIndex: () => void;
+}
+
+export declare interface ContextMenuConfig {
+    onElement?: (ctx: ContextMenuEvent) => void;
+}
+
+export declare interface ContextMenuEvent {
+    selected: SerializedElement[];
+    position: ContextMenuPosition;
+    originalEvent: MouseEvent;
+    actions: ContextMenuAction;
+}
+
+export declare interface ContextMenuOpenOptions {
+    position: ContextMenuPosition;
+    originalEvent?: MouseEvent;
+}
+
+export declare interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
+
+export declare interface ControlConfig {
+    icon?: string;
+    handler: HandlerType;
+    size?: number;
+}
+
+declare function create(options: ImageOptions): ImageElement;
+
+declare function create_2(type: typeof Rectangle, options: RectangleOptions): RectangleShape;
+
+declare function create_2(type: typeof Circle, options: CircleOptions): CircleShape;
+
+declare function create_2(type: typeof Star, options: StarOptions): StarShape;
+
+declare function create_2(type: typeof Line, options: LineOptions): LineShape;
+
+export declare type EditorEvent = {
+    'element:added': [id: string];
+    'element:removed': [id: string];
+    'element:updated': [id: string];
+    'element:selected': [ids: string | readonly string[] | null];
+    'history:changed': [];
+    'layer:changed': [];
+    'camera:changed': [state: CameraState];
+};
+
+export declare class EditorKit {
+    readonly ready: Promise<void>;
+    readonly history: HistoryAccessor;
+    readonly alignment: AlignmentAccessor;
+    readonly layer: LayeringAccessor;
+    readonly interaction: InteractionAccessor;
+    readonly camera: CameraAccessor;
+    readonly contextMenu: ContextMenuAccessor;
+    readonly export: ExportAccessor;
+    readonly fonts: FontsAccessor;
+    readonly grid: GridAccessor;
+    readonly performance: PerformanceAccessor;
+    readonly serializer: SerializerAccessor;
+    readonly snap: SnapAccessor;
+    private readonly app;
+    private readonly registry;
+    private readonly events;
+    private readonly editorOptions;
+    private readonly extensions;
+    private ctx;
+    private destroyed;
+    constructor(container: HTMLElement, options?: EditorKitOptions);
+    private initExtensions;
+    private buildContext;
+    private addElement;
+    private removeElement;
+    private updateElement;
+    private shouldConstrainAfterUpdate;
+    private getUpdateKind;
+    private getHistoryManager;
+    private getSerializationManager;
+    private getActionsContext;
+    add(element: BaseElement<BaseOptions>): Promise<void>;
+    remove(id: string): Promise<void>;
+    update(id: string, next: Partial<BaseOptions>): Promise<void>;
+    clear(): void;
+    get(id: string, raw?: false): SerializedElement | undefined;
+    get(id: string, raw: true): BaseElement<BaseOptions> | undefined;
+    getExtension<T>(name: string): T | undefined;
+    on<K extends keyof EditorEvent>(event: K, listener: (...args: EditorEvent[K]) => void): this;
+    off<K extends keyof EditorEvent>(event: K, listener: (...args: EditorEvent[K]) => void): this;
+    destroy(): void;
+}
+
+export declare interface EditorKitOptions {
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    constrainToCanvas?: boolean;
+    extensions?: ExtensionsConfig;
+}
+
+declare type ElementFactory = (options: BaseOptions) => BaseElement<BaseOptions>;
+
+export declare type ElementOptions = TextOptions | ImageOptions | ShapeOptions | SVGOptions;
+
+export declare type ElementPatch = Partial<ElementOptions>;
+
+export declare type ElementType = ElementOptions['type'];
+
+export declare type ExportAccessor = {
+    render(format: 'png' | 'base64', options?: ExportOptions): Promise<Blob | string>;
+};
+
+export declare type ExportMode = 'content' | 'viewport';
+
+export declare type ExportOptions = {
+    mode?: ExportMode;
+    margin?: number;
+    quality?: ExportQuality;
+    resolution?: number;
+    antialias?: boolean;
+    backgroundColor?: string;
+};
+
+export declare type ExportQuality = 'standard' | 'hd' | 'ultra';
+
+export declare interface ExtensionsConfig {
+    alignment?: boolean;
+    history?: boolean | HistoryConfig;
+    interaction?: boolean | InteractionConfig;
+    layering?: boolean;
+    serialization?: boolean;
+    export?: boolean;
+    fonts?: boolean;
+    performance?: boolean;
+    contextMenu?: boolean | ContextMenuConfig;
+    grid?: boolean | GridConfig;
+    snap?: boolean | SnapConfig;
+    camera?: boolean | CameraConfig;
+}
+
+export declare type FontsAccessor = {
+    load(family: string, url: string): Promise<void>;
+    isLoaded(family: string): boolean;
+    getLoadedFonts(): readonly string[];
+};
+
+declare function getMeshEffect(name: string): MeshEffectEntry | undefined;
+
+export declare type GridAccessor = {
+    setVisible(visible: boolean): void;
+    isVisible(): boolean;
+    getState(): GridState;
+    setCellSize(size: number): void;
+    setMajorInterval(interval: number): void;
+};
+
+export declare interface GridConfig {
+    cellSize?: number;
+    majorInterval?: number;
+    visible?: boolean;
+    minorLineColor?: number;
+    minorLineAlpha?: number;
+    majorLineColor?: number;
+    majorLineAlpha?: number;
+}
+
+export declare type GridState = {
+    cellSize: number;
+    majorInterval: number;
+    visible: boolean;
+};
+
+export declare interface Guide {
+    id: string;
+    orientation: 'vertical' | 'horizontal';
+    position: number;
+}
+
+declare type HandlePosition = 'tl' | 'tc' | 'tr' | 'lc' | 'rc' | 'bl' | 'bc' | 'br' | 'top' | 'btop';
+
+export declare type HandlerType = 'transform' | 'rotate' | 'delete' | 'duplicate' | ((ctx: InteractionHandlerContext) => void);
+
+export declare type HistoryAccessor = {
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    setClipboard(items: BaseOptions[]): void;
+    getClipboard(): BaseOptions[];
+};
+
+export declare interface HistoryConfig {
+    max?: number;
+    track?: HistoryTrack[];
+}
+
+export declare type HistoryTrack = 'move' | 'resize' | 'rotate' | 'add' | 'remove' | 'zOrder' | 'align' | 'text';
+
+declare const Image_2: {
+    readonly create: typeof create;
+    readonly factories: Record<string, ElementFactory>;
+};
+export { Image_2 as Image }
+
+declare class ImageElement extends BaseElement<ImageOptions> {
+    private sprite;
+    init(): Promise<void>;
+    update(next: Partial<ImageOptions>): Promise<void>;
+    destroy(): void;
+    private loadSprite;
+}
+
+export declare interface ImageOptions extends BaseOptions {
+    readonly type: 'image';
+    src: string;
+    width?: number;
+    height?: number;
+    tint?: number | string;
+}
+
+export declare type InteractionAccessor = {
+    select(idOrIds: string | readonly string[] | null): void;
+    duplicate(): Promise<void>;
+    getSelectedIds(): string[];
+    getSelectedOptions(): BaseOptions[];
+};
+
+export declare interface InteractionConfig {
+    controls?: Partial<Record<HandlePosition, ControlConfig>>;
+    theme?: InteractionTheme;
+}
+
+export declare interface InteractionHandlerContext {
+    selectedIds: readonly string[];
+}
+
+export declare interface InteractionTheme {
+    boundingBox?: {
+        lineColor?: number | string;
+        lineThickness?: number;
+        lineType?: 'solid' | 'dotted';
+        padding?: number;
+    };
+    handle?: {
+        size?: number;
+        color?: number | string;
+    };
+}
+
+export declare type LayeringAccessor = {
+    bringToFront(id: string | readonly string[]): void;
+    sendToBack(id: string | readonly string[]): void;
+    bringForward(id: string): void;
+    sendBackward(id: string): void;
+    normalizeZIndex(): void;
+};
+
+declare const Line: "shape:line";
+
+export declare interface LineOptions extends BaseOptions {
+    readonly type: 'shape:line';
+    width: number;
+    stroke?: number;
+    strokeWidth?: number;
+    strokeAlpha?: number;
+    strokeAlign?: StrokeAlign;
+}
+
+declare class LineShape extends BaseElement<LineOptions> {
+    private graphics;
+    init(): void;
+    update(next: Partial<LineOptions>): void;
+    destroy(): void;
+    private draw;
+}
+
+declare function listMeshEffects(): string[];
+
+declare interface MeshEffectColumn {
+    dy: number;
+    scaleY?: number;
+    anchorY?: number;
+}
+
+declare interface MeshEffectEntry {
+    fn: MeshEffectFunction;
+    columns: number;
+}
+
+declare interface MeshEffectFnContext {
+    textureWidth: number;
+    textureHeight: number;
+    fontSize: number;
+    radius: number;
+    intensity: number;
+    direction: 'up' | 'down';
+}
+
+declare type MeshEffectFunction = (t: number, ctx: MeshEffectFnContext) => MeshEffectColumn;
+
+export declare type PerformanceAccessor = {
+    markDirty(id: string): void;
+    isDirty(id: string): boolean;
+    flushDirty(): readonly string[];
+    clearDirty(): void;
+    retainAsset(url: string): void;
+    releaseAsset(url: string): Promise<void>;
+    clearAssets(): Promise<void>;
+};
+
+declare const Rectangle: "shape:rectangle";
+
+export declare interface RectangleOptions extends BaseOptions {
+    readonly type: 'shape:rectangle';
+    width: number;
+    height: number;
+    fill?: number;
+    fillAlpha?: number;
+    stroke?: number;
+    strokeWidth?: number;
+    strokeAlpha?: number;
+    strokeAlign?: StrokeAlign;
+    borderRadius?: number;
+}
+
+declare class RectangleShape extends BaseElement<RectangleOptions> {
+    private graphics;
+    init(): void;
+    update(next: Partial<RectangleOptions>): void;
+    destroy(): void;
+    private draw;
+}
+
+declare function register(type: string, factory: ElementFactory): void;
+
+declare interface RegisterMeshEffectOptions {
+    columns?: number;
+}
+
+declare interface ResolveOptions {
+    width?: number;
+    height?: number;
+    exclude?: string[];
+}
+
+export declare interface SerializationAdapter<T extends BaseOptions = BaseOptions> {
+    readonly type: string;
+    serialize(element: BaseElement<T>): T;
+    deserialize(data: T): BaseElement<T>;
+}
+
+export declare type SerializedElement = Record<string, unknown> & {
+    id: string;
+    type: string;
+} & ElementPatch;
+
+export declare type SerializerAccessor = {
+    serialize(): SerializedElement[];
+    append(data: SerializedElement[]): Promise<void>;
+    replace(data: SerializedElement[]): Promise<void>;
+    serializeElement(element: BaseElement<BaseOptions>): SerializedElement;
+    registerAdapter<T extends BaseOptions>(adapter: SerializationAdapter<T>): void;
+};
+
+export declare const Shape: {
+    readonly Rectangle: "shape:rectangle";
+    readonly Circle: "shape:circle";
+    readonly Star: "shape:star";
+    readonly Line: "shape:line";
+    readonly create: typeof create_2;
+    readonly register: typeof register;
+    readonly factories: ReadonlyMap<string, ElementFactory>;
+};
+
+export declare type ShapeOptions = RectangleOptions | CircleOptions | StarOptions | LineOptions;
+
+export declare type SnapAccessor = {
+    resolve(x: number, y: number, opts?: ResolveOptions): SnapResult;
+    showLines(result: SnapResult): void;
+    hideLines(): void;
+    addGuide(guide: Guide): void;
+    removeGuide(id: string): void;
+    clearGuides(): void;
+    configure(patch: Partial<SnapConfig>): void;
+    getState(): SnapState;
+};
+
+export declare interface SnapConfig {
+    grid?: boolean;
+    objects?: boolean;
+    edges?: boolean;
+    guides?: boolean;
+    threshold?: number;
+    lineColor?: number | string;
+    lineAlpha?: number;
+    lineWidth?: number;
+}
+
+export declare interface SnapLineStyle {
+    color: number | string;
+    alpha: number;
+    width: number;
+}
+
+export declare interface SnapResult {
+    x: number;
+    y: number;
+    snapped: boolean;
+    xSnapped: boolean;
+    ySnapped: boolean;
+    lineX?: number;
+    lineY?: number;
+    xTarget?: SnapTarget;
+    yTarget?: SnapTarget;
+}
+
+export declare interface SnapState {
+    config: Required<SnapConfig>;
+    guides: Guide[];
+}
+
+export declare interface SnapTarget {
+    type: 'grid' | 'object' | 'edge' | 'guide';
+    reference?: string;
+}
+
+declare type StandardTextOptions = BaseTextOptions & {
+    renderMode?: 'standard';
+};
+
+declare const Star: "shape:star";
+
+export declare interface StarOptions extends BaseOptions {
+    readonly type: 'shape:star';
+    points: number;
+    width: number;
+    height: number;
+    fill?: number;
+    fillAlpha?: number;
+    stroke?: number;
+    strokeWidth?: number;
+    strokeAlpha?: number;
+    strokeAlign?: StrokeAlign;
+}
+
+declare class StarShape extends BaseElement<StarOptions> {
+    private graphics;
+    init(): void;
+    update(next: Partial<StarOptions>): void;
+    destroy(): void;
+    private draw;
+}
+
+declare type StrokeAlign = 'inside' | 'center' | 'outside';
+
+declare class SVGElement_2 extends BaseElement<SVGOptions> {
+    private sprite;
+    private blobUrl;
+    init(): Promise<void>;
+    update(next: Partial<SVGOptions>): Promise<void>;
+    destroy(): void;
+    private loadSVG;
+    private svgStringToUrl;
+    private loadImage;
+}
+export { SVGElement_2 as SVGElement }
+
+export declare interface SVGOptions extends BaseOptions {
+    readonly type: 'svg';
+    src: string;
+    width?: number;
+    height?: number;
+}
+
+declare namespace Text_2 {
+    const Type: "text";
+    function create(options: TextOptions): TextElement;
+    function create(type: string, options: BaseOptions): BaseElement<BaseOptions>;
+    function registerEffect(name: string, fn: MeshEffectFunction, options?: RegisterMeshEffectOptions): void;
+    const getEffect: typeof getMeshEffect;
+    const listEffects: typeof listMeshEffects;
+    const clearEffectCache: typeof clearVectorTemplateCache;
+    const factories: Record<string, ElementFactory>;
+}
+export { Text_2 as Text }
+
+declare type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+declare interface TextDecorationSegment {
+    x: number;
+    width: number;
+    underlineY: number;
+    strikethroughY: number;
+}
+
+declare type TextEffect = 'Normal' | 'Curved' | 'Arch' | 'Bridge' | 'Valley' | 'Pinch' | 'Perspective' | 'Pointed' | 'Bulge' | 'Downward' | 'Upward' | 'Cone';
+
+declare interface TextEffectOptions {
+    type: TextEffect;
+    intensity?: number;
+    direction?: 'up' | 'down';
+    radius?: number;
+}
+
+declare class TextElement extends BaseTextElement<TextOptions> {
+    init(): Promise<void>;
+    update(next: Partial<TextOptions>): Promise<void>;
+    protected renderStandardContent(): void;
+    protected getVectorRenderOptions(): VectorTextRenderOptions | null;
+    protected getDecorationSegments(): Array<{
+        x: number;
+        width: number;
+        underlineY: number;
+        strikethroughY: number;
+    }>;
+    private getAlignedOffsetX;
+}
+
+export declare type TextOptions = (StandardTextOptions | VectorTextOptions) & {
+    readonly type: 'text';
+};
+
+declare type TextStrokeAlign = 'inside' | 'center' | 'outside';
+
+declare interface TextStyleOptions {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fill?: number | string;
+    background?: number | string;
+    backgroundAlpha?: number;
+    backgroundPadding?: number;
+    stroke?: number | string;
+    strokeWidth?: number;
+    strokeAlpha?: number;
+    strokeAlign?: TextStrokeAlign;
+    fontWeight?: string;
+    fontStyle?: string;
+    underline?: boolean;
+    strikethrough?: boolean;
+    letterSpacing?: number;
+    align?: TextAlign;
+    lineHeight?: number;
+}
+
+declare interface VectorTextLayer {
+    geometry: MeshGeometry;
+    mesh: Mesh;
+    shader: Shader;
+    originalPositions: Float32Array;
+}
+
+declare type VectorTextOptions = BaseTextOptions & {
+    renderMode: 'vector';
+    fontUrl: string;
+};
+
+declare interface VectorTextRenderOptions extends Omit<TextStyleOptions, 'fontSize' | 'fill' | 'letterSpacing'> {
+    fontUrl: string;
+    fontSize: number;
+    fill: number | string;
+    letterSpacing: number;
+}
+
+declare interface VectorTextState {
+    template: VectorTextTemplate;
+    fillLayer: VectorTextLayer;
+    strokeLayers: VectorTextLayer[];
+    decorationLayers: VectorTextLayer[];
+    columns: number;
+    textureWidth: number;
+    textureHeight: number;
+}
+
+declare interface VectorTextTemplate {
+    positions: Float32Array;
+    indices: Uint32Array;
+    decorationSegments: TextDecorationSegment[];
+    textureWidth: number;
+    textureHeight: number;
+}
+
+export { }