Interface RestyleableComponent

An interface to be implemented by components with a changable color or TextRenderingStyle.

All such classes must have a member variable, isRestylableComponent that is set to true to allow testing whether the class is a RestylableComponent (see isRestylableComponent).

interface RestyleableComponent {
    contentBBox: Rect2;
    isRestylableComponent: true;
    lastChangedTime: number;
    applyTransformation(affineTransfm: Mat33): void;
    attachLoadSaveData(key: string, data: LoadSaveData): void;
    clone(): AbstractComponent;
    createClone(): AbstractComponent;
    description(localizationTable: ImageComponentLocalization): string;
    forceStyle(style: RestyleableComponentStyle, editor: null | Editor): void;
    getBBox(): Rect2;
    getExactBBox(): Rect2;
    getId(): string;
    getLoadSaveData(): LoadSaveDataTable;
    getProportionalRenderingTime(): number;
    getSizingMode(): ComponentSizingMode;
    getStyle(): RestyleableComponentStyle;
    getZIndex(): number;
    intersects(lineSegment: LineSegment2): boolean;
    intersectsRect(rect: Rect2): boolean;
    isBackground(): boolean;
    isSelectable(): boolean;
    occludesEverythingBelowWhenRenderedInRect(_visibleRect: Rect2): boolean;
    onAddToImage(_image: EditorImage): void;
    onRemoveFromImage(): void;
    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
    serialize(): {
        data:
            | string
            | number
            | any[]
            | Record<string, any>;
        id: string;
        loadSaveData: LoadSaveDataTable;
        name: string;
        zIndex: number;
    };
    serializeToJSON():
        | null
        | string
        | number
        | any[]
        | Record<string, any>;
    setZIndex(newZIndex: number): SerializableCommand;
    transformBy(affineTransfm: Mat33): SerializableCommand;
    updateStyle(style: RestyleableComponentStyle): SerializableCommand;
    withRegionErased?(shape: Path, viewport: Viewport): AbstractComponent[];
}

Hierarchy (view full)

AbstractComponent
- RestyleableComponent

Implemented by

Properties

`Protected` `Abstract`contentBBox

contentBBox: Rect2

The bounding box of this component. getBBox, by default, returns contentBBox. This must be set by components.

If this changes, EditorImage.queueRerenderOf should be called for this object (provided that this object has been added to the editor.)

Note: This value is ignored if getSizingMode returns FillScreen or FillImage.

isRestylableComponent

`Protected`lastChangedTime

lastChangedTime: number

The timestamp (milliseconds) at which the component was last changed (i.e. created/translated).

Deprecated

Methods

`Protected` `Abstract`applyTransformation

applyTransformation(affineTransfm): void
Private helper for transformBy: Apply the given transformation to all points of this.
Parameters
- affineTransfm: Mat33
Returns void
Inherited from AbstractComponent.applyTransformation
- Defined in components/AbstractComponent.ts:228

attachLoadSaveData

attachLoadSaveData(key, data): void
Attach data that can be used while exporting the component (e.g. to SVG).

This is intended for use by an ImageLoader.
Parameters
- key: string
- data: LoadSaveData
Returns void
Inherited from AbstractComponent.attachLoadSaveData
- Defined in components/AbstractComponent.ts:112

clone

clone(): AbstractComponent
Returns a copy of this component.

Returns AbstractComponent
Inherited from AbstractComponent.clone
- Defined in components/AbstractComponent.ts:395

`Protected` `Abstract`createClone

createClone(): AbstractComponent
Component-specific implementation of clone.

Returns AbstractComponent
Inherited from AbstractComponent.createClone
- Defined in components/AbstractComponent.ts:392

`Abstract`description

description(localizationTable): string
Parameters
- localizationTable: ImageComponentLocalization
Returns string
a description that could be read by a screen reader (e.g. when adding/erasing the component)
Inherited from AbstractComponent.description
- Defined in components/AbstractComponent.ts:389

forceStyle

forceStyle(style, editor): void
Set the style of this component in a way that can't be undone/redone (does not create a command).

Prefer updateStyle(style).apply(editor).
Parameters
- style: RestyleableComponentStyle
- editor: null | Editor
Returns void
- Defined in components/RestylableComponent.ts:97

getBBox

getBBox(): Rect2
Returns Rect2
the bounding box of this. This can be a slight overestimate if doing so significantly improves performance.
Inherited from AbstractComponent.getBBox
- Defined in components/AbstractComponent.ts:132

getExactBBox

