feat: faq dynamic zoom

retejs · Sep 25, 2023 · 36043c0 · 36043c0
1 parent fa4cd75
commit 36043c0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/content/en/docs/24.FAQ.md b/content/en/docs/24.FAQ.md
@@ -28,6 +28,22 @@
     area.area.setZoomHandler(null)
     ```
   ::
+  ::qa{question="How to enable/disable zoom dynamically?" id="dynamic-zoom"}
+    Replace the zoom handler with `null` on some event and restore it on opposite  (e.g. Ctrl press/release)
+
+    ```ts
+    import { Zoom } from 'rete-area-plugin'
+
+    // call on init
+    area.area.setZoomHandler(null)
+
+    // call on Ctrl press
+    area.area.setZoomHandler(new Zoom(0.1))
+
+    // call on Ctrl release
+    area.area.setZoomHandler(null)
+    ```
+  ::
   ::qa{question="How to pan the area using the middle mouse button?" id="pan-middle-mouse-button"}
     Replace the drag handler for a specific area by calling `setDragHandler`
 
@@ -121,12 +137,12 @@
 
     Check the relevant render plugin guide for controls: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](guides/renderers/svelte#controls)
   ::
-  ::qa{question="Is there a way to make the text within a node selectable?"}
+  ::qa{question="Is there a way to make the text within a node selectable?" id="user-select"}
     By default, a node is configured with the CSS property `user-select: none` to prevent conflict between text selection and node dragging.
 
     Therefore, to enable text selection within a custom node component, you need to specify `user-select: all` property for the desired element within the node. Additionally, ensure you call `e.stopPropagation()` on the `pointerdown`` event to prevent text selection interruptions while dragging.
   ::
-  ::qa{question="How to detect click on the node?"}
+  ::qa{question="How to detect click on the node?" id="nodepicked"}
     Whenever a user clicks on the node, the `nodepicked` event is fired:
 
     ```ts

diff --git a/content/uk/docs/24.FAQ.md b/content/uk/docs/24.FAQ.md
@@ -28,6 +28,22 @@
     area.area.setZoomHandler(null)
     ```
   ::
+  ::qa{question="Як увімкнути/вимкнути зум динамічно?" id="dynamic-zoom"}
+     Замініть обробник масштабування на `null` для певної події та відновіть його для протилежної (наприклад, натискання/відпускання Ctrl)
+
+    ```ts
+    import { Zoom } from 'rete-area-plugin'
+
+    // виклик при ініціалізації
+    area.area.setZoomHandler(null)
+
+    // виклик при натисканні Ctrl
+    area.area.setZoomHandler(new Zoom(0.1))
+
+    // виклик при відпусканні Ctrl
+    area.area.setZoomHandler(null)
+    ```
+  ::
   ::qa{question="Як перетягувати область за допомогою середньої кнопки миші?" id="pan-middle-mouse-button"}
     Замініть обробник перетягування для певної області, викликавши `setDragHandler`
 
@@ -119,12 +135,12 @@
 
     Ознайомтесь з елементами керування у відповідному гайді рендер плагіна: [React.js](guides/renderers/react#controls), [Vue.js](guides/renderers/vue#controls), [Angular](guides/renderers/angular#controls), [Svelte](/uk/docs/guides/renderers/svelte#controls)
   ::
-  ::qa{question="Чи є спосіб зробити текст у вузлі доступним для виділення?"}
+  ::qa{question="Чи є спосіб зробити текст у вузлі доступним для виділення?" id="user-select"}
      За замовчуванням вузол налаштовано з властивістю CSS `user-select: none`, щоб запобігти конфлікту між виділенням тексту та перетягуванням вузла.
 
      Тому, щоб увімкнути виділення тексту в кастомному компоненті вузла, вам потрібно вказати властивість `user-select: all` для потрібного елемента в межах вузла. Крім того, переконайтеся, що ви викликаєте `e.stopPropagation()` у події `pointerdown``, щоб запобігти перериванню виділення тексту під час перетягування.
   ::
-  ::qa{question="Як виявити клік на вузлі?"}
+  ::qa{question="Як виявити клік на вузлі?" id="nodepicked"}
     Кожного разу, коли користувач натискає на вузол, запускається подія `nodepicked`:
 
     ```ts