From fb1f2ceb0a0e97ce813ef30b491dfc284e786e68 Mon Sep 17 00:00:00 2001
From: Ni55aN <stoliarov.v.s@gmail.com>
Date: Fri, 13 Oct 2023 19:36:16 +0300
Subject: [PATCH] feat: add Panning boundary example

---
 content/en/examples/16.viewport-bound.md  |  1 +
 content/en/examples/9.panning-boundary.md | 21 +++++++++++++++++++++
 content/uk/examples/16.viewport-bound.md  |  1 +
 content/uk/examples/9.panning-boundary.md | 21 +++++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 content/en/examples/9.panning-boundary.md
 create mode 100644 content/uk/examples/9.panning-boundary.md

diff --git a/content/en/examples/16.viewport-bound.md b/content/en/examples/16.viewport-bound.md
index f0ac27cf..70403305 100644
--- a/content/en/examples/16.viewport-bound.md
+++ b/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.
diff --git a/content/en/examples/9.panning-boundary.md b/content/en/examples/9.panning-boundary.md
new file mode 100644
index 00000000..7be261c0
--- /dev/null
+++ b/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.
diff --git a/content/uk/examples/16.viewport-bound.md b/content/uk/examples/16.viewport-bound.md
index d6d9474b..ef1fd90c 100644
--- a/content/uk/examples/16.viewport-bound.md
+++ b/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"}
 ::
 
 Цей приклад ілюструє процес керування координатами області, виконання перетворень між різними системами координат і використання гнучкої системи подій для обмеження позицій вузлів.
diff --git a/content/uk/examples/9.panning-boundary.md b/content/uk/examples/9.panning-boundary.md
new file mode 100644
index 00000000..b1b3bb77
--- /dev/null
+++ b/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, показана функція повністю не залежить від фреймворку. Ви можете легко інтегрувати його у свій додаток на іншому стеку, скопіювавши модуль функцій і підключивши його до свого редактора.