getExactBBox(): Rect2
Returns Rect2
the bounding box of this. Unlike getBBox, this should not be a rough estimate.
Inherited from AbstractComponent.getExactBBox
- Defined in components/AbstractComponent.ts:139

getId

getId(): string
Returns a unique ID for this element.

Returns string
See
EditorImage.lookupElement
Inherited from AbstractComponent.getId
- Defined in components/AbstractComponent.ts:91

getLoadSaveData

getLoadSaveData(): LoadSaveDataTable
See attachLoadSaveData

Returns LoadSaveDataTable
Inherited from AbstractComponent.getLoadSaveData
- Defined in components/AbstractComponent.ts:120

getProportionalRenderingTime

getProportionalRenderingTime(): number
Returns number
an approximation of the proportional time it takes to render this component. This is intended to be a rough estimate, but, for example, a stroke with two points sould have a renderingWeight approximately twice that of a stroke with one point.
Inherited from AbstractComponent.getProportionalRenderingTime
- Defined in components/AbstractComponent.ts:223

getSizingMode

getSizingMode(): ComponentSizingMode
Returns information about how this component should be displayed (e.g. fill the screen or get its size from getBBox).

EditorImage.queueRerenderOf must be called to apply changes to the output of this method if this component has already been added to an EditorImage.

Returns ComponentSizingMode
Inherited from AbstractComponent.getSizingMode
- Defined in components/AbstractComponent.ts:151

getStyle

getStyle(): RestyleableComponentStyle
Returns RestyleableComponentStyle
a partial representation of this component's style.
- Defined in components/RestylableComponent.ts:77

getZIndex

getZIndex(): number
Returns number
Inherited from AbstractComponent.getZIndex
- Defined in components/AbstractComponent.ts:124

`Abstract`intersects

intersects(lineSegment): boolean
Parameters
- lineSegment: LineSegment2
Returns boolean
true if lineSegment intersects this component.
Inherited from AbstractComponent.intersects
- Defined in components/AbstractComponent.ts:184

intersectsRect

intersectsRect(rect): boolean
Parameters
- rect: Rect2
Returns boolean
true if this component intersects rect -- it is entirely contained within the rectangle or one of the rectangle's edges intersects this component.

The default implementation assumes that this.getExactBBox() returns a tight bounding box -- that any horiziontal/vertical line that intersects this' boounding box also intersects a point in this component. If this is not the case, components must override this function.
Inherited from AbstractComponent.intersectsRect
- Defined in components/AbstractComponent.ts:195

isBackground

isBackground(): boolean
Returns boolean
true iff this component should be added to the background, rather than the foreground of the image.
Inherited from AbstractComponent.isBackground
- Defined in components/AbstractComponent.ts:216

isSelectable

isSelectable(): boolean
Returns boolean
true iff this component can be selected (e.g. by the selection tool.)
Inherited from AbstractComponent.isSelectable
- Defined in components/AbstractComponent.ts:210

occludesEverythingBelowWhenRenderedInRect

occludesEverythingBelowWhenRenderedInRect(_visibleRect): boolean
Optimization

Should return true if this component covers the entire visibleRect and would prevent anything below this component from being visible.

Should return false otherwise.
Parameters
- _visibleRect: Rect2
Returns boolean
Inherited from AbstractComponent.occludesEverythingBelowWhenRenderedInRect
- Defined in components/AbstractComponent.ts:163

onAddToImage

onAddToImage(_image): void
Called when this component is added to the given image.
Parameters
- _image: EditorImage
Returns void
Inherited from AbstractComponent.onAddToImage
- Defined in components/AbstractComponent.ts:168

onRemoveFromImage

onRemoveFromImage(): void
Returns void
Inherited from AbstractComponent.onRemoveFromImage
- Defined in components/AbstractComponent.ts:169

`Abstract`render

render(canvas, visibleRect?): void
Renders this component onto the given canvas.

If visibleRect is given, it should be the region of canvas that is visible -- rendering anything outside of visibleRect should have no visible effect on the resultant image.

For optimal performance, implementers should call canvas.startObject and canvas.endObject before and after rendering.
Parameters
- canvas: AbstractRenderer
- OptionalvisibleRect: Rect2
Returns void
Inherited from AbstractComponent.render
- Defined in components/AbstractComponent.ts:181

serialize

serialize(): {
    data:
        | string
        | number
        | any[]
        | Record<string, any>;
    id: string;
    loadSaveData: LoadSaveDataTable;
    name: string;
    zIndex: number;
}
Convert the component to an object that can be passed to JSON.stringify.

Do not rely on the output of this function to take a particular form — this function's output can change form without a major version increase.

