packages/react-guides/src/react-guides/types.ts

import { RulerProps } from "@scena/react-ruler/declaration/types";
import { IObject } from "@daybrush/utils";
import {
    OnDragStart as OnGestoDragStart,
    OnDrag as OnGestoDrag,
    OnDragEnd as OnGestoDragEnd,
} from "gesto";


export interface GuidesState {
    guides: number[];
}

/**
 * @typedef
 * @memberof Guides
 * @extends Ruler.RulerProps
 * @property - guides' class name (default: "")
 * @property - ruler's css style(default: width 100%, height: 100%)
 * @property - Interval to snap (default: 5)
 * @property - Positions to snap (default: [])
 * @property - Whether to show the moving pos when dragging (default: false)
 * @property - csp nonce
 * @property - Format of drag pos (default: v => v)
 * @property - default guidelines (default: [])
 * @property - Whether to show guidelines (default: true)
 * @property - Whether to lock add/remove/change functions via drag/click of guides (default: false)
 * @property - pos digit of guidelines (default: 0)
 * @property - CSS style objects for guide elements (default: {})
 * @property - CSS style objects for drag guide element (default: {})
 * @property - Whether to show the guide pos text (default: false)
 * @property - Format of displayed guide pos (default: dragPosFormat)
 * @property - CSS style objects for displayed guide element (default: {})
 * @property - Guides Portal Container to support other frameworks. Don't set it. (default: null)
 */
export interface GuidesOptions extends RulerProps {
    className?: string;
    rulerStyle?: IObject<any>;
    snapThreshold?: number;
    snaps?: number[];
    displayDragPos?: boolean;
    cspNonce?: string;
    dragPosFormat?: (value: number) => string | number;
    defaultGuides?: number[];
    showGuides?: boolean;
    lockGuides?: boolean | Array<"add" | "change" | "remove">;
    /**
     * pos digit of guidelines (default: 0)
     */
    digit?: number;
    guideStyle?: Record<string, any>;
    dragGuideStyle?: Record<string, any>;
    displayGuidePos?: boolean;
    guidePosFormat?: (value: number) => string | number;
    guidePosStyle?: IObject<any>;
    portalContainer?: HTMLElement | null;
}

/**
 * @typedef
 * @memberof Guides
 * @extends Guides.GuidesOptions
 */
export interface GuideOptions extends GuidesOptions {
}

/**
 * @typedef
 * @memberof Guides
 * @extends Guides.GuidesOptions
 */
export interface GuidesProps extends GuidesOptions {
    onChangeGuides?: (e: OnChangeGuides) => any;
    onDragStart?: (e: OnDragStart) => any;
    onDrag?: (e: OnDrag) => any;
    onDragEnd?: (e: OnDragEnd) => any;
    onClickRuler?: (e: OnClickRuler) => any;
}
/**
 * @typedef
 * @memberof Guides
 */
export interface OnChangeGuides {
    guides: number[];
    isAdd: boolean;
    isRemove: boolean;
    isChange: boolean;
    distX: number;
    distY: number;
}
/**
 * @typedef
 * @memberof Guides
 * @extends Gesto.OnDragStart
 */
export interface OnDragStart extends OnGestoDragStart {
    dragElement: HTMLElement;
}
/**
 * @typedef
 * @memberof Guides
 * @extends Gesto.OnDrag
 */
export interface OnDrag extends OnGestoDrag {
    dragElement: HTMLElement;
}
/**
 * @typedef
 * @memberof Guides
 * @extends Gesto.OnDragEnd
 */
export interface OnDragEnd extends OnGestoDragEnd {
    dragElement: HTMLElement;
}
/**
 * @typedef
 * @memberof Guides
 * @extends Gesto.OnDragEnd
 */
export interface OnClickRuler extends OnGestoDragEnd {
    pos: number;
}
/**
 * @typedef
 * @memberof Guides
 */
export interface GuidesInterface {
    getGuides(): number[];
    scroll(pos: number): void;
    scrollGuides(pos: number): void;
    loadGuides(guides: number[]): void;
    resize(): void;
}

/**
 * @typedef
 * @memberof Guides
 */
export interface GuidesEvents {
    changeGuides: OnChangeGuides;
    dragStart: OnDragStart;
    drag: OnDrag;
    dragEnd: OnDragEnd;
    clickRuler: OnClickRuler;
}