diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md index c98388df8..2612e3ba0 100644 --- a/code/CHANGELOG.md +++ b/code/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - [#305](https://github.com/InditexTech/weavejs/issues/305) Don't allow to transform when more than one element is selected +- [#308](https://github.com/InditexTech/weavejs/issues/308) Allow to configure transformer configuration per node ### Fixed diff --git a/code/packages/sdk/src/index.ts b/code/packages/sdk/src/index.ts index 80511c81f..21120e084 100644 --- a/code/packages/sdk/src/index.ts +++ b/code/packages/sdk/src/index.ts @@ -4,7 +4,9 @@ export { Weave } from './weave'; export { WeaveStore } from './stores/store'; +export * from './stores/types'; export { WeaveNode } from './nodes/node'; +export * from './nodes/constants'; export { WeaveAction } from './actions/action'; export * from './actions/types'; export { WeavePlugin } from './plugins/plugin'; diff --git a/code/packages/sdk/src/nodes/constants.ts b/code/packages/sdk/src/nodes/constants.ts new file mode 100644 index 000000000..f7cdcd3c1 --- /dev/null +++ b/code/packages/sdk/src/nodes/constants.ts @@ -0,0 +1,14 @@ +// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.) +// +// SPDX-License-Identifier: Apache-2.0 + +export const DEFAULT_ANCHORS_ENABLED: string[] = [ + 'top-left', + 'top-center', + 'top-right', + 'middle-right', + 'middle-left', + 'bottom-left', + 'bottom-center', + 'bottom-right', +]; diff --git a/code/packages/sdk/src/nodes/frame/constants.ts b/code/packages/sdk/src/nodes/frame/constants.ts index 6d9b17d94..83f89007b 100644 --- a/code/packages/sdk/src/nodes/frame/constants.ts +++ b/code/packages/sdk/src/nodes/frame/constants.ts @@ -82,6 +82,11 @@ export const WEAVE_FRAME_NODE_DEFAULT_CONFIG = { borderColor: '#ff6863ff', fill: '#ffffffff', }, + transform: { + rotateEnabled: false, + resizeEnabled: false, + enabledAnchors: [] as string[], + }, }; export const WEAVE_FRAME_NODE_DEFAULT_PROPS = { diff --git a/code/packages/sdk/src/nodes/frame/frame.ts b/code/packages/sdk/src/nodes/frame/frame.ts index 32d0ee4c3..3846759d5 100644 --- a/code/packages/sdk/src/nodes/frame/frame.ts +++ b/code/packages/sdk/src/nodes/frame/frame.ts @@ -102,6 +102,10 @@ export class WeaveFrameNode extends WeaveNode { name: 'node', }); + frame.getTransformerProperties = () => { + return this.config.transform; + }; + const background = new Konva.Rect({ id: `${id}-bg`, nodeId: id, diff --git a/code/packages/sdk/src/nodes/frame/types.ts b/code/packages/sdk/src/nodes/frame/types.ts index ccf92f44c..2ea4bb52b 100644 --- a/code/packages/sdk/src/nodes/frame/types.ts +++ b/code/packages/sdk/src/nodes/frame/types.ts @@ -7,6 +7,7 @@ import type { WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, } from './constants'; +import type { WeaveNodeTransformerProperties } from '../types'; export type WeaveFrameNodeSizesOrientationKeys = keyof typeof WEAVE_FRAME_NODE_SIZES_ORIENTATION; @@ -40,6 +41,7 @@ export type WeaveFrameProperties = { borderColor: string; fill: string; }; + transform: WeaveNodeTransformerProperties; }; export type WeaveFrameAttributes = WeaveElementAttributes & { diff --git a/code/packages/sdk/src/nodes/node-extensions.d.ts b/code/packages/sdk/src/nodes/node-extensions.d.ts new file mode 100644 index 000000000..a2138a340 --- /dev/null +++ b/code/packages/sdk/src/nodes/node-extensions.d.ts @@ -0,0 +1,11 @@ +// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.) +// +// SPDX-License-Identifier: Apache-2.0 + +import 'konva'; + +declare module 'konva/lib/Node' { + interface Node { + getTransformerProperties(): WeaveNodeTransformerProperties; + } +} diff --git a/code/packages/sdk/src/nodes/node.ts b/code/packages/sdk/src/nodes/node.ts index 8bc5f23fd..91bb4c4ac 100644 --- a/code/packages/sdk/src/nodes/node.ts +++ b/code/packages/sdk/src/nodes/node.ts @@ -21,6 +21,16 @@ import { moveNodeToContainer, } from '@/utils'; import type { WeaveNodesSnappingPlugin } from '@/plugins/nodes-snapping/nodes-snapping'; +import './node-extensions.d'; +import { DEFAULT_ANCHORS_ENABLED } from './constants'; + +Konva.Node.prototype.getTransformerProperties = function () { + return { + rotateEnabled: true, + resizeEnabled: true, + enabledAnchors: DEFAULT_ANCHORS_ENABLED, + }; +}; export abstract class WeaveNode implements WeaveNodeBase { protected instance!: Weave; diff --git a/code/packages/sdk/src/nodes/types.ts b/code/packages/sdk/src/nodes/types.ts new file mode 100644 index 000000000..78672b3cf --- /dev/null +++ b/code/packages/sdk/src/nodes/types.ts @@ -0,0 +1,9 @@ +// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.) +// +// SPDX-License-Identifier: Apache-2.0 + +export type WeaveNodeTransformerProperties = { + rotateEnabled: boolean; + resizeEnabled: boolean; + enabledAnchors: string[]; +}; diff --git a/code/packages/sdk/src/plugins/nodes-selection/nodes-selection.ts b/code/packages/sdk/src/plugins/nodes-selection/nodes-selection.ts index c9440b31c..b0c0239ef 100644 --- a/code/packages/sdk/src/plugins/nodes-selection/nodes-selection.ts +++ b/code/packages/sdk/src/plugins/nodes-selection/nodes-selection.ts @@ -652,6 +652,12 @@ export class WeaveNodesSelectionPlugin extends WeavePlugin { ) { this.tr.enabledAnchors(this.defaultEnabledAnchors); } + if (nodesSelected === 1 && nodeTargeted.getTransformerProperties) { + this.tr.setAttrs({ + ...nodeTargeted.getTransformerProperties(), + }); + this.tr.forceUpdate(); + } if (areNodesSelected) { stage.container().tabIndex = 1; diff --git a/docs/content/docs/main/build/nodes/index.mdx b/docs/content/docs/main/build/nodes/index.mdx index d0c677ffb..ed5d4e158 100644 --- a/docs/content/docs/main/build/nodes/index.mdx +++ b/docs/content/docs/main/build/nodes/index.mdx @@ -4,6 +4,7 @@ description: Nodes maintained by Weave.js team --- import { CpuIcon, Database } from "lucide-react"; +import { Separator } from "@/components/separator"; ## Introduction @@ -161,6 +162,31 @@ onRender(props: WeaveElementAttributes): WeaveElementInstance The `onRender` method is the one responsible for rendering the node on the canvas, It's a good place to initialize the nodes, events, etc. + + +We extend the `Konva.Node` class to define a function: + +```ts +getTransformerProperties(): WeaveNodeTransformerProperties +``` + +That you can override, allowing to define when the node is selected if can: rotate, resize and if is resizable which anchors for resizing will be available. + +By default, all nodes can rotate, resize and the default anchors are: + +```ts +const DEFAULT_ANCHORS_ENABLED: string[] = [ + "top-left", + "top-center", + "top-right", + "middle-right", + "middle-left", + "bottom-left", + "bottom-center", + "bottom-right", +]; +``` + #### onUpdate ```ts diff --git a/docs/content/docs/main/changelog/prerelease/0.20.0.mdx b/docs/content/docs/main/changelog/prerelease/0.20.0.mdx index cbbd7dd0c..65b39e4f0 100644 --- a/docs/content/docs/main/changelog/prerelease/0.20.0.mdx +++ b/docs/content/docs/main/changelog/prerelease/0.20.0.mdx @@ -10,6 +10,7 @@ description: Selection & grouping bugfixes ### Added - [#305](https://github.com/InditexTech/weavejs/issues/305) Don't allow to transform when more than one element is selected +- [#308](https://github.com/InditexTech/weavejs/issues/308) Allow to configure transformer configuration per node ### Fixed