Merge pull request #135 from retejs/dev

feat: add Panning boundary example

content/en/examples/16.viewport-bound.md

@@ -13,6 +13,7 @@ navigation:
 ::references
 :ref-example{title="Area extensions" link="/examples/area-extensions"}
 :ref-github{title="Area plugin" link="https://github.com/retejs/area-plugin"}
+:ref-example{title="Panning boundary" link="/examples/panning-boundary"}
 ::
 
 This example illustrates the process of handling area coordinates, performing conversions between different coordinate systems, and harnessing a versatile event system to restrict node positions.

content/en/examples/9.panning-boundary.md

@@ -0,0 +1,21 @@
+---
+image:
+  src: panning-boundary.gif
+description: Learn how to implement a panning boundary in your editor. Discover how the panning speed adjusts based on the distance from the cursor with a dragged node to the editor's boundaries
+keywords: panning,boundary
+navigation:
+  preview: panning-boundary.gif
+---
+
+# Panning boundary
+
+::references
+:ref-github{title="Plugin" link="https://github.com/retejs/area-plugin"}
+:ref-example{title="Viewport-bound nodes" link="/examples/viewport-bound"}
+::
+
+This example demonstrates the implementation of panning the area when the cursor with a dragged node is approaches the editor's boundary. Depending on the distance to any of the area's boundaries, starting from a certain threshold, the panning speed will be inversely proportional to the distance to the boundary.
+
+:example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
+
+Although this example was originally designed for React.js, the showcased feature is completely framework-agnostic. You can seamlessly integrate it into your application on a different stack by copying the feature module and connecting it into your editor.

content/uk/examples/16.viewport-bound.md

@@ -13,6 +13,7 @@ navigation:
 ::references
 :ref-example{title="Розширення області" link="/uk/examples/area-extensions"}
 :ref-github{title="Плагін області" link="https://github.com/retejs/area-plugin"}
+:ref-example{title="Межа панорамування" link="/uk/examples/panning-boundary"}
 ::
 
 Цей приклад ілюструє процес керування координатами області, виконання перетворень між різними системами координат і використання гнучкої системи подій для обмеження позицій вузлів.

content/uk/examples/9.panning-boundary.md

@@ -0,0 +1,21 @@
+---
+image:
+  src: panning-boundary.gif
+description: Дізнайтеся, як імплементувати межу панорамування у вашому редакторі. Дізнайтеся, як швидкість панорамування регулюється залежно від відстані від курсора з перетягнутим вузлом до меж редактора
+keywords: панорамування,межа
+navigation:
+  preview: panning-boundary.gif
+---
+
+# Межа панорамування
+
+::references
+:ref-github{title="Плагін" link="https://github.com/retejs/area-plugin"}
+:ref-example{title="Обмеження вузлів" link="/uk/examples/viewport-bound"}
+::
+
+Цей приклад демонструє реалізацію панорамування області, коли курсор із перетягуваним вузлом наближається до межі редактора. Залежно від відстані до будь-якої з меж області, починаючи з певного порогу, швидкість панорамування буде обернено пропорційна відстані до межі.
+
+:example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"}
+
+Хоча цей приклад спочатку був розроблений для React.js, показана функція повністю не залежить від фреймворку. Ви можете легко інтегрувати його у свій додаток на іншому стеку, скопіювавши модуль функцій і підключивши його до свого редактора.