Merge pull request #168 from retejs/docs

Docs

src/components/content/Questions.vue

@@ -20,9 +20,15 @@ export default {
 }
 </script>
 
-<style lang="sass">
-.collapse p:first-child
-  margin: 0
-.collapse p:last-child
-  margin-bottom: 0
+<style lang="sass" scoped>
+.collapse
+  p:first-child
+    margin: 0
+  p:last-child
+    margin-bottom: 0
+  :deep(.ivu-collapse-header)
+    height: auto
+    h1,h2,h3,h4,h5,h6
+      display: inline
+
 </style>

src/content/en/docs/24.FAQ.md

@@ -292,4 +292,23 @@ 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.
+  ::
+  ::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
+      })
+    ```
+  ::
 ::

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

src/content/en/docs/4.guides/6.context-menu.md

@@ -90,6 +90,20 @@ const contextMenu = new ContextMenuPlugin<Schemes>({
 })
 ```
 
+## 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:
@@ -121,4 +135,21 @@ const contextMenu = new ContextMenuPlugin<Schemes>({
 
 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.

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<Schemes>({
+  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<Schemes>({
+  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<Schemes>({
+  size: (nodeId, size) => ({ width: size.width, height: 100 })
+});
+```
+
+
 Check out the complete result on the [Scopes](/examples/scopes) example page.

src/content/uk/docs/24.FAQ.md

@@ -290,4 +290,23 @@ 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 фреймворками життєвий цикл старих та нових пересікається.
+
+    В першому випадку, коли кількість цих ворнінгів постійно накоплюється, скоріше за все ви маєте проблему з витіком пам'яті через те, що який-сь кастомних вузол не було коректно розмонтовано.
+
+    В другому випадку, ворнінга можна уникнути шляхом додавання затримки між видаленням схеми/вузла і монтуванням нової з тими самими ідентифікаторами. В краймному випадку, цей ворнінг не повинен свідчити про проблеми з витіканням пам'яті, тому можете його проігнорувати.
+  ::
+  ::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
+      })
+    ```
+  ::
 ::

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}
 
 Усі елементи, додані до області, можна додати до селектора. Вони можуть діяти як вузли: їх можна вибирати та переміщувати разом з іншими елементами, які наразі виділено

src/content/uk/docs/4.guides/6.context-menu.md

@@ -90,6 +90,20 @@ const contextMenu = new ContextMenuPlugin<Schemes>({
 })
 ```
 
+## Вбудовані опції вузлів та з'єднань {#built-in-options}
+
+Всі вузли та з'єднання мають опцію `Delete` в їх контекстном меню. Вона відповідно дозволяє видалити вузол, перед тим видаливши його з'єднання, або видалити окремі з'єднання.
+
+Інша опція, яку за замовчуванням ви не побачив на вузлах - це `Clone`. Вона відображається для вузлів, які мають метод `clone`. До прикладу:
+
+```ts
+class NodeA extends ClassicPreset.Node {
+  clone() {
+    return new NodeA()
+  }
+}
+```
+
 ## Кастомний пресет {#custom-preset}
 
 Хоча класичний пресет дозволяє коротко вказати пункти для головного меню та меню для певного вузла, він може не запропонувати достатньої гнучкості. У таких випадках ви можете визначити власні пункти меню:
@@ -121,4 +135,21 @@ const contextMenu = new ContextMenuPlugin<Schemes>({
 
 де `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).

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<Schemes>({
+  padding: nodeId => ({ top: 40, left: 20, right: 20, bottom: 20 })
+});
+```
+## Виключення вузлів {#exclude-nodes}
+
+Опція `exclude` дозволяє виключити певні вузли з обробки плагіном. Це може бути корисно, щоб деякі вузли не впливали на розмір батьківського вузла.
+
+```ts
+const scopes = new ScopesPlugin<Schemes>({
+  exclude: nodeId => excludedNodes.includes(nodeId)
+});
+```
+
+## Зміна розмірів батьківських вузлів {#parent-size}
+
+Сформовані розміри батьківських вузлів можна кастомізувати для окремо обраних вузлів через опцію `size`. Ця функціональність корисна, наприклад, коли дочірні вузли були видалені, і необхідно задати новий розмір для відображення компонування правильно.
+
+```ts
+const scopes = new ScopesPlugin<Schemes>({
+  size: (nodeId, size) => ({ width: size.width, height: 100 })
+});
+```
+
 Перегляньте повний результат на сторінці прикладу [Області видимості](/uk/examples/scopes).