Creates a new text object from a list of component text or child TextComponents.
Transformation relative to this component's parent element.
ProtectedcontentBBoxThe 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.
Readonlyiseslint-disable-next-line @typescript-eslint/prefer-as-const
ProtectedlastThe timestamp (milliseconds) at which the component was last changed (i.e. created/translated).
Protected ReadonlytextProtectedapplyAttach data that can be used while exporting the component (e.g. to SVG).
This is intended for use by an ImageLoader.
Returns a copy of this component.
ProtectedcreateComponent-specific implementation of clone.
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).
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.
a partial representation of this component's style.
See getStyle
true if lineSegment intersects this component.
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.
Called when this component is added to the given image.
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.
OptionalvisibleRect: Rect2Convert 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.
ProtectedserializeReturns a command that updates this component's z-index.
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).
Returns a Command that updates portions of this component's style
to the given style.
OptionalwithOptional method: Divides this component into sections roughly along the given path,
removing parts that are roughly within shape.
Notes:
undefined if unsupported.viewport should be provided to determine how newly-added points should be rounded.
StaticapplyStaticdeserializeConvert a string or an object produced by JSON.parse into an AbstractComponent.
StaticfromCreates a TextComponent from lines.
StaticregisterStore the deserialization callback (or lack of it) for [componentKind]. If components are registered multiple times (as may be done in automated tests), the most recent deserialization callback is used.
Displays text.
A
TextComponentis a collection ofTextElements (strings or TextComponents).Example:
import { Editor, TextComponent, Mat33, Vec2, Color4, TextRenderingStyle } from 'js-draw'; const editor = new Editor(document.body); editor.dispatch(editor.setBackgroundStyle({ color: Color4.black, autoresize: true )); ---visible--- /// Adding a simple TextComponent ///------------------------------ const positioning1 = Mat33.translation(Vec2.of(10, 10)); const style: TextRenderingStyle = { fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.green }, }; editor.dispatch( editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)), ); /// Adding nested TextComponents ///----------------------------- // Add another TextComponent that contains text and a TextComponent. Observe that '[Test]' // is placed directly after 'Test'. const positioning2 = Mat33.translation(Vec2.of(10, 50)); editor.dispatch( editor.image.addElement( new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style) ), );