SheetXL - v1.0.2
    Preparing search index...

    Interface PictureEditorProps

    Props a movable renderer receives from its frame.

    Spread style onto the root element. It fills the frame, which owns the drawing's bounds (zoom included), AND carries its hit-testing: the frame itself is pointer-transparent, so style.pointerEvents ('auto' by default, 'none' while the frame is hidden) is what makes the drawing clickable. A drawing that is not solid — a no-fill shape — overrides it with 'none' on its root and sets pointerEvents back on its painted parts only (e.g. visibleStroke on an SVG path), so a click in its unfilled interior reaches the cell beneath, exactly as in Excel.

    The drawing never sizes itself. zoom is given only so that it can scale what it draws inside the frame (text, borders, padding), for example with the CSS zoom property; a drawing that stretches to its box, such as a picture, ignores it.

    interface PictureEditorProps {
        adornmentHost?: HTMLElement | null;
        description?: string;
        disabled?: boolean;
        flip?: Flip;
        gesture?: MovableGestureHost;
        isDragging?: boolean;
        loadingPanel?: ReactNode;
        movable?: IMovable;
        offsetX?: number;
        offsetY?: number;
        onDragZone?: (
            isDragZone: (event: MouseEvent | TouchEvent) => boolean,
        ) => void;
        onHide?: (
            hide: (movable: IMovable) => boolean | void | Promise<boolean>,
        ) => void;
        onShow?: (show: (movable: IMovable) => void) => void;
        onTap?: (tap: (event: PointerEvent) => boolean) => void;
        picture: IPicture;
        ref?: Ref<IPictureEditorElement>;
        tile?: boolean;
        zoom?: number;
    }

    Hierarchy (View Summary)

    Index
    adornmentHost? description? disabled? flip? gesture? isDragging? loadingPanel? movable? offsetX? offsetY? onDragZone? onHide? onShow? onTap? picture ref? tile? zoom?
    adornmentHost?: HTMLElement | null

    A box above the selection chrome, placed and turned exactly as the frame is, for the content's own controls (a shape's adjustment handles). null when the movable has none.

    Render into it with a portal. It fills the frame's box and is pointer-transparent; controls opt back in. Drawn above the resize handles, so a control on the selection outline wins the press, as in Excel.

    While one of the content's controls is being dragged, give it the class movable-gesture: every control in the box, the layer's and the content's, hides until the class goes, as they do for a move or resize.

    description?: string

    Usable for alt text or loading

    disabled?: boolean

    If true then the component is disabled.

    false

    To see if an element is readonly check the IMovable.isProtected() method.

    flip?: Flip

    How to mirror the drawing within the frame: the gesture's while one is in flight, else the movable's own. The frame does not mirror the drawing itself, since what a mirror means is the drawing's (a shape keeps its text readable); content that cannot be mirrored ignores it.

    gesture?: MovableGestureHost

    Runs a gesture of the content's own controls (a shape's adjustment handles) through the layer: previewed in every pane with what follows it, such as a connector glued to the shape, and committed as one step. Present while the movable's controls are drawn.

    isDragging?: boolean

    Indicator for dragging.

    false
    loadingPanel?: ReactNode

    Provide an optional loading panel.

    movable?: IMovable

    The movable associated with this element.

    offsetX?: number

    Optional style for the picture editor.

    offsetY?: number

    Optional style for the picture editor.

    onDragZone?: (isDragZone: (event: MouseEvent | TouchEvent) => boolean) => void

    Registers where a press starts a drag: the test answers true for a press that should move the movable. Without one, a press anywhere in the frame drags.

    A press outside the drag zone still selects the movable but is left to the content, so a text box can drag from its border and put the caret where its text is pressed.

    onHide?: (
        hide: (movable: IMovable) => boolean | void | Promise<boolean>,
    ) => void

    Called when the movable is hidden from view.

    • If this returns a false the movable will not be unmounted but will still have a style opacity property of 0 (and pointerEvents of none).
    • Keeping a movable mounted is useful for elements that take a long of time to render but increase the memory footprint of the application.
    onShow?: (show: (movable: IMovable) => void) => void

    Call when the movable is returned to the view.

    onTap?: (tap: (event: PointerEvent) => boolean) => void

    Registers what a finger tap does on the movable while it is not selected: answer true to take the tap, and the frame leaves the movable unselected. Without one, or on false, the tap selects.

    A finger pressed on a movable that is not selected may be starting a pan of the sheet, so the content never receives that press: the frame waits for the finger to lift where it went down, the sheet unscrolled, and only then calls this. A link that opens on a tap is the use; the sheet still pans from anywhere on the movable.

    picture: IPicture

    The underlying model for the picture.

    ref?: Ref<IPictureEditorElement>

    Ref for the Element.

    tile?: boolean

    If true the picture will be tiled to fill the area.

    zoom?: number

    The scale of the view the movable is drawn in, where 1 is unscaled.

    1

    Settings
    Member Visibility

    On This Page
    Properties