@scena/react-guides/src/react-guides/types.ts

A React Guides component that can draw ruler and manage guidelines.

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


export interface GuidesState {
    guides: number[];
}

/**
 * @typedef
 * @memberof Guides
 * @extends Ruler.RulerProps
 */
export interface GuidesOptions extends RulerProps {
    /**
     * guides' class name
     * @default ""
     */
    className?: string;
    /**
     * ruler's css style
     * @default "width 100%, height: 100%"
     */
    rulerStyle?: IObject<any>;
    /**
     * Interval to snap
     * @default 5
     */
    snapThreshold?: number;
    /**
     * Positions to snap
     * @default []
     */
    snaps?: number[];
    /**
     * Whether to show the moving pos when dragging
     * @default false
     */
    displayDragPos?: boolean;
    /**
     * guides zoom(side zoom). If not set, it is the same as `zoom`.
     * @default zoom
     * @since 0.29.0
     */
    guidesZoom?: number;
    /**
     * csp nonce
     */
    cspNonce?: string;
    /**
     * Format of drag pos
     * @default self
     */
    dragPosFormat?: (value: number) => string | number;
    /**
     * default guidelines
     * @default []
     */
    defaultGuides?: number[];
    /**
     * default guide pos for init
     * @default 0
     */
    defaultGuidesPos?: number
    /**
     * Whether to show guidelines
     * @default true
     */
    showGuides?: boolean;
    /**
     * Whether to lock add/remove/change functions via drag/click of guides
     * @default false
     */
    lockGuides?: boolean | Array<"add" | "change" | "remove">;
    /**
     * pos digit of guidelines
     * @default 0
     */
    digit?: number;
    /**
     * CSS style objects for guide elements
     * @default "{}"
     */
    guideStyle?: Record<string, any>;
    /**
     * CSS style objects for drag guide element
     * @default "{}"
     */
    dragGuideStyle?: Record<string, any>;
    /**
     * Whether to show the guide pos text
     * @default false
     */
    displayGuidePos?: boolean;
    /**
     * Format of displayed guide pos
     * @default dragPosFormat
     */
    guidePosFormat?: (value: number) => string | number;
    /**
     * CSS style objects for displayed guide pos text element
     * @default: "{}"
     */
    guidePosStyle?: IObject<any>;
    /**
     * Set the scroll options, time, etc. to automatically scroll by dragging.
     * @default null
     */
    scrollOptions?: DragScrollOptions | null;
    /**
     * Numerical value of how far away from the guideline position
     * @since 0.22.0
     * @default 0
     */
    guidesOffset?: number;
}

/**
 * @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;
    onRequestScroll?: (e: OnRequestScroll) => 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;
    index: number;
    distX: number;
    distY: number;
}
/**
 * @typedef
 * @memberof Guides
 */
export interface OnRequestScroll {
    container: HTMLElement | SVGElement;
    direction: 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;
    drawRuler(options: DrawRulerOptions): void;
    loadGuides(guides: number[]): void;
    resize(): void;
    getElement(): HTMLElement;
    getRulerElement(): HTMLCanvasElement;
}

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