SheetXL - v0.8.0-beta.9+sites.210.e2d420901
    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;
        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;
        picture: IPicture;
        ref?: Ref<IPictureEditorElement>;
        tile?: boolean;
        zoom?: number;
    }

    Hierarchy (View Summary)

    Index
    adornmentHost? description? disabled? flip? isDragging? loadingPanel? movable? offsetX? offsetY? onDragZone? onHide? onShow? 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.

    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.

    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.

    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