diff --git a/content/en/docs/24.FAQ.md b/content/en/docs/24.FAQ.md index 6ffc4aa2..de2f28e3 100644 --- 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 index 65e94f78..5b21a65f 100644 --- 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