diff --git a/content/ru/docs/1.index.md b/content/ru/docs/1.index.md new file mode 100644 index 00000000..9e2ce02a --- /dev/null +++ b/content/ru/docs/1.index.md @@ -0,0 +1,37 @@ +--- +description: Rete.js — это фреймворк для создания визуальных интерфейсов и рабочих процессов. Он предоставляет готовые решения для визуализации с использованием различных библиотек и фреймворков, а также решения для обработки графов на основе подходов потока данных и потока управления. +keywords: введение, экосистема +--- + +# Введение + +:introduction + +**Rete.js** (произносится /ˈriː.ti/, что означает "сеть" на итальянском) — это фреймворк для создания визуальных интерфейсов и рабочих процессов. Он предоставляет готовые решения для визуализации с использованием различных библиотек и фреймворков, а также решения для обработки графов на основе подходов потока данных и потока управления. + +::alert +**Вы читаете документацию для Rete.js v2** + +- Документация Rete.js v1 по-прежнему доступна по адресу [rete.js.org](https://rete.js.org) +- Переходите с Rete.js v1? Посмотрите руководство [Миграция](/ru/docs/migration). +:: + +В интерактивном примере выше вы можете увидеть нотацию основных элементов классического редактора и обработку графа с использованием механизма на основе потока данных. Это демонстрирует основные возможности фреймворка: + +- **Визуализация**: вы можете выбрать React.js, Vue.js, Angular или Svelte для визуализации узлов, сокетов, контролов и связей. Эти визуальные компоненты можно настроить под ваши конкретные потребности, создавая специальные компоненты для каждого фреймворка, и все они могут сосуществовать в одном редакторе. +- **Обработка**: фреймворк предлагает различные типы механизмов, позволяющих обрабатывать графы в зависимости от их природы, включая поток данных и поток управления. Эти типы можно комбинировать в одном графе. + +:youtube-video{name="intro"} + +### Экосистема {#ecosystem} + +Фреймворк состоит из различных пакетов, включая основной пакет `rete` и различные плагины. + +Этот подход обеспечивает гибкость выбора только необходимых пакетов для вашего конкретного использования, избегая ненужных зависимостей. Он также предоставляет гибкость выбора различных версий (например, тестирование RC-версии определенного плагина) и замены этих пакетов вашими собственными сборками (форками или плагинами, созданными с нуля). + +Каждый из пакетов имеет собственное хранилище, обеспечивая гибкость разработки, но также добавляя дополнительные расходы. По этой причине был создан **Rete CLI** для создания модулей на TypeScript с встроенной поддержкой ESLint и Jest, что уменьшает шаблонный код и предоставляет базовые инструменты для разработки и отладки плагинов, что, в конечном итоге, экономит время разработчиков. + +Rete.js предоставляет разнообразные удобные ресурсы и инструменты для быстрого старта: +- **Примеры**: посмотрите страницу [Примеры](/ru/examples) или [Codesandbox](https://codesandbox.io/search?refinementList%5Btags%5D%5B0%5D=rete.js) для примеров кода. +- **Rete Kit**: с помощью этого инструмента легко создать базовый проект для выбранного вами фреймворка. Чтобы узнать больше, посетите страницу [Rete Kit](/ru/docs/development/rete-kit). +- **Руководства**: получите практический опыт, следуя [пошаговым инструкциям](/ru/docs/guides/basic). Это позволит вам изучить доступные функции и узнать, как расширить и настроить фреймворк в соответствии с вашими потребностями. diff --git a/content/ru/docs/2.getting-started.md b/content/ru/docs/2.getting-started.md new file mode 100644 index 00000000..38339b85 --- /dev/null +++ b/content/ru/docs/2.getting-started.md @@ -0,0 +1,69 @@ +--- +description: "Rete.js предлагает два простых способа начать работу: форк наших примеров на Codesandbox или создание локального приложения с помощью Rete Kit. Следуйте нашим руководствам, чтобы ознакомиться с нашими функциями и возможностями" +keywords: начало работы, установка, настройка, предпосылки, плейграунды, форк, rete kit +--- + +# Начало работы + +::references +:ref-example{title="Примеры" link="/ru/examples"} +:ref-guide{title="Rete Kit" link="/ru/docs/development/rete-kit"} +:ref-external{title="Codesandbox" link="https://codesandbox.io/s/rete-js-v2-yrzxe5"} +:ref-external{title="Codepen" link="https://codepen.io/Ni55aN/pen/rNZKejd"} +:: + +Существует два простых способа начать работу с фреймворком: сделать fork [примеров](/ru/examples) на Codesandbox или создать локальное приложение с помощью [Rete Kit](/ru/docs/development/rete-kit). Первый вариант позволяет экспериментировать с функциональностью, которая не всегда описана в руководствах. Кроме того, второй вариант позволяет создать локальное приложение с специальными функциями редактора узлов для выбранной версии **React.js**, **Vue.js**, **Angular** или **Svelte**. Затем, следуя руководствам, вы сможете ознакомиться с функциями и возможностями фреймворка. + +:youtube-video{name="getting-started"} + +## Предпосылки + +Прежде чем погрузиться в Rete.js, важно иметь понимание основ JavaScript или TypeScript. Фреймворк разработан в первую очередь с учетом TypeScript, с примерами и руководствами, демонстрирующими код на этом языке. Однако для новичков в TypeScript или тех, кто хочет быстро создавать прототипы, все еще можно использовать Rete.js непосредственно в JavaScript. + +Если вы предпочитаете TypeScript, убедитесь, что у вас установлена версия TypeScript 4.7 или новее. + +## Плейграунды {#playgrounds} + +- [Codesandbox](https://codesandbox.io/s/rete-js-v2-yrzxe5) +- [Codepen](https://codepen.io/Ni55aN/pen/rNZKejd) + +## Создание приложения с использованием Rete Kit {#devkit} + +Используйте [Rete Kit](/ru/docs/development/rete-kit), чтобы быстро установить приложение на Rete.js. Он позволяет выбрать стек (**React.js**, **Vue.js**, **Angular** или **Svelte**) и набор функций. + +## Добавление Rete.js в ваше приложение {#app} + +Пакеты фреймворка доступны на NPM и поддерживают такие общие форматы, как ES (.esm.js), CommonJS (.common.js) и UMD (.min.js). + +Ниже приведен пример установки пакетов фреймворка для последней версии. + +```bash +npm i rete rete-area-plugin rete-connection-plugin rete-render-utils rete-react-plugin react react-dom +``` + +Для получения конкретной информации о необходимых пакетах обратитесь к одному из руководств. + +Для получения конкретной информации о необходимых пакетах обратитесь к [одному из руководств](/ru/docs/guides/basic). + +## Использование с CDN {#cdn} + +Пакеты фреймворка также доступны на множестве CDN, обслуживающих пакеты npm. Чтобы добавить их на HTML-страницу, используйте следующий пример: + +```html + + + + + +``` + +Используйте эти пакеты, получив доступ к их пространству имен, которое можно найти в поле `name` файла `rete.config.ts` для каждого пакета. Обязательно добавьте необходимые одноранговые зависимости: + +```js +Rete +ReteAreaPlugin +ReteConnectionPlugin +ReteReactPlugin +``` + +Кроме того, вы можете интегрировать их на таких платформах, как [Codepen](https://codepen.io), используя [esm.sh](https://esm.sh). \ No newline at end of file diff --git a/content/ru/docs/3.concepts/1.plugin-system.md b/content/ru/docs/3.concepts/1.plugin-system.md new file mode 100644 index 00000000..39c4c205 --- /dev/null +++ b/content/ru/docs/3.concepts/1.plugin-system.md @@ -0,0 +1,101 @@ +--- +description: Исследуйте нашу систему плагинов и посмотрите, как она может улучшить функциональность вашего проекта. Наш пример кода показывает, как сигналы передаются между родительскими и дочерними плагинами. +keywords: плагин, область, родительский, дочерний, addpipe, сигналы +--- + +# Система плагинов + +::references +:ref-github{title="Исходный код" link="https://github.com/retejs/rete/blob/main/src/scope.ts"} +:: + +Плагины предоставляют возможность добавлять новые функции в основном через одну точку входа. Они взаимодействуют друг с другом с помощью сигналов, которые передаются от родительских плагинов к дочерним. Поскольку плагины могут иметь несколько дочерних плагинов, эти сигналы передаются в порядке их подключения (это может быть важно при включении плагинов, таких как `rete-readonly-plugin`). + +:diagram{name="plugin-system/architecture" caption="Архитектура"} + +Следующий пример кода демонстрирует создание двух областей: родительской и дочерней. Обе области регистрируют сигналы. + +```ts +import { Scope } from 'rete'; + +const parentScope = new Scope('parent'); // number это производимый тип +const childScope = new Scope('child'); // [number] это ожидаемый тип родительской цепочки + +parentScope.addPipe((context) => { // добавить pipe к родительской области + console.log('parent', context); // number + + return context; +}); + +childScope.addPipe((context) => { // добавить pipe к дочерней области + console.log('child', context); // string | number + + return context; +}); + +parentScope.use(childScope); // forward all signals to child scope + +const returnedNumber = await parentScope.emit(1); // can emit number +const returnedString = await childScope.emit('a'); // can emit string +``` + +Обратите внимание, что порядок `use` и `addPipe` влияет на порядок вызова родительских и дочерних обработчиков. + +Логи: +```log +parent 1 +child 1 +child a +``` + +В некоторых случаях сигналы можно изменять или блокировать. + +:diagram{name="plugin-system/addPipe" caption="Блокировать или изменить"} + +```ts +parentScope.addPipe((context) => { + return context * 2; +}); +childScope.addPipe((context) => { + if (context === 'b') return // предотвращение распространения 'b' + return context; +}); + +const doubledNumber = await parentScope.emit(1); // 2 +const expectedString = await childScope.emit('a'); // 'a' +const expectedUndefined = await childScope.emit('b'); // undefined +``` + +Статическая типизация используется для обеспечения совместимости ожидаемых сигналов используемых плагинов с сигналами, созданными родительским плагином. + +```ts +import { Scope } from 'rete'; + +const parentScope = new Scope('parent'); +const childScope = new Scope('child'); + +parentScope.use(childScope); // Type 'boolean' is not assignable to type 'string | number'.ts(2345) +``` + +Дочерние плагины могут получить доступ к экземпляру родительского плагина как для прямого доступа к его интерфейсам, так и для генерации сигналов от имени родительского плагина. + +```ts +import { Scope } from 'rete'; + +class Root extends Scope { + isRoot = true +} + +class Root2 extends Scope { + isRoot2 = true +} + +const parentScope = new Root('parent'); +const childScope = new Scope('child'); + +parentScope.use(childScope); + +const parent = childScope.parentScope(); // экземпляр Root, но Scope с точки зрения TS +const root = childScope.parentScope(Root); // экземпляр Root +const wrongInstance = childScope.parentScope(Root2); // выбрасывает исключение +``` diff --git a/content/ru/examples/0.index.md b/content/ru/examples/0.index.md new file mode 100644 index 00000000..53cc006d --- /dev/null +++ b/content/ru/examples/0.index.md @@ -0,0 +1,16 @@ +--- +title: Обзор примеров +description: Эта страница содержит подробный список примеров и превью, демонстрирующих различные типы редакторов узлов или визуальных рабочих процессов, созданных с использованием Rete.js +keywords: обзор примеров, примеры, профессиональные примеры +share: + title: Обзор примеров на основе Rete.js +overview: true +navigation: + noPreview: true +--- + +# Обзор + +:examples-overview{:top='true'} + +:examples-overview{:top='false'} diff --git a/content/ru/examples/1.basic/1.react.md b/content/ru/examples/1.basic/1.react.md new file mode 100644 index 00000000..7ce78d51 --- /dev/null +++ b/content/ru/examples/1.basic/1.react.md @@ -0,0 +1,24 @@ +--- +image: + src: basic.png +description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с React.js. В этом примере показан рендеринг с использованием rete-react-plugin +keywords: react.js, базовый редактор, плагин react.js +navigation: + preview: basic.png +--- + +# React.js + +::references +:ref-guide{title="Базовый гайд" link="/ru/docs/guides/basic"} +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/react"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/react"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/react"} +:ref-github{title="Core" link="https://github.com/retejs/rete"} +:ref-github{title="Плагин" link="https://github.com/retejs/react-render-plugin"} +:ref-external{title="React.js" link="https://react.dev/"} +:: + +Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-react-plugin` для плавной интеграции с **React.js**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами. + +:example{id="rete-js-v2-yrzxe5" module="/src/editor.ts"} diff --git a/content/ru/examples/1.basic/2.vue.md b/content/ru/examples/1.basic/2.vue.md new file mode 100644 index 00000000..6fd88b61 --- /dev/null +++ b/content/ru/examples/1.basic/2.vue.md @@ -0,0 +1,22 @@ +--- +image: + src: basic.png +description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с Vue.js. В этом примере показан рендеринг с использованием rete-vue-plugin +keywords: vue.js, базовый редактор, плагин vue.js +navigation: + preview: basic.png +--- + +# Vue.js + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/vue"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/vue"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/vue"} +:ref-github{title="Плагин" link="https://github.com/retejs/vue-render-plugin"} +:ref-external{title="Vue.js" link="https://vuejs.org/"} +:: + +Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-vue-plugin` для плавной интеграции с **Vue.js**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами. + +:example{id="rete-js-v2-vue-js-578gq8" module="/src/editor.ts"} diff --git a/content/ru/examples/1.basic/3.angular.md b/content/ru/examples/1.basic/3.angular.md new file mode 100644 index 00000000..c1315fb5 --- /dev/null +++ b/content/ru/examples/1.basic/3.angular.md @@ -0,0 +1,22 @@ +--- +image: + src: basic.png +description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с Angular. В этом примере показан рендеринг с использованием rete-angular-plugin +keywords: angular, базовый редактор, плагин angular +navigation: + preview: basic.png +--- + +# Angular + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/angular"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/angular"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/angular"} +:ref-github{title="Плагин" link="https://github.com/retejs/angular-render-plugin"} +:ref-external{title="Angular" link="https://angular.io/"} +:: + +Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-angular-plugin` для плавной интеграции с **Angular**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами. + +:example{id="rete-js-v2-angular-9htmrp" module="/src/app/editor.ts"} diff --git a/content/ru/examples/1.basic/4.svelte.md b/content/ru/examples/1.basic/4.svelte.md new file mode 100644 index 00000000..84a62883 --- /dev/null +++ b/content/ru/examples/1.basic/4.svelte.md @@ -0,0 +1,22 @@ +--- +image: + src: basic.png +description: Узнайте, как создать базовый редактор с двумя подключенными узлами с использованием интеграции с Svelte. В этом примере показан рендеринг с использованием rete-svelte-plugin +keywords: svelte, базовый редактор, плагин svelte +navigation: + preview: basic.png +--- + +# Svelte + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/svelte"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/svelte"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/svelte"} +:ref-github{title="Плагин" link="https://github.com/retejs/svelte-render-plugin"} +:ref-external{title="Svelte" link="https://svelte.dev/"} +:: + +Пример базового редактора с двумя соединенными узлами, каждый из которых имеет поле ввода. Визуализация узлов и соединений выполняется с использованием `rete-svelte-plugin` для плавной интеграции с **Svelte**. Пользователи могут выбрать эти узлы. Положение узлов определяется вручную в соответствии с заранее определенными координатами. + +:example{id="rete-js-svelte-s645rn" module="/src/lib/editor.ts"} diff --git a/content/ru/examples/1.basic/index.md b/content/ru/examples/1.basic/index.md new file mode 100644 index 00000000..f44a905a --- /dev/null +++ b/content/ru/examples/1.basic/index.md @@ -0,0 +1,13 @@ +--- +description: Ознакомьтесь с примерами базовых настроек редактора для различных UI-библиотек и фреймворков +keywords: базовые редакторы, интеграции, UI-библиотеки, UI-фреймворки +navigation: + placeholder: true + overviewGroup: true +--- + +# Базовый + +В представленном ниже списке приведены примеры, которые демонстрируют базовую настройку редактора для доступных интеграций с фреймворками. Если вы не можете найти пример для конкретной UI-библиотеки или фреймворка, вы можете выразить своё пожелание по их интеграции в [этом обсуждении](https://github.com/retejs/rete/discussions/635). + +:examples-overview{filter="/ru/examples/basic"} diff --git a/content/ru/examples/10.modules.md b/content/ru/examples/10.modules.md new file mode 100644 index 00000000..c34596e9 --- /dev/null +++ b/content/ru/examples/10.modules.md @@ -0,0 +1,19 @@ +--- +image: + src: modules.png +description: Узнайте, как повторно использовать схемы в вашем редакторе узлов с помощью этого примера выделенного узла Module. Используйте DataflowEngine для обработки входных данных и создания выходных данных. Следуйте пошаговому руководству, чтобы создать вложенную схему, содержащую узлы Input и Output, и настроить узел модуля в соответствии с конкретным случаем использования. +keywords: модули,вложенная схема,многократное использование схемы +navigation: + preview: modules.png +--- + +# Модули + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/modules"} +:ref-example{title="Allmatter" link="/ru/examples/allmatter"} +:: + +Этот пример демонстрирует технику повторного использования схемы, где обработка выполняется с помощью `DataflowEngine`. Это достигается путем создания выделенного узла `Module`, который загружает вложенную схему, содержащую узлы `Input` и `Output`, а затем создает соответствующие сокеты. В результате узел модуля инициализирует движок, передает ему входные данные, выполняет их и получает выходные данные. + +:example{id="rete-js-v2-modules-vhr0h5" module="/src/editor.ts"} diff --git a/content/ru/examples/10.scopes.md b/content/ru/examples/10.scopes.md new file mode 100644 index 00000000..7800539c --- /dev/null +++ b/content/ru/examples/10.scopes.md @@ -0,0 +1,21 @@ +--- +image: + src: scopes.png +description: Расширьте функциональность вашего редактора узлов с помощью этого примера с rete-scopes-plugin. Используйте подграфы или вложенные узлы для создания более сложных и модульных рабочих процессов. Нажмите и удерживайте узел, чтобы изменить его родительский элемент и наслаждаться более интуитивным и гибким редактором узлов. +keywords: области видимости,родитель,родитель-потомок,вложенный граф,подграфы +navigation: + preview: scopes.png +--- + +# Области видимости + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/scopes"} +:ref-github{title="Плагин" link="https://github.com/retejs/scopes-plugin"} +:: + +Структуры, показанные в этом примере, также могут называться подграфами или вложенными узлами. Эта функциональность достигается с помощью продвинутого плагина `rete-scopes-plugin`. + +Изменение родительского узла легко: просто нажмите и удерживайте узел, а затем переместите его на новый родительский узел. + +:example{id="rete-js-v2-scopes-grgie8" module="/src/editor.ts"} diff --git a/content/ru/examples/10.selectable-connections.md b/content/ru/examples/10.selectable-connections.md new file mode 100644 index 00000000..4feb8dad --- /dev/null +++ b/content/ru/examples/10.selectable-connections.md @@ -0,0 +1,19 @@ +--- +image: + src: selectable-connections.gif +description: Узнайте, как выбирать соединения в редакторе узлов с помощью этого примера специального соединения и AreaExtensions.selector. Следуйте пошаговым инструкциям, чтобы создать функцию выбора соединений и расширить функциональность вашего редактора. +keywords: выбор соединений,пользовательское соединение +navigation: + preview: selectable-connections.gif +--- + +# Выбор соединений + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/selectable/connections"} +:ref-github{title="Плагин области" link="https://github.com/retejs/area-plugin"} +:: + +Редактор по умолчанию не имеет встроенной функции выбора соединений. Однако если вы используете `BidirectFlow` и не можете удалить соединение из пользовательского интерфейса или вам нужно выбирать соединения для других целей, вы можете создать пользовательское соединение и синхронизировать его с `AreaExtensions.selector`. + +:example{id="rete-js-v2-selectable-connections-cfetvh" module="/src/editor.tsx"} diff --git a/content/ru/examples/11.labeled-connections.md b/content/ru/examples/11.labeled-connections.md new file mode 100644 index 00000000..0303fc79 --- /dev/null +++ b/content/ru/examples/11.labeled-connections.md @@ -0,0 +1,26 @@ +--- +image: + src: labeled-connections.png +description: Узнайте, как добавлять метки к соединениям в вашем редакторе узлов с помощью этого примера специального компонента соединения. Рассчитайте положение точки относительно пути и отобразите текстовый блок в этом месте. +keywords: помеченные соединения,текстовый блок +navigation: + pro: true + preview: labeled-connections.png +--- + +# Маркированные соединения + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/renderers/react#full-connection-customization"} +:: + +Вы можете добавлять метки к соединениям, реализовав кастомный компонент соединения. Этот подход предоставляет полную гибкость для настройки и оптимизации этой функции. Вам просто нужно: + +- создать кастомный компонент соединения; +- рассчитать положение точки относительно пути (начало, середина, конец); +- отобразить текстовый блок в этом месте; +- создавать пользовательские соединения с предопределенными метками. + +:proExample{src="https://retejs-labeled-connections.netlify.app"} + +Хотя пример построен на React.js, вы легко можете адаптировать его для другого стека. Для этого просто скопируйте несколько модулей из этого примера и замените кастомный компонент соединения на тот, который подходит для вашего стека. Если у вас возникнут проблемы, не стесняйтесь обращаться через раздел GitHub Issues в соответствующем репозитории. diff --git a/content/ru/examples/11.lasso-marquee-selection.md b/content/ru/examples/11.lasso-marquee-selection.md new file mode 100644 index 00000000..52bd1aa0 --- /dev/null +++ b/content/ru/examples/11.lasso-marquee-selection.md @@ -0,0 +1,24 @@ +--- +image: + src: lasso-selection.gif +description: В этом примере вы можете улучшить работу пользователя с редактором узлов с помощью выделения лассо/рамкой. Выберите узлы, нарисовав форму. Следуйте предоставленному фрагменту кода, чтобы настроить форму выделения и область пересечения. +keywords: лассо,рамка,выбор лассо,выбор рамкой +navigation: + pro: true + preview: lasso-selection.gif +--- + +# Выбор лассо/рамкой + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/selectable"} +:ref-github{title="Плагин области" link="https://github.com/retejs/area-plugin"} +:: + +Выделение узлов можно осуществлять не только кликом, но и с помощью гибкой системы выбора, которая позволяет расширять его и выбирать узлы, например, рисуя лассо или прямоугольник. Будут выделены узлы, пересекающиеся с нарисованной фигурой. + +В этом конкретном примере вы можете переключаться между кнопкой выбора, фигурой подсветки и областью пересечения узла. + +:proExample{src="https://retejs-lasso-marquee.netlify.app"} + +Хотя этот пример изначально разработан для React.js, показанная функция полностью не зависит от фреймворка. Вы можете легко интегрировать ее в свое приложение на другом стеке, скопировав модуль функций и подключив его к своему редактору. diff --git a/content/ru/examples/11.minimap.md b/content/ru/examples/11.minimap.md new file mode 100644 index 00000000..baffdb6b --- /dev/null +++ b/content/ru/examples/11.minimap.md @@ -0,0 +1,19 @@ +--- +image: + src: minimap.png +description: Узнайте, как добавить мини-карту в ваш редактор узлов с помощью этого примера. По умолчанию на мини-карте отображаются прямоугольники, представляющие положение узлов и видового окна, обеспечивая, что все узлы находятся в пределах мини-карты. Перетащите мини-вьюпорт, чтобы изменить положение окна просмотра и наслаждаться более организованным и структурированным рабочим процессом. +keywords: мини-карта, мини-вьюпорт +navigation: + preview: minimap.png +--- + +# Мини-карта + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/minimap"} +:ref-github{title="Плагин" link="https://github.com/retejs/minimap-plugin"} +:: + +По умолчанию мини-карта размещается в нижнем правом углу и содержит прямоугольники, представляющие положение узлов и видового окна. Все узлы, добавленные в редакторе, динамически отображаются на мини-карте, гарантируя, что они находятся в пределах мини-карты. Кроме того, вы можете изменить положение окна просмотра, перетаскивая его мини-вьюпорт. + +:example{id="rete-js-v2-minimap-ob9uqc" module="/src/editor.ts"} diff --git a/content/ru/examples/12.dock.md b/content/ru/examples/12.dock.md new file mode 100644 index 00000000..61bcfe25 --- /dev/null +++ b/content/ru/examples/12.dock.md @@ -0,0 +1,19 @@ +--- +image: + src: dock.png +description: Расширьте функциональность вашего редактора узлов с помощью док-меню, используя этот пример. Добавьте раздел с перечнем узлов, которые пользователи могут добавить в редактор путем клика или перетаскивания. Динамически добавляйте или удаляйте узлы из этого списка и настраивайте их с нужными свойствами и порядком. +keywords: док-меню, боковая панель, меню +navigation: + preview: dock.png +--- + +# Док-меню + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/dock-menu"} +:ref-github{title="Плагин" link="https://github.com/retejs/dock-plugin"} +:: + +Док-меню - это раздел с перечнем узлов, которые пользователи могут добавить в редактор путем клика или перетаскивания. В стандартном пресете это меню расположено в нижней части редактора, но вы можете создать собственный пресет с собственными стилями. Кроме того, вы можете динамически добавлять или удалять узлы из этого списка, настраивая для них необходимые свойства и указывая порядок. + +:example{id="rete-js-v2-forked-t2enm0" module="/src/editor.ts"} diff --git a/content/ru/examples/12.sankey.md b/content/ru/examples/12.sankey.md new file mode 100644 index 00000000..e8685f74 --- /dev/null +++ b/content/ru/examples/12.sankey.md @@ -0,0 +1,23 @@ +--- +image: + src: sankey.png +description: Узнайте, как создать диаграмму Санкей в своем редакторе узлов с помощью этого примера. Диаграмма основана на классическом наборе инструментов редактора узлов и включает в себя специальные компоненты для узлов, соединений и разъемов. +keywords: диаграмма Санкей, настройка +navigation: + preview: sankey.png +--- + +# Диаграмма Санкей + +::references +:ref-guide{title="Настройка" link="/ru/examples/customization/react"} +:ref-example{title="Упорядочение" link="/ru/examples/arrange"} +:: + +Диаграмма Санкей основана на классическом наборе инструментов редактора узлов и включает в себя специальные компоненты для узлов, соединений и разъемов. Узлам предоставляется заранее определенная емкость (высота), а порты создаются для каждого соединения с высотой (весом), равным весу соединения. + +:example{id="rete-js-v2-sankey-diagram-v75qmr" module="/src/editor.ts"} + +Интеграция этой функции в вашем проекте легка - просто скопируйте каталог `sankey` и некоторый код из `editor.ts`, включая параметры `Presets.classic.setup` и `importGraph`. Кроме того, вы можете ограничить перемещение узлов с помощью `createSankeyRestrictor`, чтобы выходные узлы оставались слева от входных. Наконец, добавьте параметр в `arrange.layout`, чтобы увеличить расстояние между узлами. + +Этот пример разработан специально для **React.js**, но вы можете адаптировать его для использования в других плагинах рендеринга, адаптировав специальные компоненты под ваш стек. diff --git a/content/ru/examples/14.connection-path.md b/content/ru/examples/14.connection-path.md new file mode 100644 index 00000000..bfb7ca33 --- /dev/null +++ b/content/ru/examples/14.connection-path.md @@ -0,0 +1,19 @@ +--- +image: + src: path.png +description: Настройте пути подключения в вашем редакторе узлов с помощью этого примера. Плагин позволяет настраивать как пути (линейные, ступенчатые, монотонные), так и точки, которые они проходят. Кроме того, есть возможность включить маркер в форме стрелки. +keywords: путь соединения,соединение со стрелкой +navigation: + preview: path.png +--- + +# Путь соединения + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/connection-path"} +:ref-github{title="Плагин" link="https://github.com/retejs/connection-path-plugin"} +:: + +Этот пример демонстрирует использование плагина для настройки путей подключения. Это упрощает настройку как путей (линейных, ступенчатых, монотонных), так и точек, которые они проходят. Кроме того, есть возможность включить маркер в форме стрелки. + +:example{id="rete-js-v2-connection-path-5dneyc" module="/src/editor.ts"} diff --git a/content/ru/examples/15.reroute.md b/content/ru/examples/15.reroute.md new file mode 100644 index 00000000..21e07250 --- /dev/null +++ b/content/ru/examples/15.reroute.md @@ -0,0 +1,19 @@ +--- +image: + src: reroute.png +description: Улучшите функциональность вашего проекта с помощью плагина перенаправления соединения. Позвольте пользователям вставлять точки изменения маршрута, нажимая на соединение, или удалять их, щелкнув правой кнопкой мыши. Наслаждайтесь более организованным и структурированным рабочим процессом с этой мощной функцией. +keywords: перенаправление,изменение маршрута,путь соединения +navigation: + preview: reroute.png +--- + +# Изменение маршрута + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/reroute"} +:ref-github{title="Плагин" link="https://github.com/retejs/connection-reroute-plugin"} +:: + +Этот конкретный пример демонстрирует использование плагина, разработанного для перенаправления соединения пользователем. Пользователи могут вставлять точки изменения маршрута, нажимая на соединение, или удалять их, кликнув правой кнопкой мыши. Пользователи также могут перетаскивать или выбирать эти точки (подобно узлам), чтобы переместить несколько точек одновременно. + +:example{id="rete-js-v2-reroute-8doi0c" module="/src/editor.ts"} diff --git a/content/ru/examples/16.viewport-bound.md b/content/ru/examples/16.viewport-bound.md new file mode 100644 index 00000000..c3742125 --- /dev/null +++ b/content/ru/examples/16.viewport-bound.md @@ -0,0 +1,23 @@ +--- +image: + src: bound.png +description: Узнайте, как обрабатывать координаты области и ограничивать положение узлов. Демонстрируется универсальная система событий, позволяющая выполнять плавное преобразование между разными системами координат, что делает ее ценным дополнением к любому проекту. +keywords: координаты области,положение узлов +navigation: + pro: true + preview: bound.png +--- + +# Ограничение узлов + +::references +:ref-example{title="Расширение области" link="/ru/examples/area-extensions"} +:ref-github{title="Плагин области" link="https://github.com/retejs/area-plugin"} +:ref-example{title="Границы перемещения" link="/ru/examples/panning-boundary"} +:: + +Этот пример демонстрирует процесс управления координатами области, выполнение преобразований между разными системами координат и использование гибкой системы событий для ограничения положения узлов. + +:proExample{src="https://retejs-viewport-bound.netlify.app"} + +Хотя этот пример изначально разработан для React.js, показанная функциональность полностью не зависит от фреймворка. Вы можете легко интегрировать ее в свое приложение на другом стеке, скопировав модуль функций и подключив его к своему редактору. diff --git a/content/ru/examples/17.comments.md b/content/ru/examples/17.comments.md new file mode 100644 index 00000000..0368c593 --- /dev/null +++ b/content/ru/examples/17.comments.md @@ -0,0 +1,19 @@ +--- +image: + src: comment.png +description: Узнайте, как использовать плагин комментариев. Познакомьтесь с доступными фреймами и встроенными комментариями, а также способами их добавления к вашим узлам. +keywords: комментарии,плагин комментариев,группа,кадр,инлайн +navigation: + preview: comment.png +--- + +# Комментарии + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/comments"} +:ref-github{title="Плагин" link="https://github.com/retejs/comment-plugin"} +:: + +Этот пример демонстрирует использование плагина комментариев. Существует два типа комментариев: рамки (для группировки узлов) и встроенные (для отдельных узлов). Пользователи могут добавлять узлы в рамку комментария, перетаскивая их, в то время как встроенные комментарии можно прикреплять в обратном порядке, перетаскивая их на узел. + +:example{id="rete-js-v2-comments-ql406e" module="/src/editor.ts"} diff --git a/content/ru/examples/18.history.md b/content/ru/examples/18.history.md new file mode 100644 index 00000000..e64749b6 --- /dev/null +++ b/content/ru/examples/18.history.md @@ -0,0 +1,21 @@ +--- +image: + src: history.png +description: Этот пример демонстрирует, как использовать плагин истории для добавления функции отмены/повтора в ваш редактор. Узнайте, как отслеживать изменения, группировать их по времени и использовать комбинации клавиш. +keywords: плагин истории,отмена,повтор,отслеживание изменений,комбинации клавиш +navigation: + preview: history.png +--- + +# История изменений + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/undo-redo"} +:ref-github{title="Плагин" link="https://github.com/retejs/history-plugin"} +:: + +Этот пример демонстрирует использование плагина истории. Он отслеживает изменения в редакторе, такие как добавление, удаление или перемещение узлов, а также добавление или удаление связей. Эти изменения можно отменить или повторить программно или пользователем (например, с помощью комбинаций клавиш, таких как Ctrl+Z/Ctrl+Y). + +Все операции отмены/повтора автоматически группируются по времени (по умолчанию 200 мс). Таким образом, если последовательность операций происходит в течение короткого времени, пользователь может отменить или повторить их одним нажатием клавиши. + +:example{id="rete-js-v2-history-gwl0cy" module="/src/editor.ts"} diff --git a/content/ru/examples/19.lod-gpu.md b/content/ru/examples/19.lod-gpu.md new file mode 100644 index 00000000..6f5c0090 --- /dev/null +++ b/content/ru/examples/19.lod-gpu.md @@ -0,0 +1,30 @@ +--- +image: + src: lod-gpu.gif +description: Этот пример демонстрирует технику GPU LOD для визуализации тысяч узлов в одном редакторе. Отображая упрощенные версии узлов и соединений на холсте, фреймворк использует мощь Pixi.js для достижения выдающейся производительности. +keywords: lod,уровень детализации,gpu,производительность,pixi.js,1000 узлов,тысячи узлов +navigation: + pro: true + preview: lod-gpu.gif + showcase: + title: Открыт для усовершенствований + description: Используя свою гибкость, фреймворк позволяет проводить дополнительные оптимизации для достижения выдающейся производительности. + order: 8 + source: https://retejs-lod-gpu.netlify.app +--- + +# GPU LOD + +::references +:ref-guide{title="Производительность" link="/ru/docs/best-practices/performance"} +:ref-example{title="LOD" link="/ru/examples/lod"} +:ref-external{title="Pixi.js" link="https://pixijs.com"} +:: + +Этот пример представляет улучшенную версию [примера LOD](/ru/examples/lod), который позволяет визуализировать тысячи узлов в одном редакторе. Улучшение заключается в визуализации упрощенных версий узлов и соединений на холсте с использованием GPU через [Pixi.js](https://pixijs.com), когда рендеринг исходного узла становится непрактичным из-за его маленького размера на экране. + +При увеличении масштаба пользователя отображается исходный узел с соответствующим уровнем детализации, что позволяет взаимодействовать с ним. + +:proExample{src="https://retejs-lod-gpu.netlify.app"} + +Хотя этот пример изначально был разработан для React.js, продемонстрированная функция не зависит от фреймворка. Вы можете легко интегрировать ее в свое приложение на другой платформе, скопировав модуль функций и внедрив его в свой редактор. diff --git a/content/ru/examples/19.lod.md b/content/ru/examples/19.lod.md new file mode 100644 index 00000000..0e1fc252 --- /dev/null +++ b/content/ru/examples/19.lod.md @@ -0,0 +1,22 @@ +--- +image: + src: lod.gif +description: Узнайте, как улучшить производительность вашего редактора с помощью LOD (уровень детализации). Используя уровень детализации для упрощения узлов и исключая те, которые находятся за пределами области просмотра, вы можете добиться лучшей производительности в редакторе узлов. +keywords: lod,уровень детализации,производительность +navigation: + pro: true + preview: lod.gif +--- + +# LOD + +::references +:ref-guide{title="Производительность" link="/ru/docs/best-practices/performance"} +:ref-example{title="LOD GPU" link="/ru/examples/lod-gpu"} +:: + +Этот пример демонстрирует использование техники LOD (уровень детализации) для упрощения узлов путем замены их упрощенными версиями при определенном уровне масштабирования. Узлы за пределами окна просмотра также исключаются из визуализации. Эти методы повышают производительность редакторов с большим количеством узлов. + +:proExample{src="https://retejs-lod.netlify.app"} + +Хотя этот пример изначально был разработан для React.js, продемонстрированная функция полностью не зависит от фреймворка. Вы можете легко интегрировать ее в свое приложение на другой платформе, скопировав модуль функций и внедрив его в свой редактор. diff --git a/content/ru/examples/2.controls/1.react.md b/content/ru/examples/2.controls/1.react.md new file mode 100644 index 00000000..285f145c --- /dev/null +++ b/content/ru/examples/2.controls/1.react.md @@ -0,0 +1,22 @@ +--- +image: + src: react-controls.png +description: Узнайте о использовании встроенных и пользовательских элементов управления для React.js. В этом примере показаны кнопка и радиальный индикатор прогресса, которые случайным образом устанавливаются и синхронизируются с значением поля ввода. +keywords: пользовательские элементы управления, react.js, кнопка, радиальный индикатор прогресса +navigation: + preview: react-controls.png +--- + +# Элементы управления для React.js + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/react/#controls"} +:ref-example{title="Базовый" link="/ru/examples/basic/react"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/react"} +:ref-github{title="Плагин" link="https://github.com/retejs/react-render-plugin"} +:ref-external{title="React.js" link="https://react.dev/"} +:: + +Этот пример демонстрирует использование встроенного элемента ввода и пользовательских элементов управления для **React.js**, которые вы можете применить в соответствии с вашими конкретными потребностями. В данном случае специальные элементы управления включают в себя кнопку, которая случайным образом устанавливает значение поля ввода, и радиальный индикатор прогресса, который синхронизируется с значением поля ввода. + +:example{id="rete-js-v2-custom-controls-2vp0wx" module="/src/editor.tsx"} diff --git a/content/ru/examples/2.controls/2.vue.md b/content/ru/examples/2.controls/2.vue.md new file mode 100644 index 00000000..5bc15a2f --- /dev/null +++ b/content/ru/examples/2.controls/2.vue.md @@ -0,0 +1,22 @@ +--- +image: + src: vue-controls.png +description: Узнайте о использовании встроенных и пользовательских элементов управления для Vue.js. В этом примере показаны кнопка и радиальный индикатор прогресса, которые случайным образом устанавливаются и синхронизируются с значением поля ввода. +keywords: пользовательские элементы управления, vue.js, кнопка, радиальный индикатор прогресса +navigation: + preview: vue-controls.png +--- + +# Элементы управления для Vue.js + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/vue/#controls"} +:ref-example{title="Базовый" link="/ru/examples/basic/vue"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/vue"} +:ref-github{title="Плагин" link="https://github.com/retejs/vue-render-plugin"} +:ref-external{title="Vue.js" link="https://vuejs.org/"} +:: + +Этот пример демонстрирует использование встроенного элемента ввода и пользовательских элементов управления для **Vue.js**, которые вы можете применить в соответствии с вашими конкретными потребностями. В данном случае специальные элементы управления включают в себя кнопку, которая случайным образом устанавливает значение поля ввода, и радиальный индикатор прогресса, который синхронизируется с значением поля ввода. + +:example{id="rete-js-v2-vue-js-custom-controls-qrdo2c" module="/src/editor.ts"} diff --git a/content/ru/examples/2.controls/3.angular.md b/content/ru/examples/2.controls/3.angular.md new file mode 100644 index 00000000..ea9e8b01 --- /dev/null +++ b/content/ru/examples/2.controls/3.angular.md @@ -0,0 +1,22 @@ +--- +image: + src: angular-controls.png +description: Узнайте о использовании встроенных и пользовательских элементов управления для Angular. В этом примере показаны кнопка и радиальный индикатор прогресса, которые случайным образом устанавливаются и синхронизируются с значением поля ввода. +keywords: пользовательские элементы управления, angular, кнопка, радиальный индикатор прогресса +navigation: + preview: angular-controls.png +--- + +# Элементы управления для Angular + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/angular/#controls"} +:ref-example{title="Базовый" link="/ru/examples/basic/angular"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/angular"} +:ref-github{title="Плагин" link="https://github.com/retejs/angular-render-plugin"} +:ref-external{title="Angular" link="https://angular.io/"} +:: + +Этот пример демонстрирует использование встроенного элемента ввода и пользовательских элементов управления для **Angular**, которые вы можете применить в соответствии с вашими конкретными потребностями. В данном случае специальные элементы управления включают в себя кнопку, которая случайным образом устанавливает значение поля ввода, и радиальный индикатор прогресса, который синхронизируется с значением поля ввода. + +:example{id="rete-js-v2-angular-custom-controls-cknttr" module="/src/app/editor.ts"} diff --git a/content/ru/examples/2.controls/4.svelte.md b/content/ru/examples/2.controls/4.svelte.md new file mode 100644 index 00000000..b6f66014 --- /dev/null +++ b/content/ru/examples/2.controls/4.svelte.md @@ -0,0 +1,22 @@ +--- +image: + src: svelte-controls.png +description: Узнайте о использовании встроенных и пользовательских элементов управления для Svelte. В этом примере показаны кнопка и радиальный индикатор прогресса, которые случайным образом устанавливаются и синхронизируются с значением поля ввода. +keywords: пользовательские элементы управления, svelte, кнопка, радиальный индикатор прогресса +navigation: + preview: svelte-controls.png +--- + +# Элементы управления для Svelte + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/svelte/#controls"} +:ref-example{title="Базовый" link="/ru/examples/basic/svelte"} +:ref-example{title="Кастомизация" link="/ru/examples/customization/svelte"} +:ref-github{title="Плагин" link="https://github.com/retejs/svelte-render-plugin"} +:ref-external{title="Svelte" link="https://svelte.dev/"} +:: + +Этот пример демонстрирует использование встроенного элемента ввода и пользовательских элементов управления для **Svelte**, которые вы можете применить в соответствии с вашими конкретными потребностями. В данном случае специальные элементы управления включают в себя кнопку, которая случайным образом устанавливает значение поля ввода, и радиальный индикатор прогресса, который синхронизируется с значением поля ввода. + +:example{id="rete-js-svelte-controls-9dm3dn" module="/src/lib/editor.ts"} diff --git a/content/ru/examples/2.controls/index.md b/content/ru/examples/2.controls/index.md new file mode 100644 index 00000000..07fe62e2 --- /dev/null +++ b/content/ru/examples/2.controls/index.md @@ -0,0 +1,13 @@ +--- +description: Ознакомьтесь с примерами кастомных элементов управления для различных UI-библиотек и фреймворков +keywords: кастомные элементы управления, интеграции, UI-библиотеки, UI-фреймворки +navigation: + placeholder: true + overviewGroup: true +--- + +# Элементы управления + +В представленном ниже списке показаны примеры, демонстрирующие различные кастомные элементы управления для доступных интеграций с фреймворками. Если вы не можете найти пример для конкретной UI-библиотеки или фреймворка, вы можете выразить своё пожелание по их интеграции в [этом обсуждении](https://github.com/retejs/rete/discussions/635). + +:examples-overview{filter="/ru/examples/controls"} diff --git a/content/ru/examples/20.3d-configurator.md b/content/ru/examples/20.3d-configurator.md new file mode 100644 index 00000000..362e1cc2 --- /dev/null +++ b/content/ru/examples/20.3d-configurator.md @@ -0,0 +1,18 @@ +--- +image: + src: 3d-configurator.png +description: Узнайте, как создавать собственные цветовые смеси для кузова и колес автомобиля с помощью этого примера 3D-конфигуратора, использующего редактор. Редактор использует DataflowEngine для обработки узлов и загружает начальные узлы из файла JSON с помощью специального импортера. +keywords: 3D-конфигуратор,DataflowEngine,JSON,импорт +navigation: + preview: 3d-configurator.png +--- + +# 3D Конфигуратор + +::references +:ref-example{title="Dataflow" link="/ru/examples/processing/dataflow"} +:: + +Этот пример демонстрирует использование редактора, который позволяет создавать собственные цветовые смеси для кузова и колес автомобиля с помощью узлов и DataflowEngine. Начальные узлы загружаются из файла JSON с использованием специального импортера, реализованного для этого редактора. + +:example{id="rete-js-2-3d-configurator-43o7ex" module="/src/node-editor/index.js"} diff --git a/content/ru/examples/21.chatbot.md b/content/ru/examples/21.chatbot.md new file mode 100644 index 00000000..a994b818 --- /dev/null +++ b/content/ru/examples/21.chatbot.md @@ -0,0 +1,30 @@ +--- +image: + src: chatbot.png +description: Узнайте, как создать полностью настраиваемого чат-бота с помощью визуального редактора. Rete.js предоставляет расширенные возможности для настройки внешнего вида и оптимизации обработки данных. Поведение чат-бота программируется с использованием визуального редактора. +keywords: чат-бот,визуальный редактор,поток данных,поток управления,настройка +navigation: + preview: chatbot.png + top: 10 + showcase: + title: Широкие возможности + description: Фреймворк предоставляет расширенные возможности для настройки внешнего вида и упрощения обработки данных + order: 1 + source: https://retejs-chatbot.netlify.app/ +--- + +# Чат-бот + +::references +:ref-guide{title="Валидация" link="/ru/docs/guides/validation"} +:ref-example{title="Настройка" link="/ru/examples/customization/react"} +:ref-example{title="Гибридный" link="/ru/examples/processing/hybrid-engine"} +:: + +Это простая демонстрация чат-бота, поведение которого программируется с помощью визуального редактора. В этой реализации все элементы настраиваемы, включая анимированные соединения. Окно чата представлено в виде отдельного узла, который можно перемещать только с помощью специальных ручек внизу и вверху. Для обработки графики используется механизм на основе потока данных и управления. Существует также валидация подключений путем проверки совместимости сокетов. + +:example{id="rete-js-v2-chatbot-programming-nok9iq" module="/src/editor.ts"} + +Здесь используются `DataflowEngine` и `ControlFlowEngine`, так же как и в примере [Гибридный движок](/ru/examples/processing/hybrid-engine). + +Валидация подключений осуществляется путем расширения `ClassicPreset.Socket` и добавления соответствующего метода, который принимает другой сокет в качестве аргумента и проверяет их совместимость. Если сокеты не совместимы, отображается сообщение, и соединение не добавляется. diff --git a/content/ru/examples/22.3d/1.index.md b/content/ru/examples/22.3d/1.index.md new file mode 100644 index 00000000..2b435f52 --- /dev/null +++ b/content/ru/examples/22.3d/1.index.md @@ -0,0 +1,23 @@ +--- +image: + src: 3d.png +description: Узнайте, как интегрировать редактор узлов в 3D-сцену. Легко встраивайте нативный HTML-редактор в свою 3D-сцену на основе Three.js, не ущемляя интерактивные возможности. +keywords: 3D, Three.js, сцена, интеграция +navigation: + preview: 3d.png +--- + +# 3D + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/3d"} +:ref-example{title="Несколько редакторов" link="/ru/examples/3d/multiple-3d"} +:ref-external{title="Three.js" link="https://threejs.org/"} +:ref-github{title="Плагин" link="https://github.com/retejs/area-3d-plugin"} +:: + +С помощью плагина [`rete-area-3d-plugin`](https://github.com/retejs/area-3d-plugin) вы легко можете интегрировать нативный HTML-редактор в 3D-сцену, не ущемляя интерактивные возможности с узлами и другими компонентами редактора. + +На основе **Three.js** эта сцена использует модули `Sky` и `Water` (которые можно найти в [официальном примере](https://threejs.org/examples/webgl_shaders_ocean.html)), чтобы продемонстрировать визуальное воздействие интегрированных узлов и связей на 3D-окружение. + +:example{id="rete-js-v2-3d-vrnzly" module="/src/editor.ts"} diff --git a/content/ru/examples/22.3d/2.multiple-3d.md b/content/ru/examples/22.3d/2.multiple-3d.md new file mode 100644 index 00000000..1aee4cbf --- /dev/null +++ b/content/ru/examples/22.3d/2.multiple-3d.md @@ -0,0 +1,32 @@ +--- +image: + src: multiple-3d.png +description: Узнайте, как интегрировать несколько редакторов узлов в 3D-сцену. Легко встраивайте нативные HTML-редакторы в свою 3D-сцену на основе Three.js, не ущемляя интерактивные возможности. +keywords: 3D, несколько редакторов, Three.js, сцена, интеграция +navigation: + pro: true + preview: multiple-3d.png + top: 6 + showcase: + title: Встраивание в 3D + description: Улучшенная интеграция нескольких редакторов в 3D-сцену, что облегчает безупречное взаимодействие в AR/VR. + order: 5 + source: https://retejs-multiple-3d.netlify.app +--- + +# Несколько 3D редакторов + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/3d/#multiple-editors"} +:ref-example{title="3D" link="/ru/examples/3d"} +:ref-external{title="Three.js" link="https://threejs.org/"} +:ref-github{title="Плагин" link="https://github.com/retejs/area-3d-plugin"} +:: + +Этот редактор демонстрирует одну из 3D-функций, упомянутых в [руководстве](/ru/docs/guides/3d#multiple-editors), а именно возможность интеграции нескольких редакторов в одну сцену с использованием плагина `rete-area-3d-plugin`. + +Здесь представлены два типа редакторов: редактор материалов (слева) и редактор геометрии (справа). Они достаточно просты и предназначены для настройки рамки для изображения. Каждый редактор имеет свое контекстное меню. Перемещаться по сцене можно двумя способами: в режиме захвата стрелок или в режиме орбитального управления, который также позволяет редактировать схемы. + +:proExample{src="https://retejs-multiple-3d.netlify.app"} + +Хотя этот пример изначально был разработан для React.js, показанная функция полностью не зависит от фреймворка. Вы легко можете интегрировать ее в свое приложение на другом стеке, скопировав модуль функций и подключив его к своему редактору. diff --git a/content/ru/examples/22.allmatter.md b/content/ru/examples/22.allmatter.md new file mode 100644 index 00000000..4baff248 --- /dev/null +++ b/content/ru/examples/22.allmatter.md @@ -0,0 +1,21 @@ +--- +image: + src: allmatter.png +description: Этот пример инструмента для создания 3D-материала демонстрирует использование Rete.js для обработки данных и демонстрирует возможности фреймворка. Проект служит справочником при миграции проектов с v1. +keywords: 3D, материал, процедурный материал, поток данных, миграция +navigation: + preview: allmatter.png + top: 4 +--- + +# Инструмент для создания 3D-материалов + +::references +:ref-guide{title="Модули" link="/ru/docs/guides/modules"} +:ref-guide{title="Поток данных" link="/ru/docs/guides/processing/dataflow"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/react"} +:: + +Этот проект служит для демонстрации Rete.js 🔍 Кроме того, вы можете обратиться к его исходному коду при миграции своих проектов с v1. + +:frameExample{src="https://ni55an.github.io/allmatter"} diff --git a/content/ru/examples/23.codegen.md b/content/ru/examples/23.codegen.md new file mode 100644 index 00000000..35870e10 --- /dev/null +++ b/content/ru/examples/23.codegen.md @@ -0,0 +1,25 @@ +--- +image: + src: codegen.png +description: Этот пример Rete Studio Playground демонстрирует, как генерировать код JavaScript из представления графа. Введите код JavaScript и визуализируйте его графическое представление, которое также можно преобразовать в код JavaScript. +keywords: Rete Studio,playground,javascript,код в граф,граф в код,ast,трансформация +navigation: + preview: codegen.png + top: 7 + showcase: + title: Генерация кода + description: Генерация кода становится жизнеспособным вариантом выполнения графа благодаря универсальности фреймворка + order: 3 + link: https://studio.retejs.org/ + source: https://studio.retejs.org/playground/headless?language=javascript +--- + +# Генерация кода + +::references +:ref-external{title="Rete Studio" link="https://studio.retejs.org/"} +:: + +Этот пример демонстрирует встроенный Playground от Rete Studio, который позволяет вводить код JavaScript и просматривать его графическое представление, которое также можно преобразовать в код JavaScript. + +:frameExample{src="https://studio.retejs.org/playground/headless?language=javascript"} diff --git a/content/ru/examples/3.customization/1.react.md b/content/ru/examples/3.customization/1.react.md new file mode 100644 index 00000000..41b8ea7a --- /dev/null +++ b/content/ru/examples/3.customization/1.react.md @@ -0,0 +1,24 @@ +--- +image: + src: react-customize.png +description: Узнайте, как настраивать редактор узлов с использованием специальных компонентов в React.js. В этом примере представлены ресурсы, которые помогут вам создать настраиваемый редактор, адаптированный под ваши конкретные потребности. +keywords: настройка, react, настраиваемый узел, настраиваемое подключение, настраиваемый сокет +navigation: + preview: react-customize.png +--- + +# Настройка для React.js + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/react/#customization"} +:ref-example{title="Базовый" link="/ru/examples/basic/react"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/react"} +:ref-github{title="Плагин" link="https://github.com/retejs/react-render-plugin"} +:ref-external{title="React.js" link="https://react.dev/"} +:: + +Следующий пример демонстрирует реализацию настраиваемых узлов, сокетов и соединений для **React.js**, что позволяет адаптировать их под вашу специфику использования. Эти компоненты могут быть динамически настроены на основе параметров различных объектов (узлов, разъемов, соединений). + +Кроме того, добавлен градиентный фон в виде сетки с использованием чистого JS и CSS. Настраиваемые компоненты, визуализированные с помощью **React.js**, могут использоваться независимо от вашего стека технологий, даже [без JSX](https://react.dev/reference/react/createElement). Таким образом, если ваш фреймворк пользовательского интерфейса не интегрирован, вы можете отобразить части редактора с использованием **React.js**, используя этот пример. + +:example{id="rete-js-v2-custom-node-jpwdh3" module="/src/editor.ts"} diff --git a/content/ru/examples/3.customization/2.vue.md b/content/ru/examples/3.customization/2.vue.md new file mode 100644 index 00000000..68b42085 --- /dev/null +++ b/content/ru/examples/3.customization/2.vue.md @@ -0,0 +1,24 @@ +--- +image: + src: vue-customize.png +description: Узнайте, как настраивать редактор узлов с использованием специальных компонентов в Vue.js. В этом примере представлены ресурсы, которые помогут вам создать настраиваемый редактор, адаптированный под ваши конкретные потребности. +keywords: настройка, vue, настраиваемый узел, настраиваемое подключение, настраиваемый сокет +navigation: + preview: vue-customize.png +--- + +# Настройка для Vue.js + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/vue/#customization"} +:ref-example{title="Базовый" link="/ru/examples/basic/vue"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/vue"} +:ref-github{title="Плагин" link="https://github.com/retejs/vue-render-plugin"} +:ref-external{title="Vue.js" link="https://vuejs.org/"} +:: + +В следующем примере демонстрируется реализация настраиваемых узлов, сокетов и соединений для **Vue.js**, что позволяет адаптировать их под вашу специфику использования. Эти компоненты могут быть динамически настроены на основе параметров различных объектов (узлов, разъемов, соединений). + +Кроме того, добавлен градиентный фон в виде сетки с использованием чистого JS и CSS. + +:example{id="rete-js-v2-vue-js-customization-ubl35h" module="/src/editor.ts"} diff --git a/content/ru/examples/3.customization/3.angular.md b/content/ru/examples/3.customization/3.angular.md new file mode 100644 index 00000000..636fca4f --- /dev/null +++ b/content/ru/examples/3.customization/3.angular.md @@ -0,0 +1,24 @@ +--- +image: + src: angular-customize.png +description: Узнайте, как настраивать редактор узлов с использованием специальных компонентов в Angular. В этом примере представлены ресурсы, которые помогут вам создать настраиваемый редактор, адаптированный под ваши конкретные потребности. +keywords: настройка, angular, настраиваемый узел, настраиваемое подключение, настраиваемый сокет +navigation: + preview: angular-customize.png +--- + +# Настройка для Angular + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/angular/#customization"} +:ref-example{title="Базовый" link="/ru/examples/basic/angular"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/angular"} +:ref-github{title="Плагин" link="https://github.com/retejs/angular-render-plugin"} +:ref-external{title="Angular" link="https://angular.io/"} +:: + +В следующем примере демонстрируется реализация настраиваемых узлов, сокетов и соединений для **Angular**, что позволяет адаптировать их под вашу специфику использования. Эти элементы могут быть динамически настроены на основе параметров различных объектов (узлов, разъемов, соединений). + +Кроме того, добавлен градиентный фон в виде сетки с использованием чистого JS и CSS. + +:example{id="rete-js-v2-angular-customization-w9umwf" module="/src/app/editor.ts"} diff --git a/content/ru/examples/3.customization/4.svelte.md b/content/ru/examples/3.customization/4.svelte.md new file mode 100644 index 00000000..cd921027 --- /dev/null +++ b/content/ru/examples/3.customization/4.svelte.md @@ -0,0 +1,24 @@ +--- +image: + src: svelte-customize.png +description: Узнайте, как настраивать редактор узлов с использованием специальных компонентов в Svelte. В этом примере представлены ресурсы, которые помогут вам создать настраиваемый редактор, адаптированный под ваши конкретные потребности. +keywords: настройка, svelte, настраиваемый узел, настраиваемое подключение, настраиваемый сокет +navigation: + preview: svelte-customize.png +--- + +# Настройка для Svelte + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/renderers/svelte/#customization"} +:ref-example{title="Базовый" link="/ru/examples/basic/svelte"} +:ref-example{title="Элементы управления" link="/ru/examples/controls/svelte"} +:ref-github{title="Плагин" link="https://github.com/retejs/svelte-render-plugin"} +:ref-external{title="Svelte" link="https://svelte.dev/"} +:: + +В следующем примере демонстрируется реализация настраиваемых узлов, сокетов и соединений для **Svelte**, что позволяет адаптировать их под вашу специфику использования. Эти элементы могут быть динамически настроены на основе параметров различных объектов (узлов, разъемов, соединений). + +Кроме того, добавлен градиентный фон в виде сетки с использованием чистого JS и CSS. + +:example{id="rete-js-svelte-forked-29v37z" module="/src/editor.ts"} diff --git a/content/ru/examples/3.customization/index.md b/content/ru/examples/3.customization/index.md new file mode 100644 index 00000000..d69e4eb7 --- /dev/null +++ b/content/ru/examples/3.customization/index.md @@ -0,0 +1,12 @@ +--- +description: Ознакомьтесь с примерами настраиваемых узлов для разных библиотек и фреймворков пользовательского интерфейса (UI). +keywords: настраиваемые узлы, интеграция, библиотеки пользовательского интерфейса, фреймворки пользовательского интерфейса +navigation: + placeholder: true + overviewGroup: true +--- + +# Настройка + +:examples-overview{filter="/ru/examples/customization"} + diff --git a/content/ru/examples/6.performance.md b/content/ru/examples/6.performance.md new file mode 100644 index 00000000..d44e07b5 --- /dev/null +++ b/content/ru/examples/6.performance.md @@ -0,0 +1,20 @@ +--- +image: + src: perf.png +description: Узнайте, как оценить производительность отрисовки большого количества узлов на странице и изучите специальные подходы к устранению проблем производительности на примерах, таких как LOD и LOD GPU. +keywords: производительность, большое количество узлов +navigation: + preview: perf.png +--- + +# Производительность + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/basic"} +:ref-example{title="LOD" link="/ru/examples/lod"} +:ref-example{title="LOD GPU" link="/ru/examples/lod-gpu"} +:: + +В этом примере вы можете установить количество узлов для отображения и оценить производительность при их рендеринге. Учитывая, что визуализация большого количества элементов на странице всегда сопряжена с проблемами производительности, вы можете исследовать такие примеры, как [LOD](/ru/examples/lod) и [LOD GPU](/ru/examples/lod-gpu), используя специальные подходы для устранения этих ограничений. + +:example{id="rete-js-v2-performance-cnbfc0" module="/src/editor.ts"} diff --git a/content/ru/examples/6.vertical-flow.md b/content/ru/examples/6.vertical-flow.md new file mode 100644 index 00000000..23a79dd3 --- /dev/null +++ b/content/ru/examples/6.vertical-flow.md @@ -0,0 +1,22 @@ +--- +image: + src: vertical.png +description: Узнайте, как создать вертикально ориентированный редактор, внесши небольшие изменения в узлы и соединения, включая использование специального компонента узла, настройку точек соединения, изменение пути соединения и изменение расположения портов. +keywords: вертикальный поток,вертикальная ориентация,вертикальный редактор узлов,кастомные узлы +navigation: + pro: true + preview: vertical.png +--- + +# Вертикальный поток + +Приведенный пример иллюстрирует вертикально ориентированный редактор. Это было достигнуто путем внесения небольших изменений в узлы и соединения, включая: + +- использование кастомного компонента узла с измененной структурой и некоторыми стилями. +- настройку точек соединения с сокетами. +- изменение пути соединения на вертикальную ориентацию. +- изменение точек размещения портов в компоновке. +- +:proExample{src="https://retejs-vertical-flow.netlify.app"} + +Фактический пример создан с использованием React.js, но примерно 75% перечисленных изменений не зависят от стека. Это означает, что для их использования в Angular, Vue.js или Svelte вам придется создать соответствующий специальный компонент. Если у вас возникнут проблемы, не стесняйтесь связаться через GitHub Issues в соответствующем репозитории. diff --git a/content/ru/examples/7.area-extensions.md b/content/ru/examples/7.area-extensions.md new file mode 100644 index 00000000..a46639ec --- /dev/null +++ b/content/ru/examples/7.area-extensions.md @@ -0,0 +1,25 @@ +--- +image: + src: area.png +description: Узнайте, как использовать встроенные расширения, предоставленные плагином rete-area-plugin, включая selectableNodes для выбора узлов, restrictor для ограничения масштабирования и панорамирования областей, а также snapGrid для привязки позиций узлов к сетке. +keywords: rete-area-plugin,selectableNodes,restrictor,snapGrid,выбор узлов, сетка,расширения области +navigation: + preview: area.png +--- + +# Расширения области + +::references +:ref-guide{title="Основы" link="/ru/docs/guides/basic"} +:ref-guide{title="Выбор узлов" link="/ru/docs/guides/selectable"} +:ref-example{title="Ограничение области" link="/ru/examples/viewport-bound"} +:ref-github{title="Плагин области" link="https://github.com/retejs/area-plugin"} +:: + +Этот пример демонстрирует использование встроенных расширений, предоставленных плагином `rete-area-plugin`, таких как: + +- `selectableNodes`: позволяет пользователям выбирать узлы. +- `restrictor`: ограничивает масштабирование и панорамирование в пределах области. +- `snapGrid`: привязывает позиции узлов к сетке. + +:example{id="rete-js-v2-area-extensions-rhskwv" module="/src/editor.ts"} diff --git a/content/ru/examples/7.processing/14.dataflow.md b/content/ru/examples/7.processing/14.dataflow.md new file mode 100644 index 00000000..a0d8ef37 --- /dev/null +++ b/content/ru/examples/7.processing/14.dataflow.md @@ -0,0 +1,24 @@ +--- +image: + src: dataflow.png +description: Узнайте, как создать конвейер обработки данных с помощью rete-engine. В этом примере показан подход потока данных, когда данные проходят через узлы слева направо. +keywords: поток данных, движок, обработка +navigation: + preview: dataflow.png +--- + +# Поток данных + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/processing/dataflow"} +:ref-example{title="Гибридный движок" link="/ru/examples/processing/hybrid-engine"} +:ref-example{title="3D-конфигуратор" link="/ru/examples/3d-configurator"} +:ref-example{title="Allmatter" link="/ru/examples/allmatter"} +:ref-github{title="Плагин" link="https://github.com/retejs/engine"} +:: + +Этот пример демонстрирует конвейер обработки данных с использованием `rete-engine`, где данные переходят слева направо через узлы. + +Каждый узел имеет метод `data`, который получает массивы входных данных из соответствующих входных соксов и возвращает объект, содержащий данные, соответствующие выходным соксам. Чтобы инициировать их выполнение, вы можете использовать метод `engine.fetch`, указав идентификатор целевого узла. Следовательно, движок выполнит всех его предшественников рекурсивно, извлекая их выходные данные и передавая их в указанный узел. + +:example{id="rete-js-v2-dataflow-engine-tyhr1e" module="/src/editor.ts"} diff --git a/content/ru/examples/7.processing/15.control-flow.md b/content/ru/examples/7.processing/15.control-flow.md new file mode 100644 index 00000000..724ea032 --- /dev/null +++ b/content/ru/examples/7.processing/15.control-flow.md @@ -0,0 +1,22 @@ +--- +image: + src: control-flow.png +description: Узнайте, как выполнять схему через управление потоком с помощью rete-engine. В этом примере показано, как каждый узел динамически решает, какой из выходных узлов получит управление. +keywords: управление потоком, выполнение, движок, обработка +navigation: + preview: control-flow.png +--- + +# Управление потоком + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/processing/control-flow"} +:ref-example{title="Гибридный движок" link="/ru/examples/processing/hybrid-engine"} +:ref-github{title="Плагин" link="https://github.com/retejs/engine"} +:: + +Этот пример демонстрирует выполнение схемы через управление потоком с использованием `rete-engine`, где каждый узел динамически решает, какой из выходных узлов получит управление. + +Каждый узел имеет метод `execute`, который принимает ключ входного порта как источник управления и функцию для передачи управления выходным узлам через определенный выходной порт. Чтобы инициировать выполнение потока, вы можете использовать метод `engine.execute`, указав идентификатор начального узла. Следовательно, выходные узлы будут выполняться последовательно, начиная с указанного узла. + +:example{id="rete-js-v2-control-flow-engine-yqi8z7" module="/src/editor.ts"} diff --git a/content/ru/examples/7.processing/15.hybrid-engine.md b/content/ru/examples/7.processing/15.hybrid-engine.md new file mode 100644 index 00000000..000f2777 --- /dev/null +++ b/content/ru/examples/7.processing/15.hybrid-engine.md @@ -0,0 +1,22 @@ +--- +image: + src: hybrid.png +description: Узнайте, как интегрировать поток данных и управление потоком с использованием rete-engine. В этом примере показано, как некоторые узлы служат источниками данных, другие управляют потоком, а третий набор включает в себя оба эти подхода. +keywords: гибрид, поток данных, управление потоком, движок, обработка +navigation: + preview: hybrid.png +--- + +# Гибридный + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/processing/hybrid"} +:ref-example{title="Поток данных" link="/ru/examples/processing/dataflow"} +:ref-example{title="Управление потоком" link="/ru/examples/processing/control-flow"} +:ref-example{title="Чат-бот" link="/ru/examples/chatbot"} +:ref-github{title="Плагин" link="https://github.com/retejs/engine"} +:: + +В этом примере показано, как `rete-engine` позволяет одновременно интегрировать поток данных и управление потоком. Таким образом, некоторые узлы служат источниками данных, другие управляют потоком, а третий набор включает в себя оба эти подхода. + +:example{id="rete-js-v2-hybrid-engine-erkdtu" module="/src/editor.ts"} diff --git a/content/ru/examples/7.processing/index.md b/content/ru/examples/7.processing/index.md new file mode 100644 index 00000000..d8d99e0b --- /dev/null +++ b/content/ru/examples/7.processing/index.md @@ -0,0 +1,6 @@ +--- +navigation: + placeholder: true +--- + +# Обработка diff --git a/content/ru/examples/7.undirected.md b/content/ru/examples/7.undirected.md new file mode 100644 index 00000000..cd6eeab3 --- /dev/null +++ b/content/ru/examples/7.undirected.md @@ -0,0 +1,36 @@ +--- +image: + src: undirected.gif +description: Узнайте о основных функциях неориентированного графа, включая круглые узлы, выбираемые соединения, унифицированный порт для соединений, удаление соединений с помощью специальной кнопки и соединения, представленные прямыми линиями и петлями с маркерами на концах. +keywords: неориентированный,круглые узлы,петли +navigation: + pro: true + preview: undirected.gif + showcase: + title: Гибкость + description: Помимо классического внешнего вида, фреймворк позволяет вам расширять его до неузнаваемости. + order: 10 + source: https://retejs-undirected.netlify.app +--- + +# Неориентированный + +::references +:ref-example{title="Кастомизация" link="/ru/examples/customization/react"} +:ref-example{title="Выбор соединений" link="/ru/examples/selectable-connections"} +:ref-example{title="Путь соединения" link="/ru/examples/connection-path"} +:: + +В этом примере демонстрируются несколько важных функций: + +- Круглые узлы +- Выбираемые соединения +- Унифицированный порт для соединений +- Удаление соединений с помощью специальной кнопки, расположенной посередине пути +- Соединения, представленные прямыми линиями и петлями с маркерами на концах +- +:proExample{src="https://retejs-undirected.netlify.app"} + +Для визуализации используется классический пресет, который предполагает наличие входных и выходных портов, но в этом случае используется хитрость для упаковки их в единый унифицированный сокет, представленный прозрачным кругом, радиус которого немного больше, чем у самого узла. Для представления узлов и соединений используются кастомные компоненты. Плагин `rete-connection-path-plugin` используется для настройки пути соединения и маркера. Вместо `getDOMSocketPosition` используется специальный калькулятор позиции сокета, чтобы гарантировать, что начало и конец соединения совпадают с границей узла. + +Примерный 50% исходного кода примера зависит от стека и доступен для React.js и Angular. Если вы используете другой стек, вы можете мигрировать необходимые компоненты, ориентируясь на исходный код, или отправить запрос на их реализацию через GitHub Issues в соответствующем репозитории. diff --git a/content/ru/examples/8.arrange.md b/content/ru/examples/8.arrange.md new file mode 100644 index 00000000..5f87c3ab --- /dev/null +++ b/content/ru/examples/8.arrange.md @@ -0,0 +1,21 @@ +--- +image: + src: arrange.gif +description: Узнайте о автоматической компоновке узлов (макетировании), которая позволяет размещать узлы относительно друг друга, учитывая их соединения. Это достигается с помощью специального плагина, который использует elk.js для вычисления позиций узлов. +keywords: компоновка,макет редактора узлов,расположение,elk.js,позиция узла +navigation: + preview: arrange.gif +--- + +# Расположение узлов +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/arrange"} +:ref-example{title="Санкей-диаграмма" link="/ru/examples/sankey"} +:ref-external{title="Elk.js" link="https://github.com/kieler/elkjs"} +:: + +Автоматизированное расположение узлов, также известное как макетирование, позволяет размещать узлы относительно друг друга, учитывая их соединения. Это достигается с помощью специального плагина, который использует [elk.js](https://github.com/kieler/elkjs) для вычисления позиций узлов. + +Кроме того, этот плагин предоставляет широкие возможности настройки, позволяя пользователям настраивать расположение узлов с использованием различных параметров и программы применения для присвоения вычисленных позиций узлам (например, включение анимации). + +:example{id="rete-js-v2-arrange-layout-nodes-ri75lp" module="/src/editor.ts"} diff --git a/content/ru/examples/8.insert-node.md b/content/ru/examples/8.insert-node.md new file mode 100644 index 00000000..7176b141 --- /dev/null +++ b/content/ru/examples/8.insert-node.md @@ -0,0 +1,18 @@ +--- +image: + src: insert-node.gif +description: Узнайте, как вставлять узел в соединение между другими узлами. Реализация заменяет соединение двумя новыми, когда выбранный узел перекидывается на соединение. +keywords: вставка узла,замена соединения +navigation: + preview: insert-node.gif +--- + +# Вставка узла + +В этом сценарии пользователь может вставить узел в соединение между другими узлами. Реализация заменяет соединение двумя новыми, когда выбранный узел перетаскивается на соединение. + +После добавления соединения граф анимированно пересчитывается. + +:example{id="rete-js-v2-insert-node-givohx" module="/src/editor.ts"} + +Используйте каталог `insert-node` и вызовите `insertableNodes` с соответствующими аргументами, чтобы интегрировать эту функцию в свое приложение. diff --git a/content/ru/examples/8.magnetic-connection.md b/content/ru/examples/8.magnetic-connection.md new file mode 100644 index 00000000..ce1e6f40 --- /dev/null +++ b/content/ru/examples/8.magnetic-connection.md @@ -0,0 +1,16 @@ +--- +image: + src: magnetic-connection.gif +description: Улучшайте работу пользователя с редактором узлов с помощью магнитного соединения. Эта техника увеличивает область схватывания соединения, облегчая подключение разъемов, даже если они маленькие или низкий уровень масштабирования. +keywords: магнитное соединение,область разрыва соединения,улучшение UX +navigation: + preview: magnetic-connection.gif +--- + +# Магнитное соединение + +Приведенный пример демонстрирует технику улучшения пользовательского опыта путем увеличения области захвата соединения. Это означает, что пользователи не должны прямо целиться в разъем, чтобы создать соединение, особенно если разъем небольшой или уровень масштабирования низкий. + +:example{id="rete-js-v2-magnetic-connection-078ild" module="/src/editor.ts"} + +Чтобы реализовать этот подход в вашем проекте, скопируйте каталог `magnetic-connection` и вызов соответствующей функции `useMagneticConnection` в модуле `editor.ts`. В зависимости от рендера плагина, используйте существующий компонент соединения в каталоге или создайте свой собственный. diff --git a/content/ru/examples/8.smooth-zoom.md b/content/ru/examples/8.smooth-zoom.md new file mode 100644 index 00000000..369caa5e --- /dev/null +++ b/content/ru/examples/8.smooth-zoom.md @@ -0,0 +1,24 @@ +--- +image: + src: smooth-zoom.gif +description: Улучшьте опыт масштабирования вашего редактора узлов с помощью этого примера плавного масштабирования. Сделайте работу редактора более естественной и плавной. +keywords: плавный зум,плавное масштабирование,кастомный обработчик масштабирования +navigation: + preview: smooth-zoom.gif +--- + +# Плавный зум + +::references +:ref-guide{title="API" link="/docs/api/rete-area-plugin#zoom"} +:: + +В редакторе по умолчанию включено мгновенное масштабирование с шагом, эквивалентным одному движению колеса прокрутки. Если вам нужно настроить это поведение, вы можете расширить класс `Zoom` + +:example{id="rete-js-v2-smooth-zoom-6sqv8j" module="/src/editor.ts"} + +В этом примере основная логика находится в `src/zoom.ts`. Чтобы интегрировать это в редактор, просто добавьте следующую строку: + +```ts +area.area.setZoomHandler(new SmoothZoom(0.5, 200, "cubicBezier(.45,.91,.49,.98)", area)); +``` \ No newline at end of file diff --git a/content/ru/examples/9.context-menu.md b/content/ru/examples/9.context-menu.md new file mode 100644 index 00000000..da541e87 --- /dev/null +++ b/content/ru/examples/9.context-menu.md @@ -0,0 +1,21 @@ +--- +image: + src: context-menu.png +description: Узнайте, как создать контекстное меню для вашего редактора узлов с помощью этого примера. Используйте предоставленный плагин для создания общего контекстного меню с списком узлов, которые нужно создать, а также отдельных контекстных меню для узлов с параметрами удаления и копирования. +keywords: контекстное меню,взаимодействие с пользователем +navigation: + preview: context-menu.png +--- + +# Контекстное меню + +::references +:ref-guide{title="Гайд" link="/ru/docs/guides/context-menu"} +:ref-github{title="Плагин" link="https://github.com/retejs/context-menu-plugin"} +:: + +В этом примере показано использование контекстного меню, предоставляемого как отдельный плагин. Он позволяет создавать общее контекстное меню со списком узлов, которые нужно создать (включая вложенные подменю), а также отдельные контекстные меню для узлов с параметрами удаления и копирования. + +Предоставленные функции базируются на классическом пресете, но для более гибкой настройки его можно заменить, чтобы облегчить создание более динамических пунктов меню. + +:example{id="rete-js-v2-context-menu-jcelzo" module="/src/editor.ts"} diff --git a/content/ru/examples/9.panning-boundary.md b/content/ru/examples/9.panning-boundary.md new file mode 100644 index 00000000..bb31db88 --- /dev/null +++ b/content/ru/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="/ru/examples/viewport-bound"} +:: + +Этот пример демонстрирует реализацию перемещения области, когда курсор с перетаскиваемым узлом приближается к границам редактора. В зависимости от расстояния до любой из границ области, начиная с определенного порога, скорость перемещения будет обратно пропорциональна расстоянию до границы. + +:example{id="rete-js-v2-panning-boundary-4zvf6t" module="/src/editor.ts"} + +Хотя этот пример изначально разрабатывался для React.js, показанная функция полностью не зависит от фреймворка. Вы можете легко интегрировать ее в свое приложение на другом стеке, скопировав модуль функций и подключив его к своему редактору. diff --git a/content/ru/examples/9.readonly.md b/content/ru/examples/9.readonly.md new file mode 100644 index 00000000..1bf62c8c --- /dev/null +++ b/content/ru/examples/9.readonly.md @@ -0,0 +1,21 @@ +--- +image: + src: basic.png +description: Узнайте, как ограничить добавление узлов и соединений в вашем редакторе узлов с помощью этого примера простого плагина rete-readonly-plugin. Предотвращайте перемещение узлов в пределах области и изучите исходный код, чтобы создать собственные решения, адаптированные к вашему конкретному случаю использования. +keywords: только чтение +navigation: + preview: basic.png +--- + +# Только чтение + +::references +:ref-guide{title="Руководство" link="/ru/docs/guides/readonly"} +:ref-github{title="Плагин" link="https://github.com/retejs/readonly-plugin"} +:: + +Приведенный пример демонстрирует простой плагин, известный как `rete-readonly-plugin`. Когда он активирован, этот плагин предотвращает добавление узлов и соединений в ядро редактора, а также перемещение узлов в пределах области. + +С другой стороны, плагин намеренно не имеет разнообразных параметров для настройки, чтобы быть простым и позволить исследовать его исходный код и создавать собственные решения, адаптированные к конкретному случаю использования (например, ограничение добавления только определенных типов узлов). + +:example{id="rete-js-v2-readonly-4pi274" module="/src/editor.ts"} diff --git a/locales/ru.json b/locales/ru.json new file mode 100644 index 00000000..1547ddd8 --- /dev/null +++ b/locales/ru.json @@ -0,0 +1,107 @@ +{ + "name": "Rete.js", + "docs": "Документация", + "documentation": "Документация", + "examples": "Примеры", + "components": "Компоненты", + "issues": "Проблемы", + "sponsor": "Спонсор", + "learn": "Изучение", + "ecosystem": "Экосистема", + "report-bug": "Сообщить об ошибке", + "benefits": "Преимущества", + "openNewTab": "Открыть в новой вкладке", + "main": { + "title": "JavaScript фреймворк для визуального программирования", + "description": "Адаптивный TypeScript-first фреймворк для создания ориентированных на обработку редакторов узлов", + "highlights": { + "ts": { + "title": "TypeScript-first", + "description": "Расширенный опыт разработчика и облегченное создание поддерживаемого кода" + }, + "processing": { + "title": "Ориентированный на обработку", + "description": "Помимо визуализации, фреймворк предоставляет Engine и другие модули для обработки графов" + }, + "tailorable": { + "title": "Адаптивный", + "description": "Настраивается разнообразными плагинами и интегрируется с Angular, Vue.js, React.js и т.д." + } + } + }, + "examplesPage": { + "title": "Пример {title}", + "proExample": { + "getAccess": "Получить доступ", + "info": "Подпишитесь на уровень Contributor на Patreon и отправьте свой GitHub username", + "alert": "Исходный код для этого Pro примера доступен только подписчикам" + } + }, + "docsearch": { + "placeholder": "Искать", + "button": { + "buttonText": "Поиск", + "buttonAriaLabel": "Поиск" + }, + "modal": { + "searchBox": { + "resetButtonTitle": "Очистить запрос", + "resetButtonAriaLabel": "Очистить запрос", + "cancelButtonText": "Отменить", + "cancelButtonAriaLabel": "Отменить" + }, + "startScreen": { + "recentSearchesTitle": "Последние", + "noRecentSearchesText": "Нет последних поисков", + "saveRecentSearchButtonTitle": "Сохранить этот поиск", + "removeRecentSearchButtonTitle": "Удалить этот поиск из истории", + "favoriteSearchesTitle": "Избранное", + "removeFavoriteSearchButtonTitle": "Удалить этот поисковый запрос из избранного" + }, + "errorScreen": { + "titleText": "Не удалось получить результаты", + "helpText": "Вам может потребоваться проверить ваше сетевое соединение." + }, + "footer": { + "selectText": "выбрать", + "selectKeyAriaLabel": "Введите ключ", + "navigateText": "для навигации", + "navigateUpKeyAriaLabel": "Стрелка вверх", + "navigateDownKeyAriaLabel": "Стрелка вниз", + "closeText": "закрыть", + "closeKeyAriaLabel": "Клавиша Escape", + "searchByText": "Поиск от" + }, + "noResultsScreen": { + "noResultsText": "Нет результатов для", + "suggestedQueryText": "Попробуйте найти", + "reportMissingResultsText": "Считаете, что этот запрос должен возвращать результаты?", + "reportMissingResultsLinkText": "Дайте нам знать." + } + } + }, + "currentVersionNotice": { + "youAreBrowsing": "Вы просматриваете документацию для Rete.js 2 Beta.", + "checkOut": "Проверьте", + "docsV1": "документацию для Rete.js v1", + "orGetStarted": ", или начните с текущей беты" + }, + "sponsorPage": { + "title": "Спонсируйте нас", + "subtitle1": "Спасибо, что рассматриваете возможность стать спонсором Rete.js!", + "subtitle2": "Ваше спонсорство помогает нам поддерживать и улучшать наш фреймворк, чтобы мы могли и дальше предоставлять высококачественный инструмент для разработчиков.", + "patreon": { + "description": "Став патроном на Patreon, вы можете ежемесячно поддерживать нас и получать доступ к эксклюзивному контенту и бонусам.", + "benefits": "доступ к исходному коду Pro примеров, приоритетная обратная связь по проблемам" + }, + "opencollective": { + "description": "Если вы желаете делать одноразовые или регулярные пожертвования с прозрачностью, вы можете сделать это через OpenCollective.", + "benefits": "размещение логотипа в файле README репозитория retejs/rete, приоритетная обратная связь по проблемам" + }, + "contacts": "Если у вас есть вопросы касательно способов оплаты, преимуществ или признания спонсоров, свяжитесь с нами через" + }, + "share": { + "docs": "документация Rete.js", + "example": "пример на базе Rete.js" + } +} diff --git a/nuxt.config.ts b/nuxt.config.ts index 89fe38fb..d328e091 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -38,6 +38,7 @@ export default defineNuxtConfig({ locales: [ { code: 'en', file: 'en.json' }, { code: 'uk', file: 'uk.json' }, + { code: 'ru', file: 'ru.json' }, ], detectBrowserLanguage: { fallbackLocale: 'en',