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): void;
    attachLoadSaveData(key, data): void;
    clone(): AbstractComponent;
    createClone(): AbstractComponent;
    description(localizationTable): string;
    forceStyle(style, editor): void;
    getBBox(): Rect2;
    getExactBBox(): Rect2;
    getId(): string;
    getLoadSaveData(): LoadSaveDataTable;
    getProportionalRenderingTime(): number;
    getSizingMode(): ComponentSizingMode;
    getStyle(): RestyleableComponentStyle;
    getZIndex(): number;
    intersects(lineSegment): boolean;
    intersectsRect(rect): boolean;
    isBackground(): boolean;
    isSelectable(): boolean;
    occludesEverythingBelowWhenRenderedInRect(_visibleRect): boolean;
    onAddToImage(_image): void;
    onRemoveFromImage(): void;
    render(canvas, visibleRect?): 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): SerializableCommand;
    transformBy(affineTransfm): SerializableCommand;
    updateStyle(style): SerializableCommand;
    withRegionErased?(shape, 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

isRestylableComponent: true

`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:229

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:113

clone

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

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

`Protected` `Abstract` createClone

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

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

`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:376

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:94

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:133

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:140

getId

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

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

getLoadSaveData

getLoadSaveData(): LoadSaveDataTable
See attachLoadSaveData

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

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:224

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:152

getStyle

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

getZIndex

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

`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:185

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:196

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:217

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:211

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:164

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:169

onRemoveFromImage

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

`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
- Optional visibleRect: Rect2
Returns void
Inherited from AbstractComponent.render
- Defined in components/AbstractComponent.ts:182

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:414

`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:407

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:243

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:238

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:86

`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:404

Interface RestyleableComponent

Hierarchy (view full)

Implemented by

Index

Properties

Methods

Properties

Protected Abstract contentBBox

isRestylableComponent

Protected lastChangedTime

Deprecated

Methods

Protected Abstract applyTransformation

Parameters

affineTransfm: Mat33

Returns void

attachLoadSaveData

Parameters

key: string

data: LoadSaveData

Returns void

clone

Returns AbstractComponent

Protected Abstract createClone

Returns AbstractComponent

Abstract description

Parameters

localizationTable: ImageComponentLocalization

Returns string

forceStyle

Parameters

style: RestyleableComponentStyle

editor: null | Editor

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

Abstract intersects

Parameters

lineSegment: LineSegment2

Returns boolean

intersectsRect

Parameters

rect: Rect2

Returns boolean

isBackground

Returns boolean

isSelectable

Returns boolean

occludesEverythingBelowWhenRenderedInRect

Parameters

_visibleRect: Rect2

Returns boolean

onAddToImage

Parameters

_image: EditorImage

Returns void

onRemoveFromImage

Returns void

Abstract render

Parameters

canvas: AbstractRenderer

Optional visibleRect: Rect2

Returns void

serialize

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

`Protected` `Abstract` contentBBox

`Protected` lastChangedTime

`Protected` `Abstract` applyTransformation

`Protected` `Abstract` createClone

`Abstract` description

`Abstract` intersects

`Abstract` render

`Optional` visibleRect: Rect2

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

`Protected` `Abstract` serializeToJSON

`Optional` withRegionErased