Returns {
    data:
        | string
        | number
        | any[]
        | Record<string, any>;
    id: string;
    loadSaveData: LoadSaveDataTable;
    name: string;
    zIndex: number;
}
- data:
      | string
      | number
      | any[]
      | Record<string, any>
- id: string
- loadSaveData: LoadSaveDataTable
- name: string
- zIndex: number
Inherited from AbstractComponent.serialize
- Defined in components/AbstractComponent.ts:427

`Protected` `Abstract`serializeToJSON

serializeToJSON():
    | null
    | string
    | number
    | any[]
    | Record<string, any>
Return null iff this object cannot be safely serialized/deserialized.

Returns
    | null
    | string
    | number
    | any[]
    | Record<string, any>
Inherited from AbstractComponent.serializeToJSON
- Defined in components/AbstractComponent.ts:420

setZIndex

setZIndex(newZIndex): SerializableCommand
Returns a command that updates this component's z-index.
Parameters
- newZIndex: number
Returns SerializableCommand
Inherited from AbstractComponent.setZIndex
- Defined in components/AbstractComponent.ts:242

transformBy

transformBy(affineTransfm): SerializableCommand
Returns a command that, when applied, transforms this by [affineTransfm] and updates the editor.

The transformed component is also moved to the top (use AbstractComponent#setZIndexAndTransformBy to avoid this behavior).
Parameters
- affineTransfm: Mat33
Returns SerializableCommand
Inherited from AbstractComponent.transformBy
- Defined in components/AbstractComponent.ts:237

updateStyle

updateStyle(style): SerializableCommand
Returns a Command that updates portions of this component's style to the given style.
Parameters
- style: RestyleableComponentStyle
Returns SerializableCommand
Example
For some component and editor,
```
editor.dispatch(component.updateStyle({ color: Color4.red }));
```
- Defined in components/RestylableComponent.ts:89

`Optional`withRegionErased

withRegionErased(shape, viewport): AbstractComponent[]
Optional method: Divides this component into sections roughly along the given path, removing parts that are roughly within shape.

Notes:
- A default implementation may be provided for this method in the future. Until then, this method is undefined if unsupported.
viewport should be provided to determine how newly-added points should be rounded.
Parameters
- shape: Path
- viewport: Viewport
Returns AbstractComponent[]
Inherited from AbstractComponent.withRegionErased
- Defined in components/AbstractComponent.ts:417

Interface RestyleableComponent

Hierarchy (view full)

Implemented by

Index

Properties

Methods

Properties

Protected AbstractcontentBBox

isRestylableComponent

ProtectedlastChangedTime

Deprecated

Methods

Protected AbstractapplyTransformation

Parameters

Returns void

attachLoadSaveData

Parameters

Returns void

clone

Returns AbstractComponent

Protected AbstractcreateClone

Returns AbstractComponent

Abstractdescription

Parameters

Returns string

forceStyle

Parameters

Returns void

getBBox

Returns Rect2

getExactBBox

Returns Rect2

getId

Returns string

See

getLoadSaveData

Returns LoadSaveDataTable

getProportionalRenderingTime

Returns number

getSizingMode

Returns ComponentSizingMode

getStyle

Returns RestyleableComponentStyle

getZIndex

Returns number

Abstractintersects

Parameters

Returns boolean

intersectsRect

Parameters

Returns boolean

isBackground

Returns boolean

isSelectable

Returns boolean

occludesEverythingBelowWhenRenderedInRect

Parameters

Returns boolean

onAddToImage

Parameters

Returns void

onRemoveFromImage

Returns void

Abstractrender

Parameters

Returns void

serialize

Returns { data: | string | number | any[] | Record<string, any>; id: string; loadSaveData: LoadSaveDataTable; name: string; zIndex: number; }

data: | string | number | any[] | Record<string, any>

id: string

loadSaveData: LoadSaveDataTable

name: string

zIndex: number

Protected AbstractserializeToJSON

Returns | null | string | number | any[] | Record<string, any>

setZIndex

Parameters

Returns SerializableCommand

transformBy

Parameters

`Protected` `Abstract`contentBBox

`Protected`lastChangedTime

`Protected` `Abstract`applyTransformation

`Protected` `Abstract`createClone

`Abstract`description

`Abstract`intersects

`Abstract`render

Returns {
data:
| string
| number
| any[]
| Record<string, any>;
id: string;
loadSaveData: LoadSaveDataTable;
name: string;
zIndex: number;
}

data:
| string
| number
| any[]
| Record<string, any>

`Protected` `Abstract`serializeToJSON

Returns
| null
| string
| number
| any[]
| Record<string, any>

`Optional`withRegionErased