diff --git a/gatsby-config.js b/gatsby-config.js index a42eeff1b..3e2def611 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -151,7 +151,7 @@ module.exports = { { title: "EllipseNode", path: "references/document-sandbox/document-apis/classes/EllipseNode.md", - }, + }, { title: "ExpressRootNode", path: "references/document-sandbox/document-apis/classes/ExpressRootNode.md", @@ -204,14 +204,30 @@ module.exports = { title: "RectangleNode", path: "references/document-sandbox/document-apis/classes/RectangleNode.md", }, + { + title: "RestrictedItemList", + path: "references/document-sandbox/document-apis/classes/RestrictedItemList.md", + }, + { + title: "SolidColorShapeNode", + path: "references/document-sandbox/document-apis/classes/SolidColorShapeNode.md", + }, { title: "StrokableNode", path: "references/document-sandbox/document-apis/classes/StrokableNode.md", }, + { + title: "StrokeShapeNode", + path: "references/document-sandbox/document-apis/classes/StrokeShapeNode.md", + }, { title: "TextNode", path: "references/document-sandbox/document-apis/classes/TextNode.md", }, + { + title: "UnknownNode", + path: "references/document-sandbox/document-apis/classes/UnknownNode.md", + }, ], }, { @@ -250,6 +266,10 @@ module.exports = { title: "ListItem", path: "references/document-sandbox/document-apis/interfaces/ListItem.md", }, + { + title: "Point", + path: "references/document-sandbox/document-apis/interfaces/Point.md", + }, { title: "RectangleGeometry", path: "references/document-sandbox/document-apis/interfaces/RectangleGeometry.md", diff --git a/src/pages/references/changelog.md b/src/pages/references/changelog.md index 4f9f326d2..66308ccc7 100644 --- a/src/pages/references/changelog.md +++ b/src/pages/references/changelog.md @@ -20,6 +20,39 @@ contributors: # Changelog +## 2023-11-28 + +### Updates + +- The [Document API References](./document-sandbox/document-apis/) were updated with the following additions and changes: + + **New Classes/Interfaces**
+ + - New [RestrictedItemList class](./document-sandbox/document-apis/classes/RestrictedItemList.md) + - New [UnknownNode class](./document-sandbox/document-apis/classes/UnknownNode.md) + - New [SolidColorShapeNode class](./document-sandbox/document-apis/classes/SolidColorShapeNode.md) + - New [Point interface](./document-sandbox/document-apis/interfaces/Point.md) + - New `queueAsyncEdit` method added to the [Editor](./document-sandbox/document-apis/classes/Editor.md) class. + + **Updates to Node Classes**
+ + The accessors and methods below were removed or replaced with new names in the [`Node` class](./document-sandbox/document-apis/classes/Node.md) and classes that extend it. Please refer to the [Document API References](./document-sandbox/document-apis/) specifically to learn more about each. + + - Removes `absoluteRotation` accessor + - Removes `absoluteTransform` accessor + - Removes `relativeRotation` accessor + - Removes `relativeTransform` accessor + - Removes `translateX` accessor + - Removes `translateY` accessor + - Adds `rotation` accessor + - Adds `rotationInScreen` accessor + - Adds `transformMatrix` accessor + - Adds `translation` accessor + - Adds `setPositionInParent` method + - Adds `setRotationInParent` method + +- The [Web API's in the Document Sandbox Reference](./document-sandbox/web/index.md) were updated to remove the timer methods which are no longer supported (ie: `setTimeout()`, `clearTimeout` and `setInterval()`, `clearInterval`). + ## 2023-11-27 Updated [Document API references](./document-sandbox/document-apis/) to include: @@ -226,7 +259,7 @@ Added new code sample to demonstrate how to use SWC-React and set theme properti - Auto reload of the add-on when a change is detected sometimes fails to work properly. This can result in changes to the UI HTML not being reflected, but can also cause the connection between the panel UI and the document sandbox to not be properly initialized (your UI may appear to be unresponsive as a result). If you encounter this situation, manually reloading the add-on from the developer panel will usually resolve the issue. We're working on a fix. - It's occasionally possible to run into a race condition where the communications bridge between the two contexts (panel vs document sandbox) is not set up in time. If you interact with your panel UI immediately after it's reloaded, the click may appear do nothing instead of invoking your script code. We're working on a fix for this. - Common pitfalls - - If you split your work on a document over multiple frames using `setTimeout`, be sure to protect against reentrancy, otherwise you may end up corrupting the user's undo stack. You should disable elements on the panel UI that could allow the user to execute your code before it is complete and then re-enable those elements when the code is done. The issue will be fixed in a future release. + - If you split your work on a document over multiple frames, be sure to protect against reentrancy, otherwise you may end up corrupting the user's undo stack. You should disable elements on the panel UI that could allow the user to execute your code before it is complete and then re-enable those elements when the code is done. The issue will be fixed in a future release. - When setting up communication between your panel UI code and your script sandbox code, calling `apiProxy()` with the wrong argument will do nothing without providing any error feedback. If communication is not working, carefully double-check your UI code is requesting the `"script"` API proxy and your script sandbox code is requesting the `"panel"` API proxy. - Unexpected behavior - If the user has a selection and your add-on creates new content, the selection is cleared. This will be addressed before release. An API will be added in the future that will allow you to change the selection to content your add-on creates. diff --git a/src/pages/references/document-sandbox/communication/index.md b/src/pages/references/document-sandbox/communication/index.md index cc05eaff0..67f317e84 100644 --- a/src/pages/references/document-sandbox/communication/index.md +++ b/src/pages/references/document-sandbox/communication/index.md @@ -31,7 +31,6 @@ The document sandbox and iframe runtime are two different runtime execution envi A default exported module from `AddOnScriptSdk` is provided to enable the communication between the iframe and the document sandbox via its' `instance.runtime` object. You can simply import the module into your script file code for use, and create a reference to the `runtime` object. For instance: ```js -// import addOnSandboxSdk from "add-on-sdk-document-sandbox" - TODOHS import AddOnScriptSdk from "AddOnScriptSdk"; // AddOnScriptSdk is a default import const { runtime } = AddOnScriptSdk.instance; // runtime object provides direct access to the comm methods @@ -48,7 +47,6 @@ This example shows how to expose APIs from the document sandbox SDK (via `code.j #### `code.js` ```js -// import addOnSandboxSdk from "add-on-sdk-document-sandbox" - TODOHS import AddOnScriptSdk from "AddOnScriptSdk"; const { runtime } = AddOnScriptSdk.instance; @@ -106,15 +104,11 @@ addOnUISdk.ready.then(async () => { performWorkOnUI: function (data, someFlag) { // Do some ui operation }, - getDataFromUI: async function () { - let resolver = undefined; - + getDataFromUI: async function () { const promise = new Promise((resolve) => { - resolver = resolve; + resolve("button_color_blue"); }); - setTimeout(() => { - resolver("button_color_blue"); - }, 10); + return await promise; }, }; @@ -126,7 +120,6 @@ addOnUISdk.ready.then(async () => { #### `code.js` ```js -// import addOnSandboxSdk from "add-on-sdk-document-sandbox" - TODOHS import AddOnScriptSdk from "AddOnScriptSdk"; // default import const { runtime } = AddOnScriptSdk.instance; @@ -141,7 +134,6 @@ async function callUIApis() { }, true ); - const result = await uiApis.getDataFromUI(); console.log("Data from UI: " + result); diff --git a/src/pages/references/document-sandbox/document-apis/classes/ArtboardNode.md b/src/pages/references/document-sandbox/document-apis/classes/ArtboardNode.md index e4c825d4f..37dd5e6f2 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/ArtboardNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/ArtboardNode.md @@ -21,8 +21,6 @@ When multiple artboards exist on a page, the artboards represent "scenes" in a l ### Accessors -- [absoluteRotation](ArtboardNode.md#absoluterotation) -- [absoluteTransform](ArtboardNode.md#absolutetransform) - [allChildren](ArtboardNode.md#allchildren) - [blendMode](ArtboardNode.md#blendmode) - [children](ArtboardNode.md#children) @@ -31,68 +29,22 @@ When multiple artboards exist on a page, the artboards represent "scenes" in a l - [locked](ArtboardNode.md#locked) - [opacity](ArtboardNode.md#opacity) - [parent](ArtboardNode.md#parent) -- [relativeRotation](ArtboardNode.md#relativerotation) -- [relativeTransform](ArtboardNode.md#relativetransform) +- [rotation](ArtboardNode.md#rotation) +- [rotationInScreen](ArtboardNode.md#rotationinscreen) - [strokes](ArtboardNode.md#strokes) -- [translateX](ArtboardNode.md#translatex) -- [translateY](ArtboardNode.md#translatey) +- [transformMatrix](ArtboardNode.md#transformmatrix) +- [translation](ArtboardNode.md#translation) - [type](ArtboardNode.md#type) - [width](ArtboardNode.md#width) ### Methods - [removeFromParent](ArtboardNode.md#removefromparent) +- [setPositionInParent](ArtboardNode.md#setpositioninparent) +- [setRotationInParent](ArtboardNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -ContainerNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -ContainerNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -ContainerNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -282,13 +234,12 @@ ContainerNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -296,39 +247,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -ContainerNode.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -ContainerNode.relativeRotation +ContainerNode.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -ContainerNode.relativeTransform +ContainerNode.rotationInScreen ___ @@ -348,59 +284,47 @@ Any strokes(s) on the shape. Use the methods on this ItemList object to get, add ___ -### translateX +### transformMatrix -• `get` **translateX**(): `number` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -ContainerNode.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -ContainerNode.translateX +ContainerNode.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -ContainerNode.translateY +ContainerNode.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -408,7 +332,7 @@ ContainerNode.translateY #### Inherited from -ContainerNode.translateY +ContainerNode.translation ___ @@ -459,3 +383,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [ContainerNode](ContainerNode.md).[removeFromParent](ContainerNode.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[ContainerNode](ContainerNode.md).[setPositionInParent](ContainerNode.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[ContainerNode](ContainerNode.md).[setRotationInParent](ContainerNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/ComplexShapeNode.md b/src/pages/references/document-sandbox/document-apis/classes/ComplexShapeNode.md index bae4255c1..dac60ee4d 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/ComplexShapeNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/ComplexShapeNode.md @@ -3,11 +3,11 @@ # Class: ComplexShapeNode A ComplexShapeNode is complex prepackaged shape that appears as a leaf node in the UI, even if it is composed -of multiple separate paths. ComplexShapeNode also may have more complex resize behavior than simple paths. +of multiple separate paths. ## Hierarchy -- [`Node`](Node.md) +- [`FillableNode`](FillableNode.md) ↳ **`ComplexShapeNode`** @@ -15,73 +15,27 @@ of multiple separate paths. ComplexShapeNode also may have more complex resize b ### Accessors -- [absoluteRotation](ComplexShapeNode.md#absoluterotation) -- [absoluteTransform](ComplexShapeNode.md#absolutetransform) - [allChildren](ComplexShapeNode.md#allchildren) - [blendMode](ComplexShapeNode.md#blendmode) +- [fills](ComplexShapeNode.md#fills) - [locked](ComplexShapeNode.md#locked) - [opacity](ComplexShapeNode.md#opacity) - [parent](ComplexShapeNode.md#parent) -- [relativeRotation](ComplexShapeNode.md#relativerotation) -- [relativeTransform](ComplexShapeNode.md#relativetransform) -- [translateX](ComplexShapeNode.md#translatex) -- [translateY](ComplexShapeNode.md#translatey) +- [rotation](ComplexShapeNode.md#rotation) +- [rotationInScreen](ComplexShapeNode.md#rotationinscreen) +- [strokes](ComplexShapeNode.md#strokes) +- [transformMatrix](ComplexShapeNode.md#transformmatrix) +- [translation](ComplexShapeNode.md#translation) - [type](ComplexShapeNode.md#type) ### Methods - [removeFromParent](ComplexShapeNode.md#removefromparent) +- [setPositionInParent](ComplexShapeNode.md#setpositioninparent) +- [setRotationInParent](ComplexShapeNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -97,7 +51,7 @@ overall display z-order. #### Inherited from -Node.allChildren +FillableNode.allChildren ___ @@ -114,7 +68,7 @@ Blend mode determines how a node is composited onto the content below it. The de #### Inherited from -Node.blendMode +FillableNode.blendMode • `set` **blendMode**(`value`): `void` @@ -130,7 +84,23 @@ Node.blendMode #### Inherited from -Node.blendMode +FillableNode.blendMode + +___ + +### fills + +• `get` **fills**(): [`ItemList`](ItemList.md)<[`Fill`](../interfaces/Fill.md)\> + +Any fill(s) on the shape. Use the methods on this ItemList object to get, add, and remove fills. + +#### Returns + +[`ItemList`](ItemList.md)<[`Fill`](../interfaces/Fill.md)\> + +#### Inherited from + +FillableNode.fills ___ @@ -147,7 +117,7 @@ cannot be edited by the user unless they are unlocked first. #### Inherited from -Node.locked +FillableNode.locked • `set` **locked**(`locked`): `void` @@ -163,7 +133,7 @@ Node.locked #### Inherited from -Node.locked +FillableNode.locked ___ @@ -179,7 +149,7 @@ The node's opacity, from 0.0 to 1.0 #### Inherited from -Node.opacity +FillableNode.opacity • `set` **opacity**(`opacity`): `void` @@ -195,7 +165,7 @@ Node.opacity #### Inherited from -Node.opacity +FillableNode.opacity ___ @@ -211,17 +181,16 @@ The node's parent. Undefined if the node is an orphan, or if the node is the art #### Inherited from -Node.parent +FillableNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -229,29 +198,46 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation +FillableNode.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` + +#### Inherited from + +FillableNode.rotationInScreen + +___ + +### strokes + +• `get` **strokes**(): [`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> + +Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, and remove strokes. + +#### Returns + +[`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> #### Inherited from -Node.relativeRotation +FillableNode.strokes ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -261,31 +247,35 @@ The node's transform matrix relative to its parent. #### Inherited from -Node.relativeTransform +FillableNode.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateX +FillableNode.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -293,31 +283,33 @@ Node.translateX #### Inherited from -Node.translateX +FillableNode.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -Node.translateY +FillableNode.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -325,33 +317,68 @@ Node.translateY #### Inherited from -Node.translateY +[FillableNode](FillableNode.md).[removeFromParent](FillableNode.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -Node.type +[FillableNode](FillableNode.md).[setPositionInParent](FillableNode.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -359,4 +386,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[Node](Node.md).[removeFromParent](Node.md#removefromparent) +[FillableNode](FillableNode.md).[setRotationInParent](FillableNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/ContainerNode.md b/src/pages/references/document-sandbox/document-apis/classes/ContainerNode.md index e30015acd..b60c72a08 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/ContainerNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/ContainerNode.md @@ -20,74 +20,26 @@ also hold children in specified "slots." Use [allChildren](Node.md#allchildren) ### Accessors -- [absoluteRotation](ContainerNode.md#absoluterotation) -- [absoluteTransform](ContainerNode.md#absolutetransform) - [allChildren](ContainerNode.md#allchildren) - [blendMode](ContainerNode.md#blendmode) - [children](ContainerNode.md#children) - [locked](ContainerNode.md#locked) - [opacity](ContainerNode.md#opacity) - [parent](ContainerNode.md#parent) -- [relativeRotation](ContainerNode.md#relativerotation) -- [relativeTransform](ContainerNode.md#relativetransform) -- [translateX](ContainerNode.md#translatex) -- [translateY](ContainerNode.md#translatey) +- [rotation](ContainerNode.md#rotation) +- [rotationInScreen](ContainerNode.md#rotationinscreen) +- [transformMatrix](ContainerNode.md#transformmatrix) +- [translation](ContainerNode.md#translation) - [type](ContainerNode.md#type) ### Methods - [removeFromParent](ContainerNode.md#removefromparent) +- [setPositionInParent](ContainerNode.md#setpositioninparent) +- [setRotationInParent](ContainerNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -233,13 +185,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -247,29 +198,30 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation +Node.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -Node.relativeRotation +Node.rotationInScreen ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -279,31 +231,35 @@ The node's transform matrix relative to its parent. #### Inherited from -Node.relativeTransform +Node.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateX +Node.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -311,31 +267,33 @@ Node.translateX #### Inherited from -Node.translateX +Node.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -Node.translateY +Node.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -343,33 +301,68 @@ Node.translateY #### Inherited from -Node.translateY +[Node](Node.md).[removeFromParent](Node.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -Node.type +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -377,4 +370,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[Node](Node.md).[removeFromParent](Node.md#removefromparent) +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/Editor.md b/src/pages/references/document-sandbox/document-apis/classes/Editor.md index 9f876cc85..ca83bd94a 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/Editor.md +++ b/src/pages/references/document-sandbox/document-apis/classes/Editor.md @@ -28,6 +28,7 @@ Entry point for APIs that read or modify the document's content. - [createStroke](Editor.md#createstroke) - [createText](Editor.md#createtext) - [loadBitmapImage](Editor.md#loadbitmapimage) +- [queueAsyncEdit](Editor.md#queueasyncedit) ## Accessors @@ -216,3 +217,53 @@ return value can be used immediately. The local client will act as having unsave #### Returns `Promise`<[`BitmapImage`](../interfaces/BitmapImage.md)\> + +___ + +### queueAsyncEdit + +▸ **queueAsyncEdit**(`lambda`): `Promise`<`void`\> + +Enqueues a function to be run at a later time when edits to the user's document may be performed. You can always edit +the document immediately when invoked in response to your add-on's UI code. However, if you delay to await an +asynchronous operation such as [loadBitmapImage](Editor.md#loadbitmapimage), any edits following this pause must be scheduled using +queueAsyncEdit(). This ensures the edit is properly tracked for saving and undo. + +The delay before your edit function is executed is typically just a few milliseconds, so it will appear instantaneous +to users. However, note that queueAsyncEdit() will return *before* your function has been run. +If you need to trigger any code after the edit has been performed, either include this in the lambda you are enqueuing +or await the Promise returned by queueAsyncEdit(). + +Generally, calling any setter or method is treated as an edit; but simple getters may be safely called at any time. + +Example of typical usage: + +```javascript +// Assume insertImage() is called from your UI code, and given a Blob containing image data +async function insertImage(blob) { + // This function was invoked from the UI iframe, so we can make any edits we want synchronously here. + // Initially load the bitmap - an async operation + const bitmapImage = await editor.loadBitmapImage(blob); + + // Execution doesn't arrive at this line until an async delay, due to the Promise 'await' above + + // Further edits need to be queued to run at a safe time + editor.queueAsyncEdit(() => { + // Create scenenode to display the image, and add it to the current artboard + const mediaContainer = editor.createImageContainer(bitmapImage); + editor.context.insertionParent.children.append(mediaContainer); + }); +} +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `lambda` | () => `void` | a function which edits the document model. | + +#### Returns + +`Promise`<`void`\> + +a Promise that resolves when the lambda has finished running, or rejects if the lambda throws an error. diff --git a/src/pages/references/document-sandbox/document-apis/classes/EllipseNode.md b/src/pages/references/document-sandbox/document-apis/classes/EllipseNode.md index 39fc5dced..992bfcc1c 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/EllipseNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/EllipseNode.md @@ -12,93 +12,31 @@ An EllipseNode represents an ellipse object in the scenegraph. ## Table of contents -### Properties - -- [DEFAULT\_STROKE\_WIDTH](EllipseNode.md#DEFAULT_STROKE_WIDTH) - ### Accessors -- [absoluteRotation](EllipseNode.md#absoluterotation) -- [absoluteTransform](EllipseNode.md#absolutetransform) - [allChildren](EllipseNode.md#allchildren) - [blendMode](EllipseNode.md#blendmode) - [fills](EllipseNode.md#fills) - [locked](EllipseNode.md#locked) - [opacity](EllipseNode.md#opacity) - [parent](EllipseNode.md#parent) -- [relativeRotation](EllipseNode.md#relativerotation) -- [relativeTransform](EllipseNode.md#relativetransform) +- [rotation](EllipseNode.md#rotation) +- [rotationInScreen](EllipseNode.md#rotationinscreen) - [rx](EllipseNode.md#rx) - [ry](EllipseNode.md#ry) - [strokes](EllipseNode.md#strokes) -- [translateX](EllipseNode.md#translateX) -- [translateY](EllipseNode.md#translateY) +- [transformMatrix](EllipseNode.md#transformmatrix) +- [translation](EllipseNode.md#translation) - [type](EllipseNode.md#type) ### Methods - [removeFromParent](EllipseNode.md#removefromparent) - -## Properties - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` - -#### Inherited from - -[FillableNode](FillableNode.md).[DEFAULT_STROKE_WIDTH](FillableNode.md#DEFAULT_STROKE_WIDTH) +- [setPositionInParent](EllipseNode.md#setpositioninparent) +- [setRotationInParent](EllipseNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -FillableNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -FillableNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -FillableNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -248,13 +186,12 @@ FillableNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -262,39 +199,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -FillableNode.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -FillableNode.relativeRotation +FillableNode.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -FillableNode.relativeTransform +FillableNode.rotationInScreen ___ @@ -368,59 +290,47 @@ FillableNode.strokes ___ -### translateX - -• `get` **translateX**(): `number` - -The translation of the node along its parent's x-axis. - -#### Returns +### transformMatrix -`number` - -#### Inherited from - -FillableNode.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -FillableNode.translateX +FillableNode.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -FillableNode.translateY +FillableNode.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -428,7 +338,7 @@ FillableNode.translateY #### Inherited from -FillableNode.translateY +FillableNode.translation ___ @@ -463,3 +373,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [FillableNode](FillableNode.md).[removeFromParent](FillableNode.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[FillableNode](FillableNode.md).[setPositionInParent](FillableNode.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[FillableNode](FillableNode.md).[setRotationInParent](FillableNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/ExpressRootNode.md b/src/pages/references/document-sandbox/document-apis/classes/ExpressRootNode.md index 29bc170b6..7ac5d0c91 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/ExpressRootNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/ExpressRootNode.md @@ -14,74 +14,26 @@ An ExpressRootNode represents the root node of the document's "scenegraph" artwo ### Accessors -- [absoluteRotation](ExpressRootNode.md#absoluterotation) -- [absoluteTransform](ExpressRootNode.md#absolutetransform) - [allChildren](ExpressRootNode.md#allchildren) - [blendMode](ExpressRootNode.md#blendmode) - [locked](ExpressRootNode.md#locked) - [opacity](ExpressRootNode.md#opacity) - [pages](ExpressRootNode.md#pages) - [parent](ExpressRootNode.md#parent) -- [relativeRotation](ExpressRootNode.md#relativerotation) -- [relativeTransform](ExpressRootNode.md#relativetransform) -- [translateX](ExpressRootNode.md#translateX) -- [translateY](ExpressRootNode.md#translateY) +- [rotation](ExpressRootNode.md#rotation) +- [rotationInScreen](ExpressRootNode.md#rotationinscreen) +- [transformMatrix](ExpressRootNode.md#transformmatrix) +- [translation](ExpressRootNode.md#translation) - [type](ExpressRootNode.md#type) ### Methods - [removeFromParent](ExpressRootNode.md#removefromparent) +- [setPositionInParent](ExpressRootNode.md#setpositioninparent) +- [setRotationInParent](ExpressRootNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -227,13 +179,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -241,29 +192,30 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation +Node.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -Node.relativeRotation +Node.rotationInScreen ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -273,31 +225,35 @@ The node's transform matrix relative to its parent. #### Inherited from -Node.relativeTransform +Node.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateX +Node.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -305,31 +261,33 @@ Node.translateX #### Inherited from -Node.translateX +Node.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -Node.translateY +Node.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -337,33 +295,68 @@ Node.translateY #### Inherited from -Node.translateY +[Node](Node.md).[removeFromParent](Node.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -Node.type +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -371,4 +364,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[Node](Node.md).[removeFromParent](Node.md#removefromparent) +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/FillableNode.md b/src/pages/references/document-sandbox/document-apis/classes/FillableNode.md index 3353e4e3d..a2bffa953 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/FillableNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/FillableNode.md @@ -10,6 +10,8 @@ Base class for a Node that can have its own fill and stroke. ↳ **`FillableNode`** + ↳↳ [`ComplexShapeNode`](ComplexShapeNode.md) + ↳↳ [`EllipseNode`](EllipseNode.md) ↳↳ [`PathNode`](PathNode.md) @@ -22,91 +24,29 @@ Base class for a Node that can have its own fill and stroke. ## Table of contents -### Properties - -- [DEFAULT\_STROKE\_WIDTH](FillableNode.md#DEFAULT_STROKE_WIDTH) - ### Accessors -- [absoluteRotation](FillableNode.md#absoluterotation) -- [absoluteTransform](FillableNode.md#absolutetransform) - [allChildren](FillableNode.md#allchildren) - [blendMode](FillableNode.md#blendmode) - [fills](FillableNode.md#fills) - [locked](FillableNode.md#locked) - [opacity](FillableNode.md#opacity) - [parent](FillableNode.md#parent) -- [relativeRotation](FillableNode.md#relativerotation) -- [relativeTransform](FillableNode.md#relativetransform) +- [rotation](FillableNode.md#rotation) +- [rotationInScreen](FillableNode.md#rotationinscreen) - [strokes](FillableNode.md#strokes) -- [translateX](FillableNode.md#translateX) -- [translateY](FillableNode.md#translateY) +- [transformMatrix](FillableNode.md#transformmatrix) +- [translation](FillableNode.md#translation) - [type](FillableNode.md#type) ### Methods - [removeFromParent](FillableNode.md#removefromparent) - -## Properties - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` - -#### Inherited from - -[StrokableNode](StrokableNode.md).[DEFAULT_STROKE_WIDTH](StrokableNode.md#DEFAULT_STROKE_WIDTH) +- [setPositionInParent](FillableNode.md#setpositioninparent) +- [setRotationInParent](FillableNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -StrokableNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -StrokableNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -StrokableNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -256,13 +196,12 @@ StrokableNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -270,79 +209,84 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -StrokableNode.relativeRotation +StrokableNode.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -StrokableNode.relativeRotation +StrokableNode.rotationInScreen ___ -### relativeTransform +### strokes -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **strokes**(): [`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> -The node's transform matrix relative to its parent. +Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, and remove strokes. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +[`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> #### Inherited from -StrokableNode.relativeTransform +StrokableNode.strokes ___ -### strokes +### transformMatrix -• `get` **strokes**(): [`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, and remove strokes. +The node's transform matrix relative to its parent. #### Returns -[`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -StrokableNode.strokes +StrokableNode.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -StrokableNode.translateX +StrokableNode.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -350,31 +294,33 @@ StrokableNode.translateX #### Inherited from -StrokableNode.translateX +StrokableNode.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -StrokableNode.translateY +StrokableNode.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -382,33 +328,68 @@ StrokableNode.translateY #### Inherited from -StrokableNode.translateY +[StrokableNode](StrokableNode.md).[removeFromParent](StrokableNode.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -StrokableNode.type +[StrokableNode](StrokableNode.md).[setPositionInParent](StrokableNode.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -416,4 +397,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[StrokableNode](StrokableNode.md).[removeFromParent](StrokableNode.md#removefromparent) +[StrokableNode](StrokableNode.md).[setRotationInParent](StrokableNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/GridLayoutNode.md b/src/pages/references/document-sandbox/document-apis/classes/GridLayoutNode.md index 006463106..36a77b4be 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/GridLayoutNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/GridLayoutNode.md @@ -19,8 +19,6 @@ create a layout grid that other content can be placed into. ### Accessors -- [absoluteRotation](GridLayoutNode.md#absoluterotation) -- [absoluteTransform](GridLayoutNode.md#absolutetransform) - [allChildren](GridLayoutNode.md#allchildren) - [blendMode](GridLayoutNode.md#blendmode) - [fill](GridLayoutNode.md#fill) @@ -28,67 +26,21 @@ create a layout grid that other content can be placed into. - [locked](GridLayoutNode.md#locked) - [opacity](GridLayoutNode.md#opacity) - [parent](GridLayoutNode.md#parent) -- [relativeRotation](GridLayoutNode.md#relativerotation) -- [relativeTransform](GridLayoutNode.md#relativetransform) -- [translateX](GridLayoutNode.md#translateX) -- [translateY](GridLayoutNode.md#translateY) +- [rotation](GridLayoutNode.md#rotation) +- [rotationInScreen](GridLayoutNode.md#rotationinscreen) +- [transformMatrix](GridLayoutNode.md#transformmatrix) +- [translation](GridLayoutNode.md#translation) - [type](GridLayoutNode.md#type) - [width](GridLayoutNode.md#width) ### Methods - [removeFromParent](GridLayoutNode.md#removefromparent) +- [setPositionInParent](GridLayoutNode.md#setpositioninparent) +- [setRotationInParent](GridLayoutNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -262,13 +214,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -276,95 +227,68 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.relativeRotation +Node.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -Node.relativeTransform +Node.rotationInScreen ___ -### translateX +### transformMatrix -• `get` **translateX**(): `number` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -Node.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -Node.translateX +Node.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateY +Node.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -372,7 +296,7 @@ Node.translateY #### Inherited from -Node.translateY +Node.translation ___ @@ -423,3 +347,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/GroupNode.md b/src/pages/references/document-sandbox/document-apis/classes/GroupNode.md index 568a5c79a..a4d24f62f 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/GroupNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/GroupNode.md @@ -15,8 +15,6 @@ optional vector mask child. ### Accessors -- [absoluteRotation](GroupNode.md#absoluterotation) -- [absoluteTransform](GroupNode.md#absolutetransform) - [allChildren](GroupNode.md#allchildren) - [blendMode](GroupNode.md#blendmode) - [children](GroupNode.md#children) @@ -24,66 +22,20 @@ optional vector mask child. - [maskShape](GroupNode.md#maskshape) - [opacity](GroupNode.md#opacity) - [parent](GroupNode.md#parent) -- [relativeRotation](GroupNode.md#relativerotation) -- [relativeTransform](GroupNode.md#relativetransform) -- [translateX](GroupNode.md#translateX) -- [translateY](GroupNode.md#translateY) +- [rotation](GroupNode.md#rotation) +- [rotationInScreen](GroupNode.md#rotationinscreen) +- [transformMatrix](GroupNode.md#transformmatrix) +- [translation](GroupNode.md#translation) - [type](GroupNode.md#type) ### Methods - [removeFromParent](GroupNode.md#removefromparent) +- [setPositionInParent](GroupNode.md#setpositioninparent) +- [setRotationInParent](GroupNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -ContainerNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -ContainerNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -ContainerNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -201,7 +153,7 @@ undefined if no mask is set on this group. • `set` **maskShape**(`mask`): `void` -If set to a vector shape, adds a mask or replaces the exsiting mask on this Group. +If set to a vector shape, adds a mask or replaces the existing mask on this Group. If set to undefined, removes any mask that was previously set on this Group. **`Throws`** @@ -268,13 +220,12 @@ ContainerNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -282,29 +233,30 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -ContainerNode.relativeRotation +ContainerNode.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -ContainerNode.relativeRotation +ContainerNode.rotationInScreen ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -314,31 +266,35 @@ The node's transform matrix relative to its parent. #### Inherited from -ContainerNode.relativeTransform +ContainerNode.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -ContainerNode.translateX +ContainerNode.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -346,31 +302,33 @@ ContainerNode.translateX #### Inherited from -ContainerNode.translateX +ContainerNode.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -ContainerNode.translateY +ContainerNode.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -378,33 +336,68 @@ ContainerNode.translateY #### Inherited from -ContainerNode.translateY +[ContainerNode](ContainerNode.md).[removeFromParent](ContainerNode.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -ContainerNode.type +[ContainerNode](ContainerNode.md).[setPositionInParent](ContainerNode.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -412,4 +405,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[ContainerNode](ContainerNode.md).[removeFromParent](ContainerNode.md#removefromparent) +[ContainerNode](ContainerNode.md).[setRotationInParent](ContainerNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/ImageRectangleNode.md b/src/pages/references/document-sandbox/document-apis/classes/ImageRectangleNode.md index 94767afad..c93bc3402 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/ImageRectangleNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/ImageRectangleNode.md @@ -20,75 +20,27 @@ shape sibling node). ### Accessors -- [absoluteRotation](ImageRectangleNode.md#absoluterotation) -- [absoluteTransform](ImageRectangleNode.md#absolutetransform) - [allChildren](ImageRectangleNode.md#allchildren) - [blendMode](ImageRectangleNode.md#blendmode) - [height](ImageRectangleNode.md#height) - [locked](ImageRectangleNode.md#locked) - [opacity](ImageRectangleNode.md#opacity) - [parent](ImageRectangleNode.md#parent) -- [relativeRotation](ImageRectangleNode.md#relativerotation) -- [relativeTransform](ImageRectangleNode.md#relativetransform) -- [translateX](ImageRectangleNode.md#translateX) -- [translateY](ImageRectangleNode.md#translateY) +- [rotation](ImageRectangleNode.md#rotation) +- [rotationInScreen](ImageRectangleNode.md#rotationinscreen) +- [transformMatrix](ImageRectangleNode.md#transformmatrix) +- [translation](ImageRectangleNode.md#translation) - [type](ImageRectangleNode.md#type) - [width](ImageRectangleNode.md#width) ### Methods - [removeFromParent](ImageRectangleNode.md#removefromparent) +- [setPositionInParent](ImageRectangleNode.md#setpositioninparent) +- [setRotationInParent](ImageRectangleNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -240,13 +192,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -254,95 +205,68 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.relativeRotation +Node.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -Node.relativeTransform +Node.rotationInScreen ___ -### translateX +### transformMatrix -• `get` **translateX**(): `number` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -Node.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -Node.translateX +Node.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateY +Node.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -350,7 +274,7 @@ Node.translateY #### Inherited from -Node.translateY +Node.translation ___ @@ -403,3 +327,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/LineNode.md b/src/pages/references/document-sandbox/document-apis/classes/LineNode.md index bd7e9b4cf..0b9c32ef6 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/LineNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/LineNode.md @@ -14,38 +14,37 @@ A LineNode represents a simple line object in the scenegraph – a single straig ### Properties -- [DEFAULT\_END\_X](LineNode.md#DEFAULT_END_X) -- [DEFAULT\_END\_Y](LineNode.md#DEFAULT_END_Y) -- [DEFAULT\_START\_X](LineNode.md#DEFAULT_START_X) -- [DEFAULT\_START\_Y](LineNode.md#DEFAULT_START_Y) -- [DEFAULT\_STROKE\_WIDTH](LineNode.md#DEFAULT_STROKE_WIDTH) +- [DEFAULT\_END\_X](LineNode.md#default_END_X) +- [DEFAULT\_END\_Y](LineNode.md#default_END_Y) +- [DEFAULT\_START\_X](LineNode.md#default_START_X) +- [DEFAULT\_START\_Y](LineNode.md#default_START_Y) ### Accessors -- [absoluteRotation](LineNode.md#absoluterotation) -- [absoluteTransform](LineNode.md#absolutetransform) - [allChildren](LineNode.md#allchildren) - [blendMode](LineNode.md#blendmode) - [endArrowHeadType](LineNode.md#endarrowheadtype) -- [endX](LineNode.md#endX) -- [endY](LineNode.md#endY) +- [endX](LineNode.md#endx) +- [endY](LineNode.md#endy) - [locked](LineNode.md#locked) - [opacity](LineNode.md#opacity) - [parent](LineNode.md#parent) -- [relativeRotation](LineNode.md#relativerotation) -- [relativeTransform](LineNode.md#relativetransform) +- [rotation](LineNode.md#rotation) +- [rotationInScreen](LineNode.md#rotationinscreen) - [startArrowHeadType](LineNode.md#startarrowheadtype) -- [startX](LineNode.md#startX) -- [startY](LineNode.md#startY) +- [startX](LineNode.md#startx) +- [startY](LineNode.md#starty) - [strokes](LineNode.md#strokes) -- [translateX](LineNode.md#translateX) -- [translateY](LineNode.md#translateY) +- [transformMatrix](LineNode.md#transformmatrix) +- [translation](LineNode.md#translation) - [type](LineNode.md#type) ### Methods - [removeFromParent](LineNode.md#removefromparent) - [setEndPoints](LineNode.md#setendpoints) +- [setPositionInParent](LineNode.md#setpositioninparent) +- [setRotationInParent](LineNode.md#setrotationinparent) ## Properties @@ -71,66 +70,8 @@ ___ ▪ `Static` `Readonly` **DEFAULT\_START\_Y**: ``0`` -___ - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` - -#### Inherited from - -[StrokableNode](StrokableNode.md).[DEFAULT_STROKE_WIDTH](StrokableNode.md#DEFAULT_STROKE_WIDTH) - ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -StrokableNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -StrokableNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -StrokableNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -320,13 +261,12 @@ StrokableNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -334,39 +274,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -StrokableNode.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -StrokableNode.relativeRotation +StrokableNode.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -StrokableNode.relativeTransform +StrokableNode.rotationInScreen ___ @@ -442,59 +367,47 @@ StrokableNode.strokes ___ -### translateX - -• `get` **translateX**(): `number` - -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from +### transformMatrix -StrokableNode.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -StrokableNode.translateX +StrokableNode.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -StrokableNode.translateY +StrokableNode.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -502,7 +415,7 @@ StrokableNode.translateY #### Inherited from -StrokableNode.translateY +StrokableNode.translation ___ @@ -545,8 +458,8 @@ ___ ▸ **setEndPoints**(`startX`, `startY`, `endX`, `endY`): `void` Set the start and end points of the line in its local coordinate space (which may -differ from its parent's coordinate space based on `relativeTransform`, i.e. -`relativeRotation` and `translateX`/`Y`). The values passed in may be normalized +differ from its parent's coordinate space based on `transformMatrix`, i.e. +`rotation` and `translation`). The values passed in may be normalized by this setter, shifting the node's translation and counter-shifting the start/end points. Therefore, the start/end getters may return values different from the values you passed into this setter, even though the line's visual bounds and appearance are @@ -564,3 +477,72 @@ the same. Rotation is preserved. #### Returns `void` + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[StrokableNode](StrokableNode.md).[setPositionInParent](StrokableNode.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[StrokableNode](StrokableNode.md).[setRotationInParent](StrokableNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/MediaContainerNode.md b/src/pages/references/document-sandbox/document-apis/classes/MediaContainerNode.md index 3f5b61698..fcaaae936 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/MediaContainerNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/MediaContainerNode.md @@ -16,8 +16,6 @@ determined by the maskShape which is not necessarily a rectangle. ### Accessors -- [absoluteRotation](MediaContainerNode.md#absoluterotation) -- [absoluteTransform](MediaContainerNode.md#absolutetransform) - [allChildren](MediaContainerNode.md#allchildren) - [blendMode](MediaContainerNode.md#blendmode) - [locked](MediaContainerNode.md#locked) @@ -25,66 +23,20 @@ determined by the maskShape which is not necessarily a rectangle. - [mediaRectangle](MediaContainerNode.md#mediarectangle) - [opacity](MediaContainerNode.md#opacity) - [parent](MediaContainerNode.md#parent) -- [relativeRotation](MediaContainerNode.md#relativerotation) -- [relativeTransform](MediaContainerNode.md#relativetransform) -- [translateX](MediaContainerNode.md#translateX) -- [translateY](MediaContainerNode.md#translateY) +- [rotation](MediaContainerNode.md#rotation) +- [rotationInScreen](MediaContainerNode.md#rotationinscreen) +- [transformMatrix](MediaContainerNode.md#transformmatrix) +- [translation](MediaContainerNode.md#translation) - [type](MediaContainerNode.md#type) ### Methods - [removeFromParent](MediaContainerNode.md#removefromparent) +- [setPositionInParent](MediaContainerNode.md#setpositioninparent) +- [setRotationInParent](MediaContainerNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -246,13 +198,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -260,29 +211,30 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation +Node.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -Node.relativeRotation +Node.rotationInScreen ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -292,31 +244,35 @@ The node's transform matrix relative to its parent. #### Inherited from -Node.relativeTransform +Node.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateX +Node.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -324,31 +280,33 @@ Node.translateX #### Inherited from -Node.translateX +Node.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -Node.translateY +Node.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -356,33 +314,68 @@ Node.translateY #### Inherited from -Node.translateY +[Node](Node.md).[removeFromParent](Node.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -Node.type +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -390,4 +383,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[Node](Node.md).[removeFromParent](Node.md#removefromparent) +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/Node.md b/src/pages/references/document-sandbox/document-apis/classes/Node.md index 845d28146..38f105cff 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/Node.md +++ b/src/pages/references/document-sandbox/document-apis/classes/Node.md @@ -10,8 +10,6 @@ A Node represents an object in the scenegraph, the document's visual content tre ↳ **`Node`** - ↳↳ [`ComplexShapeNode`](ComplexShapeNode.md) - ↳↳ [`ContainerNode`](ContainerNode.md) ↳↳ [`ExpressRootNode`](ExpressRootNode.md) @@ -24,69 +22,39 @@ A Node represents an object in the scenegraph, the document's visual content tre ↳↳ [`PageNode`](PageNode.md) + ↳↳ [`SolidColorShapeNode`](SolidColorShapeNode.md) + ↳↳ [`StrokableNode`](StrokableNode.md) + ↳↳ [`StrokeShapeNode`](StrokeShapeNode.md) + ↳↳ [`TextNode`](TextNode.md) + ↳↳ [`UnknownNode`](UnknownNode.md) + ## Table of contents ### Accessors -- [absoluteRotation](Node.md#absoluterotation) -- [absoluteTransform](Node.md#absolutetransform) - [allChildren](Node.md#allchildren) - [blendMode](Node.md#blendmode) - [locked](Node.md#locked) - [opacity](Node.md#opacity) - [parent](Node.md#parent) -- [relativeRotation](Node.md#relativerotation) -- [relativeTransform](Node.md#relativetransform) -- [translateX](Node.md#translateX) -- [translateY](Node.md#translateY) +- [rotation](Node.md#rotation) +- [rotationInScreen](Node.md#rotationinscreen) +- [transformMatrix](Node.md#transformmatrix) +- [translation](Node.md#translation) - [type](Node.md#type) ### Methods - [removeFromParent](Node.md#removefromparent) +- [setPositionInParent](Node.md#setpositioninparent) +- [setRotationInParent](Node.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -188,35 +156,35 @@ The node's parent. Undefined if the node is an orphan, or if the node is the art ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns `number` -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` ___ -### relativeTransform +### transformMatrix -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) The node's transform matrix relative to its parent. @@ -226,23 +194,27 @@ The node's transform matrix relative to its parent. ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -250,23 +222,25 @@ The translation of the node along its parent's x-axis. ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -274,25 +248,60 @@ The translation of the node along its parent's y-axis. ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns diff --git a/src/pages/references/document-sandbox/document-apis/classes/PageNode.md b/src/pages/references/document-sandbox/document-apis/classes/PageNode.md index 8a0b5c63f..6e4ce77c1 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/PageNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/PageNode.md @@ -19,8 +19,6 @@ timeline sequence. Those artboards in turn contain all the visual content of the ### Accessors -- [absoluteRotation](PageNode.md#absoluterotation) -- [absoluteTransform](PageNode.md#absolutetransform) - [allChildren](PageNode.md#allchildren) - [artboards](PageNode.md#artboards) - [blendMode](PageNode.md#blendmode) @@ -29,67 +27,21 @@ timeline sequence. Those artboards in turn contain all the visual content of the - [name](PageNode.md#name) - [opacity](PageNode.md#opacity) - [parent](PageNode.md#parent) -- [relativeRotation](PageNode.md#relativerotation) -- [relativeTransform](PageNode.md#relativetransform) -- [translateX](PageNode.md#translateX) -- [translateY](PageNode.md#translateY) +- [rotation](PageNode.md#rotation) +- [rotationInScreen](PageNode.md#rotationinscreen) +- [transformMatrix](PageNode.md#transformmatrix) +- [translation](PageNode.md#translation) - [type](PageNode.md#type) - [width](PageNode.md#width) ### Methods - [removeFromParent](PageNode.md#removefromparent) +- [setPositionInParent](PageNode.md#setpositioninparent) +- [setRotationInParent](PageNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -276,13 +228,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -290,95 +241,68 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.relativeRotation +Node.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -Node.relativeTransform +Node.rotationInScreen ___ -### translateX +### transformMatrix -• `get` **translateX**(): `number` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -Node.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -Node.translateX +Node.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateY +Node.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -386,7 +310,7 @@ Node.translateY #### Inherited from -Node.translateY +Node.translation ___ @@ -438,3 +362,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/PathNode.md b/src/pages/references/document-sandbox/document-apis/classes/PathNode.md index d37c20dfc..acbd06fff 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/PathNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/PathNode.md @@ -13,14 +13,8 @@ yet, only read. ## Table of contents -### Properties - -- [DEFAULT\_STROKE\_WIDTH](PathNode.md#DEFAULT_STROKE_WIDTH) - ### Accessors -- [absoluteRotation](PathNode.md#absoluterotation) -- [absoluteTransform](PathNode.md#absolutetransform) - [allChildren](PathNode.md#allchildren) - [blendMode](PathNode.md#blendmode) - [fillRule](PathNode.md#fillrule) @@ -29,77 +23,21 @@ yet, only read. - [opacity](PathNode.md#opacity) - [parent](PathNode.md#parent) - [path](PathNode.md#path) -- [relativeRotation](PathNode.md#relativerotation) -- [relativeTransform](PathNode.md#relativetransform) +- [rotation](PathNode.md#rotation) +- [rotationInScreen](PathNode.md#rotationinscreen) - [strokes](PathNode.md#strokes) -- [translateX](PathNode.md#translateX) -- [translateY](PathNode.md#translateY) +- [transformMatrix](PathNode.md#transformmatrix) +- [translation](PathNode.md#translation) - [type](PathNode.md#type) ### Methods - [removeFromParent](PathNode.md#removefromparent) - -## Properties - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` - -#### Inherited from - -[FillableNode](FillableNode.md).[DEFAULT_STROKE_WIDTH](FillableNode.md#DEFAULT_STROKE_WIDTH) +- [setPositionInParent](PathNode.md#setpositioninparent) +- [setRotationInParent](PathNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -FillableNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -FillableNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -FillableNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -275,13 +213,12 @@ Example: "M 0 0 L 10 15". ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -289,79 +226,84 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -FillableNode.relativeRotation +FillableNode.rotation -• `set` **relativeRotation**(`value`): `void` +___ -#### Parameters +### rotationInScreen -| Name | Type | -| :------ | :------ | -| `value` | `number` | +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -`void` +`number` #### Inherited from -FillableNode.relativeRotation +FillableNode.rotationInScreen ___ -### relativeTransform +### strokes -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **strokes**(): [`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> -The node's transform matrix relative to its parent. +Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, and remove strokes. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +[`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> #### Inherited from -FillableNode.relativeTransform +FillableNode.strokes ___ -### strokes +### transformMatrix -• `get` **strokes**(): [`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, and remove strokes. +The node's transform matrix relative to its parent. #### Returns -[`ItemList`](ItemList.md)<[`Stroke`](../interfaces/Stroke.md)\> +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -FillableNode.strokes +FillableNode.transformMatrix ___ -### translateX +### translation -• `get` **translateX**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's x-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -FillableNode.translateX +FillableNode.translation -• `set` **translateX**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -369,31 +311,33 @@ FillableNode.translateX #### Inherited from -FillableNode.translateX +FillableNode.translation ___ -### translateY +### type -• `get` **translateY**(): `number` +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) -The translation of the node along its parent's y-axis. +The node's type. #### Returns -`number` +[`SceneNodeType`](../enums/SceneNodeType.md) #### Inherited from -FillableNode.translateY +FillableNode.type -• `set` **translateY**(`value`): `void` +## Methods -#### Parameters +### removeFromParent -| Name | Type | -| :------ | :------ | -| `value` | `number` | +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. #### Returns @@ -401,33 +345,68 @@ FillableNode.translateY #### Inherited from -FillableNode.translateY +[FillableNode](FillableNode.md).[removeFromParent](FillableNode.md#removefromparent) ___ -### type +### setPositionInParent -• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` -The node's type. +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | #### Returns -[`SceneNodeType`](../enums/SceneNodeType.md) +`void` #### Inherited from -FillableNode.type +[FillableNode](FillableNode.md).[setPositionInParent](FillableNode.md#setpositioninparent) -## Methods +___ -### removeFromParent +### setRotationInParent -▸ **removeFromParent**(): `void` +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` -Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. -For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does -not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | #### Returns @@ -435,4 +414,4 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from -[FillableNode](FillableNode.md).[removeFromParent](FillableNode.md#removefromparent) +[FillableNode](FillableNode.md).[setRotationInParent](FillableNode.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/RectangleNode.md b/src/pages/references/document-sandbox/document-apis/classes/RectangleNode.md index 75ddf8f95..cc8210f09 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/RectangleNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/RectangleNode.md @@ -16,14 +16,8 @@ A RectangleNode represents a rectangle object in the scenegraph. ## Table of contents -### Properties - -- [DEFAULT\_STROKE\_WIDTH](RectangleNode.md#DEFAULT_STROKE_WIDTH) - ### Accessors -- [absoluteRotation](RectangleNode.md#absoluterotation) -- [absoluteTransform](RectangleNode.md#absolutetransform) - [allChildren](RectangleNode.md#allchildren) - [blendMode](RectangleNode.md#blendmode) - [bottomLeftRadius](RectangleNode.md#bottomleftradius) @@ -33,13 +27,13 @@ A RectangleNode represents a rectangle object in the scenegraph. - [locked](RectangleNode.md#locked) - [opacity](RectangleNode.md#opacity) - [parent](RectangleNode.md#parent) -- [relativeRotation](RectangleNode.md#relativerotation) -- [relativeTransform](RectangleNode.md#relativetransform) +- [rotation](RectangleNode.md#rotation) +- [rotationInScreen](RectangleNode.md#rotationinscreen) - [strokes](RectangleNode.md#strokes) - [topLeftRadius](RectangleNode.md#topleftradius) - [topRightRadius](RectangleNode.md#toprightradius) -- [translateX](RectangleNode.md#translateX) -- [translateY](RectangleNode.md#translateY) +- [transformMatrix](RectangleNode.md#transformmatrix) +- [translation](RectangleNode.md#translation) - [type](RectangleNode.md#type) - [width](RectangleNode.md#width) @@ -47,68 +41,12 @@ A RectangleNode represents a rectangle object in the scenegraph. - [getUniformCornerRadius](RectangleNode.md#getuniformcornerradius) - [removeFromParent](RectangleNode.md#removefromparent) +- [setPositionInParent](RectangleNode.md#setpositioninparent) +- [setRotationInParent](RectangleNode.md#setrotationinparent) - [setUniformCornerRadius](RectangleNode.md#setuniformcornerradius) -## Properties - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` - -#### Inherited from - -[FillableNode](FillableNode.md).[DEFAULT_STROKE_WIDTH](FillableNode.md#DEFAULT_STROKE_WIDTH) - ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -FillableNode.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -FillableNode.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -FillableNode.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -349,13 +287,12 @@ FillableNode.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -363,39 +300,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -FillableNode.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -FillableNode.relativeRotation +FillableNode.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -FillableNode.relativeTransform +FillableNode.rotationInScreen ___ @@ -473,59 +395,47 @@ even if the radius value set here is higher. ___ -### translateX - -• `get` **translateX**(): `number` - -The translation of the node along its parent's x-axis. - -#### Returns +### transformMatrix -`number` - -#### Inherited from - -FillableNode.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -FillableNode.translateX +FillableNode.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -FillableNode.translateY +FillableNode.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -533,7 +443,7 @@ FillableNode.translateY #### Inherited from -FillableNode.translateY +FillableNode.translation ___ @@ -617,6 +527,75 @@ not support removal. Also throws if node is the artwork root. No-op if node is a ___ +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[FillableNode](FillableNode.md).[setPositionInParent](FillableNode.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[FillableNode](FillableNode.md).[setRotationInParent](FillableNode.md#setrotationinparent) + +___ + ### setUniformCornerRadius ▸ **setUniformCornerRadius**(`radius`): `void` diff --git a/src/pages/references/document-sandbox/document-apis/classes/SolidColorShapeNode.md b/src/pages/references/document-sandbox/document-apis/classes/SolidColorShapeNode.md new file mode 100644 index 000000000..b78bead90 --- /dev/null +++ b/src/pages/references/document-sandbox/document-apis/classes/SolidColorShapeNode.md @@ -0,0 +1,380 @@ +[@express-document-sdk](../overview.md) / SolidColorShapeNode + +# Class: SolidColorShapeNode + +A SolidColorShapeNode is a prepackaged shape with a single color property that appears as a leaf node in the UI, even if it +is composed of multiple separate paths. + +## Hierarchy + +- [`Node`](Node.md) + + ↳ **`SolidColorShapeNode`** + +## Table of contents + +### Accessors + +- [allChildren](SolidColorShapeNode.md#allchildren) +- [blendMode](SolidColorShapeNode.md#blendmode) +- [color](SolidColorShapeNode.md#color) +- [locked](SolidColorShapeNode.md#locked) +- [opacity](SolidColorShapeNode.md#opacity) +- [parent](SolidColorShapeNode.md#parent) +- [rotation](SolidColorShapeNode.md#rotation) +- [rotationInScreen](SolidColorShapeNode.md#rotationinscreen) +- [transformMatrix](SolidColorShapeNode.md#transformmatrix) +- [translation](SolidColorShapeNode.md#translation) +- [type](SolidColorShapeNode.md#type) + +### Methods + +- [removeFromParent](SolidColorShapeNode.md#removefromparent) +- [setPositionInParent](SolidColorShapeNode.md#setpositioninparent) +- [setRotationInParent](SolidColorShapeNode.md#setrotationinparent) + +## Accessors + +### allChildren + +• `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +Returns a read-only list of all children of the node. General-purpose content containers such as ArtboardNode or +GroupNode also provide a mutable [children](ContainerNode.md#children) list. Other nodes with a more specific structure can +hold children in various discrete "slots"; this `allChildren` list includes *all* such children and reflects their +overall display z-order. + +#### Returns + +`Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +#### Inherited from + +Node.allChildren + +___ + +### blendMode + +• `get` **blendMode**(): [`BlendMode`](../enums/BlendMode.md) + +Blend mode determines how a node is composited onto the content below it. The default value is +[normal](../enums/BlendMode.md#normal) for most nodes, and [passThrough](../enums/BlendMode.md#passthrough) for GroupNodes. + +#### Returns + +[`BlendMode`](../enums/BlendMode.md) + +#### Inherited from + +Node.blendMode + +• `set` **blendMode**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | [`BlendMode`](../enums/BlendMode.md) | + +#### Returns + +`void` + +#### Inherited from + +Node.blendMode + +___ + +### color + +• `get` **color**(): `undefined` \| [`Color`](Color.md) + +The color of the single color shape. + +#### Returns + +`undefined` \| [`Color`](Color.md) + +• `set` **color**(`color`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `color` | `undefined` \| [`Color`](Color.md) | + +#### Returns + +`void` + +___ + +### locked + +• `get` **locked**(): `boolean` + +The node's lock/unlock state. Locked nodes are excluded from the selection (see [selection](Context.md#selection)), and +cannot be edited by the user unless they are unlocked first. + +#### Returns + +`boolean` + +#### Inherited from + +Node.locked + +• `set` **locked**(`locked`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `locked` | `boolean` | + +#### Returns + +`void` + +#### Inherited from + +Node.locked + +___ + +### opacity + +• `get` **opacity**(): `number` + +The node's opacity, from 0.0 to 1.0 + +#### Returns + +`number` + +#### Inherited from + +Node.opacity + +• `set` **opacity**(`opacity`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `opacity` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.opacity + +___ + +### parent + +• `get` **parent**(): `undefined` \| [`Node`](Node.md) + +The node's parent. Undefined if the node is an orphan, or if the node is the artwork root. + +#### Returns + +`undefined` \| [`Node`](Node.md) + +#### Inherited from + +Node.parent + +___ + +### rotation + +• `get` **rotation**(): `number` + +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. + +#### Returns + +`number` + +#### Inherited from + +Node.rotation + +___ + +### rotationInScreen + +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. + +#### Returns + +`number` + +#### Inherited from + +Node.rotationInScreen + +___ + +### transformMatrix + +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +The node's transform matrix relative to its parent. + +#### Returns + +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +#### Inherited from + +Node.transformMatrix + +___ + +### translation + +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> + +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. + +#### Returns + +`Readonly`<{ `x`: `number` ; `y`: `number` }\> + +#### Inherited from + +Node.translation + +• `set` **translation**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.translation + +___ + +### type + +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) + +The node's type. + +#### Returns + +[`SceneNodeType`](../enums/SceneNodeType.md) + +#### Inherited from + +Node.type + +## Methods + +### removeFromParent + +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/StrokableNode.md b/src/pages/references/document-sandbox/document-apis/classes/StrokableNode.md index 0a3a88b69..36182faff 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/StrokableNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/StrokableNode.md @@ -20,86 +20,28 @@ Base class for a Node that can have its own stroke. ## Table of contents -### Properties - -- [DEFAULT\_STROKE\_WIDTH](StrokableNode.md#DEFAULT_STROKE_WIDTH) - ### Accessors -- [absoluteRotation](StrokableNode.md#absoluterotation) -- [absoluteTransform](StrokableNode.md#absolutetransform) - [allChildren](StrokableNode.md#allchildren) - [blendMode](StrokableNode.md#blendmode) - [locked](StrokableNode.md#locked) - [opacity](StrokableNode.md#opacity) - [parent](StrokableNode.md#parent) -- [relativeRotation](StrokableNode.md#relativerotation) -- [relativeTransform](StrokableNode.md#relativetransform) +- [rotation](StrokableNode.md#rotation) +- [rotationInScreen](StrokableNode.md#rotationinscreen) - [strokes](StrokableNode.md#strokes) -- [translateX](StrokableNode.md#translateX) -- [translateY](StrokableNode.md#translateY) +- [transformMatrix](StrokableNode.md#transformmatrix) +- [translation](StrokableNode.md#translation) - [type](StrokableNode.md#type) ### Methods - [removeFromParent](StrokableNode.md#removefromparent) - -## Properties - -### DEFAULT\_STROKE\_WIDTH - -▪ `Static` **DEFAULT\_STROKE\_WIDTH**: `number` = `20` +- [setPositionInParent](StrokableNode.md#setpositioninparent) +- [setRotationInParent](StrokableNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -233,13 +175,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -247,39 +188,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.relativeRotation +Node.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -Node.relativeTransform +Node.rotationInScreen ___ @@ -299,59 +225,47 @@ Any stroke(s) on the shape. Use the methods on this ItemList object to get, add, ___ -### translateX - -• `get` **translateX**(): `number` - -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -Node.translateX +### transformMatrix -• `set` **translateX**(`value`): `void` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -Node.translateX +Node.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateY +Node.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -359,7 +273,7 @@ Node.translateY #### Inherited from -Node.translateY +Node.translation ___ @@ -394,3 +308,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/StrokeShapeNode.md b/src/pages/references/document-sandbox/document-apis/classes/StrokeShapeNode.md new file mode 100644 index 000000000..39183fa96 --- /dev/null +++ b/src/pages/references/document-sandbox/document-apis/classes/StrokeShapeNode.md @@ -0,0 +1,380 @@ +[@express-document-sdk](../overview.md) / StrokeShapeNode + +# Class: StrokeShapeNode + +A StrokeShapeNode is prepackaged shape that has a single stroke property and appears as a leaf node in the UI, even +if it is composed of multiple separate paths. + +## Hierarchy + +- [`Node`](Node.md) + + ↳ **`StrokeShapeNode`** + +## Table of contents + +### Accessors + +- [allChildren](StrokeShapeNode.md#allchildren) +- [blendMode](StrokeShapeNode.md#blendmode) +- [locked](StrokeShapeNode.md#locked) +- [opacity](StrokeShapeNode.md#opacity) +- [parent](StrokeShapeNode.md#parent) +- [rotation](StrokeShapeNode.md#rotation) +- [rotationInScreen](StrokeShapeNode.md#rotationinscreen) +- [stroke](StrokeShapeNode.md#stroke) +- [transformMatrix](StrokeShapeNode.md#transformmatrix) +- [translation](StrokeShapeNode.md#translation) +- [type](StrokeShapeNode.md#type) + +### Methods + +- [removeFromParent](StrokeShapeNode.md#removefromparent) +- [setPositionInParent](StrokeShapeNode.md#setpositioninparent) +- [setRotationInParent](StrokeShapeNode.md#setrotationinparent) + +## Accessors + +### allChildren + +• `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +Returns a read-only list of all children of the node. General-purpose content containers such as ArtboardNode or +GroupNode also provide a mutable [children](ContainerNode.md#children) list. Other nodes with a more specific structure can +hold children in various discrete "slots"; this `allChildren` list includes *all* such children and reflects their +overall display z-order. + +#### Returns + +`Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +#### Inherited from + +Node.allChildren + +___ + +### blendMode + +• `get` **blendMode**(): [`BlendMode`](../enums/BlendMode.md) + +Blend mode determines how a node is composited onto the content below it. The default value is +[normal](../enums/BlendMode.md#normal) for most nodes, and [passThrough](../enums/BlendMode.md#passthrough) for GroupNodes. + +#### Returns + +[`BlendMode`](../enums/BlendMode.md) + +#### Inherited from + +Node.blendMode + +• `set` **blendMode**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | [`BlendMode`](../enums/BlendMode.md) | + +#### Returns + +`void` + +#### Inherited from + +Node.blendMode + +___ + +### locked + +• `get` **locked**(): `boolean` + +The node's lock/unlock state. Locked nodes are excluded from the selection (see [selection](Context.md#selection)), and +cannot be edited by the user unless they are unlocked first. + +#### Returns + +`boolean` + +#### Inherited from + +Node.locked + +• `set` **locked**(`locked`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `locked` | `boolean` | + +#### Returns + +`void` + +#### Inherited from + +Node.locked + +___ + +### opacity + +• `get` **opacity**(): `number` + +The node's opacity, from 0.0 to 1.0 + +#### Returns + +`number` + +#### Inherited from + +Node.opacity + +• `set` **opacity**(`opacity`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `opacity` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.opacity + +___ + +### parent + +• `get` **parent**(): `undefined` \| [`Node`](Node.md) + +The node's parent. Undefined if the node is an orphan, or if the node is the artwork root. + +#### Returns + +`undefined` \| [`Node`](Node.md) + +#### Inherited from + +Node.parent + +___ + +### rotation + +• `get` **rotation**(): `number` + +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. + +#### Returns + +`number` + +#### Inherited from + +Node.rotation + +___ + +### rotationInScreen + +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. + +#### Returns + +`number` + +#### Inherited from + +Node.rotationInScreen + +___ + +### stroke + +• `get` **stroke**(): `undefined` \| [`Stroke`](../interfaces/Stroke.md) + +Stroke on the shape. + +#### Returns + +`undefined` \| [`Stroke`](../interfaces/Stroke.md) + +• `set` **stroke**(`stroke`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `stroke` | `undefined` \| [`Stroke`](../interfaces/Stroke.md) | + +#### Returns + +`void` + +___ + +### transformMatrix + +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +The node's transform matrix relative to its parent. + +#### Returns + +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +#### Inherited from + +Node.transformMatrix + +___ + +### translation + +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> + +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. + +#### Returns + +`Readonly`<{ `x`: `number` ; `y`: `number` }\> + +#### Inherited from + +Node.translation + +• `set` **translation**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.translation + +___ + +### type + +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) + +The node's type. + +#### Returns + +[`SceneNodeType`](../enums/SceneNodeType.md) + +#### Inherited from + +Node.type + +## Methods + +### removeFromParent + +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/TextNode.md b/src/pages/references/document-sandbox/document-apis/classes/TextNode.md index ff5bb281a..22f74acc4 100644 --- a/src/pages/references/document-sandbox/document-apis/classes/TextNode.md +++ b/src/pages/references/document-sandbox/document-apis/classes/TextNode.md @@ -14,75 +14,27 @@ A TextNode represents a text object in the scenegraph. ### Accessors -- [absoluteRotation](TextNode.md#absoluterotation) -- [absoluteTransform](TextNode.md#absolutetransform) - [allChildren](TextNode.md#allchildren) - [blendMode](TextNode.md#blendmode) - [locked](TextNode.md#locked) - [opacity](TextNode.md#opacity) - [parent](TextNode.md#parent) -- [relativeRotation](TextNode.md#relativerotation) -- [relativeTransform](TextNode.md#relativetransform) +- [rotation](TextNode.md#rotation) +- [rotationInScreen](TextNode.md#rotationinscreen) - [text](TextNode.md#text) - [textAlignment](TextNode.md#textalignment) -- [translateX](TextNode.md#translateX) -- [translateY](TextNode.md#translateY) +- [transformMatrix](TextNode.md#transformmatrix) +- [translation](TextNode.md#translation) - [type](TextNode.md#type) ### Methods - [removeFromParent](TextNode.md#removefromparent) +- [setPositionInParent](TextNode.md#setpositioninparent) +- [setRotationInParent](TextNode.md#setrotationinparent) ## Accessors -### absoluteRotation - -• `get` **absoluteRotation**(): `number` - -The node's absolute (global) rotation angle in degrees – includes any cumulative rotation from the node's parent containers. - -#### Returns - -`number` - -#### Inherited from - -Node.absoluteRotation - -• `set` **absoluteRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.absoluteRotation - -___ - -### absoluteTransform - -• `get` **absoluteTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -The node's absolute (global) transform matrix. - -#### Returns - -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) - -#### Inherited from - -Node.absoluteTransform - -___ - ### allChildren • `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> @@ -216,13 +168,12 @@ Node.parent ___ -### relativeRotation +### rotation -• `get` **relativeRotation**(): `number` +• `get` **rotation**(): `number` -The node's local rotation value in degrees, relative to its parent's axes. Modifying this value will also adjust the -node's x & y translation such that the node's center is in the same location after the rotation – i.e. this setter -rotates the node about its bounding box's center, not its origin. +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. #### Returns @@ -230,39 +181,24 @@ rotates the node about its bounding box's center, not its origin. #### Inherited from -Node.relativeRotation - -• `set` **relativeRotation**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | - -#### Returns - -`void` - -#### Inherited from - -Node.relativeRotation +Node.rotation ___ -### relativeTransform +### rotationInScreen -• `get` **relativeTransform**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +• `get` **rotationInScreen**(): `number` -The node's transform matrix relative to its parent. +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. #### Returns -[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) +`number` #### Inherited from -Node.relativeTransform +Node.rotationInScreen ___ @@ -314,59 +250,47 @@ The horizontal text alignment of the text node. Alignment is always the same acr ___ -### translateX +### transformMatrix -• `get` **translateX**(): `number` +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) -The translation of the node along its parent's x-axis. - -#### Returns - -`number` - -#### Inherited from - -Node.translateX - -• `set` **translateX**(`value`): `void` - -#### Parameters - -| Name | Type | -| :------ | :------ | -| `value` | `number` | +The node's transform matrix relative to its parent. #### Returns -`void` +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) #### Inherited from -Node.translateX +Node.transformMatrix ___ -### translateY +### translation -• `get` **translateY**(): `number` +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> -The translation of the node along its parent's y-axis. +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. #### Returns -`number` +`Readonly`<{ `x`: `number` ; `y`: `number` }\> #### Inherited from -Node.translateY +Node.translation -• `set` **translateY**(`value`): `void` +• `set` **translation**(`value`): `void` #### Parameters | Name | Type | | :------ | :------ | -| `value` | `number` | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | #### Returns @@ -374,7 +298,7 @@ Node.translateY #### Inherited from -Node.translateY +Node.translation ___ @@ -409,3 +333,72 @@ not support removal. Also throws if node is the artwork root. No-op if node is a #### Inherited from [Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/classes/UnknownNode.md b/src/pages/references/document-sandbox/document-apis/classes/UnknownNode.md new file mode 100644 index 000000000..c200ce946 --- /dev/null +++ b/src/pages/references/document-sandbox/document-apis/classes/UnknownNode.md @@ -0,0 +1,354 @@ +[@express-document-sdk](../overview.md) / UnknownNode + +# Class: UnknownNode + +An UnknownNode is a node with limited support and therefore treated as a leaf node. + +## Hierarchy + +- [`Node`](Node.md) + + ↳ **`UnknownNode`** + +## Table of contents + +### Accessors + +- [allChildren](UnknownNode.md#allchildren) +- [blendMode](UnknownNode.md#blendmode) +- [locked](UnknownNode.md#locked) +- [opacity](UnknownNode.md#opacity) +- [parent](UnknownNode.md#parent) +- [rotation](UnknownNode.md#rotation) +- [rotationInScreen](UnknownNode.md#rotationinscreen) +- [transformMatrix](UnknownNode.md#transformmatrix) +- [translation](UnknownNode.md#translation) +- [type](UnknownNode.md#type) + +### Methods + +- [removeFromParent](UnknownNode.md#removefromparent) +- [setPositionInParent](UnknownNode.md#setpositioninparent) +- [setRotationInParent](UnknownNode.md#setrotationinparent) + +## Accessors + +### allChildren + +• `get` **allChildren**(): `Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +Returns a read-only list of all children of the node. General-purpose content containers such as ArtboardNode or +GroupNode also provide a mutable [children](ContainerNode.md#children) list. Other nodes with a more specific structure can +hold children in various discrete "slots"; this `allChildren` list includes *all* such children and reflects their +overall display z-order. + +#### Returns + +`Readonly`<`Iterable`<[`Node`](Node.md)\>\> + +#### Inherited from + +Node.allChildren + +___ + +### blendMode + +• `get` **blendMode**(): [`BlendMode`](../enums/BlendMode.md) + +Blend mode determines how a node is composited onto the content below it. The default value is +[normal](../enums/BlendMode.md#normal) for most nodes, and [passThrough](../enums/BlendMode.md#passthrough) for GroupNodes. + +#### Returns + +[`BlendMode`](../enums/BlendMode.md) + +#### Inherited from + +Node.blendMode + +• `set` **blendMode**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | [`BlendMode`](../enums/BlendMode.md) | + +#### Returns + +`void` + +#### Inherited from + +Node.blendMode + +___ + +### locked + +• `get` **locked**(): `boolean` + +The node's lock/unlock state. Locked nodes are excluded from the selection (see [selection](Context.md#selection)), and +cannot be edited by the user unless they are unlocked first. + +#### Returns + +`boolean` + +#### Inherited from + +Node.locked + +• `set` **locked**(`locked`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `locked` | `boolean` | + +#### Returns + +`void` + +#### Inherited from + +Node.locked + +___ + +### opacity + +• `get` **opacity**(): `number` + +The node's opacity, from 0.0 to 1.0 + +#### Returns + +`number` + +#### Inherited from + +Node.opacity + +• `set` **opacity**(`opacity`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `opacity` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.opacity + +___ + +### parent + +• `get` **parent**(): `undefined` \| [`Node`](Node.md) + +The node's parent. Undefined if the node is an orphan, or if the node is the artwork root. + +#### Returns + +`undefined` \| [`Node`](Node.md) + +#### Inherited from + +Node.parent + +___ + +### rotation + +• `get` **rotation**(): `number` + +The node's local rotation angle in degrees, relative to its parent's axes. Use `setRotationInParent` to +change rotation by rotating around a defined centerpoint. + +#### Returns + +`number` + +#### Inherited from + +Node.rotation + +___ + +### rotationInScreen + +• `get` **rotationInScreen**(): `number` + +The node's total rotation angle in degrees, relative to the overall global view of the document – including any +cumulative rotation from the node's parent containers. + +#### Returns + +`number` + +#### Inherited from + +Node.rotationInScreen + +___ + +### transformMatrix + +• `get` **transformMatrix**(): [`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +The node's transform matrix relative to its parent. + +#### Returns + +[`mat2d`](https://glmatrix.net/docs/module-mat2d.html) + +#### Inherited from + +Node.transformMatrix + +___ + +### translation + +• `get` **translation**(): `Readonly`<{ `x`: `number` ; `y`: `number` }\> + +The translation of the node along its parent's axes. This is identical to the translation component of +`transformMatrix`. It is often simpler to set a node's position using `setPositionInParent` than by +setting translation directly. + +#### Returns + +`Readonly`<{ `x`: `number` ; `y`: `number` }\> + +#### Inherited from + +Node.translation + +• `set` **translation**(`value`): `void` + +#### Parameters + +| Name | Type | +| :------ | :------ | +| `value` | `Object` | +| `value.x` | `number` | +| `value.y` | `number` | + +#### Returns + +`void` + +#### Inherited from + +Node.translation + +___ + +### type + +• `get` **type**(): [`SceneNodeType`](../enums/SceneNodeType.md) + +The node's type. + +#### Returns + +[`SceneNodeType`](../enums/SceneNodeType.md) + +#### Inherited from + +Node.type + +## Methods + +### removeFromParent + +▸ **removeFromParent**(): `void` + +Removes the node from its parent - for a basic ContainerNode, this is equivalent to `node.parent.children.remove(node)`. +For nodes with other slots, removes the child from whichever slot it resides in, if possible. Throws if the slot does +not support removal. Also throws if node is the artwork root. No-op if node is already an orphan. + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[removeFromParent](Node.md#removefromparent) + +___ + +### setPositionInParent + +▸ **setPositionInParent**(`parentPoint`, `localRegistrationPoint`): `void` + +Move the node so the given `localRegistrationPoint` in its local coordinates is placed at the given +`parentPoint` in its parent's coordinates (taking into account any rotation on this node, etc.). + +**`Example`** + +Center a rectangle within its parent artboard: + +```js +rectangle.setPositionInParent( + { x: artboard.width / 2, y: artboard.height / 2 }, + { x: rectangle.width / 2, y: rectangle.height / 2 } +); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `parentPoint` | [`Point`](../interfaces/Point.md) | Point in this node's parent's coordinate space to move `localRegistrationPoint` to | +| `localRegistrationPoint` | [`Point`](../interfaces/Point.md) | Point in this node's local coordinate space to align with `parentPoint` | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setPositionInParent](Node.md#setpositioninparent) + +___ + +### setRotationInParent + +▸ **setRotationInParent**(`angleInDegrees`, `localRotationPoint`): `void` + +Set the node’s rotation angle relative to its parent to exactly the given value, keeping the given point in the +node’s local coordinate space at a fixed location within the parent. Disregards any rotation the node may already +have had. The angle set here may not be the absolute rotation angle seen on screen, if the parent or other +ancestors have any rotation of their own. + +**`Example`** + +Rotate the rectangle 45 degrees clockwise around its centerpoint: + +```js +rectangle.setRotationInParent(45, { x: rectangle.width / 2, y: rectangle.height / 2 }); +``` + +#### Parameters + +| Name | Type | Description | +| :------ | :------ | :------ | +| `angleInDegrees` | `number` | Angle in degrees. | +| `localRotationPoint` | [`Point`](../interfaces/Point.md) | Point to rotate around, in node's local coordinates. | + +#### Returns + +`void` + +#### Inherited from + +[Node](Node.md).[setRotationInParent](Node.md#setrotationinparent) diff --git a/src/pages/references/document-sandbox/document-apis/enums/ColorSpace.md b/src/pages/references/document-sandbox/document-apis/enums/ColorSpace.md index fc5955ba5..5eda24f19 100644 --- a/src/pages/references/document-sandbox/document-apis/enums/ColorSpace.md +++ b/src/pages/references/document-sandbox/document-apis/enums/ColorSpace.md @@ -8,7 +8,7 @@ Available color spaces. Currently only sRGB is supported. ### Enumeration Members -- [sRGB](ColorSpace.md#sRGB) +- [sRGB](ColorSpace.md#srgb) ## Enumeration Members diff --git a/src/pages/references/document-sandbox/document-apis/enums/FillType.md b/src/pages/references/document-sandbox/document-apis/enums/FillType.md index 681ed5a17..3a2f78b62 100644 --- a/src/pages/references/document-sandbox/document-apis/enums/FillType.md +++ b/src/pages/references/document-sandbox/document-apis/enums/FillType.md @@ -8,7 +8,8 @@ -*Additional fill types may be added in the future.* If your code has different branches or cases depending on fill type, always have a default/fallback case to handle any unknown values you may encounter. +*Additional fill types may be added in the future.* If your code has different branches or cases depending on fill type, +always have a default/fallback case to handle any unknown values you may encounter. ## Table of contents diff --git a/src/pages/references/document-sandbox/document-apis/enums/SceneNodeType.md b/src/pages/references/document-sandbox/document-apis/enums/SceneNodeType.md index 675660144..bf0b82f0d 100644 --- a/src/pages/references/document-sandbox/document-apis/enums/SceneNodeType.md +++ b/src/pages/references/document-sandbox/document-apis/enums/SceneNodeType.md @@ -8,7 +8,8 @@ -*Additional node types may be added in the future.* If your code has different branches or cases depending on node type, always have a default/fallback case to handle any unknown values you may encounter. +*Additional node types may be added in the future.* If your code has different branches or cases depending on node type, +always have a default/fallback case to handle any unknown values you may encounter. ## Table of contents @@ -28,6 +29,8 @@ - [path](SceneNodeType.md#path) - [polygon](SceneNodeType.md#polygon) - [rectangle](SceneNodeType.md#rectangle) +- [solidColorShape](SceneNodeType.md#solidcolorshape) +- [strokeShape](SceneNodeType.md#strokeshape) - [text](SceneNodeType.md#text) ## Enumeration Members @@ -48,7 +51,7 @@ ___ • **complexShape** = ``"ComplexShape"`` -Type of ComplexShapeNode, representing a complex prepackaged shape that appears as a leaf node in the UI +Type of ComplexShapeNode, representing a complex prepackaged shape with fill and stroke, that appears as a leaf node in the UI ___ @@ -126,6 +129,22 @@ ___ ___ +### solidColorShape + +• **solidColorShape** = ``"SolidColorShape"`` + +Type of SolidColorShapeNode, representing a solid-color prepackaged shape that appears as a leaf node in the UI + +___ + +### strokeShape + +• **strokeShape** = ``"StrokeShape"`` + +Type of StrokeShapeNode, representing a stroke-only prepackaged shape that appears as a leaf node in the UI + +___ + ### text • **text** = ``"Text"`` diff --git a/src/pages/references/document-sandbox/document-apis/interfaces/Point.md b/src/pages/references/document-sandbox/document-apis/interfaces/Point.md new file mode 100644 index 000000000..82a113342 --- /dev/null +++ b/src/pages/references/document-sandbox/document-apis/interfaces/Point.md @@ -0,0 +1,24 @@ +[@express-document-sdk](../overview.md) / Point + +# Interface: Point + +Represents a 2D position. + +## Table of contents + +### Properties + +- [x](Point.md#x) +- [y](Point.md#y) + +## Properties + +### x + +• **x**: `number` + +___ + +### y + +• **y**: `number` diff --git a/src/pages/references/document-sandbox/document-apis/modules/Constants.md b/src/pages/references/document-sandbox/document-apis/modules/Constants.md index c86c518ad..c4fa39d35 100644 --- a/src/pages/references/document-sandbox/document-apis/modules/Constants.md +++ b/src/pages/references/document-sandbox/document-apis/modules/Constants.md @@ -6,13 +6,13 @@ ### References -- [ArrowHeadType](Constants.md#ArrowHeadType) -- [BlendMode](Constants.md#BlendMode) -- [FillRule](Constants.md#FillRule) -- [FillType](Constants.md#FillType) -- [SceneNodeType](Constants.md#SceneNodeType) -- [StrokePosition](Constants.md#StrokePosition) -- [TextAlignment](Constants.md#TextAlignment) +- [ArrowHeadType](Constants.md#arrowheadtype) +- [BlendMode](Constants.md#blendmode) +- [FillRule](Constants.md#fillrule) +- [FillType](Constants.md#filltype) +- [SceneNodeType](Constants.md#scenenodetype) +- [StrokePosition](Constants.md#strokeposition) +- [TextAlignment](Constants.md#textalignment) ## References diff --git a/src/pages/references/document-sandbox/document-apis/overview.md b/src/pages/references/document-sandbox/document-apis/overview.md index 04652051f..a3b1a543b 100644 --- a/src/pages/references/document-sandbox/document-apis/overview.md +++ b/src/pages/references/document-sandbox/document-apis/overview.md @@ -44,8 +44,11 @@ - [ReadOnlyItemList](classes/ReadOnlyItemList.md) - [RectangleNode](classes/RectangleNode.md) - [RestrictedItemList](classes/RestrictedItemList.md) +- [SolidColorShapeNode](classes/SolidColorShapeNode.md) - [StrokableNode](classes/StrokableNode.md) +- [StrokeShapeNode](classes/StrokeShapeNode.md) - [TextNode](classes/TextNode.md) +- [UnknownNode](classes/UnknownNode.md) ### Interfaces @@ -56,6 +59,7 @@ - [IRectangularNode](interfaces/IRectangularNode.md) - [IStrokableNode](interfaces/IStrokableNode.md) - [ListItem](interfaces/ListItem.md) +- [Point](interfaces/Point.md) - [RectangleGeometry](interfaces/RectangleGeometry.md) - [Stroke](interfaces/Stroke.md) - [StrokeOptions](interfaces/StrokeOptions.md) diff --git a/src/pages/references/document-sandbox/index.md b/src/pages/references/document-sandbox/index.md index afd8c224f..96b2ef16b 100644 --- a/src/pages/references/document-sandbox/index.md +++ b/src/pages/references/document-sandbox/index.md @@ -115,7 +115,7 @@ The following [code samples](https://github.com/AdobeDocs/express-add-on-samples ### [communication-iframe-script-runtime sample](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples/communication-iframe-script-runtime) -Demonstrates the use of the communication APIs to expose and proxy APIs bidirectionally between the iframe and script runtime environments. Also includes demonstrating how to use some of the [Web APIs](./web/) such as `setTimeout()` and `console.log()`. +Demonstrates the use of the communication APIs to expose and proxy APIs bidirectionally between the iframe and script runtime environments. Also includes demonstrating how to use some of the [Web APIs](./web/) such as `console.log()`. ### [editor-apis sample](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples/editor-apis) diff --git a/src/pages/references/document-sandbox/web/index.md b/src/pages/references/document-sandbox/web/index.md index f23ccfda6..14a45b513 100644 --- a/src/pages/references/document-sandbox/web/index.md +++ b/src/pages/references/document-sandbox/web/index.md @@ -23,7 +23,7 @@ The Web APIs refer to the set of commonly used APIs that are injected by the scr ## Overview -The Web APIs provide implementations of some common objects and functions for you to use in your script code to perform things like logging to the console and setting timeouts and intervals. They are limited to a set of basic functions currently, as outlined in the next section. Most of the browsers APIs/Global Objects are not available in Script Runtime. For these, the developers can use iframe runtime environment and [communicate](../communication/index.md#expose-apis-from-the-ui) the result back to the script running inside script runtime environment. +The document sandbox runtime provides implementations of some common Web APIs to perform tasks like logging to the console. They are limited to a set of basic functions currently, as outlined in the next section. Most of the browser's usual APIs/Global Objects are not available in the document sandbox. You can invoke other browser APIs using the iframe runtime environment and [communicate](../communication/index.md#expose-apis-from-the-ui) the result back to your code running inside the sandbox runtime. @@ -60,83 +60,3 @@ Clear the console. ### console.assert() Log a message and stack trace to console if the first argument is false. - -## Additional Methods - -### setTimeout() - -An implementation of the [JavaScript `setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) method that sets a timer to execute a function or specified piece of code once the timer expires. - -#### Signature - -`setTimeout(functionRef: Function, delay: number, ...params: any[]): number` - -#### Parameters - -| Name | Type | Description | -| --------------| ------------| -----------: | -| `functionRef` | `function` | A function to be executed after the timer expires. | -| `delay` | `number` | The time, in milliseconds, that the timer should wait before the specified function or code is executed. If this parameter is omitted, a value of 0 is used, meaning execute "immediately", or more accurately, the next event cycle. | -| `params` | `any []` | Additional arguments which are passed through to the function specified by `functionRef`. | - -#### Returns - -A positive integer representing an identifier for the timeout function(aka: `timeoutID`), which can be passed to `clearTimeout()` to cancel the timeout. - -**Note:** It's guaranteed that a `timeoutID` value will never be reused by a subsequent call to `setTimeout()` or `setInterval()` on the same object (a window or a worker). - -### clearTimeout() - -The [`clearTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) method implementation cancels a timeout previously established by calling `setTimeout()`. If the parameter provided does not identify a previously established action, this method does nothing. - -#### Signature - -`clearTimeout(timeoutID: number): void` - -#### Parameters - -| Name | Type | Description | -| --------------| ------------| -----------: | -| `timeoutID` | `number` | The identifier of the timeout you want to cancel. This ID was returned by the corresponding call to `setTimeout()`. | - -#### Returns - -None (`undefined`). - -### setInterval() - -The [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval) method repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling `clearInterval()`. - -#### Signature - -`setInterval(functionRef: Function, delay: number, ...params: any[]): number` - -#### Parameters - -| Name | Type | Description | -| --------------| ------------| -----------: | -| `functionRef` | `function` | A function to be executed every delay milliseconds. The first execution happens after delay milliseconds. | -| `delay` | `number` | The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. Defaults to 0 if not specified. | -| `params` | `any []` | Additional arguments which are passed through to the function specified by func once the timer expires. | - -#### Returns - -The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to setInterval(); this value can be passed to `clearInterval()` to cancel the interval. - -### clearInterval() - -Implements the [`clearInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval) method, which cancels a timed, repeating action which was previously established by a call to `setInterval()`. If the parameter provided does not identify a previously established action, this method does nothing. - -#### Signature - -`clearInterval(intervalID: number): void` - -#### Parameters - -| Name | Type | Description | -| --------------| ------------| -----------: | -| `intervalID` | `number` | The identifier of the repeated action you want to cancel. This ID was returned by the corresponding call to `setInterval()`.| - -#### Returns - -None (`undefined`). diff --git a/src/pages/samples.md b/src/pages/samples.md index 94c7a9b73..cbc231eab 100644 --- a/src/pages/samples.md +++ b/src/pages/samples.md @@ -244,7 +244,7 @@ The following [code samples](https://github.com/AdobeDocs/express-add-on-samples ### [communication-iframe-script-runtime sample](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples/communication-iframe-script-runtime) -Demonstrates the use of the communication APIs to expose and proxy APIs bidirectionally between the iframe and document sandbox code environments. Also includes demonstrating how to use some of the [Web APIs](./references/document-sandbox/web/) such as `setTimeout()` and `console.log()`. +Demonstrates the use of the communication APIs to expose and proxy APIs bidirectionally between the iframe and document sandbox code environments. Also includes demonstrating how to use some of the [Web APIs](./references/document-sandbox/web/) such as `console.log()`. ### [editor-apis sample](https://github.com/AdobeDocs/express-add-on-samples/tree/main/script-runtime-samples/editor-apis)