|
| 1 | +# Class: Editor |
| 2 | + |
| 3 | +Entry point for APIs that read or modify the document's content. |
| 4 | + |
| 5 | +## Accessors |
| 6 | + |
| 7 | +### context |
| 8 | + |
| 9 | +• `get` **context**(): [`Context`](context.md) |
| 10 | + |
| 11 | +User's current selection context |
| 12 | + |
| 13 | +#### Returns |
| 14 | + |
| 15 | +[`Context`](context.md) |
| 16 | + |
| 17 | +<hr /> |
| 18 | + |
| 19 | +## documentRoot |
| 20 | + |
| 21 | +• `get` **documentRoot**(): [`ExpressRootNode`](express-root-node.md) |
| 22 | + |
| 23 | +#### Returns |
| 24 | + |
| 25 | +[`ExpressRootNode`](express-root-node.md) |
| 26 | + |
| 27 | +the root of the document. |
| 28 | + |
| 29 | +## Methods |
| 30 | + |
| 31 | +### createEllipse() |
| 32 | + |
| 33 | +• **createEllipse**(): [`EllipseNode`](ellipse-node.md) |
| 34 | + |
| 35 | +#### Returns |
| 36 | + |
| 37 | +[`EllipseNode`](ellipse-node.md) |
| 38 | + |
| 39 | +an ellipse node with default x/y radii, a black fill, and no initial stroke. |
| 40 | +Transform values default to 0. |
| 41 | + |
| 42 | +<hr /> |
| 43 | + |
| 44 | +#### createGroup() |
| 45 | + |
| 46 | +• **createGroup**(): [`GroupNode`](group-node.md) |
| 47 | + |
| 48 | +#### Returns |
| 49 | + |
| 50 | +[`GroupNode`](group-node.md) |
| 51 | + |
| 52 | +a group node. |
| 53 | + |
| 54 | +<hr /> |
| 55 | + |
| 56 | +#### createImageContainer() |
| 57 | + |
| 58 | +• **createImageContainer**(`bitmapData`, `options`): [`MediaContainerNode`](media-container-node.md) |
| 59 | + |
| 60 | +Creates a bitmap image, represented as a multi-node MediaContainerNode structure. Always creates a "full-frame," |
| 61 | +uncropped image initially, but cropping can be changed after it is created by modifying the properties of the |
| 62 | +container's mediaRectangle and maskShape children. |
| 63 | + |
| 64 | +Image creation involves some asynchronous steps. The image will be visible in this client almost instantly, but will |
| 65 | +render as a gray placeholder on other clients until it has been uploaded to DCX and then downloaded by those clients. |
| 66 | +This local client will act as having unsaved changes until the upload has finished. |
| 67 | + |
| 68 | +#### Parameters |
| 69 | + |
| 70 | +• **bitmapData**: [`BitmapImage`](../interfaces/bitmap-image.md) |
| 71 | + |
| 72 | +BitmapImage resource (e.g. returned from [loadBitmapImage](editor.md#loadbitmapimage)). |
| 73 | + |
| 74 | +• **options**= `{}` |
| 75 | + |
| 76 | +Additional configuration: - initialSize - Size the image is displayed at. Must have the same aspect ratio as bitmapData. Defaults to the |
| 77 | +size the image would be created at by a UI drag-drop gesture (typically the image's full size, but scaled down |
| 78 | +if needed to stay below an application-defined size cap). |
| 79 | + |
| 80 | +• **options.initialSize?**: [`RectangleGeometry`](../interfaces/rectangle-geometry.md) |
| 81 | + |
| 82 | +#### Returns |
| 83 | + |
| 84 | +[`MediaContainerNode`](media-container-node.md) |
| 85 | + |
| 86 | +MediaContainerNode representing the top container node of the multi-node structure. |
| 87 | + |
| 88 | +<hr /> |
| 89 | + |
| 90 | +is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
| 91 | + |
| 92 | +• **createLine**(): [`LineNode`](line-node.md) |
| 93 | + |
| 94 | +#### Returns |
| 95 | + |
| 96 | +[`LineNode`](line-node.md) |
| 97 | + |
| 98 | +a line node with default start point and end point and a default stroke. |
| 99 | +Transform values default to 0. |
| 100 | + |
| 101 | +<hr /> |
| 102 | + |
| 103 | +[`TextNode`](text-node.md) |
| 104 | + |
| 105 | +• **createPath**(`path`): [`PathNode`](path-node.md) |
| 106 | + |
| 107 | +#### Parameters |
| 108 | + |
| 109 | +• **path**: `string` |
| 110 | + |
| 111 | +a string representing any [SVG path element](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths). |
| 112 | +Note that the path data will be normalized, and therefore the `path` getter may return a different SVG string from the path creation input. |
| 113 | +For example, "M 10 80 Q 52.5 10, 95 80 T 180 80" becomes "M 10 80 C 38.33 33.33 66.67 33.33 95 80...". |
| 114 | +Throws if the input is empty or is not legal SVG path syntax. |
| 115 | + |
| 116 | +#### Returns |
| 117 | + |
| 118 | +[`PathNode`](path-node.md) |
| 119 | + |
| 120 | +a path node with a default stroke and no initial fill. |
| 121 | + |
| 122 | +<hr /> |
| 123 | + |
| 124 | +### createRectangle() |
| 125 | + |
| 126 | +• **createRectangle**(): [`RectangleNode`](rectangle-node.md) |
| 127 | + |
| 128 | +#### Returns |
| 129 | + |
| 130 | +[`RectangleNode`](rectangle-node.md) |
| 131 | + |
| 132 | +a rectangle node with default width and height, a black fill, and no initial stroke. |
| 133 | +Transform values default to 0. |
| 134 | + |
| 135 | +<hr /> |
| 136 | + |
| 137 | +### createText() |
| 138 | + |
| 139 | +• **createText**(): [`TextNode`](text-node.md) |
| 140 | + |
| 141 | +#### Returns |
| 142 | + |
| 143 | +[`TextNode`](text-node.md) |
| 144 | + |
| 145 | +a text node with default styles. The text content is initially empty, so the text node will be |
| 146 | +invisible until its `fullContent` property's `text` is set. Creates point text, so the node's width will automatically |
| 147 | +adjust to accommodate whatever text is set. |
| 148 | + |
| 149 | +Note: the registration point of this text node is not guaranteed to be at the top-left of the bounding box of its |
| 150 | +insertion parent. Recommend using `setPositionInParent` over `translation` to set the position. |
| 151 | + |
| 152 | +<hr /> |
| 153 | + |
| 154 | +### loadBitmapImage() |
| 155 | + |
| 156 | +• **loadBitmapImage**(`bitmapData`): `Promise` [`BitmapImage`](../interfaces/bitmap-image.md) |
| 157 | + |
| 158 | +Creates a bitmap image resource in the document, which can be displayed in the scenegraph by passing it to [createImageContainer](editor.md#createimagecontainer) |
| 159 | +to create a MediaContainerNode. The same BitmapImage can be used to create multiple MediaContainerNodes. |
| 160 | + |
| 161 | +Because the resulting BitmapImage is returned asynchronously, to use it you must schedule an edit lambda to run at a |
| 162 | +safe later time in order to call [createImageContainer](editor.md#createimagecontainer). See [queueAsyncEdit](editor.md#queueasyncedit). |
| 163 | + |
| 164 | +Further async steps to upload image resource data may continue in the background after this call's Promise resolves, |
| 165 | +but the resulting BitmapImage can be used right away (via the queue API noted above). The local client will act as |
| 166 | +having unsaved changes until all the upload steps have finished. |
| 167 | + |
| 168 | +#### Parameters |
| 169 | + |
| 170 | +• **bitmapData**: `Blob` |
| 171 | + |
| 172 | +Encoded image data in PNG or JPEG format. |
| 173 | + |
| 174 | +#### Returns |
| 175 | + |
| 176 | +`Promise` [`BitmapImage`](../interfaces/bitmap-image.md) |
| 177 | + |
| 178 | +<hr /> |
| 179 | + |
| 180 | +### makeColorFill() |
| 181 | + |
| 182 | +• **makeColorFill**(`color`): [`ColorFill`](../interfaces/color-fill.md) |
| 183 | + |
| 184 | +Convenience helper to create a complete ColorFill value given just its color. |
| 185 | + |
| 186 | +#### Parameters |
| 187 | + |
| 188 | +• **color**: [`Color`](../interfaces/color.md) |
| 189 | + |
| 190 | +The color to use for the fill. |
| 191 | + |
| 192 | +#### Returns |
| 193 | + |
| 194 | +[`ColorFill`](../interfaces/color-fill.md) |
| 195 | + |
| 196 | +<hr /> |
| 197 | + |
| 198 | +### makeStroke() |
| 199 | + |
| 200 | +• **makeStroke**(`options`?): [`SolidColorStroke`](../interfaces/SolidColorStroke.md) |
| 201 | + |
| 202 | +Convenience helper to create a complete SolidColorStroke value given just a |
| 203 | +subset of its fields. All other fields are populated with default values. |
| 204 | + |
| 205 | +See [SolidColorStroke](../interfaces/SolidColorStroke.md) for more details on the `options` fields. Defaults: |
| 206 | + |
| 207 | +- `color` has default value DEFAULT_STROKE_COLOR if none is provided. |
| 208 | +- `width` has default value DEFAULT_STROKE_WIDTH if none is provided. |
| 209 | +- `position` has default value `center` if none is provided. |
| 210 | +- `dashPattern` has default value [] if none is provided. |
| 211 | +- `dashOffset` has default value 0 if none is provided. This field is ignored |
| 212 | + if no `dashPattern` was provided. |
| 213 | +- `type` has default value SolidColorStroke.type if none is provided. This field |
| 214 | + shouldn't be set to any other value. |
| 215 | + |
| 216 | +#### Parameters |
| 217 | + |
| 218 | +• **options?**: `Partial` [`SolidColorStroke`](../interfaces/SolidColorStroke.md) |
| 219 | + |
| 220 | +#### Returns |
| 221 | + |
| 222 | +[`SolidColorStroke`](../interfaces/SolidColorStroke.md) |
| 223 | + |
| 224 | +a stroke configured with the given options. |
| 225 | + |
| 226 | +<hr /> |
| 227 | + |
| 228 | +### queueAsyncEdit() |
| 229 | + |
| 230 | +• **queueAsyncEdit**(`lambda`): `Promise` `void` |
| 231 | + |
| 232 | +Enqueues a function to be run at a later time when edits to the user's document may be performed. You can always edit |
| 233 | +the document immediately when invoked in response to your add-on's UI code. However, if you delay to await an |
| 234 | +asynchronous operation such as [loadBitmapImage](editor.md#loadbitmapimage), any edits following this pause must be scheduled using |
| 235 | +queueAsyncEdit(). This ensures the edit is properly tracked for saving and undo. |
| 236 | + |
| 237 | +The delay before your edit function is executed is typically just a few milliseconds, so it will appear instantaneous |
| 238 | +to users. However, note that queueAsyncEdit() will return *before* your function has been run. |
| 239 | +If you need to trigger any code after the edit has been performed, either include this in the lambda you are enqueuing |
| 240 | +or await the Promise returned by queueAsyncEdit(). |
| 241 | + |
| 242 | +Generally, calling any setter or method is treated as an edit; but simple getters may be safely called at any time. |
| 243 | + |
| 244 | +Example of typical usage: |
| 245 | + |
| 246 | +```js |
| 247 | +// Assume insertImage() is called from your UI code, and given a Blob containing image data |
| 248 | +async function insertImage(blob) { |
| 249 | + // This function was invoked from the UI iframe, so we can make any edits we want synchronously here. |
| 250 | + // Initially load the bitmap - an async operation |
| 251 | + const bitmapImage = await editor.loadBitmapImage(blob); |
| 252 | + |
| 253 | + // Execution doesn't arrive at this line until an async delay, due to the Promise 'await' above |
| 254 | + |
| 255 | + // Further edits need to be queued to run at a safe time |
| 256 | + editor.queueAsyncEdit(() => { |
| 257 | + // Create scenenode to display the image, and add it to the current artboard |
| 258 | + const mediaContainer = editor.createImageContainer(bitmapImage); |
| 259 | + editor.context.insertionParent.children.append(mediaContainer); |
| 260 | + }); |
| 261 | +} |
| 262 | +``` |
| 263 | + |
| 264 | +#### Parameters |
| 265 | + |
| 266 | +• **lambda** |
| 267 | + |
| 268 | +a function which edits the document model. |
| 269 | + |
| 270 | +#### Returns |
| 271 | + |
| 272 | +`Promise` `void` |
| 273 | + |
| 274 | +a Promise that resolves when the lambda has finished running, or rejects if the lambda throws an error. |
0 commit comments