From 260aefd98e9f3b9b7301252b10ab4f434e21d99a Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 12:09:29 +0200 Subject: [PATCH 1/8] fix: faq title on mobile --- src/components/content/Questions.vue | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/content/Questions.vue b/src/components/content/Questions.vue index d2dbdda..7736e1b 100644 --- a/src/components/content/Questions.vue +++ b/src/components/content/Questions.vue @@ -20,9 +20,15 @@ export default { } - From 055c05ac755c65d0a108cb4feedd9905367d02d1 Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 13:09:52 +0200 Subject: [PATCH 2/8] feat(docs): scopes --- src/content/en/docs/4.guides/8.scopes.md | 30 ++++++++++++++++++++++++ src/content/uk/docs/4.guides/8.scopes.md | 29 +++++++++++++++++++++++ 2 files changed, 59 insertions(+) diff --git a/src/content/en/docs/4.guides/8.scopes.md b/src/content/en/docs/4.guides/8.scopes.md index f846170..f490f21 100644 --- a/src/content/en/docs/4.guides/8.scopes.md +++ b/src/content/en/docs/4.guides/8.scopes.md @@ -96,4 +96,34 @@ node1.parent = undefined; await scopes.update(parent1.id) ``` +## Change the parent node padding {#change-padding} + +By default, all nodes have the same padding. You can find these values in [the API documentation](/docs/api/rete-scopes-plugin#props). The padding can be customized for each node individually using the `padding` option. + +```ts +const scopes = new ScopesPlugin({ + padding: nodeId => ({ top: 40, left: 20, right: 20, bottom: 20 }) +}); +``` +## Excluding nodes {#exclude-nodes} + +The `exclude` option allows you to exclude specific nodes from being processed by the plugin. This can be useful when you want certain nodes not to affect the size of the parent node. + +```ts +const scopes = new ScopesPlugin({ + exclude: nodeId => excludedNodes.includes(nodeId) +}); +``` + +## Changing parent node size {#parent-size} + +The generated sizes of parent nodes can be customized for specific nodes using the `size` option. This functionality is useful, for example, when child nodes have been removed, and you need to set a new size to display the layout correctly. + +```ts +const scopes = new ScopesPlugin({ + size: (nodeId, size) => ({ width: size.width, height: 100 }) +}); +``` + + Check out the complete result on the [Scopes](/examples/scopes) example page. diff --git a/src/content/uk/docs/4.guides/8.scopes.md b/src/content/uk/docs/4.guides/8.scopes.md index 83c75d5..b95aeee 100644 --- a/src/content/uk/docs/4.guides/8.scopes.md +++ b/src/content/uk/docs/4.guides/8.scopes.md @@ -96,4 +96,33 @@ node1.parent = undefined; await scopes.update(parent1.id) ``` +## Зміна відступів від батьківського вузла {#change-padding} + +За замовчуванням всі вузли мають однакові відступи. Ці значенням ви можете знайти в [документації до АПІ](/uk/docs/api/rete-scopes-plugin#props). Відступи можуть бути налаштованы для кожного вузла окремо, використовуючи опцію `padding`. + +```ts +const scopes = new ScopesPlugin({ + padding: nodeId => ({ top: 40, left: 20, right: 20, bottom: 20 }) +}); +``` +## Виключення вузлів {#exclude-nodes} + +Опція `exclude` дозволяє виключити певні вузли з обробки плагіном. Це може бути корисно, щоб деякі вузли не впливали на розмір батьківського вузла. + +```ts +const scopes = new ScopesPlugin({ + exclude: nodeId => excludedNodes.includes(nodeId) +}); +``` + +## Зміна розмірів батьківських вузлів {#parent-size} + +Сформовані розміри батьківських вузлів можна кастомізувати для окремо обраних вузлів через опцію `size`. Ця функціональність корисна, наприклад, коли дочірні вузли були видалені, і необхідно задати новий розмір для відображення компонування правильно. + +```ts +const scopes = new ScopesPlugin({ + size: (nodeId, size) => ({ width: size.width, height: 100 }) +}); +``` + Перегляньте повний результат на сторінці прикладу [Області видимості](/uk/examples/scopes). From ed20bbf2cc1293a0c7f2b78d863023ba5bbde793 Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 13:21:11 +0200 Subject: [PATCH 3/8] feat(docs): context menu --- src/content/en/docs/4.guides/6.context-menu.md | 14 ++++++++++++++ src/content/uk/docs/4.guides/6.context-menu.md | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/src/content/en/docs/4.guides/6.context-menu.md b/src/content/en/docs/4.guides/6.context-menu.md index c1b9265..30de8cb 100644 --- a/src/content/en/docs/4.guides/6.context-menu.md +++ b/src/content/en/docs/4.guides/6.context-menu.md @@ -90,6 +90,20 @@ const contextMenu = new ContextMenuPlugin({ }) ``` +## Built-in options for nodes and connections {#built-in-options} + +All nodes and connections have a `Delete` option in their context menu. This option allows you to delete a node, removing its connections first, or delete individual connections. + +Another option that you won't see by default on nodes is `Clone`. It appears for nodes that have a `clone` method. For example: + +```ts +class NodeA extends ClassicPreset.Node { + clone() { + return new NodeA() + } +} +``` + ## Custom preset {#custom-preset} While the classic preset lets you briefly specify items for the main menu and node-specific menu, it might not offer enough flexibility. In such cases, you can define your own menu items: diff --git a/src/content/uk/docs/4.guides/6.context-menu.md b/src/content/uk/docs/4.guides/6.context-menu.md index b675811..7aa51b1 100644 --- a/src/content/uk/docs/4.guides/6.context-menu.md +++ b/src/content/uk/docs/4.guides/6.context-menu.md @@ -90,6 +90,20 @@ const contextMenu = new ContextMenuPlugin({ }) ``` +## Вбудовані опції вузлів та з'єднань {#built-in-options} + +Всі вузли та з'єднання мають опцію `Delete` в їх контекстном меню. Вона відповідно дозволяє видалити вузол, перед тим видаливши його з'єднання, або видалити окремі з'єднання. + +Інша опція, яку за замовчуванням ви не побачив на вузлах - це `Clone`. Вона відображається для вузлів, які мають метод `clone`. До прикладу: + +```ts +class NodeA extends ClassicPreset.Node { + clone() { + return new NodeA() + } +} +``` + ## Кастомний пресет {#custom-preset} Хоча класичний пресет дозволяє коротко вказати пункти для головного меню та меню для певного вузла, він може не запропонувати достатньої гнучкості. У таких випадках ви можете визначити власні пункти меню: From 69c6bfde162cccde18dc5db83a56c4db75578c0c Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 13:44:24 +0200 Subject: [PATCH 4/8] feat(docs): warning in faq --- src/content/en/docs/24.FAQ.md | 7 +++++++ src/content/uk/docs/24.FAQ.md | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/content/en/docs/24.FAQ.md b/src/content/en/docs/24.FAQ.md index 316a915..2e91495 100644 --- a/src/content/en/docs/24.FAQ.md +++ b/src/content/en/docs/24.FAQ.md @@ -292,4 +292,11 @@ keywords: return { x: halfWidth - x / k, y: halfHeight - y / k } ``` :: + ::qa{question="What does the warning 'Found more than one element for socket with same key and side' mean?" id="sockets-warning"} + The warning "Found more than one element for socket with same key and side" means that there are duplicate sockets in the editor that were not properly removed after an update, or due to an asynchronous approach when unmounting components by different UI frameworks, the lifecycle of old and new ones overlaps. + + In the first case, when the number of these warnings constantly accumulates, you most likely have a memory leak problem because some custom node was not correctly unmounted. + + In the second case, the warning can be avoided by adding a delay between removing the scheme/node and mounting a new one with the same identifiers. In the worst case, this warning should not indicate memory leak issues, so you can ignore it. + :: :: diff --git a/src/content/uk/docs/24.FAQ.md b/src/content/uk/docs/24.FAQ.md index 0d02a09..551b657 100644 --- a/src/content/uk/docs/24.FAQ.md +++ b/src/content/uk/docs/24.FAQ.md @@ -290,4 +290,11 @@ keywords: return { x: halfWidth - x / k, y: halfHeight - y / k } ``` :: + ::qa{question="Що означає попередження 'Found more than one element for socket with same key and side'?" id="sockets-warning"} + Попередження "Found more than one element for socket with same key and side" означає, що в редакторі дублюються сокети, які не було належним чином видалено після оновлення, або через асинхронний підхід при розмонтуванні компонентів різними UI фреймворками життєвий цикл старих та нових пересікається. + + В першому випадку, коли кількість цих ворнінгів постійно накоплюється, скоріше за все ви маєте проблему з витіком пам'яті через те, що який-сь кастомних вузол не було коректно розмонтовано. + + В другому випадку, ворнінга можна уникнути шляхом додавання затримки між видаленням схеми/вузла і монтуванням нової з тими самими ідентифікаторами. В краймному випадку, цей ворнінг не повинен свідчити про проблеми з витіканням пам'яті, тому можете його проігнорувати. + :: :: From 57158a5a4b72529c681d27f1242f364bb1e2888f Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 13:51:14 +0200 Subject: [PATCH 5/8] feat(docs): select/deselect event in faq --- src/content/en/docs/24.FAQ.md | 3 +++ src/content/uk/docs/24.FAQ.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/content/en/docs/24.FAQ.md b/src/content/en/docs/24.FAQ.md index 2e91495..69a9e89 100644 --- a/src/content/en/docs/24.FAQ.md +++ b/src/content/en/docs/24.FAQ.md @@ -299,4 +299,7 @@ keywords: In the second case, the warning can be avoided by adding a delay between removing the scheme/node and mounting a new one with the same identifiers. In the worst case, this warning should not indicate memory leak issues, so you can ignore it. :: + ::qa{question="How to track the select or deselect event of a node?" id="select-deselect-event"} + The framework does not have a reserved event for this. Instead, you can [/docs/guides/selectable#extend-selector](extend the selector) by triggering events in the relevant methods. + :: :: diff --git a/src/content/uk/docs/24.FAQ.md b/src/content/uk/docs/24.FAQ.md index 551b657..614ca89 100644 --- a/src/content/uk/docs/24.FAQ.md +++ b/src/content/uk/docs/24.FAQ.md @@ -297,4 +297,7 @@ keywords: В другому випадку, ворнінга можна уникнути шляхом додавання затримки між видаленням схеми/вузла і монтуванням нової з тими самими ідентифікаторами. В краймному випадку, цей ворнінг не повинен свідчити про проблеми з витіканням пам'яті, тому можете його проігнорувати. :: + ::qa{question="Як відслідковувати подію вибору або скасування вибору вузла?" id="select-deselect-event"} + Фреймворк не має зарезервований подій для цього. Натомість ви можете [/uk/docs/guides/selectable#extend-selector](розширити селектор), зробивши викидування подій у відповідних методах. + :: :: From 6c8923b49eb4b805994aa9f3b4e90ccd4e135c8f Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 14:12:44 +0200 Subject: [PATCH 6/8] feat(docs): context menu trigger --- src/content/en/docs/4.guides/6.context-menu.md | 17 +++++++++++++++++ src/content/uk/docs/4.guides/6.context-menu.md | 17 +++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/src/content/en/docs/4.guides/6.context-menu.md b/src/content/en/docs/4.guides/6.context-menu.md index 30de8cb..76d0844 100644 --- a/src/content/en/docs/4.guides/6.context-menu.md +++ b/src/content/en/docs/4.guides/6.context-menu.md @@ -135,4 +135,21 @@ const contextMenu = new ContextMenuPlugin({ where `context` is `'root'`, node instance or connection instance +## Open the menu programmatically #{trigger-context-menu} + +To manually open the context menu, you need to create a `PointerEvent` with the required coordinates and call the `area.emit()` method: + +```ts +const event = new PointerEvent('contextmenu', { + clientX: x, + clientY: y, +}) + +await area.emit({ type: 'contextmenu', data: { event, context } }) +``` + +where +- `x`, `y` are numerical values (for example, the cursor coordinates, which you should extract separately), +- `context` can be `'root'` or an instance of a node, connection, or other elements in your editor. + Check out the complete result on the [Context menu](/examples/context-menu) example page. diff --git a/src/content/uk/docs/4.guides/6.context-menu.md b/src/content/uk/docs/4.guides/6.context-menu.md index 7aa51b1..1eb1aad 100644 --- a/src/content/uk/docs/4.guides/6.context-menu.md +++ b/src/content/uk/docs/4.guides/6.context-menu.md @@ -135,4 +135,21 @@ const contextMenu = new ContextMenuPlugin({ де `context` - це `'root'`, екземпляр вузла або екземпляр з'єднання +## Відкрити меню програмно #{trigger-context-menu} + +Щоб вручну відкрити контекстне меню, потрібно створити подію типу `PointerEvent` з необхідними координатами та викликати метод `area.emit()`: + +```ts +const event = new PointerEvent('contextmenu', { + clientX: x, + clientY: y, +}) + +await area.emit({ type: 'contextmenu', data: { event, context } }) +``` + +де +- `x`, `y` - це числові значення (наприклад координати курсору, які ви повинні отримати окремо), +- `context` - може бути `'root'` або екземпляр вузла, з'єднання або іншого виду елдементів вашого редактора + Перегляньте повний результат на сторінці прикладу [Контекстне меню](/uk/examples/context-menu). From d80a4cccd7fc12acc1160b9366b4ca761798e191 Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 14:17:44 +0200 Subject: [PATCH 7/8] feat(docs): dblckick zoom in faq --- src/content/en/docs/24.FAQ.md | 9 +++++++++ src/content/uk/docs/24.FAQ.md | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/content/en/docs/24.FAQ.md b/src/content/en/docs/24.FAQ.md index 69a9e89..5626e85 100644 --- a/src/content/en/docs/24.FAQ.md +++ b/src/content/en/docs/24.FAQ.md @@ -302,4 +302,13 @@ keywords: ::qa{question="How to track the select or deselect event of a node?" id="select-deselect-event"} The framework does not have a reserved event for this. Instead, you can [/docs/guides/selectable#extend-selector](extend the selector) by triggering events in the relevant methods. :: + ::qa{question="How to prevent/disable zoom on dblclick?" id="dblclick-prevent-zoom"} + + ```ts + area.addPipe(context => { + if (context.type === 'zoom' && context.data.source === 'dblclick') return + return context + }) + ``` + :: :: diff --git a/src/content/uk/docs/24.FAQ.md b/src/content/uk/docs/24.FAQ.md index 614ca89..b189feb 100644 --- a/src/content/uk/docs/24.FAQ.md +++ b/src/content/uk/docs/24.FAQ.md @@ -300,4 +300,13 @@ keywords: ::qa{question="Як відслідковувати подію вибору або скасування вибору вузла?" id="select-deselect-event"} Фреймворк не має зарезервований подій для цього. Натомість ви можете [/uk/docs/guides/selectable#extend-selector](розширити селектор), зробивши викидування подій у відповідних методах. :: + ::qa{question="Як вимкнути зум при dblclick?" id="dblclick-prevent-zoom"} + + ```ts + area.addPipe(context => { + if (context.type === 'zoom' && context.data.source === 'dblclick') return + return context + }) + ``` + :: :: From 364c42325732c3559a9eb1550501fb4b25e47a2d Mon Sep 17 00:00:00 2001 From: Ni55aN Date: Sun, 10 Nov 2024 14:32:08 +0200 Subject: [PATCH 8/8] feat(docs): select/unselect node using API --- src/content/en/docs/4.guides/5.selectable/0.index.md | 12 ++++++++++++ src/content/uk/docs/4.guides/5.selectable/0.index.md | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/src/content/en/docs/4.guides/5.selectable/0.index.md b/src/content/en/docs/4.guides/5.selectable/0.index.md index 3d85efb..ea80df5 100644 --- a/src/content/en/docs/4.guides/5.selectable/0.index.md +++ b/src/content/en/docs/4.guides/5.selectable/0.index.md @@ -31,6 +31,18 @@ AreaExtensions.selectableNodes(area, selector, { accumulating }); The code indicates that users can select multiple nodes by holding down the Ctrl key, then these nodes can be moved together +## Selection or deselecting {#select-deselect} + +In addition to user actions, a node can be selected or deselected through the built-in methods of `selectableNodes` + +```ts +const selectableNodes = AreaExtensions.selectableNodes(area, selector, { accumulating }); + +selectableNodes.select(nodeId) // select a single node, the previous selection will be cleared +selectableNodes.select(nodeId, true) // select a node without clearing previous selections +selectableNodes.unselect(nodeId) // remove the node from the selected li +``` + ## Selectable custom elements {#selectable-custom-elements} All elements added to the area can be added to the selector. They can act like nodes: can be selected and moved alongside other elements that are currently selected diff --git a/src/content/uk/docs/4.guides/5.selectable/0.index.md b/src/content/uk/docs/4.guides/5.selectable/0.index.md index 2e83ba1..e59b4f2 100644 --- a/src/content/uk/docs/4.guides/5.selectable/0.index.md +++ b/src/content/uk/docs/4.guides/5.selectable/0.index.md @@ -31,6 +31,18 @@ AreaExtensions.selectableNodes(area, selector, { accumulating }); Код вказує, що користувачі можуть вибирати кілька вузлів, утримуючи натиснутою клавішу Ctrl, а потім ці вузли можна переміщувати разом +## Вибір або відміна вибору {#select-deselect} + +Окрім дій користувача, вибрати або відмінити вибір вузла можна через вбудовані методи `selectableNodes` + +```ts +const selectableNodes = AreaExtensions.selectableNodes(area, selector, { accumulating }); + +selectableNodes.select(nodeId) // вибір одного вузла, попередній вибір буде скинуто +selectableNodes.select(nodeId, true) // вибір вузла, не скидаючи вибір попередніх +selectableNodes.unselect(nodeId) // видалити вузол з вибраних +``` + ## Вибір кастомних елементів {#selectable-custom-elements} Усі елементи, додані до області, можна додати до селектора. Вони можуть діяти як вузли: їх можна вибирати та переміщувати разом з іншими елементами, які наразі виділено