├── .eslintignore
├── .dockerignore
├── .prettierrc
├── docs
    ├── .npmrc
    ├── app.vue
    ├── assets
    │   ├── css
    │   │   └── main.css
    │   └── images
    │   │   ├── app.png
    │   │   ├── bg.png
    │   │   └── icon.svg
    ├── .gitignore
    ├── tsconfig.json
    ├── app.config.ts
    ├── nuxt.config.ts
    ├── tailwind.config.js
    ├── package.json
    ├── README.md
    └── components
    │   └── LandingPage.vue
├── prettier.config.js
├── public
    ├── images
    │   ├── application
    │   │   ├── icon.png
    │   │   ├── favicon.ico
    │   │   ├── icon.svg
    │   │   ├── docker_not_found.svg
    │   │   └── ocr4all.svg
    │   └── repository
    │   │   ├── product_image.jpg
    │   │   ├── logo_with_text_light_mode.svg
    │   │   └── logo_with_text_dark_mode.svg
    └── assets
    │   └── nodeflow-custom.css
├── postcss.config.js
├── src
    ├── views
    │   ├── EditorPage.vue
    │   ├── TourPage.vue
    │   ├── CommandCenterPage.vue
    │   └── DashboardPage.vue
    ├── vite-env.d.ts
    ├── utils
    │   └── nodeEditor.ts
    ├── stores
    │   ├── editor.store.ts
    │   └── commandCenter.store.ts
    ├── App.vue
    ├── nodes
    │   └── InputNode.ts
    ├── components
    │   ├── Editor
    │   │   ├── Custom
    │   │   │   ├── viewNode.ts
    │   │   │   ├── PaletteEntry.vue
    │   │   │   ├── Toolbar.vue
    │   │   │   ├── NodeInterface.vue
    │   │   │   ├── Palette.vue
    │   │   │   └── Node.vue
    │   │   ├── UI
    │   │   │   ├── SpeedDial.vue
    │   │   │   ├── HintOverlay.vue
    │   │   │   └── EditorMenubar.vue
    │   │   ├── logic
    │   │   │   ├── NodeFactory.ts
    │   │   │   └── WorkflowExporter.js
    │   │   └── WorkflowEditor.vue
    │   ├── Layout
    │   │   ├── LanguageDropdown.vue
    │   │   ├── NotFound.vue
    │   │   └── Sidebar.vue
    │   ├── CommandCenter
    │   │   ├── Success.vue
    │   │   ├── Export.vue
    │   │   ├── ImageImport.vue
    │   │   ├── Docker.vue
    │   │   └── Workflow.vue
    │   ├── Tour
    │   │   ├── TourCard.vue
    │   │   └── Tour.vue
    │   └── Settings
    │   │   └── SettingsModal.vue
    ├── style.css
    ├── router
    │   └── index.ts
    ├── locales
    │   ├── en.json
    │   └── de.json
    ├── main.ts
    └── auto-imports.d.ts
├── .editorconfig
├── tailwind.config.js
├── tsconfig.node.json
├── electron
    ├── electron-env.d.ts
    ├── preload
    │   └── index.ts
    └── main
    │   └── index.ts
├── .gitignore
├── .prettierignore
├── index.html
├── tsconfig.json
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
    └── workflows
    │   ├── release.yml
    │   └── build_develop.yml
├── .eslintrc.js
├── electron-builder.json5
├── License
├── README.md
├── package.json
├── vite.config.ts
└── dist-electron
    └── main
        └── index.js


/.eslintignore:
--------------------------------------------------------------------------------
1 | cypress
2 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/docs/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <LandingPage />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/docs/assets/css/main.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/docs/assets/images/app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxnth/NodeFlow/HEAD/docs/assets/images/app.png


--------------------------------------------------------------------------------
/docs/assets/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxnth/NodeFlow/HEAD/docs/assets/images/bg.png


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: [require('prettier-plugin-tailwindcss')],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/images/application/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxnth/NodeFlow/HEAD/public/images/application/icon.png


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/images/application/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxnth/NodeFlow/HEAD/public/images/application/favicon.ico


--------------------------------------------------------------------------------
/public/images/repository/product_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maxnth/NodeFlow/HEAD/public/images/repository/product_image.jpg


--------------------------------------------------------------------------------
/src/views/EditorPage.vue:
--------------------------------------------------------------------------------
1 | <script setup lang="ts">
2 | import Editor from '../components/Editor/WorkflowEditor.vue';
3 | </script>
4 | 
5 | <template>
6 |   <Editor />
7 | </template>
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 | 
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue';
5 |   const component: DefineComponent<{}, {}, any>;
6 |   export default component;
7 | }
8 | 


--------------------------------------------------------------------------------
/docs/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   nuxtIcon: {
 3 |     size: '32px', // default <Icon> size applied
 4 |     class: 'icon', // default <Icon> class applied
 5 |     aliases: {
 6 |       nuxt: 'logos:nuxt-icon',
 7 |     },
 8 |   },
 9 | });
10 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './index.html',
 5 |     './src/**/*.{vue,js,ts,jsx,tsx}',
 6 |   ],
 7 |   darkMode: 'class',
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | };
13 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "resolveJsonModule": true,
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts", "package.json", "electron"]
10 | }
11 | 


--------------------------------------------------------------------------------
/electron/electron-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite-plugin-electron/electron-env" />
 2 | 
 3 | declare namespace NodeJS {
 4 |   interface ProcessEnv {
 5 |     VSCODE_DEBUG?: 'true';
 6 |     DIST_ELECTRON: string;
 7 |     DIST: string;
 8 |     /** /dist/ or /public/ */
 9 |     PUBLIC: string;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/docs/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   css: ['~/assets/css/main.css'],
 4 |   modules: ['@nuxt/content', 'nuxt-icon'],
 5 |   postcss: {
 6 |     plugins: {
 7 |       tailwindcss: {},
 8 |       autoprefixer: {},
 9 |     },
10 |   },
11 | });
12 | 


--------------------------------------------------------------------------------
/src/utils/nodeEditor.ts:
--------------------------------------------------------------------------------
 1 | import { IBaklavaViewModel } from "baklavajs";
 2 | 
 3 | export function addNodeWithCoordinates(baklava: IBaklavaViewModel, nodeType: any, x: number, y: number) {
 4 |   const n = new nodeType();
 5 |   baklava.displayedGraph.addNode(n);
 6 |   n.position.x = x;
 7 |   n.position.y = y;
 8 |   return n;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/stores/editor.store.ts:
--------------------------------------------------------------------------------
 1 | import { acceptHMRUpdate, defineStore } from 'pinia';
 2 | 
 3 | export const useEditorStore = defineStore('editor', () => {
 4 |   const stack = ref();
 5 | 
 6 |   return {
 7 |     stack
 8 |   };
 9 | });
10 | 
11 | if (import.meta.hot)
12 |   import.meta.hot.accept(acceptHMRUpdate(useEditorStore, import.meta.hot));
13 | 


--------------------------------------------------------------------------------
/docs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './components/**/*.{js,vue,ts}',
 5 |     './layouts/**/*.vue',
 6 |     './pages/**/*.vue',
 7 |     './plugins/**/*.{js,ts}',
 8 |     './nuxt.config.{js,ts}',
 9 |     './app.vue',
10 |   ],
11 |   theme: {
12 |     extend: {},
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/src/stores/commandCenter.store.ts:
--------------------------------------------------------------------------------
 1 | import { acceptHMRUpdate, defineStore } from 'pinia';
 2 | 
 3 | export const useCommandCenterStore = defineStore('command-center', () => {
 4 |   const workspace = ref();
 5 | 
 6 |   return {
 7 |     workspace
 8 |   };
 9 | });
10 | 
11 | if (import.meta.hot)
12 |   import.meta.hot.accept(acceptHMRUpdate(useCommandCenterStore, import.meta.hot));
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | release
11 | node_modules
12 | dist
13 | dist-ssr
14 | *.local
15 | 
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | !.vscode/launch.json 
20 | .idea
21 | .DS_Store
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | .output
11 | dist-electron
12 | node_modules
13 | dist
14 | *.local
15 | public
16 | pnpm-lock.yaml
17 | auto-imports.d.ts
18 | 
19 | # Editor directories and files
20 | .vscode/*
21 | !.vscode/extensions.json
22 | !.vscode/settings.json
23 | .idea
24 | .DS_Store
25 | *.suo
26 | *.ntvs*
27 | *.njsproj
28 | *.sln
29 | *.sw?
30 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Sidebar from './components/Layout/Sidebar.vue';
 3 | import Toast from 'primevue/toast';
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div id="app" class="flex min-h-screen font-sans dark:bg-gray-700">
 8 |     <Toast />
 9 |     <Sidebar />
10 |     <div style="height: 100vh; width: 100%" class="dark:bg-gray-700">
11 |       <Suspense>
12 |         <router-view />
13 |       </Suspense>
14 |     </div>
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/views/TourPage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Tour from '../components/Tour/Tour.vue';
 3 | import TourCard from '../components/Tour/TourCard.vue';
 4 | 
 5 | const isTourActive = ref(false);
 6 | 
 7 | function activateTour() {
 8 |   isTourActive.value = true;
 9 | }
10 | </script>
11 | 
12 | <template>
13 |   <div v-if="!isTourActive" class="flex h-screen items-center justify-center">
14 |     <TourCard @activate-tour="activateTour" />
15 |   </div>
16 |   <Tour v-else />
17 | </template>
18 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxt/content": "^2.3.0",
12 |     "autoprefixer": "^10.4.13",
13 |     "nuxt": "^3.0.0",
14 |     "nuxt-icon": "^0.2.6",
15 |     "postcss": "^8.4.21",
16 |     "tailwindcss": "^3.2.4"
17 |   },
18 |   "dependencies": {}
19 | }
20 | 


--------------------------------------------------------------------------------
/src/nodes/InputNode.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import {ButtonInterface, Node, NodeInterface } from "baklavajs";
 3 | export default class InputNode extends Node<any, any> {
 4 |   public type = "InputNode";
 5 |   public title = "Input"
 6 | 
 7 |   public inputs = {
 8 |     "description": new ButtonInterface("Description", () => console.log("Description"))
 9 |   };
10 | 
11 |   public outputs = {
12 |     "output": new NodeInterface("Output", 0),
13 |   };
14 | 
15 |   public constructor() {
16 |     super();
17 |     this.initializeIo();
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/viewNode.ts:
--------------------------------------------------------------------------------
 1 | // @ts-nocheck
 2 | import { AbstractNode, INodeState } from "@baklavajs/core";
 3 | 
 4 | export interface IViewNodeState extends INodeState<unknown, unknown> {
 5 |   position: { x: number; y: number };
 6 |   width: number;
 7 |   twoColumn: boolean;
 8 | }
 9 | 
10 | export function setViewNodeProperties(node: AbstractNode) {
11 |   node.position = node.position ?? { x: 0, y: 0 };
12 |   node.disablePointerEvents = false;
13 |   node.twoColumn = node.twoColumn ?? false;
14 |   node.width = node.width ?? 200;
15 | }
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/x-icon" href="./public/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta
 8 |       http-equiv="Content-Security-Policy"
 9 |       content="script-src 'self' 'unsafe-inline' 'unsafe-eval';"
10 |     />
11 |     <title>NodeFlow</title>
12 |   </head>
13 |   <body>
14 |     <div id="app"></div>
15 |     <script type="module" src="/src/main.ts"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "experimentalDecorators": true,
 4 |     "target": "ESNext",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "Node",
 8 |     "strict": true,
 9 |     "jsx": "preserve",
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["ESNext", "DOM"],
14 |     "skipLibCheck": true,
15 |     "noEmit": true,
16 |     "allowJs": true
17 |   },
18 |   "include": ["src"],
19 |   "references": [{ "path": "./tsconfig.node.json" }]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   code {
 7 |     @apply mx-2 rounded bg-gray-200 px-1 py-0.5 dark:bg-gray-700;
 8 |   }
 9 | 
10 |   a {
11 |     @apply text-[#42b983];
12 |   }
13 | }
14 | 
15 | .border-trueblack {
16 |   border-color: black;
17 | }
18 | 
19 | ::-webkit-scrollbar {
20 |   background-color: #2b2b2b;
21 |   border-left: 1px solid #3e3e3e;
22 |   width: 0.65rem;
23 | }
24 | 
25 | ::-webkit-scrollbar-thumb {
26 |   background: #6b6b6b;
27 |   border-radius: 10px;
28 | }
29 | 
30 | .router-link-exact-active {
31 |   @apply bg-gray-200 dark:bg-gray-700;
32 | }
33 | 
34 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 | 
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 | 
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 | 


--------------------------------------------------------------------------------
/src/components/Layout/LanguageDropdown.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | const t = useI18n({ useScope: 'global' });
 3 | 
 4 | const selectedLanguage = ref(t.locale.value);
 5 | const languages = ref([
 6 |   { name: '🇺🇸 English', flag: '🇺🇸', code: 'en' },
 7 |   { name: '🇩🇪 German', flag: '🇩🇪', code: 'de' },
 8 | ]);
 9 | 
10 | function changeLocale(event) {
11 |   t.locale.value = event.value;
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <Dropdown
17 |     v-model="selectedLanguage"
18 |     :options="languages"
19 |     option-label="flag"
20 |     option-value="code"
21 |     @change="changeLocale($event)"
22 |   />
23 | </template>
24 | 
25 | <style scoped>
26 | .p-dropdown {
27 |   background: transparent;
28 |   border: 0;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # yarn
11 | yarn install
12 | 
13 | # npm
14 | npm install
15 | 
16 | # pnpm
17 | pnpm install
18 | ```
19 | 
20 | ## Development Server
21 | 
22 | Start the development server on http://localhost:3000
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | ## Production
29 | 
30 | Build the application for production:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | Locally preview production build:
37 | 
38 | ```bash
39 | npm run preview
40 | ```
41 | 
42 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
43 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     es2021: true,
 6 |     node: true,
 7 |   },
 8 |   ignorePatterns: [
 9 |     'dist-electron/',
10 |     '.output/',
11 |     'dist/',
12 |     'public/',
13 |     '**/*.min.js',
14 |     '**/*.d.ts',
15 |   ],
16 |   extends: [
17 |     'eslint:recommended',
18 |     'plugin:vue/vue3-recommended',
19 |     '@vue/eslint-config-typescript/recommended',
20 |     'eslint-config-prettier',
21 |   ],
22 |   rules: {
23 |     'vue/singleline-html-element-content-newline': 0,
24 |     'vue/component-name-in-template-casing': ['error', 'PascalCase'],
25 |     'vue/no-v-model-argument': 0,
26 |     '@typescript-eslint/no-var-requires': 0,
27 |     'vue/no-v-html': 0,
28 |     'vue/multi-word-component-names': 'off',
29 |   },
30 |   globals: {
31 |     _: true,
32 |   },
33 | };
34 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | ---
 8 | 
 9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 | 
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 | 
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 | 
28 | - OS: [e.g. iOS]
29 | - Browser [e.g. chrome, safari]
30 | - Version [e.g. 22]
31 | 
32 | **Smartphone (please complete the following information):**
33 | 
34 | - Device: [e.g. iPhone6]
35 | - OS: [e.g. iOS8.1]
36 | - Browser [e.g. stock browser, safari]
37 | - Version [e.g. 22]
38 | 
39 | **Additional context**
40 | Add any other context about the problem here.
41 | 


--------------------------------------------------------------------------------
/src/components/CommandCenter/Success.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ArrowUturnUpIcon } from "@heroicons/vue/24/outline";
 3 | 
 4 | const emit = defineEmits(["completed"])
 5 | </script>
 6 | 
 7 | <template>
 8 |   <section
 9 |     class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
10 |     <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">Success!</h2>
11 |     <h2 class="text-gray-700 text-center dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">You can now inspect the OCR results.</h2>
12 |     <button
13 |       type="button"
14 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
15 |       @click='emit("completed")'>
16 |       <ArrowUturnUpIcon class="inline w-6 h-6 mr-2 text-white" />
17 |       Launch another workflow
18 |     </button>
19 | 
20 |   </section>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/electron-builder.json5:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @see https://www.electron.build/configuration/configuration
 3 |  */
 4 | {
 5 |   productName: 'NodeFlow',
 6 |   appId: 'com.github.maxnth.NodeFlow',
 7 |   asar: true,
 8 |   icon: 'public/images/application/icon.png',
 9 |   directories: {
10 |     output: 'release/${version}',
11 |   },
12 |   files: ['dist-electron', 'dist'],
13 |   mac: {
14 |     artifactName: '${productName}_${version}.${ext}',
15 |     target: ['dmg'],
16 |     icon: 'public/images/application/icon.png',
17 |   },
18 |   win: {
19 |     target: [
20 |       {
21 |         target: 'msi',
22 |         arch: ['x64'],
23 |       },
24 |     ],
25 |     icon: 'public/images/application/favicon.ico',
26 |     publisherName: "Maximilian Nöth",
27 |     artifactName: '${productName}_${version}.${ext}',
28 |   },
29 |   linux: {
30 |     target: ['AppImage'],
31 |     category: 'Productivity',
32 |     icon: 'public/images/application/icon.png',
33 |   },
34 |   nsis: {
35 |     oneClick: false,
36 |     perMachine: false,
37 |     allowToChangeInstallationDirectory: true,
38 |     deleteAppDataOnUninstall: false,
39 |   },
40 | }
41 | 


--------------------------------------------------------------------------------
/License:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Maximilian Nöth
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router';
 2 | 
 3 | import DashboardPage from '../views/DashboardPage.vue';
 4 | import EditorPage from '../views/EditorPage.vue';
 5 | import TourPage from '../views/TourPage.vue';
 6 | import NotFound from '../components/Layout/NotFound.vue';
 7 | import CommandCenterPage from "../views/CommandCenterPage.vue";
 8 | 
 9 | const routes: RouteRecordRaw[] = [
10 |   {
11 |     path: '/',
12 |     name: 'dashboard',
13 |     component: DashboardPage,
14 |   },
15 |   {
16 |     path: '/editor',
17 |     name: 'editor',
18 |     component: EditorPage,
19 |   },
20 |   {
21 |     path: '/tour',
22 |     name: 'tour',
23 |     component: TourPage,
24 |   },
25 |   {
26 |     path: '/command-center',
27 |     name: 'command-center',
28 |     component: CommandCenterPage
29 |   },
30 |   {
31 |     path: '/404',
32 |     name: 'NotFound',
33 |     component: NotFound,
34 |   },
35 |   {
36 |     path: '/:catchAll(.*)',
37 |     redirect: '404',
38 |   },
39 | ];
40 | 
41 | const router = createRouter({
42 |   history: createWebHashHistory(),
43 |   routes,
44 | });
45 | 
46 | export default router;
47 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     branches: [main]
 6 |     paths-ignore:
 7 |       - "**.md"
 8 |       - "**.spec.js"
 9 |       - ".idea"
10 |       - ".vscode"
11 |       - ".dockerignore"
12 |       - "Dockerfile"
13 |       - ".gitignore"
14 |       - ".github/**"
15 |       - "!.github/workflows/build.yml"
16 | 
17 | jobs:
18 |   build:
19 |     runs-on: ${{ matrix.os }}
20 | 
21 |     strategy:
22 |       matrix:
23 |         os: [macos-latest, ubuntu-latest, windows-latest]
24 | 
25 |     steps:
26 |       - name: Checkout Code
27 |         uses: actions/checkout@v4
28 | 
29 |       - name: Setup Node.js
30 |         uses: actions/setup-node@v4
31 |         with:
32 |           node-version: 20
33 | 
34 |       - name: Install Dependencies
35 |         run: yarn
36 | 
37 |       - name: Build Release Files
38 |         run: yarn app:build
39 |         env:
40 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41 | 
42 |       - name: Upload Artifact
43 |         uses: actions/upload-artifact@v4
44 |         with:
45 |           name: release_on_${{ matrix. os }}
46 |           path: release/
47 |           retention-days: 5
48 | 


--------------------------------------------------------------------------------
/.github/workflows/build_develop.yml:
--------------------------------------------------------------------------------
 1 | name: Build Develop
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 |     branches: [develop]
 6 |     paths-ignore:
 7 |       - "**.md"
 8 |       - "**.spec.js"
 9 |       - ".idea"
10 |       - ".vscode"
11 |       - ".dockerignore"
12 |       - "Dockerfile"
13 |       - ".gitignore"
14 |       - ".github/**"
15 |       - "!.github/workflows/build.yml"
16 | 
17 | jobs:
18 |   build:
19 |     runs-on: ${{ matrix.os }}
20 | 
21 |     strategy:
22 |       matrix:
23 |         os: [macos-latest, ubuntu-latest, windows-latest]
24 | 
25 |     steps:
26 |       - name: Checkout Code
27 |         uses: actions/checkout@v4
28 | 
29 |       - name: Setup Node.js
30 |         uses: actions/setup-node@v4
31 |         with:
32 |           node-version: 20
33 | 
34 |       - name: Install Dependencies
35 |         run: yarn
36 | 
37 |       - name: Build Release Files
38 |         run: yarn app:build
39 |         env:
40 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
41 | 
42 |       - name: Upload Artifact
43 |         uses: actions/upload-artifact@v4
44 |         with:
45 |           name: release_on_${{ matrix. os }}
46 |           path: release/
47 |           retention-days: 5
48 | 


--------------------------------------------------------------------------------
/src/components/Editor/UI/SpeedDial.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useToast } from "primevue/usetoast";
 3 | const toast = useToast();
 4 | 
 5 | const emit = defineEmits(['upload', 'download', 'clear']);
 6 | 
 7 | 
 8 | const items = ref([
 9 |   {
10 |     label: 'Upload',
11 |     icon: 'pi pi-upload',
12 |     command: () => {
13 |       // emit('upload');
14 |       toast.add({ severity: 'info', summary: 'Info', detail: 'Currently not implemented', life: 1500 });
15 |     },
16 |   },
17 |   {
18 |     label: 'Download',
19 |     icon: 'pi pi-download',
20 |     command: () => {
21 |       emit('download');
22 |     },
23 |   },
24 |   {
25 |     label: 'Clear Workflow',
26 |     icon: 'pi pi-trash',
27 |     command: () => {
28 |       emit('clear');
29 |     },
30 |   },
31 | ]);
32 | </script>
33 | 
34 | <template>
35 |   <div class="absolute bottom-0 right-0 h-20 w-20">
36 |     <SpeedDial
37 |       :model="items"
38 |       :radius="120"
39 |       direction="up-left"
40 |       type="quarter-circle"
41 |       :tooltip-options="{ position: 'left' }"
42 |     />
43 |   </div>
44 | </template>
45 | 
46 | <style>
47 | .p-button {
48 |   @apply bg-blue-600 dark:bg-blue-800 !important;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/Layout/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { t } = useI18n();
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="flex h-screen items-center justify-center">
 7 |     <div class="mx-auto max-w-screen-xl py-8 px-4 lg:py-16 lg:px-6">
 8 |       <div class="mx-auto max-w-screen-sm text-center">
 9 |         <h1
10 |           class="mb-4 text-7xl font-extrabold tracking-tight text-black dark:text-white lg:text-9xl"
11 |         >
12 |           404
13 |         </h1>
14 |         <p
15 |           class="mb-4 text-3xl font-bold tracking-tight text-gray-900 dark:text-white md:text-4xl"
16 |         >
17 |           {{ $t('404.heading') }}
18 |         </p>
19 |         <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
20 |           {{ $t('404.content') }}
21 |         </p>
22 |         <router-link
23 |           to="/"
24 |           class="bg-primary-600 hover:bg-primary-800 focus:ring-primary-300 dark:focus:ring-primary-900 my-4 inline-flex rounded-lg px-5 py-2.5 text-center text-sm font-medium text-black focus:outline-none focus:ring-4 dark:text-white"
25 |           >{{ $t('404.link') }}</router-link
26 |         >
27 |       </div>
28 |     </div>
29 |   </div>
30 | </template>
31 | 


--------------------------------------------------------------------------------
/src/components/Tour/TourCard.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits(['activate-tour']);
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div
 7 |     class="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800"
 8 |   >
 9 |     <h5
10 |       class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
11 |     >
12 |       Tour the NodeFlow editor
13 |     </h5>
14 |     <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
15 |       Interactively explore the NodeFlow editor and get to know all major
16 |       functionalities
17 |     </p>
18 |     <button
19 |       disabled
20 |       class="inline-flex disabled:bg-blue-100 items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
21 |     >
22 |       Coming Soon...
23 |       <svg
24 |         aria-hidden="true"
25 |         class="ml-2 -mr-1 h-4 w-4"
26 |         fill="currentColor"
27 |         viewBox="0 0 20 20"
28 |         xmlns="http://www.w3.org/2000/svg"
29 |       >
30 |       </svg>
31 |     </button>
32 |   </div>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/src/components/Editor/UI/HintOverlay.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { ArrowSmallRightIcon, ArrowSmallLeftIcon } from "@heroicons/vue/24/outline";
 3 | 
 4 | const tip_index = ref(0)
 5 | 
 6 | const tips = [
 7 |   "Right-click on empty space to add new nodes",
 8 |   "Drag a connection from the end interface to empty space to remove it",
 9 |   "Click on 'Description' to get more information about the processor",
10 |   "Right click on a node's header to delete it",
11 |   "Click on the speed dial in the bottom right corner for additional options"
12 | ]
13 | 
14 | function increase_index(){
15 |   if(tip_index.value+1 < tips.length){
16 |     tip_index.value += 1
17 |   }else{
18 |     tip_index.value = 0
19 |   }
20 | }
21 | 
22 | function decrease_index(){
23 |   if(tip_index.value-1 > 0){
24 |     tip_index.value -= 1
25 |   }else{
26 |     tip_index.value = tips.length-1
27 |   }
28 | }
29 | </script>
30 | 
31 | <template>
32 |   <div class="hint">
33 |     <div class="flex justify-between pb-2">
34 |       <ArrowSmallLeftIcon @click="decrease_index" class="h-6 h-6 text clickable" />
35 |       <b>Tip</b>
36 |       <ArrowSmallRightIcon @click="increase_index" class="h-6 h-6 clickable" />
37 |     </div>
38 |     <p class="break-words">
39 |       {{ tips[tip_index] }}
40 |     </p>
41 |   </div>
42 | </template>
43 | 
44 | <style>
45 | .hint {
46 |   position: absolute;
47 |   top: 1rem;
48 |   left: 15rem;
49 |   z-index: 5;
50 |   padding: 1rem;
51 |   width: 25%;
52 |   background: #0003;
53 |   color: white;
54 |   pointer-events: none;
55 | }
56 | .clickable {
57 |   pointer-events: all !important;
58 | }
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/locales/en.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "sidebar": {
 3 |     "cta": {
 4 |       "heading": "Alpha release",
 5 |       "content": "This version of NodeFlow is an early alpha release of the software and may still contain severe bugs and missing features."
 6 |     }
 7 |   },
 8 |   "dashboard": {
 9 |     "heading": {
10 |       "welcome": "Welcome to",
11 |       "tool-name": "NodeFlow"
12 |     },
13 |     "cta": {
14 |       "create": {
15 |         "heading": "Create",
16 |         "content": "Create an OCR workflow from scratch",
17 |         "button": "Open Editor"
18 |       },
19 |       "edit": {
20 |         "heading": "Edit",
21 |         "content": "Upload and edit an existing workflow",
22 |         "button": "Upload"
23 |       },
24 |       "tour": {
25 |         "heading": "Tour",
26 |         "content": "Take a tour to the NodeFlow editor",
27 |         "button": "Start Tour"
28 |       },
29 |       "launch": {
30 |         "heading": "Launch",
31 |         "content": "Directly launch your workflows from NodeFlow",
32 |         "button": "Open Command Center"
33 |       }
34 |     }
35 |   },
36 |   "nodeflow": {
37 |     "node": {
38 |       "settings": "Settings"
39 |     },
40 |     "palette": {
41 |       "processors": "Processors"
42 |     },
43 |     "toolbar": {
44 |       "toggle-palette": {
45 |         "tooltip": "Toggle Toolbar"
46 |       }
47 |     }
48 |   },
49 |   "command-center": {
50 |     "docker": {
51 |       "inactive": {
52 |         "not-responding": "Looks like Docker doesn't respond",
53 |         "install": "Install Docker"
54 |       }
55 |     }
56 |   },
57 |   "404": {
58 |     "heading": "Something's missing.",
59 |     "content": "Sorry, we can't find that page. You'll find lots to explore on the Dashboard.",
60 |     "link": "Back to Dashboard"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | <img width="400" src="public/images/repository/logo_with_text_light_mode.svg#gh-light-mode-only">
 3 | <img width="400" src="public/images/repository/logo_with_text_dark_mode.svg#gh-dark-mode-only">
 4 | </p>
 5 | 
 6 | NodeFlow is an open‑source, multi-platform desktop application for creating and managing OCR workflows. It allows beginner and advanced users to interactively craft everything from basic linear to complex branched workflows and export them for command line usage or for the usage in other applications like [OCR4all](https://github.com/OCR4all/OCR4all).
 7 | 
 8 | 
 9 | | WARNING: This is still a very early proof of concept with major missing features and possibly severe bugs! |
10 | |------------------------------------------------------------------------------------------------------------|
11 | 
12 | <img src="public/images/repository/product_image.jpg">
13 | 
14 | # (Planned) Features
15 | 
16 | NodeFlow provides the following features:
17 | 
18 | - Create and / or edit OCR workflows using a node editor (powered by [baklavajs](https://github.com/newcat/baklavajs))
19 | - Leverage dozens of OCR processors (thanks to OCR-D) and configure all available parameters to your liking
20 | - Interactively explore the processor and parameter documentation of every implemente OCR processor
21 | - Export your workflows for command line usage or to use them in other OCR tools
22 | - Interactively explore NodeFlow with the internal tour
23 | 
24 | ## Getting Started
25 | 
26 | ### 1. Install packages
27 | 
28 | ```bash
29 | yarn
30 | ```
31 | 
32 | ### 2. Run
33 | 
34 | In development mode,
35 | 
36 | ```bash
37 | yarn app:dev
38 | ```
39 | 
40 | In preview mode,
41 | 
42 | ```bash
43 | yarn app:preview
44 | ```
45 | 
46 | To build for production,
47 | 
48 | ```bash
49 | yarn app:build
50 | ```
51 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/PaletteEntry.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { computed, defineComponent, ref } from "vue";
 3 | import { GRAPH_NODE_TYPE_PREFIX } from "baklavajs";
 4 | 
 5 | import { useViewModel } from "baklavajs";
 6 | 
 7 | export default defineComponent({
 8 |   props: {
 9 |     type: {
10 |       type: String,
11 |       required: true,
12 |     },
13 |     title: {
14 |       type: String,
15 |       required: true,
16 |     },
17 |   },
18 |   setup(props) {
19 |     const { viewModel } = useViewModel();
20 | 
21 |     const showContextMenu = ref(false);
22 |     const hasContextMenu = computed(() =>
23 |       props.type.startsWith(GRAPH_NODE_TYPE_PREFIX),
24 |     );
25 | 
26 |     const openContextMenu = () => {
27 |       showContextMenu.value = true;
28 |     };
29 | 
30 |     const onContextMenuClick = (action: string) => {
31 |       const graphTemplateId = props.type.substring(
32 |         GRAPH_NODE_TYPE_PREFIX.length,
33 |       );
34 |       const graphTemplate = viewModel.value.editor.graphTemplates.find(
35 |         (gt) => gt.id === graphTemplateId,
36 |       );
37 |       if (!graphTemplate) {
38 |         return;
39 |       }
40 |     };
41 | 
42 |     const favorites = [
43 |       "ocrd-cis-ocropy-binarize",
44 |       "ocrd-cis-ocropy-segment",
45 |       "ocrd-calamari-recognize",
46 |     ];
47 | 
48 |     return {
49 |       showContextMenu,
50 |       hasContextMenu,
51 |       openContextMenu,
52 |       onContextMenuClick,
53 |       favorites,
54 |     };
55 |   },
56 | });
57 | </script>
58 | 
59 | <template>
60 |   <div class="baklava-node --palette" :data-node-type="type">
61 |     <div class="__title">
62 |       <div class="__title-label">
63 |         {{ title }} {{ favorites.includes(title) ? "⭐" : "" }}
64 |       </div>
65 |     </div>
66 |   </div>
67 | </template>
68 | 


--------------------------------------------------------------------------------
/src/locales/de.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "sidebar": {
 3 |     "cta": {
 4 |       "heading": "Alpha release",
 5 |       "content": "Diese Version von NodeFLow ist noch eine frühe Alpha-Version und kann noch schwerwiegende Fehler und fehlende Features beinhalten."
 6 |     }
 7 |   },
 8 |   "dashboard": {
 9 |     "heading": {
10 |       "welcome": "Willkommen bei",
11 |       "tool-name": "NodeFlow"
12 |     },
13 |     "cta": {
14 |       "create": {
15 |         "heading": "Erstellen",
16 |         "content": "Benutze den Workflow Editor um einen neuen OCR-Workflow zu erstellen",
17 |         "button": "Editor öffnen"
18 |       },
19 |       "edit": {
20 |         "heading": "Bearbeiten",
21 |         "content": "Lade einen existierenden Workflow hoch und bearbeite ihn",
22 |         "button": "Upload starten"
23 |       },
24 |       "launch": {
25 |         "heading": "Ausführen",
26 |         "content": "Starte erstellte Workflows direkt aus NodeFlow heraus",
27 |         "button": "Command Center öffnen"
28 |       },
29 |       "tour": {
30 |         "heading": "Tour",
31 |         "content": "Nimm an einer Tour durch den NodeFlow-Editor teil",
32 |         "button": "Tour starten"
33 |       }
34 |     }
35 |   },
36 |   "nodeflow": {
37 |     "node": {
38 |       "settings": "Parameter"
39 |     },
40 |     "palette": {
41 |       "processors": "Prozessoren"
42 |     },
43 |     "toolbar": {
44 |       "toggle-palette": {
45 |         "tooltip": "Toolbar umschalten"
46 |       }
47 |     }
48 |   },
49 |   "command-center": {
50 |     "docker": {
51 |       "inactive": {
52 |         "not-responding": "Docker ist nicht erreichbar",
53 |         "install": "Installiere Docker"
54 |       }
55 |     }
56 |   },
57 |   "404": {
58 |     "heading": "Seite nicht gefunden",
59 |     "content": "Entschuldigung, leider konnte diese Seite nicht gefunden werden. Versuche es doch einmal auf dem Dashboard.",
60 |     "link": "Zurück zum Dashboard"
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components/CommandCenter/Export.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {ArrowPathIcon, CloudArrowDownIcon, CloudArrowUpIcon} from "@heroicons/vue/24/outline";
 3 | import {ipcRenderer} from "electron";
 4 | import {useCommandCenterStore} from "../../stores/commandCenter.store";
 5 | 
 6 | const emit = defineEmits(["completed"])
 7 | 
 8 | const store = useCommandCenterStore()
 9 | const isExporting = ref(false)
10 | 
11 | async function openSaveDialog(){
12 |   isExporting.value = true
13 |   await ipcRenderer.invoke("export-results", store.workspace).then(() => {
14 |     emit("completed")
15 |   })
16 | }
17 | </script>
18 | 
19 | <template>
20 |   <section
21 |     class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
22 |     <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">That's it!</h2>
23 |     <h2 class="text-gray-700 text-center dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">Your images were successfully processed and are ready to be exported!</h2>
24 |     <button
25 |       v-if="!isExporting"
26 |       type="button"
27 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
28 |       @click="openSaveDialog">
29 |       <CloudArrowDownIcon class="inline w-6 h-6 mr-2 text-white" />
30 |       Save
31 |     </button>
32 |     <button
33 |       v-if="isExporting"
34 |       type="button"
35 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
36 |       <ArrowPathIcon class="inline w-6 h-6 mr-2 text-white animate-spin" />
37 |       Exporting...
38 |     </button>
39 |   </section>
40 | </template>
41 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import { createPinia } from 'pinia';
 3 | import { createI18n } from 'vue-i18n';
 4 | 
 5 | import App from './App.vue';
 6 | 
 7 | import router from './router';
 8 | 
 9 | import PrimeVue from 'primevue/config';
10 | import 'primevue/resources/primevue.min.css';
11 | import 'primevue/resources/themes/tailwind-light/theme.css';
12 | import 'primeicons/primeicons.css';
13 | import SpeedDial from 'primevue/speeddial';
14 | import Dropdown from 'primevue/dropdown';
15 | 
16 | 
17 | import Menubar from 'primevue/menubar';
18 | import ToastService from 'primevue/toastservice';
19 | 
20 | // @ts-ignore
21 | import VueShepherd from 'vue-shepherd';
22 | import 'shepherd.js/dist/css/shepherd.css';
23 | 
24 | import './style.css';
25 | import Accordion from "primevue/accordion";
26 | import AccordionTab from "primevue/accordiontab";
27 | import Tooltip from 'primevue/tooltip'
28 | 
29 | const app = createApp(App);
30 | 
31 | const messages = Object.fromEntries(
32 |   Object.entries(
33 |     // eslint-disable-next-line @typescript-eslint/no-explicit-any
34 |     import.meta.glob<{ default: any }>('./locales/*.json', {
35 |       eager: true,
36 |     })
37 |   ).map(([key, value]) => {
38 |     return [key.slice(10, -5), value.default];
39 |   })
40 | );
41 | 
42 | const i18n = createI18n({
43 |   legacy: false,
44 |   locale: 'en',
45 |   fallbackLocale: 'en',
46 |   warnHtmlMessage: false,
47 |   globalInjection: true,
48 |   messages,
49 | });
50 | 
51 | app.use(i18n);
52 | app.use(createPinia());
53 | app.use(router);
54 | app.use(PrimeVue);
55 | app.use(ToastService);
56 | app.use(VueShepherd);
57 | 
58 | // PrimeVue components
59 | app.component('SpeedDial', SpeedDial);
60 | app.component('Dropdown', Dropdown);
61 | app.component('Menubar', Menubar);
62 | app.component('Accordion', Accordion)
63 | app.component('AccordionTab', AccordionTab)
64 | app.directive('tooltip', Tooltip)
65 | 
66 | app.mount('#app').$nextTick(() => {
67 |   postMessage({ payload: 'removeLoading' }, '*');
68 | });
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node-flow",
 3 |   "version": "0.0.3-dev",
 4 |   "description": "Desktop application for crafting OCR workflows",
 5 |   "author": "Maximilian Nöth<maximilian.noeth@uni-wuerzburg.de>",
 6 |   "license": "MIT",
 7 |   "private": true,
 8 |   "main": "dist-electron/main/index.js",
 9 |   "keywords": [
10 |     "electron",
11 |     "rollup",
12 |     "vite",
13 |     "vue3",
14 |     "vue"
15 |   ],
16 |   "debug": {
17 |     "env": {
18 |       "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344/"
19 |     }
20 |   },
21 |   "scripts": {
22 |     "app:dev": "vite",
23 |     "app:build": "vue-tsc --noEmit && vite build && electron-builder",
24 |     "app:preview": "vite preview",
25 |     "build": "vue-tsc --noEmit && vite build",
26 |     "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix src",
27 |     "format": "prettier . --write",
28 |     "deps:update": "taze major -I"
29 |   },
30 |   "dependencies": {
31 |     "@headlessui/vue": "^1.7.14",
32 |     "@heroicons/vue": "^2.0.18",
33 |     "archiver": "^5.3.1",
34 |     "baklavajs": "^2.0.2-beta.4",
35 |     "dockerode": "^3.3.5",
36 |     "primeicons": "^6.0.1",
37 |     "primevue": "^3.29.2",
38 |     "vue-shepherd": "^3.0.0"
39 |   },
40 |   "devDependencies": {
41 |     "@vitejs/plugin-vue": "^4.2.3",
42 |     "@vue/eslint-config-typescript": "^11.0.3",
43 |     "@vueuse/core": "^10.2.1",
44 |     "autoprefixer": "^10.4.14",
45 |     "electron": "^24.6.1",
46 |     "electron-builder": "^24.4.0",
47 |     "eslint": "^8.44.0",
48 |     "eslint-config-prettier": "^8.8.0",
49 |     "eslint-plugin-prettier": "^4.2.1",
50 |     "eslint-plugin-vue": "^9.15.1",
51 |     "pinia": "^2.1.4",
52 |     "postcss": "^8.4.24",
53 |     "prettier": "^3.0.0",
54 |     "prettier-plugin-tailwindcss": "^0.3.0",
55 |     "tailwindcss": "^3.3.2",
56 |     "taze": "^0.11.2",
57 |     "typescript": "^5.1.6",
58 |     "unplugin-auto-import": "^0.16.6",
59 |     "vite": "^4.3.9",
60 |     "vite-plugin-electron": "^0.12.0",
61 |     "vite-plugin-electron-renderer": "^0.14.5",
62 |     "vue": "^3.3.4",
63 |     "vue-i18n": "^9.2.2",
64 |     "vue-router": "^4.2.3",
65 |     "vue-tsc": "^1.8.4"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/Tour/Tour.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import WorkflowEditor from '../Editor/WorkflowEditor.vue';
 3 | 
 4 | import { onMounted } from 'vue';
 5 | // @ts-ignore
 6 | import { useShepherd } from 'vue-shepherd';
 7 | 
 8 | const tour = useShepherd({
 9 |   useModalOverlay: true,
10 | });
11 | 
12 | onMounted(() => {
13 |   tour.addStep({
14 |     title: 'Welcome to the NodeFlow tour',
15 |     text: `This tour will give you a brief overview of all the basic functionalities of the Workflow editor.`,
16 |     attachTo: {
17 |       element: '#editor',
18 |       on: 'top',
19 |     },
20 |     buttons: [
21 |       {
22 |         action() {
23 |           return this.cancel();
24 |         },
25 |         classes: 'shepherd-button-secondary',
26 |         text: 'Cancel',
27 |       },
28 |       {
29 |         action() {
30 |           return this.next();
31 |         },
32 |         text: 'Next',
33 |       },
34 |     ],
35 |     id: 'creating',
36 |   });
37 |   tour.addStep({
38 |     title: 'Node',
39 |     text: "Every node represents a step in the OCR workflow that you're building.",
40 |     attachTo: {
41 |       element: '.node',
42 |       on: 'top',
43 |     },
44 |     buttons: [
45 |       {
46 |         action() {
47 |           return this.back();
48 |         },
49 |         classes: 'shepherd-button-secondary',
50 |         text: 'Back',
51 |       },
52 |       {
53 |         action() {
54 |           return this.next();
55 |         },
56 |         text: 'Next',
57 |       },
58 |     ],
59 |     id: 'node-introduction',
60 |   });
61 |   tour.addStep({
62 |     title: 'Input Node',
63 |     text: "This node is something special.\nThe 'Input' node is the initial node of every OCR workflow and represents the original input images.\nUnlike most other nodes it doesn't have any options.",
64 |     attachTo: {
65 |       element: '.node',
66 |       on: 'top',
67 |     },
68 |     buttons: [
69 |       {
70 |         action() {
71 |           return this.back();
72 |         },
73 |         classes: 'shepherd-button-secondary',
74 |         text: 'Back',
75 |       },
76 |       {
77 |         action() {
78 |           return this.next();
79 |         },
80 |         text: 'Next',
81 |       },
82 |     ],
83 |     id: 'input-node',
84 |   });
85 |   // TODO: Finish tour
86 |   tour.start();
87 | });
88 | </script>
89 | 
90 | <template>
91 |   <WorkflowEditor />
92 | </template>
93 | 


--------------------------------------------------------------------------------
/src/components/CommandCenter/ImageImport.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {ArrowPathIcon, CloudArrowUpIcon} from "@heroicons/vue/24/outline";
 3 | 
 4 | import { useFileDialog } from '@vueuse/core'
 5 | import {ipcRenderer} from "electron";
 6 | import {useCommandCenterStore} from "../../stores/commandCenter.store";
 7 | 
 8 | const emit = defineEmits(["completed"])
 9 | 
10 | const store = useCommandCenterStore()
11 | const isUploading = ref(false)
12 | 
13 | const { files, open, reset, onChange } = useFileDialog({multiple: true})
14 | 
15 | onChange(async (files) => {
16 |   if (files!.length > 0) {
17 |     const paths = []
18 |     // @ts-ignore
19 |     for(const file of files){
20 |       paths.push(file.path)
21 |     }
22 |     isUploading.value = true
23 |     await ipcRenderer.invoke("upload-images-to-workspace", {paths: paths, workspaceName: store.workspace}).then((result) => {
24 |       if(result) emit("completed")
25 |     })
26 |   }
27 | })
28 | function openFileDialog(){
29 |   open()
30 | }
31 | </script>
32 | 
33 | <template>
34 |   <section class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
35 |     <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">We successfully created an OCR-D workspace!</h2>
36 |     <h2 class="text-gray-700 dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">Now upload some images that you want to process.</h2>
37 |     <button
38 |       v-if="!isUploading"
39 |       type="button"
40 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
41 |       @click="openFileDialog">
42 |       <CloudArrowUpIcon class="inline w-6 h-6 mr-2 text-white" />
43 |       Upload Images
44 |     </button>
45 |     <button
46 |       v-if="isUploading"
47 |       type="button"
48 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
49 |       <ArrowPathIcon class="inline w-6 h-6 mr-2 text-white animate-spin" />
50 |       Uploading...
51 |     </button>
52 |   </section>
53 | </template>
54 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/Toolbar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | // @ts-nocheck
 3 | import { Commands } from "@baklavajs/renderer-vue";
 4 | import { useViewModel } from "baklavajs";
 5 | 
 6 | import {
 7 |   ArrowUturnLeftIcon,
 8 |   ArrowUturnRightIcon,
 9 |   DocumentArrowDownIcon,
10 |   DocumentArrowUpIcon,
11 |   ArrowDownOnSquareStackIcon
12 | } from "@heroicons/vue/24/outline";
13 | 
14 | const { t } = useI18n();
15 | 
16 | const { viewModel } = useViewModel()
17 | 
18 | const emit = defineEmits(['upload', 'download', 'export', '  "toggle-palette",']);
19 | </script>
20 | 
21 | <template>
22 |   <div class="baklava-toolbar">
23 |     <div class="flex space-x-4">
24 |       <ArrowUturnLeftIcon
25 |         class="h-6 w-6 text-gray-500 dark:text-gray-400 dark:hover:text-white hover:text-black hover:cursor-pointer"
26 |         @click="viewModel.commandHandler.executeCommand(Commands.UNDO_COMMAND)" />
27 |       <ArrowUturnRightIcon
28 |         class="h-6 w-6 text-gray-500 dark:text-gray-400 dark:hover:text-white hover:text-black hover:cursor-pointer"
29 |         @click="viewModel.commandHandler.executeCommand(Commands.REDO_COMMAND)" />
30 |       <div class="inline-block w-0.5 self-stretch bg-gray-500 opacity-100 dark:opacity-50"></div>
31 |       <DocumentArrowUpIcon
32 |         class="h-6 w-6 text-gray-500 dark:text-gray-400 dark:hover:text-white hover:text-black hover:cursor-pointer"
33 |         @click='emit("upload")' />
34 |       <DocumentArrowDownIcon
35 |         class="h-6 w-6 text-gray-500 dark:text-gray-400 dark:hover:text-white hover:text-black hover:cursor-pointer"
36 |         @click='emit("download")' />
37 |       <ArrowDownOnSquareStackIcon
38 |         class="h-6 w-6 text-gray-500 dark:text-gray-400 dark:hover:text-white hover:text-black hover:cursor-pointer"
39 |         @click='emit("export")' />
40 |       <div class="inline-block w-0.5 self-stretch bg-gray-500 opacity-100 dark:opacity-50"></div>
41 |       <span v-tooltip="t('nodeflow.toolbar.toggle-palette.tooltip')">
42 |           <i
43 |             class="pi pi-align-right self-center text-xl text-zinc-600 hover:cursor-pointer hover:text-black dark:text-zinc-400 dark:hover:text-white"
44 |             @click="emit('toggle-palette')"
45 |           ></i>
46 |         </span>
47 |     </div>
48 |   </div>
49 | </template>
50 | 
51 | <style scoped>
52 | .baklava-toolbar{
53 |   @apply bg-white dark:bg-zinc-800 shadow-md z-10
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/components/Editor/UI/EditorMenubar.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const items = [
  3 |   {
  4 |     label: 'File',
  5 |     icon: 'pi pi-fw pi-file',
  6 |     items: [
  7 |       {
  8 |         label: 'Upload',
  9 |         icon: 'pi pi-fw pi-upload',
 10 |       },
 11 |       {
 12 |         label: 'Download',
 13 |         icon: 'pi pi-fw pi-external-link',
 14 |       },
 15 |     ],
 16 |   },
 17 |   {
 18 |     label: 'Edit',
 19 |     icon: 'pi pi-fw pi-pencil',
 20 |     items: [
 21 |       {
 22 |         label: 'Left',
 23 |         icon: 'pi pi-fw pi-align-left',
 24 |       },
 25 |       {
 26 |         label: 'Right',
 27 |         icon: 'pi pi-fw pi-align-right',
 28 |       },
 29 |       {
 30 |         label: 'Center',
 31 |         icon: 'pi pi-fw pi-align-center',
 32 |       },
 33 |       {
 34 |         label: 'Justify',
 35 |         icon: 'pi pi-fw pi-align-justify',
 36 |       },
 37 |     ],
 38 |   },
 39 |   {
 40 |     label: 'Users',
 41 |     icon: 'pi pi-fw pi-user',
 42 |     items: [
 43 |       {
 44 |         label: 'New',
 45 |         icon: 'pi pi-fw pi-user-plus',
 46 |       },
 47 |       {
 48 |         label: 'Delete',
 49 |         icon: 'pi pi-fw pi-user-minus',
 50 |       },
 51 |       {
 52 |         label: 'Search',
 53 |         icon: 'pi pi-fw pi-users',
 54 |         items: [
 55 |           {
 56 |             label: 'Filter',
 57 |             icon: 'pi pi-fw pi-filter',
 58 |             items: [
 59 |               {
 60 |                 label: 'Print',
 61 |                 icon: 'pi pi-fw pi-print',
 62 |               },
 63 |             ],
 64 |           },
 65 |           {
 66 |             icon: 'pi pi-fw pi-bars',
 67 |             label: 'List',
 68 |           },
 69 |         ],
 70 |       },
 71 |     ],
 72 |   },
 73 |   {
 74 |     label: 'Events',
 75 |     icon: 'pi pi-fw pi-calendar',
 76 |     items: [
 77 |       {
 78 |         label: 'Edit',
 79 |         icon: 'pi pi-fw pi-pencil',
 80 |         items: [
 81 |           {
 82 |             label: 'Save',
 83 |             icon: 'pi pi-fw pi-calendar-plus',
 84 |           },
 85 |           {
 86 |             label: 'Delete',
 87 |             icon: 'pi pi-fw pi-calendar-minus',
 88 |           },
 89 |         ],
 90 |       },
 91 |       {
 92 |         label: 'Archive',
 93 |         icon: 'pi pi-fw pi-calendar-times',
 94 |         items: [
 95 |           {
 96 |             label: 'Remove',
 97 |             icon: 'pi pi-fw pi-calendar-minus',
 98 |           },
 99 |         ],
100 |       },
101 |     ],
102 |   },
103 | ];
104 | </script>
105 | <template>
106 |   <Menubar :model="items">
107 |     <template #end>
108 |       <InputText placeholder="Search" type="text" />
109 |     </template>
110 |   </Menubar>
111 | </template>
112 | <style scoped></style>
113 | 


--------------------------------------------------------------------------------
/src/components/Editor/logic/NodeFactory.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   allowMultipleConnections,
 3 |   ButtonInterface,
 4 |   CheckboxInterface,
 5 |   IntegerInterface,
 6 |   defineNode,
 7 |   NodeInterface,
 8 |   NumberInterface,
 9 |   SelectInterface,
10 |   TextInputInterface
11 | } from "baklavajs";
12 | 
13 | interface INode {
14 |   categories: string[]
15 |   parameters: IParameter[]
16 | }
17 | 
18 | interface IParameter {
19 |   type: string
20 |   enum: string[]
21 |   format: string
22 |   default: any
23 | }
24 | 
25 | export function constructNodesFromFile(): Promise<object[]> {
26 |   const url = `data/ocrd-all-tool.json`
27 | 
28 |   return fetch(url)
29 |     .then(
30 |       (response: Response) => response.json()
31 |     ).then(
32 |       (data) => constructNodes(data)
33 |     )
34 | }
35 | 
36 | function constructNodes(nodeData: object){
37 |   const nodes: object[] = []
38 |   for(const [name, data] of Object.entries(nodeData)){
39 |     const node = createNodeType(name, data)
40 |     const category = data.categories !== undefined && data.categories.length > 0 ? data.categories.at(0) : "Undefined"
41 |     nodes.push({node: node, category: category})
42 |   }
43 |   return nodes
44 | }
45 | function createNodeType(name: string, nodeData: INode) {
46 |   const inputs: {[index: string]: any} = {}
47 |   if(nodeData.parameters !== undefined) {
48 |     for (const [paramName, paramData] of Object.entries(nodeData.parameters)) {
49 |       switch (paramData.type) {
50 |         case "string":
51 |           if (paramData.enum !== undefined) {
52 |             inputs[paramName] = () => new SelectInterface(paramName, paramData.default, paramData.enum).setPort(false).use(allowMultipleConnections)
53 |           } else {
54 |             inputs[paramName] = () => new TextInputInterface(paramName, paramData.default).setPort(false)
55 |           }
56 |           break;
57 |         case "number":
58 |           if (paramData.format === "integer") {
59 |             inputs[paramName] = () => new IntegerInterface(paramName, paramData.default).setPort(false)
60 |           } else if (paramData.format === "float") {
61 |             inputs[paramName] = () => new NumberInterface(paramName, paramData.default).setPort(false)
62 |           }
63 |           break;
64 |         case "boolean":
65 |           inputs[paramName] = () => new CheckboxInterface(paramName, paramData.default).setPort(false)
66 |           break;
67 |       }
68 |     }
69 |   }
70 |   inputs["Input"] = () => new NodeInterface("Input", 0)
71 |   inputs["Description"] = () => new ButtonInterface("Description", () => console.log("Description"))
72 | 
73 |   const outputs = {
74 |     "Output": () => new NodeInterface("Output", 0)
75 |   }
76 | 
77 |   return defineNode({
78 |     type: name,
79 |     inputs: inputs,
80 |     outputs: outputs,
81 |   })
82 | }
83 | 


--------------------------------------------------------------------------------
/src/views/CommandCenterPage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ipcRenderer } from 'electron';
 3 | 
 4 | import Docker from "../components/CommandCenter/Docker.vue";
 5 | import Export from "../components/CommandCenter/Export.vue";
 6 | import ImageImport from "../components/CommandCenter/ImageImport.vue";
 7 | import Workflow from "../components/CommandCenter/Workflow.vue";
 8 | import Success from "../components/CommandCenter/Success.vue";
 9 | 
10 | import {useCommandCenterStore} from "../stores/commandCenter.store";
11 | 
12 | const steps = [{label: "Docker"}, {label: "Image Import"}, {label: "Workflow"}, {label: "Export"}]
13 | const step = ref(0)
14 | 
15 | const store = useCommandCenterStore()
16 | 
17 | async function initOcrdWorkspace() {
18 |   store.workspace = `tmp_${Date.now()}`
19 |   ipcRenderer.invoke("init-ocrd-workspace", store.workspace).then(() => {
20 |   })
21 | }
22 | 
23 | function next(completedStep: string){
24 |   switch(completedStep){
25 |     case "docker":
26 |       initOcrdWorkspace()
27 |       step.value += 1
28 |       break;
29 |     case "import":
30 |       step.value += 1
31 |       break;
32 |     case "workflow":
33 |       step.value += 1
34 |       break;
35 |     case "export":
36 |       step.value += 1
37 |       break;
38 |     case "success":
39 |       step.value = 0
40 |   }
41 | }
42 | 
43 | const { t } = useI18n();
44 | </script>
45 | 
46 | <template>
47 |   <Toast />
48 |   <div id="stepper" class="p-20">
49 |     <div
50 |       class="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-gray-100"
51 |     >
52 |       <ol
53 |         class="relative z-10 flex justify-between text-sm font-medium"
54 |       >
55 |         <li
56 |           v-for="(stepData, index) in steps"
57 |           :key="index"
58 |           class="flex items-center gap-2 bg-white dark:bg-gray-700 p-2">
59 |           <span
60 |             class="h-6 w-6 rounded-full text-center text-[10px]/6 font-bold text-gray-500"
61 |             :class="{
62 |             'bg-blue-600': index === step,
63 |             'text-white': index === step,
64 |             'bg-gray-100': index !== step }"
65 |           >
66 |             {{ index + 1 }}
67 |           </span>
68 | 
69 |           <span class="hidden sm:block text-gray-500 dark:text-gray-100"> {{ stepData.label }} </span>
70 |         </li>
71 |       </ol>
72 |     </div>
73 |   </div>
74 |   <Docker v-if="step === 0" @completed="next('docker')" />
75 |   <ImageImport v-if="step === 1" @completed="next('import')" />
76 |   <Workflow v-if="step === 2" @completed="next('workflow')" />
77 |   <Export v-if="step === 3" @completed="next('export')" />
78 |   <Success v-if="step === 4" @completed="next('success')" />
79 | </template>
80 | 
81 | <style scoped>
82 | 
83 | </style>
84 | 


--------------------------------------------------------------------------------
/electron/preload/index.ts:
--------------------------------------------------------------------------------
 1 | function domReady(
 2 |   condition: DocumentReadyState[] = ['complete', 'interactive']
 3 | ) {
 4 |   return new Promise((resolve) => {
 5 |     if (condition.includes(document.readyState)) {
 6 |       resolve(true);
 7 |     } else {
 8 |       document.addEventListener('readystatechange', () => {
 9 |         if (condition.includes(document.readyState)) {
10 |           resolve(true);
11 |         }
12 |       });
13 |     }
14 |   });
15 | }
16 | 
17 | const safeDOM = {
18 |   append(parent: HTMLElement, child: HTMLElement) {
19 |     if (!Array.from(parent.children).find((e) => e === child)) {
20 |       return parent.appendChild(child);
21 |     }
22 |   },
23 |   remove(parent: HTMLElement, child: HTMLElement) {
24 |     if (Array.from(parent.children).find((e) => e === child)) {
25 |       return parent.removeChild(child);
26 |     }
27 |   },
28 | };
29 | 
30 | /**
31 |  * https://tobiasahlin.com/spinkit
32 |  * https://connoratherton.com/loaders
33 |  * https://projects.lukehaas.me/css-loaders
34 |  * https://matejkustec.github.io/SpinThatShit
35 |  */
36 | function useLoading() {
37 |   const className = `loaders-css__square-spin`;
38 |   const styleContent = `
39 | @keyframes square-spin {
40 |   25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
41 |   50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
42 |   75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
43 |   100% { transform: perspective(100px) rotateX(0) rotateY(0); }
44 | }
45 | .${className} > div {
46 |   animation-fill-mode: both;
47 |   width: 50px;
48 |   height: 50px;
49 |   background: #fff;
50 |   animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
51 | }
52 | .app-loading-wrap {
53 |   position: fixed;
54 |   top: 0;
55 |   left: 0;
56 |   width: 100vw;
57 |   height: 100vh;
58 |   display: flex;
59 |   align-items: center;
60 |   justify-content: center;
61 |   background: #282c34;
62 |   z-index: 9;
63 | }
64 |     `;
65 |   const oStyle = document.createElement('style');
66 |   const oDiv = document.createElement('div');
67 | 
68 |   oStyle.id = 'app-loading-style';
69 |   oStyle.innerHTML = styleContent;
70 |   oDiv.className = 'app-loading-wrap';
71 |   oDiv.innerHTML = `<div class="${className}"><div></div></div>`;
72 | 
73 |   return {
74 |     appendLoading() {
75 |       safeDOM.append(document.head, oStyle);
76 |       safeDOM.append(document.body, oDiv);
77 |     },
78 |     removeLoading() {
79 |       safeDOM.remove(document.head, oStyle);
80 |       safeDOM.remove(document.body, oDiv);
81 |     },
82 |   };
83 | }
84 | 
85 | // ----------------------------------------------------------------------
86 | 
87 | const { appendLoading, removeLoading } = useLoading();
88 | domReady().then(appendLoading);
89 | 
90 | window.onmessage = (ev) => {
91 |   ev.data.payload === 'removeLoading' && removeLoading();
92 | };
93 | 
94 | setTimeout(removeLoading, 4999);
95 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/NodeInterface.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | // @ts-nocheck
  3 | import {
  4 |   computed,
  5 |   defineComponent,
  6 |   inject,
  7 |   onMounted,
  8 |   onUpdated,
  9 |   Ref,
 10 |   ref,
 11 | } from "vue";
 12 | import { AbstractNode, NodeInterface } from "@baklavajs/core";
 13 | import { useViewModel } from "baklavajs";
 14 | 
 15 | export default defineComponent({
 16 |   props: {
 17 |     node: {
 18 |       type: Object as () => AbstractNode,
 19 |       required: true,
 20 |     },
 21 |     intf: {
 22 |       type: Object as () => NodeInterface,
 23 |       required: true,
 24 |     },
 25 |   },
 26 |   setup(props) {
 27 |     const { viewModel } = useViewModel();
 28 |     const hoveredOver =
 29 |       inject<(intf: NodeInterface | undefined) => void>("hoveredOver")!;
 30 | 
 31 |     const el = ref<HTMLElement | null>(null) as Ref<HTMLElement>;
 32 | 
 33 |     const isConnected = computed(() => props.intf.connectionCount > 0);
 34 |     const classes = computed(() => ({
 35 |       "--input": props.intf.isInput,
 36 |       "--output": !props.intf.isInput,
 37 |       "--connected": isConnected.value,
 38 |     }));
 39 |     const showComponent = computed<boolean>(
 40 |       () =>
 41 |         props.intf.component &&
 42 |         props.intf.connectionCount === 0 &&
 43 |         (props.intf.isInput || !props.intf.port)
 44 |     );
 45 | 
 46 |     const startHover = () => {
 47 |       hoveredOver(props.intf);
 48 |     };
 49 |     const endHover = () => {
 50 |       hoveredOver(undefined);
 51 |     };
 52 | 
 53 |     const onRender = () => {
 54 |       if (el.value) {
 55 |         viewModel.value.hooks.renderInterface.execute({
 56 |           intf: props.intf,
 57 |           el: el.value,
 58 |         });
 59 |       }
 60 |     };
 61 | 
 62 |     const openSidebar = () => {
 63 |       const sidebar = viewModel.value.displayedGraph.sidebar;
 64 |       sidebar.nodeId = props.node.id;
 65 |       sidebar.optionName = props.intf.name;
 66 |       sidebar.visible = true;
 67 |     };
 68 | 
 69 |     onMounted(onRender);
 70 |     onUpdated(onRender);
 71 | 
 72 |     return {
 73 |       el,
 74 |       isConnected,
 75 |       classes,
 76 |       showComponent,
 77 |       startHover,
 78 |       endHover,
 79 |       openSidebar,
 80 |     };
 81 |   },
 82 | });
 83 | </script>
 84 | <template>
 85 |   <div :id="intf.id" ref="el" class="baklava-node-interface" :class="classes">
 86 |     <div
 87 |       v-if="intf.port"
 88 |       class="__port"
 89 |       @pointerover="startHover"
 90 |       @pointerout="endHover"
 91 |     />
 92 |     <component
 93 |       :is="intf.component"
 94 |       v-if="showComponent"
 95 |       v-model="intf.value"
 96 |       :node="node"
 97 |       :intf="intf"
 98 |       @open-sidebar="openSidebar"
 99 |     />
100 |     <span v-else class="align-middle">
101 |       {{ intf.name }}
102 |     </span>
103 |   </div>
104 | </template>
105 | 


--------------------------------------------------------------------------------
/src/components/CommandCenter/Docker.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {ipcRenderer} from "electron";
 3 | import {ArrowDownCircleIcon, ArrowPathIcon} from "@heroicons/vue/24/outline";
 4 | 
 5 | import { useToast } from "primevue/usetoast";
 6 | const toast = useToast();
 7 | 
 8 | const isDockerAvailable = ref()
 9 | const isPullingImage = ref(false)
10 | 
11 | const emit = defineEmits(["completed"])
12 | 
13 | await ipcRenderer.invoke("is-docker-available").then((result) => {
14 |   isDockerAvailable.value = result
15 | })
16 | 
17 | async function pullOcrdDockerImage(){
18 |   isPullingImage.value = true
19 |   await ipcRenderer.invoke("pull-ocrd-docker-image").then((result) => {
20 |     isPullingImage.value = false
21 |     emit("completed")
22 |   })
23 | }
24 | function openDockerSetupGuide(){
25 |   ipcRenderer.send("open-docker-setup-guide")
26 | }
27 | </script>
28 | 
29 | <template>
30 |   <section
31 |     v-if="!isDockerAvailable"
32 |     class="flex items-center justify-center sm:p-24 dark:text-gray-100">
33 |     <div
34 |       class="container flex flex-col items-center justify-center px-5 mx-auto my-8 space-y-8 text-center sm:max-w-lg">
35 |       <img
36 |         class="flex-row"
37 |         src="/images/application/docker_not_found.svg"
38 |         alt="Image of a knocked out Docker mascot"/>
39 |       <p class="text-3xl">{{ $t('command-center.docker.inactive.not-responding') }}</p>
40 |       <button
41 |         class="px-8 py-3 font-semibold rounded bg-blue-700 text-white"
42 |         @click="openDockerSetupGuide">{{ $t('command-center.docker.inactive.install') }}</button>
43 |     </div>
44 |   </section>
45 |   <section
46 |     v-if="isDockerAvailable"
47 |     class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
48 |     <h2 class="text-black dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">Docker is running!</h2>
49 |     <h2 class="text-gray-700 dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">Let's check if your OCR-D image is up-to-date.</h2>
50 |     <button
51 |       v-if="!isPullingImage"
52 |       type="button"
53 |       class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
54 |       @click="pullOcrdDockerImage">
55 |       <ArrowDownCircleIcon class="inline w-6 h-6 mr-2 text-white" />
56 |       Check for updates
57 |     </button>
58 |     <div v-else-if="isPullingImage">
59 |       <button
60 |         type="button"
61 |         class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center">
62 |         <ArrowPathIcon class="inline w-6 h-6 mr-2 text-white animate-spin" />
63 |         Pulling image...
64 |       </button>
65 |     </div>
66 |   </section>
67 | </template>
68 | 


--------------------------------------------------------------------------------
/src/components/Editor/WorkflowEditor.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { EditorComponent, useBaklava  } from "baklavajs";
 3 | 
 4 | import InputNode from "~/nodes/InputNode";
 5 | import {constructNodesFromFile} from "~/components/Editor/logic/NodeFactory";
 6 | import {useEditorStore} from "~/stores/editor.store";
 7 | import {addNodeWithCoordinates} from "~/utils/nodeEditor";
 8 | 
 9 | import CToolbar from "~/components/Editor/Custom/Toolbar.vue"
10 | import CNode from "~/components/Editor/Custom/Node.vue";
11 | import CPalette from "~/components/Editor/Custom/Palette.vue"
12 | import {ipcRenderer} from "electron";
13 | 
14 | import { useToast } from 'primevue/usetoast';
15 | import {exportWorkflow} from "~/components/Editor/logic/WorkflowExporter";
16 | 
17 | const toast = useToast();
18 | 
19 | const editorStore = useEditorStore()
20 | const saveResults = ref('')
21 | 
22 | const baklava = useBaklava();
23 | const editor = baklava.editor
24 | const palette = ref()
25 | 
26 | const { files, open, reset, onChange } = useFileDialog({multiple: false, accept: '*.json'})
27 | 
28 | onChange(async (files) => {
29 |   if (files?.length > 0) {
30 |     const file = files?.item(0).path
31 |     await ipcRenderer.invoke("load-workflow-from-file", file).then((result) => {
32 |       editor.load(JSON.parse(result))
33 |       toast.add({ severity: 'success', summary: 'Success', detail: 'Workflow loaded', life: 3000 });
34 |       reset()
35 |     })
36 |   }
37 | })
38 | 
39 | editor.registerNodeType(InputNode)
40 | 
41 | Promise.resolve(constructNodesFromFile()).then(nodes => {
42 |   for(const node of nodes){
43 |     editor.registerNodeType(node.node, {category: node.category})
44 |   }
45 | 
46 |   if(editorStore.stack !== undefined && Object.keys(editorStore.stack).length){
47 |     baklava.editor.load(JSON.parse(editorStore.stack))
48 |     editorStore.stack = {}
49 |   }else{
50 |     addNodeWithCoordinates(baklava, InputNode, 50, 350);
51 |   }
52 | })
53 | 
54 | function uploadState() {
55 |   open()
56 | }
57 | 
58 | function downloadState() {
59 |   saveResults.value = JSON.stringify(editor.save())
60 |   ipcRenderer.send("save-file", saveResults.value)
61 | }
62 | 
63 | function exportState() {
64 |   const stateExport = exportWorkflow(editor.save(), "external")
65 |   ipcRenderer.send("save-file", stateExport)
66 | }
67 | 
68 | function togglePalette() {
69 |   palette.value.toggleVisibility();
70 | }
71 | </script>
72 | 
73 | <template>
74 |   <Toast />
75 |   <EditorComponent id="editor" :view-model="baklava">
76 |     <template #toolbar>
77 |       <CToolbar
78 |         @upload="uploadState"
79 |         @download="downloadState"
80 |         @export="exportState"
81 |         @toggle-palette="togglePalette" />
82 |     </template>
83 |     <template #palette>
84 |       <CPalette ref="palette" />
85 |     </template>
86 |     <template #node="nodeProps">
87 |       <CNode :key="nodeProps.node.id" v-bind="nodeProps" />
88 |     </template>
89 |   </EditorComponent>
90 | </template>
91 | 
92 | 
93 | <style>
94 | @import "/assets/nodeflow-custom.css";
95 | </style>
96 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
  1 | import path from 'path';
  2 | import { rmSync } from 'node:fs';
  3 | import { defineConfig } from 'vite';
  4 | import vue from '@vitejs/plugin-vue';
  5 | import AutoImport from 'unplugin-auto-import/vite';
  6 | import electron from 'vite-plugin-electron';
  7 | import renderer from 'vite-plugin-electron-renderer';
  8 | import pkg from './package.json';
  9 | 
 10 | rmSync('dist-electron', { recursive: true, force: true });
 11 | 
 12 | const isDevelopment =
 13 |   process.env.NODE_ENV === 'development' || !!process.env.VSCODE_DEBUG;
 14 | const isProduction = process.env.NODE_ENV === 'production';
 15 | 
 16 | // https://vitejs.dev/config/
 17 | export default defineConfig({
 18 |   define: {
 19 |     __VUE_I18N_FULL_INSTALL__: true,
 20 |     __VUE_I18N_LEGACY_API__: false,
 21 |     __INTLIFY_PROD_DEVTOOLS__: false,
 22 |   },
 23 | 
 24 |   resolve: {
 25 |     alias: {
 26 |       '~/': `${path.resolve(__dirname, 'src')}/`,
 27 |     },
 28 |   },
 29 | 
 30 |   plugins: [
 31 |     vue(),
 32 | 
 33 |     // https://github.com/antfu/unplugin-auto-import
 34 |     AutoImport({
 35 |       imports: ['vue', 'vue-router', 'vue-i18n', 'vue/macros', '@vueuse/core'],
 36 |       dts: 'src/auto-imports.d.ts',
 37 |     }),
 38 | 
 39 |     electron([
 40 |       {
 41 |         // Main-Process entry file of the Electron App.
 42 |         entry: 'electron/main/index.ts',
 43 |         onstart(options) {
 44 |           if (process.env.VSCODE_DEBUG) {
 45 |             console.log(
 46 |               /* For `.vscode/.debug.script.mjs` */ '[startup] Electron App'
 47 |             );
 48 |           } else {
 49 |             options.startup();
 50 |           }
 51 |         },
 52 |         vite: {
 53 |           build: {
 54 |             sourcemap: isDevelopment,
 55 |             minify: isProduction,
 56 |             outDir: 'dist-electron/main',
 57 |             rollupOptions: {
 58 |               external: Object.keys(
 59 |                 'dependencies' in pkg ? pkg.dependencies : {}
 60 |               ),
 61 |             },
 62 |           },
 63 |         },
 64 |       },
 65 |       {
 66 |         entry: 'electron/preload/index.ts',
 67 |         onstart(options) {
 68 |           // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete,
 69 |           // instead of restarting the entire Electron App.
 70 |           options.reload();
 71 |         },
 72 |         vite: {
 73 |           build: {
 74 |             sourcemap: isDevelopment,
 75 |             minify: isProduction,
 76 |             outDir: 'dist-electron/preload',
 77 |             rollupOptions: {
 78 |               external: Object.keys(
 79 |                 'dependencies' in pkg ? pkg.dependencies : {}
 80 |               ),
 81 |             },
 82 |           },
 83 |         },
 84 |       },
 85 |     ]),
 86 | 
 87 |     // Use Node.js API in the Renderer-process
 88 |     renderer({
 89 |       nodeIntegration: true,
 90 |     }),
 91 |   ],
 92 | 
 93 |   server: process.env.VSCODE_DEBUG
 94 |     ? (() => {
 95 |         const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL);
 96 |         return {
 97 |           host: url.hostname,
 98 |           port: +url.port,
 99 |         };
100 |       })()
101 |     : undefined,
102 |   clearScreen: false,
103 | });
104 | 


--------------------------------------------------------------------------------
/docs/assets/images/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    width="147.3082mm"
 6 |    height="147.3082mm"
 7 |    viewBox="0 0 147.3082 147.3082"
 8 |    version="1.1"
 9 |    id="svg11614"
10 |    xml:space="preserve"
11 |    xmlns="http://www.w3.org/2000/svg"
12 |    xmlns:svg="http://www.w3.org/2000/svg"><defs
13 |      id="defs11611" /><g
14 |      id="layer1"
15 |      transform="translate(-31.3459,-66.793203)"><path
16 |        style="fill:#3867d6;fill-opacity:1;stroke-width:0.264583"
17 |        id="rect13239"
18 |        width="147.3082"
19 |        height="147.3082"
20 |        x="31.345901"
21 |        y="66.793205"
22 |        d="M 57.804234,66.793205 H 152.19577 A 26.458333,26.458333 45 0 1 178.6541,93.251538 V 187.64307 A 26.458333,26.458333 135 0 1 152.19577,214.1014 H 57.804234 A 26.458333,26.458333 45 0 1 31.345901,187.64307 l 0,-94.391532 A 26.458333,26.458333 135 0 1 57.804234,66.793205 Z" /><g
23 |        id="g13749"
24 |        transform="matrix(0.20740749,0,0,0.20740749,51.903683,85.079138)"
25 |        style="fill:#ffffff;fill-opacity:1"><path
26 |          style="fill:#ffffff;fill-opacity:1"
27 |          d="m 442.182,0 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -70.681,159.04 c -1.806,-0.141 -3.621,-0.234 -5.461,-0.234 -5.916,0 -11.661,0.746 -17.15,2.138 l -51.11,-76.667 c 8.758,-11.667 13.957,-26.155 13.957,-41.835 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 L 75.278,372.598 c -1.804,-0.141 -3.62,-0.234 -5.46,-0.234 C 31.32,372.364 0,403.684 0,442.182 0,480.68 31.32,512 69.818,512 c 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.917 -21.839,-50.649 l 70.684,-159.04 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 51.108,76.667 c -8.758,11.667 -13.957,26.155 -13.957,41.835 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.916 -21.838,-50.649 l 70.682,-159.04 c 1.803,0.141 3.618,0.234 5.458,0.234 38.498,0 69.818,-31.32 69.818,-69.818 C 511.998,31.32 480.68,0 442.182,0 Z"
28 |          id="path13714" /><g
29 |          id="g13720"
30 |          style="fill:#ffffff;fill-opacity:1">
31 | 	<path
32 |    style="fill:#ffffff;fill-opacity:1"
33 |    d="m 318.061,325.818 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 -10e-4,-12.833 -10.441,-23.273 -23.273,-23.273 z"
34 |    id="path13716" />
35 | 	<path
36 |    style="fill:#ffffff;fill-opacity:1"
37 |    d="m 80.992,421.778 c -1.091,-0.6 -2.245,-1.097 -3.437,-1.517 -2.423,-0.86 -5.021,-1.351 -7.737,-1.351 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-8.786 -4.895,-16.446 -12.099,-20.405 z"
38 |    id="path13718" />
39 | </g><g
40 |          id="g13726"
41 |          style="fill:#ffffff;fill-opacity:1">
42 | 	<path
43 |    style="fill:#ffffff;fill-opacity:1"
44 |    d="m 263.758,162.909 c 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 L 127.099,256 h 50.935 l 10.448,-23.507 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 L 228.031,256 h 55.94 L 249.8,204.744 c 8.758,-11.667 13.958,-26.155 13.958,-41.835 z"
45 |    id="path13722" />
46 | 	<path
47 |    style="fill:#ffffff;fill-opacity:1"
48 |    d="m 442.182,0 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 L 333.968,256 h 50.935 l 51.819,-116.598 c 1.804,0.141 3.62,0.234 5.46,0.234 C 480.68,139.636 512,108.316 512,69.818 512,31.32 480.68,0 442.182,0 Z"
49 |    id="path13724" />
50 | </g><g
51 |          id="g13732"
52 |          style="fill:#ffffff;fill-opacity:1">
53 | 	<path
54 |    style="fill:#ffffff;fill-opacity:1"
55 |    d="m 193.939,139.636 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-12.833 -10.44,-23.273 -23.273,-23.273 z"
56 |    id="path13728" />
57 | 	<path
58 |    style="fill:#ffffff;fill-opacity:1"
59 |    d="m 465.455,69.818 c 0,-12.833 -10.44,-23.273 -23.273,-23.273 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.832,0 23.273,-10.44 23.273,-23.273 z"
60 |    id="path13730" />
61 | </g></g></g></svg>
62 | 


--------------------------------------------------------------------------------
/public/images/application/icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    width="147.3082mm"
 6 |    height="147.3082mm"
 7 |    viewBox="0 0 147.3082 147.3082"
 8 |    version="1.1"
 9 |    id="svg11614"
10 |    xml:space="preserve"
11 |    xmlns="http://www.w3.org/2000/svg"
12 |    xmlns:svg="http://www.w3.org/2000/svg"><defs
13 |      id="defs11611" /><g
14 |      id="layer1"
15 |      transform="translate(-31.3459,-66.793203)"><path
16 |        style="fill:#3867d6;fill-opacity:1;stroke-width:0.264583"
17 |        id="rect13239"
18 |        width="147.3082"
19 |        height="147.3082"
20 |        x="31.345901"
21 |        y="66.793205"
22 |        d="M 57.804234,66.793205 H 152.19577 A 26.458333,26.458333 45 0 1 178.6541,93.251538 V 187.64307 A 26.458333,26.458333 135 0 1 152.19577,214.1014 H 57.804234 A 26.458333,26.458333 45 0 1 31.345901,187.64307 l 0,-94.391532 A 26.458333,26.458333 135 0 1 57.804234,66.793205 Z" /><g
23 |        id="g13749"
24 |        transform="matrix(0.20740749,0,0,0.20740749,51.903683,85.079138)"
25 |        style="fill:#ffffff;fill-opacity:1"><path
26 |          style="fill:#ffffff;fill-opacity:1"
27 |          d="m 442.182,0 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -70.681,159.04 c -1.806,-0.141 -3.621,-0.234 -5.461,-0.234 -5.916,0 -11.661,0.746 -17.15,2.138 l -51.11,-76.667 c 8.758,-11.667 13.957,-26.155 13.957,-41.835 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 L 75.278,372.598 c -1.804,-0.141 -3.62,-0.234 -5.46,-0.234 C 31.32,372.364 0,403.684 0,442.182 0,480.68 31.32,512 69.818,512 c 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.917 -21.839,-50.649 l 70.684,-159.04 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 51.108,76.667 c -8.758,11.667 -13.957,26.155 -13.957,41.835 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.916 -21.838,-50.649 l 70.682,-159.04 c 1.803,0.141 3.618,0.234 5.458,0.234 38.498,0 69.818,-31.32 69.818,-69.818 C 511.998,31.32 480.68,0 442.182,0 Z"
28 |          id="path13714" /><g
29 |          id="g13720"
30 |          style="fill:#ffffff;fill-opacity:1">
31 | 	<path
32 |    style="fill:#ffffff;fill-opacity:1"
33 |    d="m 318.061,325.818 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 -10e-4,-12.833 -10.441,-23.273 -23.273,-23.273 z"
34 |    id="path13716" />
35 | 	<path
36 |    style="fill:#ffffff;fill-opacity:1"
37 |    d="m 80.992,421.778 c -1.091,-0.6 -2.245,-1.097 -3.437,-1.517 -2.423,-0.86 -5.021,-1.351 -7.737,-1.351 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-8.786 -4.895,-16.446 -12.099,-20.405 z"
38 |    id="path13718" />
39 | </g><g
40 |          id="g13726"
41 |          style="fill:#ffffff;fill-opacity:1">
42 | 	<path
43 |    style="fill:#ffffff;fill-opacity:1"
44 |    d="m 263.758,162.909 c 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 L 127.099,256 h 50.935 l 10.448,-23.507 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 L 228.031,256 h 55.94 L 249.8,204.744 c 8.758,-11.667 13.958,-26.155 13.958,-41.835 z"
45 |    id="path13722" />
46 | 	<path
47 |    style="fill:#ffffff;fill-opacity:1"
48 |    d="m 442.182,0 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 L 333.968,256 h 50.935 l 51.819,-116.598 c 1.804,0.141 3.62,0.234 5.46,0.234 C 480.68,139.636 512,108.316 512,69.818 512,31.32 480.68,0 442.182,0 Z"
49 |    id="path13724" />
50 | </g><g
51 |          id="g13732"
52 |          style="fill:#ffffff;fill-opacity:1">
53 | 	<path
54 |    style="fill:#ffffff;fill-opacity:1"
55 |    d="m 193.939,139.636 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-12.833 -10.44,-23.273 -23.273,-23.273 z"
56 |    id="path13728" />
57 | 	<path
58 |    style="fill:#ffffff;fill-opacity:1"
59 |    d="m 465.455,69.818 c 0,-12.833 -10.44,-23.273 -23.273,-23.273 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.832,0 23.273,-10.44 23.273,-23.273 z"
60 |    id="path13730" />
61 | </g></g></g></svg>
62 | 


--------------------------------------------------------------------------------
/src/components/CommandCenter/Workflow.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts" xmlns="http://www.w3.org/1999/html">
 2 | 
 3 | import {useFileDialog} from "@vueuse/core";
 4 | import {ipcRenderer} from "electron";
 5 | import {ArrowPathIcon, CloudArrowUpIcon, PlayIcon} from "@heroicons/vue/24/outline";
 6 | import path from "path";
 7 | import {exportWorkflow} from "../Editor/logic/WorkflowExporter";
 8 | import {useCommandCenterStore} from "../../stores/commandCenter.store";
 9 | 
10 | const { files, open, reset, onChange } = useFileDialog({multiple: false, accept: '.json'})
11 | 
12 | const store = useCommandCenterStore()
13 | 
14 | const emit = defineEmits(["completed"])
15 | const selectedWorkflow = ref("")
16 | const processString = ref("")
17 | const isWorkflowRunning = ref(false)
18 | 
19 | onChange(async (files) => {
20 |   if (files!.length === 1) {
21 |     selectedWorkflow.value = files!.item(0)!.path
22 |   }
23 | })
24 | function openFileDialog(){
25 |   open()
26 | }
27 | 
28 | async function launch(){
29 |   await ipcRenderer.invoke("load-workflow-from-file", selectedWorkflow.value).then((result) => {
30 |     processString.value = exportWorkflow(JSON.parse(result), "internal")
31 |   })
32 |   isWorkflowRunning.value = true
33 |   await ipcRenderer.invoke("launch-workflow",
34 |     {processString: processString.value, workspace: store.workspace}).then((result) => {
35 |     emit("completed")
36 |   })
37 | 
38 | }
39 | </script>
40 | 
41 | <template>
42 |   <div v-if="!isWorkflowRunning">
43 |     <section
44 |       v-if="!selectedWorkflow"
45 |       class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
46 |       <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">You successfully imported your images!</h2>
47 |       <h2 class="text-gray-700 dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">Now upload a workflow and launch it!</h2>
48 |       <button
49 |         type="button"
50 |         class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
51 |         @click="openFileDialog">
52 |         <CloudArrowUpIcon class="inline w-6 h-6 mr-2 text-white" />
53 |         Upload Workflow
54 |       </button>
55 |     </section>
56 |     <section
57 |       v-if="selectedWorkflow"
58 |       class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100">
59 |       <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">You're almost there!</h2>
60 |       <h2 class="text-gray-700 text-center dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg md:text-lg">You selected <span class="text-blue-700 dark:text-blue-300">{{ path.parse(selectedWorkflow).base }}</span>. <br /> Do you want to launch it?</h2>
61 |       <div
62 |         class="grid-cols-2">
63 |           <button
64 |             type="button"
65 |             class="text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center content-center"
66 |             @click="launch">
67 |             <PlayIcon class="inline w-6 h-6 mr-2 text-white" />
68 |             Launch
69 |           </button>
70 |           <button
71 |             type="button"
72 |             class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
73 |             @click="openFileDialog">
74 |             <CloudArrowUpIcon class="inline w-6 h-6 mr-2 text-white" />
75 |             Upload
76 |           </button>
77 |       </div>
78 |     </section>
79 |   </div>
80 |   <div v-else>
81 |     <section
82 |       class="flex flex-col items-center justify-center sm:p-24 dark:text-gray-100 space-y-10">
83 |       <h2 class="text-black text-center dark:text-white mb-2 text-xl font-bold sm:text-2xl md:text-3xl">Your workflow is running!</h2>
84 |       <ArrowPathIcon class="inline w-16 h-16 mr-2 text-white animate-spin" />
85 |       <h2 class="text-gray-700 dark:text-gray-200 mb-8 text-lg font-bold sm:text-lg text-center md:text-lg">This may take some time...</h2>
86 |     </section>
87 |   </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/src/components/Settings/SettingsModal.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue'
  3 | import {
  4 |   TransitionRoot,
  5 |   TransitionChild,
  6 |   Dialog,
  7 |   DialogPanel,
  8 |   DialogTitle,
  9 | } from '@headlessui/vue'
 10 | 
 11 | const isOpen = ref(false)
 12 | 
 13 | function closeModal() {
 14 |   isOpen.value = false
 15 | }
 16 | function openModal() {
 17 |   isOpen.value = true
 18 | }
 19 | 
 20 | defineExpose({
 21 |   openModal
 22 | })
 23 | </script>
 24 | 
 25 | <template>
 26 |   <TransitionRoot appear :show="isOpen" as="template">
 27 |     <Dialog
 28 |       as="div"
 29 |       class="relative z-10"
 30 |       @close="closeModal">
 31 |       <TransitionChild
 32 |         as="template"
 33 |         enter="duration-300 ease-out"
 34 |         enter-from="opacity-0"
 35 |         enter-to="opacity-100"
 36 |         leave="duration-200 ease-in"
 37 |         leave-from="opacity-100"
 38 |         leave-to="opacity-0"
 39 |       >
 40 |         <div class="fixed inset-0 bg-black bg-opacity-25" />
 41 |       </TransitionChild>
 42 | 
 43 |       <div class="fixed inset-0 overflow-y-auto">
 44 |         <div
 45 |           class="flex min-h-full items-center justify-center p-4 text-center"
 46 |         >
 47 |           <TransitionChild
 48 |             as="template"
 49 |             enter="duration-300 ease-out"
 50 |             enter-from="opacity-0 scale-95"
 51 |             enter-to="opacity-100 scale-100"
 52 |             leave="duration-200 ease-in"
 53 |             leave-from="opacity-100 scale-100"
 54 |             leave-to="opacity-0 scale-95"
 55 |           >
 56 |             <DialogPanel
 57 |               class="w-full max-w-lg transform overflow-hidden rounded-2xl bg-gray-50 dark:bg-gray-800 p-6 text-left align-middle shadow-xl transition-all"
 58 |             >
 59 |               <DialogTitle
 60 |                 as="h3"
 61 |                 class="text-xl font-medium leading-6 text-gray-900 dark:text-white"
 62 |               >
 63 |                 Settings
 64 |               </DialogTitle>
 65 | <!--              <div class="mt-4 mb-4">-->
 66 | <!--                <form>-->
 67 | <!--                  <div class="mb-6">-->
 68 | <!--                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>-->
 69 | <!--                    <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="john.doe@company.com">-->
 70 | <!--                  </div>-->
 71 | <!--                  <div class="mb-6">-->
 72 | <!--                    <label for="workflow-directory" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default Workflow directory</label>-->
 73 | <!--                    <input type="text" id="workflow-directory" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="">-->
 74 | <!--                  </div>-->
 75 | <!--                </form>-->
 76 | <!--              </div>-->
 77 | 
 78 |               <div class="flex space-x-1">
 79 |                 <button
 80 |                   type="button"
 81 |                   class="inline-flex justify-center rounded-md border border-transparent bg-blue-700 hover:bg-blue-800 px-4 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
 82 |                   @click="closeModal"
 83 |                 >
 84 |                   Save
 85 |                 </button>
 86 |                 <button
 87 |                   type="button"
 88 |                   class="inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-black dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
 89 |                   @click="closeModal"
 90 |                 >
 91 |                   Cancel
 92 |                 </button>
 93 |               </div>
 94 |             </DialogPanel>
 95 |           </TransitionChild>
 96 |         </div>
 97 |       </div>
 98 |     </Dialog>
 99 |   </TransitionRoot>
100 | </template>
101 | 
102 | 


--------------------------------------------------------------------------------
/dist-electron/main/index.js:
--------------------------------------------------------------------------------
1 | "use strict";const o=require("electron"),P=require("node:os"),w=require("node:path"),p=require("path"),m=require("dockerode"),{exec:g}=require("child_process"),E=require("archiver"),u=require("fs");process.env.DIST_ELECTRON=w.join(__dirname,"..");process.env.DIST=w.join(process.env.DIST_ELECTRON,"../dist");process.env.PUBLIC=process.env.VITE_DEV_SERVER_URL?w.join(process.env.DIST_ELECTRON,"../public"):process.env.DIST;P.release().startsWith("6.1")&&o.app.disableHardwareAcceleration();process.platform==="win32"&&o.app.setAppUserModelId(o.app.getName());o.app.requestSingleInstanceLock()||(o.app.quit(),process.exit(0));let a=null;const h=w.join(__dirname,"../preload/index.js"),v=process.env.VITE_DEV_SERVER_URL,k=w.join(process.env.DIST,"index.html");async function D(){a=new o.BrowserWindow({title:"NodeFlow",icon:w.join(process.env.PUBLIC,"favicon.ico"),width:1200,height:750,webPreferences:{preload:h,nodeIntegration:!0,contextIsolation:!1}}),a.setMenu(null),a.setOpacity(1),process.env.VITE_DEV_SERVER_URL?(a.loadURL(v),a.webContents.openDevTools()):a.loadFile(k),a.webContents.on("did-finish-load",()=>{a==null||a.webContents.send("main-process-message",new Date().toLocaleString())}),a.webContents.setWindowOpenHandler(({url:n})=>(n.startsWith("https:")&&o.shell.openExternal(n),{action:"deny"}))}o.app.whenReady().then(D);o.app.on("window-all-closed",()=>{a=null,process.platform!=="darwin"&&o.app.quit()});o.app.on("second-instance",()=>{a&&(a.isMinimized()&&a.restore(),a.focus())});o.app.on("activate",()=>{const n=o.BrowserWindow.getAllWindows();n.length?n[0].focus():D()});async function I(n){const{canceled:e,filePath:i}=await o.dialog.showSaveDialog(o.BrowserWindow.getFocusedWindow(),{properties:["createDirectory"]});return e?new Promise((t,r)=>{t(!1)}):new Promise((t,r)=>{u.writeFileSync(i,n),t(!0)})}o.ipcMain.on("save-file",async(n,e)=>await I(e));async function j(n){const{canceled:e,filePath:i}=await o.dialog.showSaveDialog(o.BrowserWindow.getFocusedWindow(),{properties:["createDirectory"]});if(e)return new Promise((t,r)=>{t(!1)});{const t=p.join(o.app.getAppPath(),n),r=E("zip",{zlib:{level:9}}),l=u.createWriteStream(i);return new Promise((s,d)=>{r.directory(t,!1).on("error",c=>d(c)).pipe(l),l.on("close",()=>s(!0)),r.finalize()})}}o.ipcMain.handle("export-results",async(n,e)=>await j(e));function R(n){return new Promise((e,i)=>{u.readFile(n,"utf8",(t,r)=>{t||e(r)})})}o.ipcMain.handle("load-workflow-from-file",async(n,e)=>await R(e));function _(){return new Promise((n,e)=>{new m().listContainers(function(t,r){n(!t)})})}o.ipcMain.handle("is-docker-available",async(n,...e)=>await _());function S(){return new Promise((n,e)=>{const i=new m;i.pull("ocrd/all:maximum",function(t,r){i.modem.followProgress(r,l,s);function l(d,c){d||n(!0)}function s(d){if(d.progressDetail!==void 0){const c=d.progressDetail;if(c.current!==void 0&&c.total!==void 0){const f=Math.round(c.total/c.current);console.log(f)}}}})})}o.ipcMain.handle("pull-ocrd-docker-image",async(n,e)=>await S());function W(n){return new Promise((e,i)=>{const t=`docker run --rm -v ${p.join(o.app.getAppPath(),n.workspace)}:/data -w /data -- ocrd/all:maximum ${n.processString}`;g(t,(r,l,s)=>{r&&(console.log(`error: ${r.message}`),e(!1)),s&&(console.log(`stderr: ${s}`),e(!1)),e(!0)})})}o.ipcMain.handle("launch-workflow",async(n,e)=>await W(e));o.ipcMain.on("open-docker-setup-guide",(n,...e)=>{require("electron").shell.openExternal("https://docs.docker.com/get-docker/")});async function M(){const{canceled:n,filePaths:e}=await o.dialog.showOpenDialog(o.BrowserWindow.getFocusedWindow(),{properties:["openDirectory"]});if(!n)return new Promise((i,t)=>{i(e[0])})}o.ipcMain.handle("get-directory",async(n,e)=>await M());function x(n){return new Promise((e,i)=>{u.mkdirSync(n),u.mkdirSync(p.join(n,"OCR-D-IMG"));const t=`docker run --rm -v ${n}:/data -w /data -- ocrd/all:maximum ocrd workspace -d /data init`;g(t,(r,l,s)=>{r&&(console.log(`error: ${r.message}`),e(!1)),s&&(console.log(`stderr: ${s}`),s.includes("Writing METS to /data/mets.xml")||e(!1)),console.log(`stdout: ${l}`),e(!0)})})}o.ipcMain.handle("init-ocrd-workspace",async(n,e)=>await x(p.join(o.app.getAppPath(),e)));function T(n,e){return new Promise((i,t)=>{const r=p.join(o.app.getAppPath(),e),l=p.join(r,"OCR-D-IMG");for(const s of n){const d=p.parse(s).base,c=p.parse(s).name,f=p.join(l,d);u.copyFileSync(s,f);const y=`docker run --rm -v ${r}:/data -w /data -- ocrd/all:maximum ocrd workspace add -G OCR-D-IMG -i OCR-D-IMG_${c} -g P_${c} -m image/tif OCR-D-IMG/${d}`;require("child_process").execSync(y)}i(!0)})}o.ipcMain.handle("upload-images-to-workspace",async(n,e)=>await T(e.paths,e.workspaceName));o.ipcMain.handle("open-win",(n,e)=>{const i=new o.BrowserWindow({webPreferences:{preload:h,nodeIntegration:!0,contextIsolation:!1}});process.env.VITE_DEV_SERVER_URL?i.loadURL(`${v}#${e}`):i.loadFile(k,{hash:e})});
2 | 


--------------------------------------------------------------------------------
/src/components/Editor/logic/WorkflowExporter.js:
--------------------------------------------------------------------------------
  1 | function hasInputNode(graph) {
  2 |   for(const node of graph.nodes){
  3 |     if(node.type === "InputNode") return node.id
  4 |   }
  5 |   return ""
  6 | }
  7 | 
  8 | function flatMapToTree(flatMap){
  9 |   const nodes = [];
 10 |   const toplevelNodes = [];
 11 |   const lookupList = {};
 12 | 
 13 |   for (let i = 0; i < flatMap.length; i++) {
 14 |     const n = {
 15 |       id: flatMap[i].id,
 16 |       name: flatMap[i].name,
 17 |       parent_id: ((flatMap[i].parent === 0) ? null : flatMap[i].parent),
 18 |       children: []
 19 |     };
 20 |     lookupList[n.id] = n;
 21 |     nodes.push(n);
 22 |     if (n.parent_id == null) {
 23 |       toplevelNodes.push(n);
 24 |     }
 25 |   }
 26 | 
 27 |   for (let i = 0; i < nodes.length; i++) {
 28 |     const n = nodes[i];
 29 |     if (!(n.parent_id == null)) {
 30 |       lookupList[n.parent_id].children = lookupList[n.parent_id].children.concat([n]);
 31 |     }
 32 |   }
 33 |   return toplevelNodes[0]
 34 | }
 35 | 
 36 | function traverseTree(tree, nodeMap){
 37 |   function iter(o, p)  {
 38 |     if(o.children){
 39 |       o.children.forEach(function (k){
 40 |         iter(k, p.concat(nodeMap.get(k.id)))
 41 |       })
 42 |     }
 43 |     if(o.children.length === 0){
 44 |       result.push(p)
 45 |     }
 46 |   }
 47 | 
 48 |   const result = [];
 49 |   iter(tree, []);
 50 |   return result;
 51 | }
 52 | 
 53 | function filterFlatMap(flatMap, idNameMap){
 54 |   // Removes all connections which contain non input root nodes
 55 |   const nonInputRootNodes = new Map(idNameMap)
 56 |   for(const entry of flatMap){
 57 |     nonInputRootNodes.delete(entry.id)
 58 |   }
 59 |   const filteredNodes = Array.from(nonInputRootNodes.keys())
 60 |   const filteredFlatMap = []
 61 |   for(const entry of flatMap){
 62 |     if(filteredNodes.indexOf(entry.parent) === -1) filteredFlatMap.push(entry)
 63 |   }
 64 |   return filteredFlatMap
 65 | }
 66 | 
 67 | function buildExportString(processString, mode) {
 68 |   switch(mode){
 69 |     case "external":
 70 |       return [
 71 |         "docker",
 72 |         "run",
 73 |         "--rm",
 74 |         "-u",
 75 |         "$(id -u)",
 76 |         "-v",
 77 |         "$PWD:/data",
 78 |         "-w",
 79 |         "/data",
 80 |         "--",
 81 |         "ocrd/all:maximum"].concat(processString).join(" ")
 82 |     case "internal":
 83 |       return processString.join(" ")
 84 |   }
 85 | }
 86 | 
 87 | function buildProcessStringFromPaths(paths){
 88 |   const reservedNames = ["Description", "Input", "Output"]
 89 |   const call = [
 90 |     "ocrd",
 91 |     "process"
 92 |   ]
 93 |   for(const [pathIndex, path] of paths.entries()){
 94 |     let latestOutput = ""
 95 |     for(const [processorIndex, processor] of path.entries()){
 96 |       const processorCall = []
 97 | 
 98 |       processorCall.push(`${processor.type}`.replace(/^(ocrd-)/,""))
 99 | 
100 |       processorCall.push("-I")
101 |       latestOutput === "" ? processorCall.push("OCR-D-IMG") : processorCall.push(latestOutput)
102 |       processorCall.push("-O")
103 |       const outputName = `P${pathIndex}_${processor.type}_${processorIndex}`
104 |       processorCall.push(outputName)
105 |       latestOutput = outputName
106 | 
107 |       for(const [key, value] of Object.entries(processor.inputs)){
108 |         if(reservedNames.indexOf(key) === -1){
109 |           if(value.value){
110 |             processorCall.push("-P")
111 |             processorCall.push(key)
112 |             processorCall.push(value.value)
113 |           }
114 |         }
115 |       }
116 |       call.push("'" + processorCall.join(" ") + "'")
117 |     }
118 |   }
119 |   return call
120 | }
121 | 
122 | export function exportWorkflow(state, mode){
123 |   const graph = state.graph
124 |   const inputNode = hasInputNode(graph)
125 |   if(!inputNode){
126 |     return false
127 |   }
128 | 
129 |   const connectionNodeMap = new Map()
130 |   const nodeMap = new Map()
131 | 
132 |   for(const node of graph.nodes){
133 |     nodeMap.set(node.id, node)
134 |     for(const [key, value] of Object.entries(node.inputs)){
135 |       connectionNodeMap.set(value.id, node.id)
136 |     }
137 |     for(const [key, value] of Object.entries(node.outputs)){
138 |       connectionNodeMap.set(value.id, node.id)
139 |     }
140 |   }
141 | 
142 |   const flatMap= []
143 |   flatMap.push({
144 |     id: inputNode,
145 |     name: inputNode,
146 |     parent: 0
147 |   })
148 | 
149 |   for(const connection of graph.connections){
150 |     const fromNode = connectionNodeMap.get(connection.from)
151 |     const toNode = connectionNodeMap.get(connection.to)
152 | 
153 |     flatMap.push({
154 |       id: toNode,
155 |       name: toNode,
156 |       parent: fromNode
157 |     })
158 | 
159 |   }
160 | 
161 |   const filteredFlatMap = filterFlatMap(flatMap, nodeMap)
162 | 
163 |   const tree = flatMapToTree(filteredFlatMap)
164 |   const paths = traverseTree(tree, nodeMap)
165 |   const processString = buildProcessStringFromPaths(paths)
166 |   return buildExportString(processString, mode)
167 | }
168 | 


--------------------------------------------------------------------------------
/src/components/Layout/Sidebar.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   HomeIcon,
  4 |   CubeTransparentIcon,
  5 |   PresentationChartLineIcon,
  6 |   CommandLineIcon,
  7 |   MoonIcon,
  8 |   SunIcon,
  9 |   Cog6ToothIcon
 10 | } from '@heroicons/vue/24/solid';
 11 | 
 12 | import SettingsModal from "~/components/Settings/SettingsModal.vue";
 13 | 
 14 | const isDark = useDark();
 15 | const toggleDark = useToggle(isDark);
 16 | 
 17 | const settingsRef = ref()
 18 | const ctaHidden = ref(false);
 19 | 
 20 | const { t } = useI18n();
 21 | 
 22 | const sidebarEntries = [
 23 |   {
 24 |     label: "Dashboard",
 25 |     to: "/",
 26 |     icon: HomeIcon
 27 |   },
 28 |   {
 29 |     label: "Workflow Editor",
 30 |     to: "/editor",
 31 |     icon: CubeTransparentIcon
 32 |   },
 33 |   {
 34 |     label: "Command Center",
 35 |     to: "/command-center",
 36 |     icon: CommandLineIcon
 37 |   },
 38 |   {
 39 |     label: "Tour",
 40 |     to: "/tour",
 41 |     icon: PresentationChartLineIcon
 42 |   },
 43 | ]
 44 | 
 45 | function openSettingsModel(){
 46 |   settingsRef.value.openModal()
 47 | }
 48 | </script>
 49 | 
 50 | <template>
 51 |   <SettingsModal ref="settingsRef" />
 52 |   <div
 53 |     class="flex w-16 sm:w-64 flex-col justify-between bg-gray-50 px-3 py-4 dark:bg-gray-800"
 54 |   >
 55 |     <div>
 56 |       <a class="mb-5 flex items-center pl-1.5 sm:pl-2.5">
 57 |         <img
 58 |           src="/images/application/icon.svg"
 59 |           class="mr-3 h-7"
 60 |           alt="NodeFlow Logo"
 61 |         />
 62 |         <span
 63 |           class="self-center whitespace-nowrap text-xl font-semibold text-black dark:text-white hidden sm:block"
 64 |           >NodeFlow</span
 65 |         >
 66 |       </a>
 67 |       <ul class="space-y-2">
 68 |         <li v-for="(item, index) in sidebarEntries" :key="index">
 69 |           <router-link :to="item.to" class="flex items-center rounded-lg p-2 text-base font-normal text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700">
 70 |             <component :is="item.icon" class="sm:h-6 sm:w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
 71 |             <span class="ml-3 truncate hidden sm:block">{{ item.label }}</span>
 72 |           </router-link>
 73 |         </li>
 74 |       </ul>
 75 |       <div
 76 |         v-show="!ctaHidden"
 77 |         id="dropdown-cta"
 78 |         class="invisible mt-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-900 md:visible"
 79 |         role="alert"
 80 |       >
 81 |         <div class="mb-3 flex items-center">
 82 |           <span
 83 |             class="mr-2 rounded bg-orange-100 px-2.5 py-0.5 text-sm font-semibold text-orange-800 dark:bg-orange-200 dark:text-orange-900"
 84 |             >{{ $t('sidebar.cta.heading') }}</span
 85 |           >
 86 |           <button
 87 |             type="button"
 88 |             class="-mx-1.5 -my-1.5 ml-auto inline-flex h-6 w-6 rounded-lg bg-blue-50 p-1 text-blue-900 hover:bg-blue-200 focus:ring-2 focus:ring-blue-400 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-800"
 89 |             @click="ctaHidden = true"
 90 |           >
 91 |             <span class="sr-only">Close</span>
 92 |             <svg
 93 |               aria-hidden="true"
 94 |               class="h-4 w-4"
 95 |               fill="currentColor"
 96 |               viewBox="0 0 20 20"
 97 |               xmlns="http://www.w3.org/2000/svg"
 98 |             >
 99 |               <path
100 |                 fill-rule="evenodd"
101 |                 d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
102 |                 clip-rule="evenodd"
103 |               ></path>
104 |             </svg>
105 |           </button>
106 |         </div>
107 |         <p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
108 |           {{ $t('sidebar.cta.content') }}
109 |         </p>
110 |       </div>
111 |     </div>
112 | 
113 |     <div
114 |       class="mt-4 justify-between border-t border-gray-200 pl-2.5 pr-2.5 pt-4 dark:border-gray-700 hidden sm:flex"
115 |     >
116 |       <div class="dark-toggle-container">
117 |         <button class="text-center" @click="toggleDark()">
118 |           <MoonIcon
119 |             v-if="isDark"
120 |             aria-hidden="true"
121 |             class="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
122 |           />
123 |           <SunIcon
124 |             v-else
125 |             aria-hidden="true"
126 |             class="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
127 |           />
128 |         </button>
129 |       </div>
130 |       <button class="settings">
131 |         <Cog6ToothIcon
132 |           aria-hidden="true"
133 |           class="h-6 w-6 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
134 |           @click="openSettingsModel"
135 |         />
136 |       </button>
137 |     </div>
138 |   </div>
139 | </template>
140 | 


--------------------------------------------------------------------------------
/src/views/DashboardPage.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ArrowSmallRightIcon } from '@heroicons/vue/24/solid';
  3 | import {ipcRenderer} from "electron";
  4 | import {useEditorStore} from "../stores/editor.store";
  5 | 
  6 | const router = useRouter()
  7 | const editorStore = useEditorStore()
  8 | 
  9 | const { files, open, reset, onChange } = useFileDialog({multiple: false, accept: '*.json'})
 10 | 
 11 | onChange(async (files) => {
 12 |   if (files && files.length > 0) {
 13 |     // @ts-ignore
 14 |     const file = files!.item(0).path
 15 |     await ipcRenderer.invoke("load-workflow-from-file", file).then((result) => {
 16 |       editorStore.stack = result
 17 |       router.push("/editor")
 18 |     })
 19 |   }
 20 | })
 21 | 
 22 | function openFileDialog(){
 23 |   open()
 24 | }
 25 | 
 26 | const { t } = useI18n();
 27 | </script>
 28 | 
 29 | <template>
 30 |   <div class="flex h-screen items-center justify-center">
 31 |     <div class="container m-4">
 32 |       <div>
 33 |         <h1
 34 |           class="my-4 text-center text-7xl font-bold leading-tight text-black opacity-90 dark:text-white"
 35 |         >
 36 |           {{ $t('dashboard.heading.welcome') }} <br />
 37 |           <span
 38 |             class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent"
 39 |           >
 40 |             {{ $t('dashboard.heading.tool-name') }}
 41 |           </span>
 42 |         </h1>
 43 |       </div>
 44 |       <div
 45 |         class="mx-auto grid gap-4 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3"
 46 |       >
 47 |         <div class="flex flex-col">
 48 |           <div
 49 |             class="mt-auto h-full rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800"
 50 |           >
 51 |             <div>
 52 |               <h5
 53 |                 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
 54 |               >
 55 |                 {{ $t('dashboard.cta.create.heading') }}
 56 |               </h5>
 57 |             </div>
 58 |             <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
 59 |               {{ $t('dashboard.cta.create.content') }}
 60 |             </p>
 61 |             <router-link to="/editor">
 62 |               <button
 63 |                 class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
 64 |               >
 65 |                 {{ $t('dashboard.cta.create.button') }}
 66 |                 <ArrowSmallRightIcon class="ml-2 -mr-1 h-4 w-4" />
 67 |               </button>
 68 |             </router-link>
 69 |           </div>
 70 |         </div>
 71 |         <div class="flex flex-col">
 72 |           <div
 73 |             class="mt-auto h-full rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800"
 74 |           >
 75 |             <div>
 76 |               <h5
 77 |                 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
 78 |               >
 79 |                 {{ $t('dashboard.cta.edit.heading') }}
 80 |               </h5>
 81 |             </div>
 82 |             <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
 83 |               {{ $t('dashboard.cta.edit.content') }}
 84 |             </p>
 85 |             <button
 86 |               class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
 87 |               @click="openFileDialog"
 88 |             >
 89 |               {{ $t('dashboard.cta.edit.button') }}
 90 |               <ArrowSmallRightIcon class="ml-2 -mr-1 h-4 w-4" />
 91 |             </button>
 92 |           </div>
 93 |         </div>
 94 |         <div class="flex flex-col">
 95 |           <div
 96 |             class="mt-auto h-full rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-700 dark:bg-gray-800"
 97 |           >
 98 |             <div>
 99 |               <h5
100 |                 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
101 |               >
102 |                 {{ $t('dashboard.cta.launch.heading') }}
103 |               </h5>
104 |             </div>
105 |             <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
106 |               {{ $t('dashboard.cta.launch.content') }}
107 |             </p>
108 |             <router-link to="/command-center">
109 |               <button
110 |                 class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
111 |               >
112 |                 {{ $t('dashboard.cta.launch.button') }}
113 |                 <ArrowSmallRightIcon class="ml-2 -mr-1 h-4 w-4" />
114 |               </button>
115 |             </router-link>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 |   </div>
121 | </template>
122 | 


--------------------------------------------------------------------------------
/public/images/repository/logo_with_text_light_mode.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    width="647.16187"
  4 |    height="147.30818"
  5 |    xml:space="preserve"
  6 |    version="1.1"
  7 |    id="svg975"
  8 |    sodipodi:docname="logo_with_text_light_mode.svg"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |    xmlns="http://www.w3.org/2000/svg"
 12 |    xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
 13 |    id="namedview977"
 14 |    pagecolor="#ffffff"
 15 |    bordercolor="#666666"
 16 |    borderopacity="1.0"
 17 |    inkscape:showpageshadow="2"
 18 |    inkscape:pageopacity="0.0"
 19 |    inkscape:pagecheckerboard="0"
 20 |    inkscape:deskcolor="#d1d1d1"
 21 |    showgrid="false" />
 22 |  <defs
 23 |    id="defs11611" />
 24 |  <g
 25 |    id="g973"
 26 |    transform="translate(-31.34589,-36.345901)">
 27 |   <title
 28 |    id="title956">Layer 1</title>
 29 |   <g
 30 |    id="layer1">
 31 |    <path
 32 |    stroke-width="0.26458"
 33 |    fill="#3867d6"
 34 |    d="m 57.80422,36.3459 h 94.39154 a 26.45833,26.45833 45 0 1 26.45833,26.45833 v 94.39153 a 26.45833,26.45833 135 0 1 -26.45833,26.45833 H 57.80422 A 26.45833,26.45833 45 0 1 31.34589,157.19576 V 62.80423 A 26.45833,26.45833 135 0 1 57.80422,36.3459 Z"
 35 |    y="66.79321"
 36 |    x="31.3459"
 37 |    height="147.3082"
 38 |    width="147.3082"
 39 |    id="rect13239" />
 40 |    <text
 41 |    x="103.93691"
 42 |    y="5.86834"
 43 |    fill="#000000"
 44 |    font-family="sans-serif"
 45 |    font-size="266.667px"
 46 |    font-weight="normal"
 47 |    font-style="normal"
 48 |    id="text13295"
 49 |    transform="matrix(0.264583,0,0,0.264583,-27.5,-32)"
 50 |    xml:space="preserve" />
 51 |    <g
 52 |    fill="#ffffff"
 53 |    transform="matrix(0.207407,0,0,0.207407,51.9037,85.0791)"
 54 |    id="g13749">
 55 |     <path
 56 |    fill="#ffffff"
 57 |    id="path13714"
 58 |    d="m 442.18196,-146.79946 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -70.681,159.04 c -1.806,-0.141 -3.621,-0.234 -5.461,-0.234 -5.916,0 -11.661,0.746 -17.15,2.138 l -51.11,-76.667 c 8.758,-11.667 13.957,-26.155 13.957,-41.835 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 l -70.683,159.038 c -1.804,-0.141 -3.62,-0.234 -5.46,-0.234 -38.498,0 -69.818,31.32 -69.818,69.818 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.917 -21.839,-50.649 l 70.684,-159.04 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 51.108,76.667 c -8.758,11.667 -13.957,26.155 -13.957,41.835 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.916 -21.838,-50.649 l 70.682,-159.04 c 1.803,0.141 3.618,0.234 5.458,0.234 38.498,0 69.818,-31.32 69.818,-69.818 0,-38.498 -31.318,-69.818 -69.816,-69.818 z" />
 59 |     <g
 60 |    fill="#ffffff"
 61 |    id="g13720">
 62 |      <path
 63 |    fill="#ffffff"
 64 |    id="path13716"
 65 |    d="m 318.06096,179.01854 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 -10e-4,-12.833 -10.441,-23.273 -23.273,-23.273 z" />
 66 |      <path
 67 |    fill="#ffffff"
 68 |    id="path13718"
 69 |    d="m 80.99196,274.97854 c -1.091,-0.6 -2.245,-1.097 -3.437,-1.517 -2.423,-0.86 -5.021,-1.351 -7.737,-1.351 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-8.786 -4.895,-16.446 -12.099,-20.405 z" />
 70 |     </g>
 71 |     <g
 72 |    fill="#ffffff"
 73 |    id="g13726">
 74 |      <path
 75 |    fill="#ffffff"
 76 |    id="path13722"
 77 |    d="m 263.75796,16.10954 c 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 l -18.862,42.44 h 50.935 l 10.448,-23.507 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 16.939,25.411 h 55.94 l -34.171,-51.256 c 8.758,-11.667 13.958,-26.155 13.958,-41.835 z" />
 78 |      <path
 79 |    fill="#ffffff"
 80 |    id="path13724"
 81 |    d="m 442.18196,-146.79946 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -60.235,135.533 h 50.935 l 51.819,-116.598 c 1.804,0.141 3.62,0.234 5.46,0.234 38.498,0 69.818,-31.32 69.818,-69.818 0,-38.498 -31.32,-69.818 -69.818,-69.818 z" />
 82 |     </g>
 83 |     <g
 84 |    fill="#ffffff"
 85 |    id="g13732">
 86 |      <path
 87 |    fill="#ffffff"
 88 |    id="path13728"
 89 |    d="m 193.93896,-7.16346 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-12.833 -10.44,-23.273 -23.273,-23.273 z" />
 90 |      <path
 91 |    fill="#ffffff"
 92 |    id="path13730"
 93 |    d="m 465.45496,-76.98146 c 0,-12.833 -10.44,-23.273 -23.273,-23.273 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.832,0 23.273,-10.44 23.273,-23.273 z" />
 94 |     </g>
 95 |    </g>
 96 |   </g>
 97 |   <text
 98 |    font-style="normal"
 99 |    font-weight="bold"
100 |    xml:space="preserve"
101 |    text-anchor="start"
102 |    font-family="'Open Sans'"
103 |    font-size="100px"
104 |    id="svg_1"
105 |    y="145.25"
106 |    x="182.99992"
107 |    stroke-width="0"
108 |    stroke="#000000"
109 |    fill="#000000">NodeFlow</text>
110 |  </g>
111 | </svg>
112 | 


--------------------------------------------------------------------------------
/public/images/repository/logo_with_text_dark_mode.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    width="647.16187"
  4 |    height="147.30818"
  5 |    xml:space="preserve"
  6 |    version="1.1"
  7 |    id="svg25"
  8 |    sodipodi:docname="logo_with_text_dark_mode.svg"
  9 |    inkscape:export-filename="logo_with_text_dark_mode.svg"
 10 |    inkscape:export-xdpi="96"
 11 |    inkscape:export-ydpi="96"
 12 |    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
 13 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 14 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 15 |    xmlns="http://www.w3.org/2000/svg"
 16 |    xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
 17 |    id="namedview27"
 18 |    pagecolor="#ffffff"
 19 |    bordercolor="#666666"
 20 |    borderopacity="1.0"
 21 |    inkscape:showpageshadow="2"
 22 |    inkscape:pageopacity="0.0"
 23 |    inkscape:pagecheckerboard="0"
 24 |    inkscape:deskcolor="#d1d1d1"
 25 |    showgrid="false"
 26 |    inkscape:zoom="1.8985507"
 27 |    inkscape:cx="337.88931"
 28 |    inkscape:cy="110.08397"
 29 |    inkscape:window-width="2560"
 30 |    inkscape:window-height="1409"
 31 |    inkscape:window-x="0"
 32 |    inkscape:window-y="0"
 33 |    inkscape:window-maximized="1"
 34 |    inkscape:current-layer="g23" />
 35 |  <defs
 36 |    id="defs11611" />
 37 |  <g
 38 |    id="g23"
 39 |    transform="translate(-31.34589,-36.345901)">
 40 |   <title
 41 |    id="title6">Layer 1</title>
 42 |   <g
 43 |    id="layer1">
 44 |    <path
 45 |    stroke-width="0.26458"
 46 |    fill="#3867d6"
 47 |    d="m 57.80422,36.3459 h 94.39154 a 26.45833,26.45833 45 0 1 26.45833,26.45833 v 94.39153 a 26.45833,26.45833 135 0 1 -26.45833,26.45833 H 57.80422 A 26.45833,26.45833 45 0 1 31.34589,157.19576 V 62.80423 A 26.45833,26.45833 135 0 1 57.80422,36.3459 Z"
 48 |    y="66.79321"
 49 |    x="31.3459"
 50 |    height="147.3082"
 51 |    width="147.3082"
 52 |    id="rect13239" />
 53 |    <text
 54 |    x="103.93691"
 55 |    y="5.86834"
 56 |    fill="#000000"
 57 |    font-family="sans-serif"
 58 |    font-size="266.667px"
 59 |    font-weight="normal"
 60 |    font-style="normal"
 61 |    id="text13295"
 62 |    transform="matrix(0.264583,0,0,0.264583,-27.5,-32)"
 63 |    xml:space="preserve" />
 64 |    <g
 65 |    fill="#ffffff"
 66 |    transform="matrix(0.207407,0,0,0.207407,51.9037,85.0791)"
 67 |    id="g13749">
 68 |     <path
 69 |    fill="#ffffff"
 70 |    id="path13714"
 71 |    d="m 442.18196,-146.79946 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -70.681,159.04 c -1.806,-0.141 -3.621,-0.234 -5.461,-0.234 -5.916,0 -11.661,0.746 -17.15,2.138 l -51.11,-76.667 c 8.758,-11.667 13.957,-26.155 13.957,-41.835 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 l -70.683,159.038 c -1.804,-0.141 -3.62,-0.234 -5.46,-0.234 -38.498,0 -69.818,31.32 -69.818,69.818 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.917 -21.839,-50.649 l 70.684,-159.04 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 51.108,76.667 c -8.758,11.667 -13.957,26.155 -13.957,41.835 0,38.498 31.32,69.818 69.818,69.818 38.498,0 69.818,-31.32 69.818,-69.818 0,-19.926 -8.405,-37.916 -21.838,-50.649 l 70.682,-159.04 c 1.803,0.141 3.618,0.234 5.458,0.234 38.498,0 69.818,-31.32 69.818,-69.818 0,-38.498 -31.318,-69.818 -69.816,-69.818 z" />
 72 |     <g
 73 |    fill="#ffffff"
 74 |    id="g13720">
 75 |      <path
 76 |    fill="#ffffff"
 77 |    id="path13716"
 78 |    d="m 318.06096,179.01854 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 -10e-4,-12.833 -10.441,-23.273 -23.273,-23.273 z" />
 79 |      <path
 80 |    fill="#ffffff"
 81 |    id="path13718"
 82 |    d="m 80.99196,274.97854 c -1.091,-0.6 -2.245,-1.097 -3.437,-1.517 -2.423,-0.86 -5.021,-1.351 -7.737,-1.351 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-8.786 -4.895,-16.446 -12.099,-20.405 z" />
 83 |     </g>
 84 |     <g
 85 |    fill="#ffffff"
 86 |    id="g13726">
 87 |      <path
 88 |    fill="#ffffff"
 89 |    id="path13722"
 90 |    d="m 263.75796,16.10954 c 0,-38.498 -31.32,-69.818 -69.818,-69.818 -38.498,0 -69.818,31.32 -69.818,69.818 0,19.928 8.405,37.916 21.839,50.651 l -18.862,42.44 h 50.935 l 10.448,-23.507 c 1.803,0.141 3.62,0.234 5.458,0.234 5.916,0 11.663,-0.746 17.152,-2.138 l 16.939,25.411 h 55.94 l -34.171,-51.256 c 8.758,-11.667 13.958,-26.155 13.958,-41.835 z" />
 91 |      <path
 92 |    fill="#ffffff"
 93 |    id="path13724"
 94 |    d="m 442.18196,-146.79946 c -38.498,0 -69.818,31.32 -69.818,69.818 0,19.926 8.405,37.916 21.839,50.649 l -60.235,135.533 h 50.935 l 51.819,-116.598 c 1.804,0.141 3.62,0.234 5.46,0.234 38.498,0 69.818,-31.32 69.818,-69.818 0,-38.498 -31.32,-69.818 -69.818,-69.818 z" />
 95 |     </g>
 96 |     <g
 97 |    fill="#ffffff"
 98 |    id="g13732">
 99 |      <path
100 |    fill="#ffffff"
101 |    id="path13728"
102 |    d="m 193.93896,-7.16346 c -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.833,0 23.273,-10.44 23.273,-23.273 0,-12.833 -10.44,-23.273 -23.273,-23.273 z" />
103 |      <path
104 |    fill="#ffffff"
105 |    id="path13730"
106 |    d="m 465.45496,-76.98146 c 0,-12.833 -10.44,-23.273 -23.273,-23.273 -12.833,0 -23.273,10.44 -23.273,23.273 0,12.833 10.44,23.273 23.273,23.273 12.832,0 23.273,-10.44 23.273,-23.273 z" />
107 |     </g>
108 |    </g>
109 |   </g>
110 |   <text
111 |    font-style="normal"
112 |    font-weight="bold"
113 |    xml:space="preserve"
114 |    text-anchor="start"
115 |    font-family="'Open Sans'"
116 |    font-size="100px"
117 |    id="svg_1"
118 |    y="145.25"
119 |    x="182.99992"
120 |    stroke-width="0"
121 |    stroke="#000000"
122 |    fill="#ffffff">NodeFlow</text>
123 |  </g>
124 | </svg>
125 | 


--------------------------------------------------------------------------------
/docs/components/LandingPage.vue:
--------------------------------------------------------------------------------
  1 | <script setup></script>
  2 | 
  3 | <template>
  4 |   <div
  5 |     id="landing-page-container"
  6 |     class="h-screen bg-cover bg-fixed leading-normal tracking-normal"
  7 |   >
  8 |     <div>
  9 |       <!--Nav-->
 10 |       <div class="container mx-auto w-full">
 11 |         <div class="flex w-full items-center justify-between">
 12 |           <div class="mt-5 flex items-center">
 13 |             <img class="ml-2 mr-3 h-8" src="~/assets/images/icon.svg" />
 14 |             <a
 15 |               class="text-2xl font-bold text-white no-underline hover:no-underline lg:text-4xl"
 16 |               href="#"
 17 |             >
 18 |               NodeFlow
 19 |             </a>
 20 |           </div>
 21 |           <div class="mt-5 flex w-1/2 content-center justify-end">
 22 |             <a
 23 |               class="hover:text-underline inline-block h-10 transform p-2 text-center text-blue-300 no-underline duration-300 ease-in-out hover:scale-125 hover:text-pink-500 md:h-auto md:p-4"
 24 |               href="https://github.com/maxnth/NodeFlow"
 25 |             >
 26 |               <Icon name="uil:github" />
 27 |             </a>
 28 |           </div>
 29 |         </div>
 30 |       </div>
 31 | 
 32 |       <!--Main-->
 33 |       <div
 34 |         class="container mx-auto flex flex-col flex-wrap items-center pt-24 md:flex-row md:pt-36"
 35 |       >
 36 |         <!--Left Col-->
 37 |         <div
 38 |           class="flex w-full flex-col justify-center overflow-y-hidden lg:items-start xl:w-2/5"
 39 |         >
 40 |           <h1
 41 |             class="my-4 text-center text-3xl font-bold leading-tight text-white md:text-left md:text-5xl"
 42 |           >
 43 |             Kickstart your OCR workflows with
 44 |             <span
 45 |               class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent"
 46 |             >
 47 |               NodeFlow
 48 |             </span>
 49 |           </h1>
 50 |           <p
 51 |             class="mb-8 text-center text-base leading-normal text-white opacity-75 md:text-left md:text-2xl"
 52 |           >
 53 |             A multi-platform Desktop application for interactively constructing
 54 |             simple and complex OCR workflows
 55 |           </p>
 56 |         </div>
 57 | 
 58 |         <!--Right Col-->
 59 |         <div class="w-full overflow-hidden p-12 xl:w-3/5">
 60 |           <img
 61 |             class="mx-auto w-full -rotate-6 transform transition duration-700 ease-in-out hover:rotate-6 hover:scale-105 md:w-4/5"
 62 |             src="~/assets/images/app.png"
 63 |           />
 64 |         </div>
 65 | 
 66 |         <div class="mx-auto md:pt-16">
 67 |           <p class="pb-8 text-center text-2xl font-bold text-white lg:pb-6">
 68 |             Download
 69 |           </p>
 70 |           <div
 71 |             class="fade-in flex w-full justify-center pb-24 md:justify-start lg:pb-0"
 72 |           >
 73 |             <div class="grid grid-flow-row-dense grid-cols-3 gap-4">
 74 |               <a
 75 |                 href="https://github.com/maxnth/NodeFlow/releases/download/0.0.2-alpha/NodeFlow-0.0.2.dmg"
 76 |                 class="inline-flex w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2.5 text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto"
 77 |               >
 78 |                 <Icon class="mr-5 text-white" name="simple-icons:apple" />
 79 |                 <div class="text-left">
 80 |                   <div class="mb-1 text-xs">Download for</div>
 81 |                   <div class="-mt-1 font-sans text-sm font-semibold">macOS</div>
 82 |                 </div>
 83 |               </a>
 84 |               <a
 85 |                 href="https://github.com/maxnth/NodeFlow/releases/download/0.0.2-alpha/NodeFlow-0.0.2.AppImage"
 86 |                 class="inline-flex w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2.5 text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto"
 87 |               >
 88 |                 <Icon class="mr-5 text-white" name="simple-icons:linux" />
 89 |                 <div class="text-left">
 90 |                   <div class="mb-1 text-xs">Download for</div>
 91 |                   <div class="-mt-1 font-sans text-sm font-semibold">Linux</div>
 92 |                 </div>
 93 |               </a>
 94 |               <a
 95 |                 href="https://github.com/maxnth/NodeFlow/releases/download/0.0.2-alpha/NodeFlow-0.0.2.msi"
 96 |                 class="inline-flex w-full items-center justify-center rounded-lg bg-gray-800 px-4 py-2.5 text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 sm:w-auto"
 97 |               >
 98 |                 <Icon class="mr-5 text-white" name="simple-icons:windows" />
 99 |                 <div class="text-left">
100 |                   <div class="mb-1 text-xs">Download for</div>
101 |                   <div class="-mt-1 font-sans text-sm font-semibold">
102 |                     Windows
103 |                   </div>
104 |                 </div>
105 |               </a>
106 |             </div>
107 |           </div>
108 |         </div>
109 |       </div>
110 | 
111 |       <!--Footer-->
112 |       <!--      <div class="absolute bottom-0 h-16 absolute left-1/2 transform -translate-x-1/2">-->
113 |       <!--          <a class="text-white no-underline hover:no-underline mr-2" href="#">&copy;{{ new Date().getFullYear() }}</a>-->
114 |       <!--          <a class="text-white no-underline hover:no-underline" href="https://github.com/uniwue-zpd/">Center for Philology and Digitality</a>-->
115 |       <!--        </div>-->
116 |     </div>
117 |   </div>
118 | </template>
119 | 
120 | <style scoped>
121 | #landing-page-container {
122 |   background-image: url('~/assets/images/bg.png');
123 | }
124 | </style>
125 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/Palette.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | // @ts-nocheck
  3 | import { computed, CSSProperties, inject, Ref, ref, reactive } from "vue";
  4 | import { usePointer } from "@vueuse/core";
  5 | import { AbstractNode, INodeTypeInformation } from "baklavajs";
  6 | import PaletteEntry from "./PaletteEntry.vue";
  7 | import { useViewModel, useTransform } from "baklavajs";
  8 | 
  9 | import Tree from "primevue/tree";
 10 | 
 11 | type NodeTypeInformations = Record<string, INodeTypeInformation>;
 12 | 
 13 | const visible = ref(true);
 14 | 
 15 | function toggleVisibility() {
 16 |   visible.value = !visible.value;
 17 | }
 18 | 
 19 | defineExpose({
 20 |   toggleVisibility,
 21 | });
 22 | 
 23 | interface IDraggedNode {
 24 |   type: string;
 25 |   nodeInformation: INodeTypeInformation;
 26 | }
 27 | const { viewModel } = useViewModel();
 28 | const { x: mouseX, y: mouseY } = usePointer();
 29 | const { transform } = useTransform();
 30 | 
 31 | const editorEl = inject<Ref<HTMLElement | null>>("editorEl");
 32 | 
 33 | const draggedNode = ref<IDraggedNode | null>(null);
 34 | 
 35 | const categories = computed<
 36 |   Array<{ name: string; nodeTypes: NodeTypeInformations }>
 37 | >(() => {
 38 |   const nodeTypeEntries: any[] = []
 39 |   const categoryNames: Set<string> = new Set()
 40 |   for(const [key, value] of viewModel.value.editor.nodeTypes.entries()){
 41 |     nodeTypeEntries.push({
 42 |       key: key,
 43 |       label: value.title,
 44 |       category: value.category,
 45 |       type: "node",
 46 |       nt: value.type,
 47 |       ni: value,
 48 |     })
 49 |     categoryNames.add(value.category)
 50 |   }
 51 | 
 52 |   const categories: Array<{ name: string; nodeTypes: NodeTypeInformations }> =
 53 |     [];
 54 |   for (const category of categoryNames.values()) {
 55 |     const nodeTypesInCategory = []
 56 |     if (category !== "Subgraphs") {
 57 |       for(const node of nodeTypeEntries){
 58 |         if(node.category === category){
 59 |           nodeTypesInCategory.push(
 60 |             node
 61 |           )
 62 |         }
 63 |       }
 64 | 
 65 |       if (nodeTypesInCategory.length > 0) {
 66 |         if (category !== "default") {
 67 |           categories.push({
 68 |             key: category,
 69 |             label: category,
 70 |             children: nodeTypesInCategory
 71 |           })
 72 |         }
 73 |       }
 74 |     }
 75 |     // Hardcode sort order of categories, this should be handled differently in the future (get sort order from backend?)
 76 |     const sortOrder = ["Preprocessing", "Layout Analysis", "Text Recognition"];
 77 |     categories.sort((x, y) => {
 78 |       return sortOrder.indexOf(x as string) - sortOrder.indexOf(y as string);
 79 |     });
 80 | 
 81 |     //// Disabled as the sort order currently has to be hard coded to follow the most sensible flow of an OCR workflow
 82 |     //// Order might have to be moved to the backend
 83 |     // sort, so the default category is always first and all others are sorted alphabetically
 84 |     // categories.sort((a, b) => {
 85 |     //   if (a.name === "default") {
 86 |     //     return -1;
 87 |     //   } else if (b.name === "default") {
 88 |     //     return 1;
 89 |     //   } else {
 90 |     //     return a.name > b.name ? 1 : -1;
 91 |     //   }
 92 |     // });
 93 |   }
 94 |   return categories;
 95 | });
 96 | 
 97 | const draggedNodeStyles = computed<CSSProperties>(() => {
 98 |   if (!draggedNode.value || !editorEl?.value) {
 99 |     return {};
100 |   }
101 |   if ("getBoundingClientRect" in editorEl.value) {
102 |     const { left, top } = editorEl.value.getBoundingClientRect();
103 | 
104 |     return {
105 |       top: `${mouseY.value - top}px`,
106 |       left: `${mouseX.value - left}px`,
107 |     };
108 |   }
109 | });
110 | 
111 | const onDragStart = (type: string, nodeInformation: INodeTypeInformation) => {
112 |   draggedNode.value = {
113 |     type,
114 |     nodeInformation,
115 |   };
116 | 
117 |   const onDragEnd = () => {
118 |     const instance = reactive(new nodeInformation.type()) as AbstractNode;
119 |     viewModel.value.displayedGraph.addNode(instance);
120 | 
121 |     const rect = editorEl?.value?.getBoundingClientRect();
122 |     const [x, y] = transform(mouseX.value - rect.left, mouseY.value - rect.top);
123 |     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
124 |     // @ts-ignore
125 |     instance.position.x = x;
126 |     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
127 |     // @ts-ignore
128 |     instance.position.y = y;
129 | 
130 |     console.log(x, y)
131 | 
132 |     draggedNode.value = null;
133 |     document.removeEventListener("pointerup", onDragEnd);
134 |   };
135 |   document.addEventListener("pointerup", onDragEnd);
136 | };
137 | 
138 | import { useMouseInElement } from '@vueuse/core'
139 | const palette = ref()
140 | 
141 | const { x, y, isOutside } = useMouseInElement(palette)
142 | </script>
143 | 
144 | <template>
145 |   <transition
146 |     enter-active-class="transform transition ease-in-out duration-200"
147 |     enter-from-class="translate-x-full"
148 |     enter-to-class="translate-x-0"
149 |     leave-active-class="transform transition ease-in-out duration-200  "
150 |     leave-from-class="translate-x-0"
151 |     leave-to-class="translate-x-full"
152 |   >
153 |     <div v-show="visible" ref="palette" class="overflow-scroll-y h-full">
154 |       <div
155 |         class="baklava-node-palette !w-96 !opacity-95 dark:!bg-zinc-800 dark:!opacity-95"
156 |       >
157 |         <h1
158 |           class="pb-5 text-center text-xl text-zinc-100 font-bold text-surface-0"
159 |         >
160 |           {{ $t("nodeflow.palette.processors") }}
161 |         </h1>
162 |         <Tree :value="categories" :filter="true" filterMode="lenient" class="w-full">
163 |           <template #node="slotProps">
164 |             <PaletteEntry
165 |               :key="slotProps.node.key"
166 |               :type="slotProps.node.nt"
167 |               :title="slotProps.node.label"
168 |               @pointerdown="onDragStart(slotProps.node.label, slotProps.node.ni)"
169 |             />
170 |           </template>
171 |         </Tree>
172 |       </div>
173 |       <transition name="fade">
174 |         <div
175 |           v-if="draggedNode"
176 |           class="baklava-dragged-node"
177 |           :style="draggedNodeStyles"
178 |         >
179 |           <PaletteEntry
180 |             :type="draggedNode.type"
181 |             :title="draggedNode.nodeInformation.title"
182 |           />
183 |         </div>
184 |       </transition>
185 |     </div>
186 |   </transition>
187 | </template>
188 | 


--------------------------------------------------------------------------------
/src/components/Editor/Custom/Node.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | // @ts-nocheck
  3 | import { ref, computed, toRef, nextTick, onUpdated, onMounted } from "vue";
  4 | import {
  5 |   AbstractNode,
  6 |   GRAPH_NODE_TYPE_PREFIX,
  7 |   IGraphNode,
  8 | } from "@baklavajs/core";
  9 | import { useDragMove, useGraph, useViewModel } from "baklavajs";
 10 | import { Components } from "baklavajs";
 11 | 
 12 | import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
 13 | 
 14 | const ContextMenu = Components.ContextMenu;
 15 | import {
 16 |   EllipsisVerticalIcon,
 17 |   ChevronRightIcon,
 18 | } from "@heroicons/vue/24/outline";
 19 | import CNodeInterface from "~/components/Editor/Custom/NodeInterface.vue";
 20 | 
 21 | const props = withDefaults(
 22 |   defineProps<{
 23 |     node: AbstractNode;
 24 |     selected?: boolean;
 25 |   }>(),
 26 |   { selected: false }
 27 | );
 28 | 
 29 | const emit = defineEmits<{
 30 |   (e: "select"): void;
 31 | }>();
 32 | 
 33 | const { viewModel } = useViewModel();
 34 | const { graph, switchGraph } = useGraph();
 35 | const dragMove = useDragMove(toRef(props.node, "position"));
 36 | 
 37 | const el = ref<HTMLElement | null>(null);
 38 | const renaming = ref(false);
 39 | const tempName = ref("");
 40 | const renameInputEl = ref<HTMLInputElement | null>(null);
 41 | 
 42 | const showContextMenu = ref(false);
 43 | const contextMenuItems = computed(() => {
 44 |   const items = [
 45 |     { value: "rename", label: "Rename" },
 46 |     { value: "delete", label: "Delete" },
 47 |   ];
 48 | 
 49 |   if (props.node.type.startsWith(GRAPH_NODE_TYPE_PREFIX)) {
 50 |     items.push({ value: "editSubgraph", label: "Edit Subgraph" });
 51 |   }
 52 | 
 53 |   return items;
 54 | });
 55 | 
 56 | const classes = computed(() => ({
 57 |   "--selected": props.selected,
 58 |   "--dragging": dragMove.dragging.value,
 59 |   "--two-column": !!props.node["twoColumn"],
 60 | }));
 61 | 
 62 | const styles = computed(() => ({
 63 |   top: `${props.node["position"]?.y ?? 0}px`,
 64 |   left: `${props.node["position"]?.x ?? 0}px`,
 65 |   width: `${props.node["width"] ?? 200}px`,
 66 | }));
 67 | 
 68 | const inputs = computed(() =>
 69 |   Object.values(props.node.inputs).filter(
 70 |     (ni) => !ni.hidden && ni.name === "Input"
 71 |   )
 72 | );
 73 | const displayedParameters = computed(() =>
 74 |   Object.values(props.node.inputs).filter(
 75 |     (ni) => !ni.hidden && ni.name !== "Input"
 76 |   )
 77 | );
 78 | const displayedOutputs = computed(() =>
 79 |   Object.values(props.node.outputs).filter((ni) => !ni.hidden)
 80 | );
 81 | 
 82 | const select = () => {
 83 |   emit("select");
 84 | };
 85 | 
 86 | const startDrag = (ev: PointerEvent) => {
 87 |   dragMove.onPointerDown(ev);
 88 |   document.addEventListener("pointermove", dragMove.onPointerMove);
 89 |   document.addEventListener("pointerup", stopDrag);
 90 |   select();
 91 | };
 92 | 
 93 | const stopDrag = () => {
 94 |   dragMove.onPointerUp();
 95 |   document.removeEventListener("pointermove", dragMove.onPointerMove);
 96 |   document.removeEventListener("pointerup", stopDrag);
 97 | };
 98 | 
 99 | const openContextMenu = () => {
100 |   showContextMenu.value = true;
101 | };
102 | 
103 | const onContextMenuClick = async (action: string) => {
104 |   switch (action) {
105 |     case "delete":
106 |       if(props.node.title !== "Input") graph.value.removeNode(props.node);
107 |       break;
108 |     case "rename":
109 |       tempName.value = props.node.title;
110 |       renaming.value = true;
111 |       await nextTick();
112 |       renameInputEl.value?.focus();
113 |       break;
114 |     case "editSubgraph":
115 |       switchGraph((props.node as AbstractNode & IGraphNode).template);
116 |       break;
117 |   }
118 | };
119 | 
120 | const doneRenaming = () => {
121 |   // eslint-disable-next-line vue/no-mutating-props
122 |   props.node.title = tempName.value;
123 |   renaming.value = false;
124 | };
125 | 
126 | const onRender = () => {
127 |   if (el.value) {
128 |     viewModel.value.hooks.renderNode.execute({
129 |       node: props.node,
130 |       el: el.value,
131 |     });
132 |   }
133 | };
134 | 
135 | onMounted(onRender);
136 | onUpdated(onRender);
137 | </script>
138 | <template>
139 |   <div
140 |     :id="node.id"
141 |     ref="el"
142 |     class="baklava-node"
143 |     :class="classes"
144 |     :style="styles"
145 |     :data-node-type="node.type"
146 |     @pointerdown="select"
147 |   >
148 |     <div class="__title" @pointerdown.self.stop="startDrag">
149 |       <template v-if="!renaming">
150 |         <div class="__title-label">
151 |           {{ node.title }}
152 |         </div>
153 |         <div v-show="node.title !== 'Input'" class="__menu">
154 |           <EllipsisVerticalIcon
155 |             class="h-6 w-6 hover:cursor-pointer"
156 |             @click="openContextMenu"
157 |           />
158 |           <context-menu
159 |             v-model="showContextMenu"
160 |             :x="0"
161 |             :y="0"
162 |             :items="contextMenuItems"
163 |             @click="onContextMenuClick"
164 |           />
165 |         </div>
166 |       </template>
167 |       <input
168 |         v-else
169 |         ref="renameInputEl"
170 |         v-model="tempName"
171 |         type="text"
172 |         class="baklava-input"
173 |         placeholder="Node Name"
174 |         @blur="doneRenaming"
175 |         @keydown.enter="doneRenaming"
176 |       />
177 |     </div>
178 | 
179 |     <div class="__content">
180 |       <!-- Outputs -->
181 |       <div class="__outputs">
182 |         <CNodeInterface
183 |           v-for="output in displayedOutputs"
184 |           :key="output.id"
185 |           :node="node"
186 |           :intf="output"
187 |         />
188 |       </div>
189 | 
190 |       <!-- Inputs -->
191 |       <Disclosure v-slot="{ open }">
192 |         <DisclosureButton
193 |           class="flex w-full justify-between rounded-lg px-10 py-2 text-left text-sm font-medium focus:outline-none focus-visible:ring focus-visible:ring-opacity-75"
194 |         >
195 |           <div class="flex justify-center space-x-2 pb-2">
196 |             <ChevronRightIcon
197 |               :class="open ? 'rotate-90 transform' : ''"
198 |               class="h-5 w-5 text-center text-gray-800 dark:text-gray-200"
199 |             />
200 |             <span>{{ $t("nodeflow.node.settings") }}</span>
201 |           </div>
202 |         </DisclosureButton>
203 |         <DisclosurePanel class="px-4 pb-2 pt-4 text-sm">
204 |           <div class="__inputs">
205 |             <CNodeInterface
206 |               v-for="input in displayedParameters"
207 |               :key="input.id"
208 |               :node="node"
209 |               :intf="input"
210 |             />
211 |           </div>
212 |         </DisclosurePanel>
213 |       </Disclosure>
214 |       <CNodeInterface
215 |         v-for="input in inputs"
216 |         :key="input.id"
217 |         :node="node"
218 |         :intf="input"
219 |       />
220 |     </div>
221 |   </div>
222 | </template>
223 | 


--------------------------------------------------------------------------------
/public/images/application/docker_not_found.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg:svg
  3 |    version="1.1"
  4 |    width="255.05853"
  5 |    height="144.81953"
  6 |    id="svg2"
  7 |    sodipodi:docname="docker_ko.svg"
  8 |    inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 11 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 12 |    xmlns:svg="http://www.w3.org/2000/svg"
 13 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 14 |    xmlns:cc="http://creativecommons.org/ns#"
 15 |    xmlns:dc="http://purl.org/dc/elements/1.1/">
 16 |   <sodipodi:namedview
 17 |      id="namedview95"
 18 |      pagecolor="#ffffff"
 19 |      bordercolor="#666666"
 20 |      borderopacity="1.0"
 21 |      inkscape:showpageshadow="2"
 22 |      inkscape:pageopacity="0.0"
 23 |      inkscape:pagecheckerboard="0"
 24 |      inkscape:deskcolor="#d1d1d1"
 25 |      showgrid="false"
 26 |      showguides="true"
 27 |      inkscape:zoom="4.295082"
 28 |      inkscape:cx="127.00573"
 29 |      inkscape:cy="33.875954"
 30 |      inkscape:window-width="2560"
 31 |      inkscape:window-height="1348"
 32 |      inkscape:window-x="2560"
 33 |      inkscape:window-y="0"
 34 |      inkscape:window-maximized="1"
 35 |      inkscape:current-layer="svg2">
 36 |     <sodipodi:guide
 37 |        position="98.164599,40.048542"
 38 |        orientation="0,-1"
 39 |        id="guide2629"
 40 |        inkscape:locked="false" />
 41 |   </sodipodi:namedview>
 42 |   <script />
 43 |   <svg:metadata
 44 |      id="metadata4">
 45 |     <rdf:RDF>
 46 |       <cc:Work
 47 |          rdf:about="">
 48 |         <dc:format>image/svg+xml</dc:format>
 49 |         <dc:type
 50 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 51 |       </cc:Work>
 52 |     </rdf:RDF>
 53 |   </svg:metadata>
 54 |   <svg:defs
 55 |      id="defs6">
 56 |     <svg:clipPath
 57 |        id="clipPath8">
 58 |       <svg:path
 59 |          d="M 76,2 V 48 H 54 V 71 H 35.580737 c -0.07818,0.665694 -0.141485,1.332869 -0.205737,2 -1.151162,12.530963 1.036422,24.087546 6.0625,33.96875 L 43.125,110 c 1.011403,1.81678 2.191241,3.52297 3.4375,5.1875 1.244725,1.66248 1.685716,2.58262 2.46875,3.6875 C 62.319911,133.81083 82.129473,141 105,141 155.64836,141 198.63299,118.56201 217.65625,68.15625 231.15302,69.54122 244.09968,66.080358 250,54.5625 240.60137,49.138835 228.52163,50.877226 221.5625,54.375 L 240,2 168,48 H 145 V 2 Z"
 60 |          id="path10" />
 61 |     </svg:clipPath>
 62 |   </svg:defs>
 63 |   <svg:path
 64 |      d="m 147.4876,45.731535 h 22.866 v 23.37473 h 11.56177 c 5.33905,0 10.83073,-0.95117 15.887,-2.66444 2.48448,-0.84244 5.27317,-2.01479 7.72392,-3.4892 -3.22785,-4.21436 -4.87579,-9.53574 -5.36101,-14.78106 -0.65874,-7.13426 0.78032,-16.42042 5.60897,-22.004216 l 2.40362,-2.780117 2.8642,2.302393 c 7.21138,5.79374 13.27612,13.88934 14.3451,23.11819 8.68312,-2.55411 18.87759,-1.95 26.53135,2.46735 l 3.14002,1.81182 -1.65276,3.2257 c -6.47289,12.633374 -20.00501,16.546746 -33.23507,15.854261 -19.79715,49.308394 -62.89781,72.652584 -115.15715,72.652584 -26.998899,0 -51.769845,-10.09272 -65.875552,-34.04693 -0.827018,-1.48798 -1.535233,-3.0439 -2.286326,-4.57212 C 32.083548,95.656282 30.499883,84.105222 31.574226,72.563802 l 0.32241,-3.457072 H 51.449573 V 45.732 h 22.866 V 22.866 H 120.04757 V 0 h 27.43967 v 45.732"
 65 |      id="path14"
 66 |      style="fill:#394d54" />
 67 |   <svg:g
 68 |      clip-path="url(#clipPath8)"
 69 |      id="g16"
 70 |      transform="translate(0,-4.65e-4)">
 71 |     <svg:g
 72 |        id="g18">
 73 |       <svg:g
 74 |          transform="translate(0,-22.866)"
 75 |          id="g20">
 76 |         <svg:path
 77 |            d="m 123.85901,3.8110794 h 19.81751 V 23.62805 h -19.81751 z"
 78 |            id="path22"
 79 |            style="fill:#00acd3" />
 80 |         <svg:path
 81 |            d="m 123.85901,26.676485 h 19.81751 v 19.818043 h -19.81751 z"
 82 |            id="path24"
 83 |            style="fill:#20c2ef" />
 84 |         <svg:path
 85 |            d="M 126.29235,21.976904 V 5.4611548 M 129.2642,21.976904 V 5.4611548 m 3.00184,16.5157492 V 5.4611548 m 3.00344,16.5157492 V 5.4611548 M 138.2724,21.976904 V 5.4611548 m 2.97131,16.5157492 V 5.4611548"
 86 |            id="path26"
 87 |            style="stroke:#394d54;stroke-width:1.56" />
 88 |         <svg:use
 89 |            transform="translate(0,22.866)"
 90 |            id="use28"
 91 |            xlink:href="#path26" />
 92 |       </svg:g>
 93 |       <svg:use
 94 |          transform="matrix(1,0,0,-1,22.866,4.572651)"
 95 |          id="use30"
 96 |          xlink:href="#g20" />
 97 |     </svg:g>
 98 |     <svg:use
 99 |        transform="translate(-91.464,45.732)"
100 |        id="use32"
101 |        xlink:href="#g18" />
102 |     <svg:use
103 |        transform="translate(-45.732,45.732)"
104 |        id="use34"
105 |        xlink:href="#g18" />
106 |     <svg:use
107 |        transform="translate(0,45.732)"
108 |        id="use36"
109 |        xlink:href="#g18" />
110 |   </svg:g>
111 |   <svg:path
112 |      d="m 221.57014,54.379649 c 1.53332,-11.915247 -7.38383,-21.274779 -12.91407,-25.71836 -6.37269,7.367765 -7.36295,26.677556 2.63498,34.807431 -5.57952,4.956117 -17.33731,9.448435 -29.37574,9.448435 L 34,72.917155 C 32.829255,85.484184 34,146 34,146 h 217 l -0.98657,-91.424 c -9.39863,-5.423665 -21.48419,-3.694326 -28.44332,-0.196552"
113 |      clip-path="url(#clipPath8)"
114 |      id="path38"
115 |      style="fill:#17b5eb"
116 |      transform="translate(0,-4.65e-4)" />
117 |   <svg:path
118 |      d="m 34,89 v 57 H 251 V 89"
119 |      clip-path="url(#clipPath8)"
120 |      id="path40"
121 |      style="fill-opacity:0.17"
122 |      transform="translate(0,-4.65e-4)" />
123 |   <svg:path
124 |      d="M 111.23736,140.88997 C 97.697741,134.4648 90.265707,125.73081 86.130611,116.19562 L 45,118 l 21,28 45.23736,-5.11003"
125 |      clip-path="url(#clipPath8)"
126 |      id="path42"
127 |      style="fill:#d4edf1"
128 |      transform="translate(0,-4.65e-4)" />
129 |   <svg:path
130 |      d="m 222.5,53.9375 v 0.03125 c -20.86119,26.889144 -50.78312,50.37872 -82.90625,62.71875 -28.65478,11.00767 -53.638381,11.06039 -70.875,2.21875 -1.85607,-1.04832 -3.675701,-2.21152 -5.5,-3.3125 C 50.582097,106.76175 43.464274,92.152308 44.0625,72.90625 H 34 V 146 H 251 V 50 h -25 z"
131 |      clip-path="url(#clipPath8)"
132 |      id="path44"
133 |      style="fill-opacity:0.085"
134 |      transform="translate(0,-4.65e-4)" />
135 |   <svg:path
136 |      d="M 90.491737,116.93063 C 76.367914,115.60009 61.267714,114.868 47.929394,118.4805"
137 |      id="path46"
138 |      style="fill:none;stroke:#394d54;stroke-width:3.4;stroke-linecap:round" />
139 |   <svg:path
140 |      d="m 0,90.161878 h 254.32743 c -5.53774,-1.404786 -17.521,-3.302293 -15.54477,-10.559732 -10.06915,11.651749 -34.35274,8.174326 -40.4812,2.428786 -6.82471,9.89831 -46.55451,6.135967 -49.32553,-1.575096 -8.55565,10.04077 -35.06718,10.04077 -43.62336,0 -2.77209,7.711063 -42.501357,11.473406 -49.326595,1.575096 -6.128469,5.74554 -30.409908,9.222963 -40.480134,-2.428786 C 17.522075,86.859585 5.5388117,88.757092 0,90.161878"
141 |      id="path52"
142 |      style="fill:#394d54" />
143 |   <svg:rect
144 |      style="fill:#394d54;fill-opacity:1"
145 |      id="rect485"
146 |      width="12.719088"
147 |      height="2.8995845"
148 |      x="128.33771"
149 |      y="13.099484"
150 |      transform="rotate(41.111783)" />
151 |   <svg:rect
152 |      style="fill:#394d54;fill-opacity:1"
153 |      id="rect485-3"
154 |      width="12.719088"
155 |      height="2.8995845"
156 |      x="-10.400433"
157 |      y="-136.75352"
158 |      transform="rotate(139.04995)" />
159 | </svg:svg>
160 | 


--------------------------------------------------------------------------------
/electron/main/index.ts:
--------------------------------------------------------------------------------
  1 | import { app, dialog, BrowserWindow, shell, ipcMain } from 'electron';
  2 | import { release } from 'node:os';
  3 | import { join } from 'node:path';
  4 | import path from "path";
  5 | 
  6 | const Docker = require('dockerode')
  7 | const { exec } = require('child_process');
  8 | const archiver = require('archiver');
  9 | const fs = require("fs");
 10 | 
 11 | // The built directory structure
 12 | //
 13 | // ├─┬ dist-electron
 14 | // │ ├─┬ main
 15 | // │ │ └── index.js    > Electron-Main
 16 | // │ └─┬ preload
 17 | // │   └── index.js    > Preload-Scripts
 18 | // ├─┬ dist
 19 | // │ └── index.html    > Electron-Renderer
 20 | //
 21 | process.env.DIST_ELECTRON = join(__dirname, '..');
 22 | process.env.DIST = join(process.env.DIST_ELECTRON, '../dist');
 23 | process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
 24 |   ? join(process.env.DIST_ELECTRON, '../public')
 25 |   : process.env.DIST;
 26 | 
 27 | // Disable GPU Acceleration for Windows 7
 28 | if (release().startsWith('6.1')) app.disableHardwareAcceleration();
 29 | 
 30 | // Set application name for Windows 10+ notifications
 31 | if (process.platform === 'win32') app.setAppUserModelId(app.getName());
 32 | 
 33 | if (!app.requestSingleInstanceLock()) {
 34 |   app.quit();
 35 |   process.exit(0);
 36 | }
 37 | 
 38 | // Remove electron security warnings
 39 | // This warning only shows in development mode
 40 | // Read more on https://www.electronjs.org/docs/latest/tutorial/security
 41 | // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 42 | 
 43 | let win: BrowserWindow | null = null;
 44 | // Here, you can also use other preload
 45 | const preload = join(__dirname, '../preload/index.js');
 46 | const url = process.env.VITE_DEV_SERVER_URL;
 47 | const indexHtml = join(process.env.DIST, 'index.html');
 48 | 
 49 | async function createWindow() {
 50 |   win = new BrowserWindow({
 51 |     title: 'NodeFlow',
 52 |     icon: join(process.env.PUBLIC, 'favicon.ico'),
 53 |     width: 1200,
 54 |     height: 750,
 55 |     webPreferences: {
 56 |       preload,
 57 |       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
 58 |       // Consider using contextBridge.exposeInMainWorld
 59 |       // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
 60 |       nodeIntegration: true,
 61 |       contextIsolation: false,
 62 |     },
 63 |   });
 64 | 
 65 |   win.setMenu(null);
 66 | 
 67 |   win.setOpacity(1);
 68 |   if (process.env.VITE_DEV_SERVER_URL) {
 69 |     // electron-vite-vue#298
 70 |     win.loadURL(url);
 71 |     // Open devTool if the app is not packaged
 72 |     win.webContents.openDevTools();
 73 |   } else {
 74 |     win.loadFile(indexHtml);
 75 |   }
 76 | 
 77 |   // Test actively push message to the Electron-Renderer
 78 |   win.webContents.on('did-finish-load', () => {
 79 |     win?.webContents.send('main-process-message', new Date().toLocaleString());
 80 |   });
 81 | 
 82 |   // Make all links open with the browser, not with the application
 83 |   win.webContents.setWindowOpenHandler(({ url }) => {
 84 |     if (url.startsWith('https:')) shell.openExternal(url);
 85 |     return { action: 'deny' };
 86 |   });
 87 | }
 88 | 
 89 | app.whenReady().then(createWindow);
 90 | 
 91 | app.on('window-all-closed', () => {
 92 |   win = null;
 93 |   if (process.platform !== 'darwin') app.quit();
 94 | });
 95 | 
 96 | app.on('second-instance', () => {
 97 |   if (win) {
 98 |     // Focus on the main window if the user tried to open another
 99 |     if (win.isMinimized()) win.restore();
100 |     win.focus();
101 |   }
102 | });
103 | 
104 | app.on('activate', () => {
105 |   const allWindows = BrowserWindow.getAllWindows();
106 |   if (allWindows.length) {
107 |     allWindows[0].focus();
108 |   } else {
109 |     createWindow();
110 |   }
111 | });
112 | 
113 | async function saveFile(data){
114 |   const { canceled, filePath } = await dialog.showSaveDialog(BrowserWindow.getFocusedWindow(), {
115 |     properties: ['createDirectory']
116 |   })
117 |   if (canceled) {
118 |     return new Promise((resolve, reject) => {
119 |       resolve(false)
120 |     })
121 |   } else {
122 |     return new Promise((resolve, reject) => {
123 |       fs.writeFileSync(filePath, data)
124 |       resolve(true)
125 |     })
126 |   }
127 | }
128 | 
129 | ipcMain.on('save-file', async (event, data) => {
130 |   return await saveFile(data)
131 | });
132 | 
133 | async function exportResults(resultPath){
134 |   const { canceled, filePath } = await dialog.showSaveDialog(BrowserWindow.getFocusedWindow(), {
135 |     properties: ['createDirectory']
136 |   })
137 |   if (canceled) {
138 |     return new Promise((resolve, reject) => {
139 |       resolve(false)
140 |     })
141 |   } else {
142 |     const sourcePath = path.join(app.getAppPath(), resultPath)
143 |     const archive = archiver('zip', { zlib: { level: 9 }});
144 |     const stream = fs.createWriteStream(filePath);
145 |     return new Promise((resolve, reject) => {
146 |       archive
147 |         .directory(sourcePath, false)
148 |         .on('error', err => reject(err))
149 |         .pipe(stream)
150 |       ;
151 | 
152 |       stream.on('close', () => resolve(true));
153 |       archive.finalize();
154 |     });
155 |   }
156 | }
157 | 
158 | ipcMain.handle('export-results', async (event, resultPath) => {
159 |   return await exportResults(resultPath)
160 | });
161 | 
162 | 
163 | function loadWorkflowFromFile(path: string){
164 |   return new Promise((resolve, reject) => {
165 |     fs.readFile(path, "utf8", (err, content) => {
166 |       if (err) {
167 |         return;
168 |       }
169 |       resolve(content)
170 |     })
171 |   })
172 | }
173 | ipcMain.handle('load-workflow-from-file', async (event, path: string) => {
174 |   return await loadWorkflowFromFile(path)
175 | })
176 | 
177 | function isDockerAvailable () {
178 |   return new Promise((resolve, reject) => {
179 |     const docker = new Docker()
180 |     docker.listContainers(function (err, containers) {
181 |       resolve(!err)
182 |     });
183 |   })
184 | }
185 | ipcMain.handle('is-docker-available', async (event, ...args) => {
186 |   return await isDockerAvailable()
187 | })
188 | 
189 | function pullOcrdDockerImage() {
190 |   return new Promise((resolve, reject) => {
191 |     const docker = new Docker()
192 |     docker.pull('ocrd/all:maximum', function (err, stream) {
193 |       docker.modem.followProgress(stream, onFinished, onProgress)
194 |       function onFinished(err, output) {
195 |         if(!err){
196 |           resolve(true)
197 |         }
198 |       }
199 |       function onProgress(event) {
200 |         if(event.progressDetail !== undefined){
201 |           const detail = event.progressDetail
202 |           if(detail.current !== undefined && detail.total !== undefined){
203 |             const percentage = Math.round(detail.total / detail.current)
204 |             console.log(percentage)
205 |           }
206 |         }
207 |       }
208 |     });
209 |   })
210 | }
211 | 
212 | ipcMain.handle("pull-ocrd-docker-image", async (event, args) => {
213 |   return await pullOcrdDockerImage()
214 | })
215 | 
216 | function launchWorkflow(data){
217 |   return new Promise((resolve, reject) => {
218 |     const command = `docker run --rm -v ${path.join(app.getAppPath(), data.workspace)}:/data -w /data -- ocrd/all:maximum ${data.processString}`
219 |     exec(command, (error, stdout, stderr) => {
220 |       if (error) {
221 |         console.log(`error: ${error.message}`);
222 |         resolve(false)
223 |       }
224 |       if (stderr) {
225 |         console.log(`stderr: ${stderr}`);
226 |         resolve(false)
227 |       }
228 |       resolve(true)
229 |     });
230 | 
231 |   })
232 | }
233 | 
234 | ipcMain.handle("launch-workflow", async(event, data) => {
235 |   return await launchWorkflow(data)
236 | })
237 | 
238 | ipcMain.on('open-docker-setup-guide', (event, ...args) => {
239 |   require('electron').shell.openExternal("https://docs.docker.com/get-docker/");
240 | })
241 | 
242 | async function getDirectory() {
243 |   const { canceled, filePaths } = await dialog.showOpenDialog(BrowserWindow.getFocusedWindow(), {
244 |     properties: ['openDirectory']
245 |   })
246 |   if (canceled) {
247 |     return
248 |   } else {
249 |     return new Promise((resolve, reject) => {
250 |       resolve(filePaths[0])
251 |     })
252 |   }
253 | }
254 | 
255 | ipcMain.handle("get-directory", async (event, args) => {
256 |   return await getDirectory()
257 | })
258 | 
259 | function initOcrdWorkspace(_path: string) {
260 |   return new Promise((resolve, reject) => {
261 |     fs.mkdirSync(_path)
262 |     fs.mkdirSync(path.join(_path, "OCR-D-IMG"))
263 |     const command = `docker run --rm -v ${_path}:/data -w /data -- ocrd/all:maximum ocrd workspace -d /data init`
264 |     exec(command, (error, stdout, stderr) => {
265 |       if (error) {
266 |         console.log(`error: ${error.message}`);
267 |         resolve(false)
268 |       }
269 |       if (stderr) {
270 |         console.log(`stderr: ${stderr}`);
271 |         if(!stderr.includes("Writing METS to /data/mets.xml")) resolve(false)
272 |       }
273 |       console.log(`stdout: ${stdout}`);
274 |       resolve(true)
275 |     });
276 | 
277 |   })
278 | }
279 | 
280 | ipcMain.handle("init-ocrd-workspace", async (event, timestamp: string) => {
281 |   return await initOcrdWorkspace(path.join(app.getAppPath(), timestamp))
282 | })
283 | 
284 | function uploadImagesToWorkspace(paths: string[], workspaceName: string) {
285 |   return new Promise((resolve, reject) => {
286 |     const workspacePath = path.join(app.getAppPath(), workspaceName)
287 |     const imgPath = path.join(workspacePath, "OCR-D-IMG")
288 |     for(const _path of paths){
289 |       const baseName = path.parse(_path).base
290 |       const fileName = path.parse(_path).name
291 |       const target = path.join(imgPath, baseName)
292 |       fs.copyFileSync(_path, target)
293 |       const command = `docker run --rm -v ${workspacePath}:/data -w /data -- ocrd/all:maximum ocrd workspace add -G OCR-D-IMG -i OCR-D-IMG_${fileName} -g P_${fileName} -m image/tif OCR-D-IMG/${baseName}`
294 |       require('child_process').execSync(command);
295 |     }
296 |     resolve(true)
297 |   })
298 | }
299 | ipcMain.handle("upload-images-to-workspace", async (event, data) => {
300 |   return await uploadImagesToWorkspace(data.paths, data.workspaceName)
301 | })
302 | 
303 | // New window example arg: new windows url
304 | ipcMain.handle('open-win', (_, arg) => {
305 |   const childWindow = new BrowserWindow({
306 |     webPreferences: {
307 |       preload,
308 |       nodeIntegration: true,
309 |       contextIsolation: false,
310 |     },
311 |   });
312 | 
313 |   if (process.env.VITE_DEV_SERVER_URL) {
314 |     childWindow.loadURL(`${url}#${arg}`);
315 |   } else {
316 |     childWindow.loadFile(indexHtml, { hash: arg });
317 |   }
318 | });
319 | 


--------------------------------------------------------------------------------
/public/images/application/ocr4all.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 | 
  4 | <svg
  5 |    width="79.375mm"
  6 |    height="79.375mm"
  7 |    viewBox="0 0 79.375 79.375"
  8 |    version="1.1"
  9 |    id="svg1"
 10 |    xml:space="preserve"
 11 |    inkscape:version="1.3.2 (091e20e, 2023-11-25)"
 12 |    sodipodi:docname="ocr4all.svg"
 13 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 14 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 15 |    xmlns="http://www.w3.org/2000/svg"
 16 |    xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
 17 |      id="namedview1"
 18 |      pagecolor="#ffffff"
 19 |      bordercolor="#000000"
 20 |      borderopacity="0.25"
 21 |      inkscape:showpageshadow="2"
 22 |      inkscape:pageopacity="0.0"
 23 |      inkscape:pagecheckerboard="0"
 24 |      inkscape:deskcolor="#d1d1d1"
 25 |      inkscape:document-units="px"
 26 |      showguides="true"
 27 |      showgrid="false"
 28 |      inkscape:zoom="1.9308077"
 29 |      inkscape:cx="159.25977"
 30 |      inkscape:cy="144.49911"
 31 |      inkscape:window-width="1920"
 32 |      inkscape:window-height="1027"
 33 |      inkscape:window-x="1920"
 34 |      inkscape:window-y="25"
 35 |      inkscape:window-maximized="1"
 36 |      inkscape:current-layer="layer1"><sodipodi:guide
 37 |        position="12.069112,297"
 38 |        orientation="0,1"
 39 |        id="guide1"
 40 |        inkscape:locked="false"
 41 |        inkscape:label=""
 42 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 43 |        position="-9.3823243e-07,222.91667"
 44 |        orientation="-1,0"
 45 |        id="guide6"
 46 |        inkscape:locked="false"
 47 |        inkscape:label=""
 48 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 49 |        position="79.375002,275.74391"
 50 |        orientation="-1,0"
 51 |        id="guide7"
 52 |        inkscape:locked="false"
 53 |        inkscape:label=""
 54 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 55 |        position="10.038306,217.625"
 56 |        orientation="0,1"
 57 |        id="guide8"
 58 |        inkscape:locked="false"
 59 |        inkscape:label=""
 60 |        inkscape:color="rgb(0,134,229)" /><inkscape:grid
 61 |        id="grid9"
 62 |        units="px"
 63 |        originx="-52.916668"
 64 |        originy="-52.916668"
 65 |        spacingx="0.26458333"
 66 |        spacingy="0.26458334"
 67 |        empcolor="#0099e5"
 68 |        empopacity="0.30196078"
 69 |        color="#0099e5"
 70 |        opacity="0.14901961"
 71 |        empspacing="5"
 72 |        dotted="false"
 73 |        gridanglex="30"
 74 |        gridanglez="30"
 75 |        visible="false" /><sodipodi:guide
 76 |        position="9.2604167,41.775769"
 77 |        orientation="-1,0"
 78 |        id="guide9"
 79 |        inkscape:locked="false"
 80 |        inkscape:label=""
 81 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 82 |        position="51.935303,70.114583"
 83 |        orientation="0,1"
 84 |        id="guide11"
 85 |        inkscape:locked="false"
 86 |        inkscape:label=""
 87 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 88 |        position="-13.557722,9.2604167"
 89 |        orientation="0,1"
 90 |        id="guide12"
 91 |        inkscape:locked="false"
 92 |        inkscape:label=""
 93 |        inkscape:color="rgb(0,134,229)" /><sodipodi:guide
 94 |        position="70.114583,25.658275"
 95 |        orientation="-1,0"
 96 |        id="guide13"
 97 |        inkscape:locked="false"
 98 |        inkscape:label=""
 99 |        inkscape:color="rgb(0,134,229)" /></sodipodi:namedview><defs
100 |      id="defs1" /><g
101 |      inkscape:label="Layer 1"
102 |      inkscape:groupmode="layer"
103 |      id="layer1"
104 |      transform="translate(-52.916668,-52.916668)"><rect
105 |        style="fill:#4949ff;fill-opacity:1;stroke-width:0.268278"
106 |        id="rect1"
107 |        width="79.375"
108 |        height="79.375"
109 |        x="52.916668"
110 |        y="52.916668"
111 |        ry="12.288583" /><g
112 |        id="layer101"
113 |        fill="#000000"
114 |        stroke="none"
115 |        style="fill:#007dcb;fill-opacity:1"
116 |        transform="matrix(0.00606927,0,0,0.00605437,55.508211,59.030319)"><path
117 |          d="M 5156.5366,10416.097 C 4151.6944,10348.916 3232.3131,9979.4205 2458.6655,9333.031 2334.5221,9229.5361 2140.2106,9046.1505 2043.0549,8939.932 1989.0794,8880.9218 1943.2003,8830.99 1939.602,8828.2665 1924.3089,8813.7409 1746.1901,8594.0412 1701.2106,8534.1231 1250.5159,7927.6793 940.15719,7224.0956 808.81706,6508.7098 c -53.0759,-286.8806 -68.3689,-417.611 -84.5615,-724.4643 -8.0963,-169.7679 -8.0963,-260.5529 0,-431.2287 16.1926,-305.9455 31.4856,-436.6759 84.5615,-723.5565 19.791,-109.8498 61.1721,-287.7884 91.75823,-396.7304 C 1184.8458,3223.2007 1766.8807,2347.1255 2580.1102,1706.1834 3259.3008,1171.4598 4089.6226,832.83173 4949.6309,740.23103 c 609.0226,-66.27301 1236.9365,-7.2628 1821.6702,171.5837 52.1762,16.3413 107.9508,32.6826 124.1434,37.2218 59.373,18.157 332.8484,125.28327 424.6066,167.04437 297.7644,135.2697 551.4488,282.3414 836.6189,483.8841 143.9345,102.587 494.7747,399.454 494.7747,419.4267 0,4.5392 -44.9795,82.6143 -99.8545,174.3071 -55.7746,90.785 -259.9816,434.8602 -455.1927,763.5019 l -354.4385,596.4574 h -481.2808 -481.2808 l 25.1885,-42.6689 c 21.5902,-38.1297 215.9017,-367.6793 634.2111,-1073.0787 104.3525,-175.2151 124.1435,-213.3448 113.3484,-223.3311 -22.4897,-21.7884 -182.6168,-119.8362 -299.5635,-184.2935 -729.5677,-399.454 -1567.0862,-546.5257 -2394.7092,-419.4267 -188.0144,28.1433 -479.4816,98.0478 -580.2357,137.9932 l -25.1885,9.0785 V 3566.368 5374.8052 l 20.6905,17.2491 c 10.7951,9.0785 90.8586,82.6144 177.2193,163.413 86.3607,80.7986 188.0144,174.3072 224.8976,208.8055 36.8832,33.5904 93.5574,86.2457 125.9426,117.1126 32.3852,30.8669 105.2521,98.0478 161.9262,150.7031 56.6742,52.6553 109.75,101.6792 116.9468,108.942 7.1967,7.2628 60.2725,56.2867 116.9467,108.942 56.6742,52.6553 109.75,101.6792 116.9467,108.942 7.1968,7.2628 60.2726,56.2867 116.9468,108.942 56.6741,52.6553 129.541,119.8362 161.9262,150.7031 57.5738,54.471 165.5246,154.3345 185.3156,171.5837 5.3975,5.4471 54.875,51.7474 110.6496,103.4949 54.875,51.7474 109.75,102.587 120.5451,111.6655 10.7951,9.9864 40.4815,37.2219 64.7705,60.826 25.1885,23.6041 93.5574,87.1536 152.9303,141.6246 59.373,55.3788 114.248,106.2184 121.4447,113.4812 7.1967,7.2628 60.2725,56.2867 116.9467,108.942 56.6742,52.6553 109.75,101.6792 116.9467,108.942 7.1968,7.2628 60.2726,56.2867 116.9468,108.942 56.6742,52.6553 129.541,119.8362 161.9262,150.7031 32.3853,29.959 82.7623,77.1672 112.4488,104.4027 51.2766,48.1161 178.1189,165.2287 413.8115,384.9284 59.373,54.471 129.541,120.7441 157.4283,145.256 71.9672,66.2731 139.4365,128.9147 219.5,204.2663 38.6824,36.314 72.8668,62.6416 76.4652,58.1024 2.6987,-4.5393 31.4856,-30.8669 63.8709,-58.1024 208.7049,-177.0308 429.1045,-411.2561 591.9304,-630.0479 85.461,-112.5734 211.4037,-305.0376 278.8729,-423.966 56.6742,-99.8635 186.2152,-358.6007 208.705,-419.4266 l 13.4938,-33.5905 85.4611,66.2731 c 46.7787,36.314 170.9221,130.7304 274.375,210.6211 304.9606,233.3175 328.3506,251.4745 333.7476,260.553 12.595,19.9727 -209.6041,422.1502 -349.9402,633.6793 -58.4734,88.0614 -253.6845,353.1536 -291.4673,394.9147 -8.9959,9.9864 -40.4815,47.2082 -69.2684,81.7065 -89.0594,107.1263 -426.4058,440.3072 -544.2521,539.2629 -518.164,433.9519 -1067.8136,731.7274 -1705.6231,921.4684 -493.875,147.072 -1066.914,211.529 -1574.2829,177.031 z m 719.6722,-865.182 c 263.58,-35.4061 489.3771,-84.43 728.6681,-159.7816 157.4283,-49.0239 517.2644,-200.6348 517.2644,-217.884 0,-5.4471 -58.4734,-61.7337 -256.3832,-245.1194 -28.7869,-27.2355 -57.5738,-53.5632 -63.8709,-59.0103 -5.3976,-4.5392 -54.875,-51.7474 -110.6496,-103.4949 -54.875,-51.7474 -109.75,-102.587 -120.5451,-111.6655 -10.7951,-9.9864 -39.582,-37.2219 -64.7705,-60.826 -24.289,-23.6041 -93.5574,-87.1536 -152.9304,-141.6246 -59.3729,-55.3788 -114.2479,-106.2184 -121.4446,-113.4812 -7.1968,-7.2628 -60.2726,-56.2867 -116.9468,-108.942 -56.6742,-52.6553 -129.541,-119.8362 -161.9262,-150.7031 -32.3853,-29.9591 -84.5615,-78.983 -116.9467,-108.942 -32.3853,-29.0512 -84.5615,-78.0751 -116.9468,-108.942 -32.3852,-29.9591 -84.5615,-78.983 -116.9467,-108.942 -32.3852,-29.0512 -84.5615,-78.0751 -116.9467,-108.942 -32.3853,-29.9591 -82.7623,-77.1673 -112.4488,-104.4028 C 5130.4485,7313.9727 4822.7887,7028 4778.7087,6986.2389 c -29.6864,-28.1434 -104.3524,-98.0478 -166.4241,-155.2424 -62.0718,-57.1945 -136.7378,-127.099 -166.4242,-155.2423 -29.6865,-27.2355 -84.5615,-78.983 -121.4447,-113.4813 l -67.4693,-62.6416 -2.6988,1438.0343 c -0.8996,791.6452 0.8996,1441.6658 4.498,1445.2972 21.5902,19.9727 330.1496,99.8635 501.9713,129.8225 284.2706,49.9318 404.8156,59.0103 733.1661,55.3789 182.6168,-1.8157 310.3586,-8.1707 382.3258,-17.2492 z M 3438.3193,5570.9008 V 2140.1357 l -54.875,33.5904 c -55.7746,35.4062 -197.0103,134.3618 -238.3914,167.0444 -12.5943,10.8942 -36.8832,29.0512 -53.0758,41.7611 -96.2562,72.628 -186.2152,152.5188 -331.0492,295.0513 -763.7521,748.9762 -1198.2542,1797.5429 -1198.2542,2891.5022 0,731.727 193.4119,1445.2971 561.3443,2074.4371 241.9898,413.9796 590.1312,815.2493 958.9632,1105.7613 80.0635,62.6417 345.4426,251.4745 354.4385,251.4745 0.8996,0 0.8996,-1543.345 0.8996,-3429.8572 z"
118 |          id="path2"
119 |          style="fill:#ffffff;fill-opacity:1;stroke-width:0.903711" /><path
120 |          d="m 8831.5259,6508.722 c -263.58,-58.1024 -470.4857,-273.2629 -543.3525,-564.6827 -21.5902,-87.1536 -24.289,-270.5393 -5.3976,-363.14 59.373,-284.157 264.4795,-512.0274 522.6619,-580.1161 83.6619,-22.6963 246.4878,-22.6963 328.3505,0 74.666,19.9727 170.9221,68.0887 232.0942,114.3891 26.0882,19.9727 49.4775,36.314 51.2767,36.314 2.6988,0 4.4979,-21.7884 4.4979,-49.0239 0,-29.9591 4.498,-52.6553 12.5943,-59.0103 8.0963,-7.2628 81.8627,-9.9863 249.1869,-8.1706 l 237.491,2.7235 2.699,710.8465 1.799,709.9387 -249.186,-1.8157 -250.0862,-2.7235 -2.6988,-51.7475 c -1.7992,-29.0512 -4.4979,-52.6553 -7.1967,-52.6553 -2.6988,0 -21.5902,13.6178 -41.3811,30.8669 -52.1763,45.3925 -171.8218,103.4949 -254.5841,123.4676 -83.6619,20.8806 -206.0061,22.6963 -288.7684,4.5393 z m 396.7192,-428.5052 c 78.2644,-27.2355 151.1312,-91.6929 188.914,-167.0444 88.1598,-174.3072 17.9918,-387.6519 -155.6291,-472.9898 -54.875,-26.3277 -67.4693,-29.0512 -141.2357,-29.0512 -102.5533,0 -165.5246,23.6041 -227.5963,83.5222 -58.4734,56.2867 -89.0594,112.5734 -106.1517,192.4641 -53.0758,256.9216 197.0103,480.2527 441.6988,393.0991 z"
121 |          id="path4"
122 |          style="fill:#ffffff;fill-opacity:1;stroke-width:0.903711" /><path
123 |          d="m 7019.7511,6299.9165 v -177.0308 h -485.7787 -485.7787 v -218.7918 -217.884 l 42.2807,-69.9044 c 83.6619,-138.9011 321.1537,-535.6315 385.0246,-641.85 35.9837,-59.9181 123.2439,-205.1741 193.4119,-322.2867 71.0677,-117.1127 167.3238,-278.71 215.9017,-358.6008 47.6783,-79.8908 92.6578,-154.3345 99.8545,-165.2287 12.5943,-20.8805 12.5943,-20.8805 275.2746,-20.8805 h 263.58 v 785.2902 785.2902 h 134.9385 c 74.666,0 134.9385,0.9079 134.9385,2.7236 0,4.5392 -83.6619,220.6075 -129.541,335.9045 l -43.1803,106.2184 h -38.6824 c -20.6905,0 -42.2807,5.4471 -48.5778,11.8021 -5.3976,7.2628 -10.7951,73.5358 -11.6947,175.215 l -2.6988,162.5052 -249.1865,2.7235 -250.0861,1.8157 z m -1.7991,-973.2152 c -1.7992,-270.5393 -5.3976,-352.2458 -13.4939,-352.2458 -6.2971,0 -98.0553,138.9011 -204.207,308.669 -106.1516,169.768 -198.8094,316.8397 -206.0061,326.826 -6.2972,9.9864 -19.791,29.0512 -27.8873,43.5768 l -16.1927,24.5119 h 234.7931 234.793 z"
124 |          id="path6"
125 |          style="fill:#ffffff;fill-opacity:1;stroke-width:0.903711" /><path
126 |          d="m 10262.774,6447.896 c -2.699,-6.3549 -3.599,-520.198 -2.699,-1142.0752 l 2.699,-1130.2733 h 251.885 251.885 l 2.699,1142.0753 1.799,1141.1674 h -251.885 c -193.412,0 -253.685,-2.7235 -256.383,-10.8942 z"
127 |          id="path8"
128 |          style="fill:#ffffff;fill-opacity:1;stroke-width:0.903711" /><path
129 |          d="m 11103.891,5314.8993 v -1143.891 l 254.584,1.8157 253.684,2.7235 2.699,1142.0753 1.799,1141.1674 h -256.383 -256.383 z"
130 |          id="path10"
131 |          style="fill:#ffffff;fill-opacity:1;stroke-width:0.903711" /></g></g></svg>
132 | 


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* prettier-ignore */
  3 | // @ts-nocheck
  4 | // noinspection JSUnusedGlobalSymbols
  5 | // Generated by unplugin-auto-import
  6 | export {}
  7 | declare global {
  8 |   const $: typeof import('vue/macros')['$']
  9 |   const $$: typeof import('vue/macros')['$$']
 10 |   const $computed: typeof import('vue/macros')['$computed']
 11 |   const $customRef: typeof import('vue/macros')['$customRef']
 12 |   const $ref: typeof import('vue/macros')['$ref']
 13 |   const $shallowRef: typeof import('vue/macros')['$shallowRef']
 14 |   const $toRef: typeof import('vue/macros')['$toRef']
 15 |   const EffectScope: typeof import('vue')['EffectScope']
 16 |   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 17 |   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 18 |   const computed: typeof import('vue')['computed']
 19 |   const computedAsync: typeof import('@vueuse/core')['computedAsync']
 20 |   const computedEager: typeof import('@vueuse/core')['computedEager']
 21 |   const computedInject: typeof import('@vueuse/core')['computedInject']
 22 |   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 23 |   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 24 |   const controlledRef: typeof import('@vueuse/core')['controlledRef']
 25 |   const createApp: typeof import('vue')['createApp']
 26 |   const createEventHook: typeof import('@vueuse/core')['createEventHook']
 27 |   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 28 |   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 29 |   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 30 |   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
 31 |   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 32 |   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
 33 |   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 34 |   const customRef: typeof import('vue')['customRef']
 35 |   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 36 |   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 37 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 38 |   const defineComponent: typeof import('vue')['defineComponent']
 39 |   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 40 |   const effectScope: typeof import('vue')['effectScope']
 41 |   const extendRef: typeof import('@vueuse/core')['extendRef']
 42 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
 43 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
 44 |   const h: typeof import('vue')['h']
 45 |   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 46 |   const inject: typeof import('vue')['inject']
 47 |   const injectLocal: typeof import('@vueuse/core')['injectLocal']
 48 |   const isDefined: typeof import('@vueuse/core')['isDefined']
 49 |   const isProxy: typeof import('vue')['isProxy']
 50 |   const isReactive: typeof import('vue')['isReactive']
 51 |   const isReadonly: typeof import('vue')['isReadonly']
 52 |   const isRef: typeof import('vue')['isRef']
 53 |   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 54 |   const markRaw: typeof import('vue')['markRaw']
 55 |   const nextTick: typeof import('vue')['nextTick']
 56 |   const onActivated: typeof import('vue')['onActivated']
 57 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
 58 |   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
 59 |   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
 60 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
 61 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
 62 |   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 63 |   const onDeactivated: typeof import('vue')['onDeactivated']
 64 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
 65 |   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 66 |   const onLongPress: typeof import('@vueuse/core')['onLongPress']
 67 |   const onMounted: typeof import('vue')['onMounted']
 68 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
 69 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
 70 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
 71 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
 72 |   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 73 |   const onUnmounted: typeof import('vue')['onUnmounted']
 74 |   const onUpdated: typeof import('vue')['onUpdated']
 75 |   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 76 |   const provide: typeof import('vue')['provide']
 77 |   const provideLocal: typeof import('@vueuse/core')['provideLocal']
 78 |   const reactify: typeof import('@vueuse/core')['reactify']
 79 |   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 80 |   const reactive: typeof import('vue')['reactive']
 81 |   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 82 |   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 83 |   const reactivePick: typeof import('@vueuse/core')['reactivePick']
 84 |   const readonly: typeof import('vue')['readonly']
 85 |   const ref: typeof import('vue')['ref']
 86 |   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 87 |   const refDebounced: typeof import('@vueuse/core')['refDebounced']
 88 |   const refDefault: typeof import('@vueuse/core')['refDefault']
 89 |   const refThrottled: typeof import('@vueuse/core')['refThrottled']
 90 |   const refWithControl: typeof import('@vueuse/core')['refWithControl']
 91 |   const resolveComponent: typeof import('vue')['resolveComponent']
 92 |   const resolveRef: typeof import('@vueuse/core')['resolveRef']
 93 |   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 94 |   const shallowReactive: typeof import('vue')['shallowReactive']
 95 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
 96 |   const shallowRef: typeof import('vue')['shallowRef']
 97 |   const syncRef: typeof import('@vueuse/core')['syncRef']
 98 |   const syncRefs: typeof import('@vueuse/core')['syncRefs']
 99 |   const templateRef: typeof import('@vueuse/core')['templateRef']
100 |   const throttledRef: typeof import('@vueuse/core')['throttledRef']
101 |   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
102 |   const toRaw: typeof import('vue')['toRaw']
103 |   const toReactive: typeof import('@vueuse/core')['toReactive']
104 |   const toRef: typeof import('vue')['toRef']
105 |   const toRefs: typeof import('vue')['toRefs']
106 |   const toValue: typeof import('vue')['toValue']
107 |   const triggerRef: typeof import('vue')['triggerRef']
108 |   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
109 |   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
110 |   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
111 |   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
112 |   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
113 |   const unref: typeof import('vue')['unref']
114 |   const unrefElement: typeof import('@vueuse/core')['unrefElement']
115 |   const until: typeof import('@vueuse/core')['until']
116 |   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
117 |   const useAnimate: typeof import('@vueuse/core')['useAnimate']
118 |   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
119 |   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
120 |   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
121 |   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
122 |   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
123 |   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
124 |   const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
125 |   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
126 |   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
127 |   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
128 |   const useArraySome: typeof import('@vueuse/core')['useArraySome']
129 |   const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
130 |   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
131 |   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
132 |   const useAttrs: typeof import('vue')['useAttrs']
133 |   const useBase64: typeof import('@vueuse/core')['useBase64']
134 |   const useBattery: typeof import('@vueuse/core')['useBattery']
135 |   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
136 |   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
137 |   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
138 |   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
139 |   const useCached: typeof import('@vueuse/core')['useCached']
140 |   const useClipboard: typeof import('@vueuse/core')['useClipboard']
141 |   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
142 |   const useCloned: typeof import('@vueuse/core')['useCloned']
143 |   const useColorMode: typeof import('@vueuse/core')['useColorMode']
144 |   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
145 |   const useCounter: typeof import('@vueuse/core')['useCounter']
146 |   const useCssModule: typeof import('vue')['useCssModule']
147 |   const useCssVar: typeof import('@vueuse/core')['useCssVar']
148 |   const useCssVars: typeof import('vue')['useCssVars']
149 |   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
150 |   const useCycleList: typeof import('@vueuse/core')['useCycleList']
151 |   const useDark: typeof import('@vueuse/core')['useDark']
152 |   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
153 |   const useDebounce: typeof import('@vueuse/core')['useDebounce']
154 |   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
155 |   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
156 |   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
157 |   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
158 |   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
159 |   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
160 |   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
161 |   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
162 |   const useDraggable: typeof import('@vueuse/core')['useDraggable']
163 |   const useDropZone: typeof import('@vueuse/core')['useDropZone']
164 |   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
165 |   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
166 |   const useElementHover: typeof import('@vueuse/core')['useElementHover']
167 |   const useElementSize: typeof import('@vueuse/core')['useElementSize']
168 |   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
169 |   const useEventBus: typeof import('@vueuse/core')['useEventBus']
170 |   const useEventListener: typeof import('@vueuse/core')['useEventListener']
171 |   const useEventSource: typeof import('@vueuse/core')['useEventSource']
172 |   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
173 |   const useFavicon: typeof import('@vueuse/core')['useFavicon']
174 |   const useFetch: typeof import('@vueuse/core')['useFetch']
175 |   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
176 |   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
177 |   const useFocus: typeof import('@vueuse/core')['useFocus']
178 |   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
179 |   const useFps: typeof import('@vueuse/core')['useFps']
180 |   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
181 |   const useGamepad: typeof import('@vueuse/core')['useGamepad']
182 |   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
183 |   const useI18n: typeof import('vue-i18n')['useI18n']
184 |   const useIdle: typeof import('@vueuse/core')['useIdle']
185 |   const useImage: typeof import('@vueuse/core')['useImage']
186 |   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
187 |   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
188 |   const useInterval: typeof import('@vueuse/core')['useInterval']
189 |   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
190 |   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
191 |   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
192 |   const useLink: typeof import('vue-router')['useLink']
193 |   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
194 |   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
195 |   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
196 |   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
197 |   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
198 |   const useMemoize: typeof import('@vueuse/core')['useMemoize']
199 |   const useMemory: typeof import('@vueuse/core')['useMemory']
200 |   const useMounted: typeof import('@vueuse/core')['useMounted']
201 |   const useMouse: typeof import('@vueuse/core')['useMouse']
202 |   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
203 |   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
204 |   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
205 |   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
206 |   const useNetwork: typeof import('@vueuse/core')['useNetwork']
207 |   const useNow: typeof import('@vueuse/core')['useNow']
208 |   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
209 |   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
210 |   const useOnline: typeof import('@vueuse/core')['useOnline']
211 |   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
212 |   const useParallax: typeof import('@vueuse/core')['useParallax']
213 |   const useParentElement: typeof import('@vueuse/core')['useParentElement']
214 |   const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
215 |   const usePermission: typeof import('@vueuse/core')['usePermission']
216 |   const usePointer: typeof import('@vueuse/core')['usePointer']
217 |   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
218 |   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
219 |   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
220 |   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
221 |   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
222 |   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
223 |   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
224 |   const usePrevious: typeof import('@vueuse/core')['usePrevious']
225 |   const useRafFn: typeof import('@vueuse/core')['useRafFn']
226 |   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
227 |   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
228 |   const useRoute: typeof import('vue-router')['useRoute']
229 |   const useRouter: typeof import('vue-router')['useRouter']
230 |   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
231 |   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
232 |   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
233 |   const useScroll: typeof import('@vueuse/core')['useScroll']
234 |   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
235 |   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
236 |   const useShare: typeof import('@vueuse/core')['useShare']
237 |   const useSlots: typeof import('vue')['useSlots']
238 |   const useSorted: typeof import('@vueuse/core')['useSorted']
239 |   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
240 |   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
241 |   const useStepper: typeof import('@vueuse/core')['useStepper']
242 |   const useStorage: typeof import('@vueuse/core')['useStorage']
243 |   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
244 |   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
245 |   const useSupported: typeof import('@vueuse/core')['useSupported']
246 |   const useSwipe: typeof import('@vueuse/core')['useSwipe']
247 |   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
248 |   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
249 |   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
250 |   const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
251 |   const useThrottle: typeof import('@vueuse/core')['useThrottle']
252 |   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
253 |   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
254 |   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
255 |   const useTimeout: typeof import('@vueuse/core')['useTimeout']
256 |   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
257 |   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
258 |   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
259 |   const useTitle: typeof import('@vueuse/core')['useTitle']
260 |   const useToNumber: typeof import('@vueuse/core')['useToNumber']
261 |   const useToString: typeof import('@vueuse/core')['useToString']
262 |   const useToggle: typeof import('@vueuse/core')['useToggle']
263 |   const useTransition: typeof import('@vueuse/core')['useTransition']
264 |   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
265 |   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
266 |   const useVModel: typeof import('@vueuse/core')['useVModel']
267 |   const useVModels: typeof import('@vueuse/core')['useVModels']
268 |   const useVibrate: typeof import('@vueuse/core')['useVibrate']
269 |   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
270 |   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
271 |   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
272 |   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
273 |   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
274 |   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
275 |   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
276 |   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
277 |   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
278 |   const watch: typeof import('vue')['watch']
279 |   const watchArray: typeof import('@vueuse/core')['watchArray']
280 |   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
281 |   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
282 |   const watchDeep: typeof import('@vueuse/core')['watchDeep']
283 |   const watchEffect: typeof import('vue')['watchEffect']
284 |   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
285 |   const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
286 |   const watchOnce: typeof import('@vueuse/core')['watchOnce']
287 |   const watchPausable: typeof import('@vueuse/core')['watchPausable']
288 |   const watchPostEffect: typeof import('vue')['watchPostEffect']
289 |   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
290 |   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
291 |   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
292 |   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
293 |   const whenever: typeof import('@vueuse/core')['whenever']
294 | }
295 | // for type re-export
296 | declare global {
297 |   // @ts-ignore
298 |   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
299 |   import('vue')
300 | }
301 | 


--------------------------------------------------------------------------------
/public/assets/nodeflow-custom.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --baklava-control-color-primary: #a5b4fc;
  3 |   --baklava-control-color-error: #d00000;
  4 |   --baklava-control-color-background: #d1d5db;
  5 |   --baklava-control-color-foreground: black;
  6 |   --baklava-control-color-hover: #9ca3af;
  7 |   --baklava-control-color-active: #9ca3af;
  8 |   --baklava-control-color-disabled-foreground: #666c75;
  9 |   --baklava-control-border-radius: 3px;
 10 |   --baklava-sidebar-color-background: #e5e7eb;
 11 |   --baklava-sidebar-color-foreground: white;
 12 |   --baklava-node-color-background: #f4f4f5;
 13 |   --baklava-node-color-foreground: black;
 14 |   --baklava-node-color-hover: #e28c4677;
 15 |   --baklava-node-color-selected: var(--baklava-control-color-primary);
 16 |   --baklava-node-color-resize-handle: var(--baklava-control-color-background);
 17 |   --baklava-node-title-color-background: #f9fafb;
 18 |   --baklava-node-title-color-foreground: black;
 19 |   --baklava-group-node-title-color-background: #215636;
 20 |   --baklava-group-node-title-color-foreground: white;
 21 |   --baklava-node-interface-port-tooltip-color-foreground: var(
 22 |     --baklava-control-color-primary
 23 |   );
 24 |   --baklava-node-interface-port-tooltip-color-background: var(
 25 |     --baklava-editor-background-pattern-black
 26 |   );
 27 |   --baklava-node-border-radius: 6px;
 28 |   --baklava-color-connection-default: #737f96;
 29 |   --baklava-color-connection-allowed: #48bc79;
 30 |   --baklava-color-connection-forbidden: #bc4848;
 31 |   --baklava-editor-background-pattern-default: #f9fafb;
 32 |   --baklava-editor-background-pattern-line: #e5e7eb;
 33 |   --baklava-editor-background-pattern-black: #d1d5db;
 34 |   --baklava-context-menu-background: white;
 35 |   --baklava-context-menu-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
 36 |   --baklava-toolbar-background: #1b202caa;
 37 |   --baklava-toolbar-foreground: white;
 38 |   --baklava-node-palette-background: #1b202caa;
 39 |   --baklava-node-palette-foreground: white;
 40 |   --baklava-selectionbox-color-border: var(--baklava-node-color-background);
 41 |   --baklava-selectionbox-color-background: var(--baklava-node-color-hover);
 42 |   --baklava-visual-transition: 0.1s linear;
 43 | }
 44 | :root.dark {
 45 |   --baklava-control-color-primary: #2563eb;
 46 |   --baklava-control-color-error: #dc2626;
 47 |   --baklava-control-color-background: #27272a;
 48 |   --baklava-control-color-foreground: #fff;
 49 |   --baklava-control-color-hover: #52525b;
 50 |   --baklava-control-color-active: #9ca3af;
 51 |   --baklava-control-color-disabled-foreground: #666c75;
 52 |   --baklava-control-border-radius: 3px;
 53 |   --baklava-sidebar-color-background: #3f3f46;
 54 |   --baklava-sidebar-color-foreground: #fafafa;
 55 |   --baklava-node-color-background: #3f3f46;
 56 |   --baklava-node-color-foreground: white;
 57 |   --baklava-node-color-hover: #e28c4677;
 58 |   --baklava-node-color-selected: var(--baklava-control-color-primary);
 59 |   --baklava-node-color-resize-handle: var(--baklava-control-color-background);
 60 |   --baklava-node-title-color-background: #18181b;
 61 |   --baklava-node-title-color-foreground: white;
 62 |   --baklava-group-node-title-color-background: #215636;
 63 |   --baklava-group-node-title-color-foreground: white;
 64 |   --baklava-node-interface-port-tooltip-color-foreground: var(
 65 |     --baklava-control-color-primary
 66 |   );
 67 |   --baklava-node-interface-port-tooltip-color-background: var(
 68 |     --baklava-editor-background-pattern-black
 69 |   );
 70 |   --baklava-node-border-radius: 6px;
 71 |   --baklava-color-connection-default: #3b82f6;
 72 |   --baklava-color-connection-allowed: #047857;
 73 |   --baklava-color-connection-forbidden: #b91c1c;
 74 |   --baklava-editor-background-pattern-default: #52525b;
 75 |   --baklava-editor-background-pattern-line: #3f3f46;
 76 |   --baklava-editor-background-pattern-black: #27272a;
 77 |   --baklava-context-menu-background: #3f3f46;
 78 |   --baklava-context-menu-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
 79 |   --baklava-toolbar-background: #1b202caa;
 80 |   --baklava-toolbar-foreground: white;
 81 |   --baklava-node-palette-background: #1b202caa;
 82 |   --baklava-node-palette-foreground: white;
 83 |   --baklava-selectionbox-color-border: var(--baklava-node-color-background);
 84 |   --baklava-selectionbox-color-background: var(--baklava-node-color-hover);
 85 |   --baklava-visual-transition: 0.1s linear;
 86 | }
 87 | 
 88 | .baklava-button {
 89 |   background-color: var(--baklava-control-color-background);
 90 |   color: var(--baklava-control-color-foreground);
 91 |   transition: background-color var(--baklava-visual-transition);
 92 |   border: none;
 93 |   padding: 0.45em 0.35em;
 94 |   border-radius: var(--baklava-control-border-radius);
 95 |   font-size: inherit;
 96 |   cursor: pointer;
 97 |   overflow-x: hidden;
 98 | }
 99 | .baklava-button:hover {
100 |   background-color: var(--baklava-control-color-hover);
101 | }
102 | .baklava-button:active {
103 |   background-color: var(--baklava-control-color-primary);
104 | }
105 | .baklava-button.--block {
106 |   width: 100%;
107 | }
108 | 
109 | .baklava-checkbox {
110 |   display: flex;
111 |   padding: 0.35em 0;
112 |   cursor: pointer;
113 |   overflow-x: hidden;
114 |   align-items: center;
115 | }
116 | .baklava-checkbox .__checkmark-container {
117 |   display: flex;
118 |   background-color: var(--baklava-control-color-background);
119 |   border-radius: var(--baklava-control-border-radius);
120 |   transition: background-color var(--baklava-visual-transition);
121 |   width: 18px;
122 |   height: 18px;
123 | }
124 | .baklava-checkbox:hover .__checkmark-container {
125 |   background-color: var(--baklava-control-color-hover);
126 | }
127 | .baklava-checkbox:active .__checkmark-container {
128 |   background-color: var(--baklava-control-color-active);
129 | }
130 | .baklava-checkbox .__checkmark {
131 |   stroke-dasharray: 15;
132 |   stroke-dashoffset: 15;
133 |   stroke: var(--baklava-control-color-foreground);
134 |   stroke-width: 2px;
135 |   fill: none;
136 |   transition: stroke-dashoffset var(--baklava-visual-transition);
137 | }
138 | .baklava-checkbox.--checked .__checkmark {
139 |   stroke-dashoffset: 0;
140 | }
141 | .baklava-checkbox.--checked .__checkmark-container {
142 |   background-color: var(--baklava-control-color-primary);
143 | }
144 | .baklava-checkbox .__label {
145 |   margin-left: 0.5rem;
146 | }
147 | 
148 | .baklava-context-menu {
149 |   color: var(--baklava-control-color-foreground);
150 |   position: absolute;
151 |   display: inline-block;
152 |   z-index: 100;
153 |   background-color: var(--baklava-context-menu-background);
154 |   box-shadow: var(--baklava-context-menu-shadow);
155 |   border-radius: 0 0 var(--baklava-control-border-radius)
156 |   var(--baklava-control-border-radius);
157 |   min-width: 6rem;
158 |   width: max-content;
159 | }
160 | .baklava-context-menu > .item {
161 |   display: flex;
162 |   align-items: center;
163 |   padding: 0.35em 1em;
164 |   transition: background 0.05s linear;
165 |   position: relative;
166 | }
167 | .baklava-context-menu > .item > .__label {
168 |   flex: 1 1 auto;
169 | }
170 | .baklava-context-menu > .item > .__submenu-icon {
171 |   margin-left: 0.75rem;
172 | }
173 | .baklava-context-menu > .item.--disabled {
174 |   color: var(--baklava-control-color-hover);
175 | }
176 | .baklava-context-menu
177 | > .item:not(.--header):not(.--active):not(.--disabled):hover {
178 |   background: var(--baklava-control-color-primary);
179 | }
180 | .baklava-context-menu > .item.--active {
181 |   background: var(--baklava-control-color-primary);
182 | }
183 | .baklava-context-menu.--nested {
184 |   left: 100%;
185 |   top: 0;
186 | }
187 | .baklava-context-menu.--flipped-x.--nested {
188 |   left: unset;
189 |   right: 100%;
190 | }
191 | .baklava-context-menu.--flipped-y.--nested {
192 |   top: unset;
193 |   bottom: 0;
194 | }
195 | .baklava-context-menu > .divider {
196 |   margin: 0.35em 0;
197 |   height: 1px;
198 |   background-color: var(--baklava-control-color-hover);
199 | }
200 | 
201 | .baklava-icon {
202 |   display: block;
203 |   height: 100%;
204 | }
205 | .baklava-icon.--clickable {
206 |   cursor: pointer;
207 |   transition: color var(--baklava-visual-transition);
208 | }
209 | .baklava-icon.--clickable:hover {
210 |   color: var(--baklava-control-color-primary);
211 | }
212 | 
213 | .baklava-input {
214 |   background-color: var(--baklava-control-color-background);
215 |   color: var(--baklava-control-color-foreground);
216 |   caret-color: var(--baklava-control-color-primary);
217 |   border: none;
218 |   border-radius: var(--baklava-control-border-radius);
219 |   padding: 0.45em 0.75em;
220 |   width: 100%;
221 |   transition: background-color var(--baklava-visual-transition);
222 |   font-size: inherit;
223 |   font: inherit;
224 | }
225 | .baklava-input:hover {
226 |   background-color: var(--baklava-control-color-hover);
227 | }
228 | .baklava-input:active {
229 |   background-color: var(--baklava-control-color-active);
230 | }
231 | .baklava-input:focus-visible {
232 |   outline: 1px solid var(--baklava-control-color-primary);
233 | }
234 | .baklava-input[type="number"]::-webkit-inner-spin-button,
235 | .baklava-input[type="number"]::-webkit-outer-spin-button {
236 |   -webkit-appearance: none;
237 |   margin: 0;
238 | }
239 | .baklava-input.--invalid {
240 |   box-shadow: 0 0 2px 2px var(--baklava-control-color-error);
241 | }
242 | 
243 | .baklava-num-input {
244 |   background: var(--baklava-control-color-background);
245 |   color: var(--baklava-control-color-foreground);
246 |   border-radius: var(--baklava-control-border-radius);
247 |   width: 100%;
248 |   display: grid;
249 |   grid-template-columns: 20px 1fr 20px;
250 | }
251 | .baklava-num-input > .__button {
252 |   display: flex;
253 |   flex: 0 0 auto;
254 |   width: 20px;
255 |   justify-content: center;
256 |   align-items: center;
257 |   transition: background var(--baklava-visual-transition);
258 |   cursor: pointer;
259 | }
260 | .baklava-num-input > .__button:hover {
261 |   background-color: var(--baklava-control-color-hover);
262 | }
263 | .baklava-num-input > .__button:active {
264 |   background-color: var(--baklava-control-color-active);
265 | }
266 | .baklava-num-input > .__button.--dec {
267 |   grid-area: 1/1 / span 1 / span 1;
268 | }
269 | .baklava-num-input > .__button.--dec > svg {
270 |   transform: rotateZ(90deg);
271 | }
272 | .baklava-num-input > .__button.--inc {
273 |   grid-area: 1/3 / span 1 / span 1;
274 | }
275 | .baklava-num-input > .__button.--inc > svg {
276 |   transform: rotateZ(-90deg);
277 | }
278 | .baklava-num-input > .__button path {
279 |   stroke: var(--baklava-control-color-foreground);
280 |   fill: var(--baklava-control-color-foreground);
281 | }
282 | .baklava-num-input > .__content {
283 |   grid-area: 1/2 / span 1 / span 1;
284 |   display: inline-flex;
285 |   cursor: pointer;
286 |   max-width: 100%;
287 |   min-width: 0;
288 |   align-items: center;
289 |   transition: background-color var(--baklava-visual-transition);
290 | }
291 | .baklava-num-input > .__content:hover {
292 |   background-color: var(--baklava-control-color-hover);
293 | }
294 | .baklava-num-input > .__content:active {
295 |   background-color: var(--baklava-control-color-active);
296 | }
297 | .baklava-num-input > .__content > .__label,
298 | .baklava-num-input > .__content > .__value {
299 |   margin: 0.35em 0;
300 |   padding: 0 0.5em;
301 | }
302 | .baklava-num-input > .__content > .__label {
303 |   flex: 1;
304 |   min-width: 0;
305 |   overflow: hidden;
306 | }
307 | .baklava-num-input > .__content > .__value {
308 |   text-align: right;
309 | }
310 | .baklava-num-input > .__content > input {
311 |   background-color: var(--baklava-control-color-background);
312 |   color: var(--baklava-control-color-foreground);
313 |   caret-color: var(--baklava-control-color-primary);
314 |   padding: 0.35em;
315 |   width: 100%;
316 | }
317 | 
318 | .baklava-select {
319 |   width: 100%;
320 |   position: relative;
321 |   color: var(--baklava-control-color-foreground);
322 | }
323 | .baklava-select.--open > .__selected {
324 |   border-bottom-left-radius: 0;
325 |   border-bottom-right-radius: 0;
326 | }
327 | .baklava-select.--open > .__selected > .__icon {
328 |   transform: rotate(180deg);
329 | }
330 | .baklava-select > .__selected {
331 |   background-color: var(--baklava-control-color-background);
332 |   padding: 0.35em 0.75em;
333 |   border-radius: var(--baklava-control-border-radius);
334 |   transition: background var(--baklava-visual-transition);
335 |   min-height: 1.7em;
336 |   display: flex;
337 |   align-items: center;
338 |   cursor: pointer;
339 | }
340 | .baklava-select > .__selected:hover {
341 |   background: var(--baklava-control-color-hover);
342 | }
343 | .baklava-select > .__selected:active {
344 |   background: var(--baklava-control-color-active);
345 | }
346 | .baklava-select > .__selected > .__text {
347 |   flex: 1 0 auto;
348 |   flex-basis: 0;
349 |   text-overflow: ellipsis;
350 |   white-space: nowrap;
351 |   overflow: hidden;
352 | }
353 | .baklava-select > .__selected > .__icon {
354 |   flex: 0 0 auto;
355 |   display: flex;
356 |   justify-content: center;
357 |   align-items: center;
358 |   transition: transform 0.25s ease;
359 |   width: 18px;
360 |   height: 18px;
361 | }
362 | .baklava-select > .__selected > .__icon path {
363 |   stroke: var(--baklava-control-color-foreground);
364 |   fill: var(--baklava-control-color-foreground);
365 | }
366 | .baklava-select > .__dropdown {
367 |   position: absolute;
368 |   top: 100%;
369 |   left: 0;
370 |   right: 0;
371 |   z-index: 10;
372 |   background-color: var(--baklava-context-menu-background);
373 |   filter: drop-shadow(0 0 4px black);
374 |   border-radius: 0 0 var(--baklava-control-border-radius)
375 |   var(--baklava-control-border-radius);
376 |   max-height: 15em;
377 |   overflow-y: scroll;
378 | }
379 | .baklava-select > .__dropdown::-webkit-scrollbar {
380 |   width: 0px;
381 |   background: transparent;
382 | }
383 | .baklava-select > .__dropdown > .item {
384 |   padding: 0.35em;
385 |   padding-left: 1em;
386 |   transition: background 0.05s linear;
387 | }
388 | .baklava-select > .__dropdown > .item:not(.--header):not(.--active) {
389 |   cursor: pointer;
390 | }
391 | .baklava-select > .__dropdown > .item:not(.--header):not(.--active):hover {
392 |   background: var(--baklava-control-color-hover);
393 | }
394 | .baklava-select > .__dropdown > .item.--active {
395 |   background: var(--baklava-control-color-primary);
396 | }
397 | .baklava-select > .__dropdown > .item.--header {
398 |   color: var(--baklava-control-color-disabled-foreground);
399 |   border-bottom: 1px solid var(--baklava-control-color-disabled-foreground);
400 |   padding: 0.5em 0.35em;
401 |   padding-left: 1em;
402 | }
403 | 
404 | .baklava-slider {
405 |   background: var(--baklava-control-color-background);
406 |   color: var(--baklava-control-color-foreground);
407 |   border-radius: var(--baklava-control-border-radius);
408 |   position: relative;
409 |   cursor: pointer;
410 | }
411 | .baklava-slider > .__content {
412 |   display: flex;
413 |   position: relative;
414 | }
415 | .baklava-slider > .__content > .__label,
416 | .baklava-slider > .__content > .__value {
417 |   flex: 1 1 auto;
418 |   margin: 0.35em 0;
419 |   padding: 0 0.5em;
420 |   text-overflow: ellipsis;
421 | }
422 | .baklava-slider > .__content > .__value {
423 |   text-align: right;
424 | }
425 | .baklava-slider > .__content > input {
426 |   background-color: var(--baklava-control-color-background);
427 |   color: var(--baklava-control-color-foreground);
428 |   caret-color: var(--baklava-control-color-primary);
429 |   padding: 0.35em;
430 |   width: 100%;
431 | }
432 | .baklava-slider > .__slider {
433 |   position: absolute;
434 |   top: 0;
435 |   bottom: 0;
436 |   left: 0;
437 |   background-color: var(--baklava-control-color-primary);
438 |   border-radius: var(--baklava-control-border-radius);
439 | }
440 | 
441 | .baklava-connection {
442 |   stroke: var(--baklava-color-connection-default);
443 |   stroke-width: 2px;
444 |   fill: none;
445 | }
446 | .baklava-connection.--temporary {
447 |   stroke-width: 4px;
448 |   stroke-dasharray: 5 5;
449 |   stroke-dashoffset: 0;
450 |   animation: dash 1s linear infinite;
451 |   transform: translateY(-1px);
452 | }
453 | @keyframes dash {
454 |   to {
455 |     stroke-dashoffset: 20;
456 |   }
457 | }
458 | .baklava-connection.--allowed {
459 |   stroke: var(--baklava-color-connection-allowed);
460 | }
461 | .baklava-connection.--forbidden {
462 |   stroke: var(--baklava-color-connection-forbidden);
463 | }
464 | 
465 | .baklava-minimap {
466 |   position: absolute;
467 |   height: 15%;
468 |   width: 15%;
469 |   min-width: 150px;
470 |   max-width: 90%;
471 |   top: 85%;
472 |   right: 85%;
473 |   z-index: 900;
474 | }
475 | 
476 | .baklava-editor {
477 |   width: 100%;
478 |   height: 100%;
479 |   position: relative;
480 |   overflow: hidden;
481 |   outline: none !important;
482 |   font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
483 |   font-size: 15px;
484 |   touch-action: none;
485 | }
486 | .baklava-editor .background {
487 |   background-color: var(--baklava-editor-background-pattern-default);
488 |   background-image: linear-gradient(
489 |     var(--baklava-editor-background-pattern-black) 2px,
490 |     transparent 2px
491 |   ),
492 |   linear-gradient(
493 |     90deg,
494 |     var(--baklava-editor-background-pattern-black) 2px,
495 |     transparent 2px
496 |   ),
497 |   linear-gradient(
498 |     var(--baklava-editor-background-pattern-line) 1px,
499 |     transparent 1px
500 |   ),
501 |   linear-gradient(
502 |     90deg,
503 |     var(--baklava-editor-background-pattern-line) 1px,
504 |     transparent 1px
505 |   );
506 |   background-repeat: repeat;
507 |   width: 100%;
508 |   height: 100%;
509 |   pointer-events: none !important;
510 | }
511 | .baklava-editor .selection-box {
512 |   position: absolute;
513 |   border: 1px solid var(--baklava-selectionbox-color-border);
514 |   background-color: var(--baklava-selectionbox-color-background);
515 |   pointer-events: none;
516 |   opacity: 0.5;
517 | }
518 | .baklava-editor.--start-selection-box {
519 |   cursor: crosshair;
520 | }
521 | .baklava-editor *:not(input):not(textarea) {
522 |   user-select: none;
523 |   -moz-user-select: none;
524 |   -webkit-user-select: none;
525 |   touch-action: none;
526 | }
527 | .baklava-editor .input-user-select {
528 |   user-select: auto;
529 |   -moz-user-select: auto;
530 |   -webkit-user-select: auto;
531 | }
532 | .baklava-editor *,
533 | .baklava-editor *::after,
534 | .baklava-editor *::before {
535 |   box-sizing: border-box;
536 | }
537 | .baklava-editor.--temporary-connection {
538 |   cursor: crosshair;
539 | }
540 | .baklava-editor .connections-container {
541 |   position: absolute;
542 |   top: 0;
543 |   left: 0;
544 |   width: 100%;
545 |   height: 100%;
546 |   pointer-events: none !important;
547 | }
548 | .baklava-editor .node-container {
549 |   position: absolute;
550 |   top: 0;
551 |   left: 0;
552 |   width: 100%;
553 |   height: 100%;
554 |   pointer-events: none;
555 | }
556 | .baklava-editor .node-container * {
557 |   pointer-events: all;
558 | }
559 | 
560 | .baklava-ignore-mouse * {
561 |   pointer-events: none !important;
562 | }
563 | 
564 | .baklava-ignore-mouse .__port {
565 |   pointer-events: all !important;
566 | }
567 | 
568 | .baklava-node-interface {
569 |   padding: 0.25em 0;
570 |   position: relative;
571 | }
572 | .baklava-node-interface .__port {
573 |   position: absolute;
574 |   width: 10px;
575 |   height: 10px;
576 |   background: white;
577 |   border-radius: 50%;
578 |   top: calc(50% - 5px);
579 |   cursor: crosshair;
580 | }
581 | .baklava-node-interface .__port.--selected {
582 |   outline: 2px var(--baklava-color-connection-default) solid;
583 |   outline-offset: 4px;
584 | }
585 | .baklava-node-interface.--input {
586 |   text-align: left;
587 |   padding-left: 0.5em;
588 | }
589 | .baklava-node-interface.--input .__port {
590 |   left: -1.1em;
591 | }
592 | .baklava-node-interface.--output {
593 |   text-align: right;
594 |   padding-right: 0.5em;
595 | }
596 | .baklava-node-interface.--output .__port {
597 |   right: -1.1em;
598 | }
599 | .baklava-node-interface .__tooltip {
600 |   position: absolute;
601 |   left: 5px;
602 |   top: 15px;
603 |   transform: translate(-50%, 0%);
604 |   background: var(--baklava-node-interface-port-tooltip-color-background);
605 |   color: var(--baklava-node-interface-port-tooltip-color-foreground);
606 |   padding: 0.25em 0.5em;
607 |   text-align: center;
608 |   z-index: 2;
609 | }
610 | 
611 | .baklava-node-palette {
612 |   position: absolute;
613 |   right: 0;
614 |   top: 60px;
615 |   width: 250px;
616 |   height: calc(100% - 60px);
617 |   z-index: 10;
618 |   padding: 2rem;
619 |   overflow-y: auto;
620 |   background: var(--baklava-node-palette-background);
621 | 
622 | }
623 | .baklava-node-palette h1 {
624 |   margin-top: 2rem;
625 | }
626 | 
627 | .baklava-node.--palette {
628 |   position: unset;
629 |   margin: 0;
630 |   cursor: grab;
631 |   border: 1px;
632 |   border-style: solid;
633 |   border-color: var(--baklava-control-color-hover);
634 |   box-shadow: none;
635 | }
636 | .baklava-node.--palette:first-child {
637 |   margin-top: 0;
638 | }
639 | .baklava-node.--palette .__title {
640 |   padding: 0.5rem;
641 |   border-radius: var(--baklava-node-border-radius);
642 | }
643 | 
644 | .baklava-dragged-node {
645 |   position: absolute;
646 |   width: calc(250px - 4rem);
647 |   height: 40px;
648 |   z-index: 4;
649 |   pointer-events: none;
650 | }
651 | 
652 | .baklava-node {
653 |   background: var(--baklava-node-color-background);
654 |   color: var(--baklava-node-color-foreground);
655 |   border: 1px solid transparent;
656 |   border-radius: var(--baklava-node-border-radius);
657 |   position: absolute;
658 |   box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
659 |   transition:
660 |     border-color var(--baklava-visual-transition),
661 |     box-shadow var(--baklava-visual-transition);
662 |   width: var(--width);
663 | }
664 | .baklava-node:hover {
665 |   border-color: var(--baklava-node-color-hover);
666 | }
667 | .baklava-node:hover .__resize-handle::after {
668 |   opacity: 1;
669 | }
670 | .baklava-node.--selected {
671 |   z-index: 5;
672 |   border-color: var(--baklava-node-color-selected);
673 | }
674 | .baklava-node.--dragging {
675 |   box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
676 | }
677 | .baklava-node.--dragging > .__title {
678 |   cursor: grabbing;
679 | }
680 | .baklava-node > .__title {
681 |   display: flex;
682 |   background: var(--baklava-node-title-color-background);
683 |   color: var(--baklava-node-title-color-foreground);
684 |   padding: 0.4em 0.75em;
685 |   border-radius: var(--baklava-node-border-radius)
686 |   var(--baklava-node-border-radius) 0 0;
687 |   cursor: grab;
688 | }
689 | .baklava-node > .__title > *:first-child {
690 |   flex-grow: 1;
691 | }
692 | .baklava-node > .__title > .__title-label {
693 |   pointer-events: none;
694 | }
695 | .baklava-node > .__title > .__menu {
696 |   position: relative;
697 |   cursor: initial;
698 | }
699 | .baklava-node[data-node-type^="__baklava_"] > .__title {
700 |   background: var(--baklava-group-node-title-color-background);
701 |   color: var(--baklava-group-node-title-color-foreground);
702 | }
703 | .baklava-node > .__content {
704 |   padding: 0.75em;
705 | }
706 | .baklava-node > .__content.--reverse-y {
707 |   display: flex;
708 |   flex-direction: column-reverse;
709 | }
710 | .baklava-node > .__content > div > div {
711 |   margin: 0.5em 0;
712 | }
713 | .baklava-node.--two-column > .__content {
714 |   display: grid;
715 |   grid-template-columns: 1fr 1fr;
716 |   grid-template-rows: auto auto;
717 |   grid-template-areas: ". ." ". .";
718 | }
719 | .baklava-node.--two-column > .__content > .__inputs {
720 |   grid-row: 1;
721 |   grid-column: 1;
722 | }
723 | .baklava-node.--two-column > .__content > .__outputs {
724 |   grid-row: 1;
725 |   grid-column: 2;
726 | }
727 | .baklava-node .__resize-handle {
728 |   position: absolute;
729 |   right: 0;
730 |   bottom: 0;
731 |   width: 1rem;
732 |   height: 1rem;
733 |   transform: translateX(50%);
734 |   cursor: ew-resize;
735 | }
736 | .baklava-node .__resize-handle::after {
737 |   content: "";
738 |   position: absolute;
739 |   bottom: 0;
740 |   left: -0.5rem;
741 |   width: 1rem;
742 |   height: 1rem;
743 |   opacity: 0;
744 |   border-bottom-right-radius: var(--baklava-node-border-radius);
745 |   transition: opacity var(--baklava-visual-transition);
746 |   background: linear-gradient(
747 |     -45deg,
748 |     transparent 10%,
749 |     var(--baklava-node-color-resize-handle) 10%,
750 |     var(--baklava-node-color-resize-handle) 15%,
751 |     transparent 15%,
752 |     transparent 30%,
753 |     var(--baklava-node-color-resize-handle) 30%,
754 |     var(--baklava-node-color-resize-handle) 35%,
755 |     transparent 35%,
756 |     transparent 50%,
757 |     var(--baklava-node-color-resize-handle) 50%,
758 |     var(--baklava-node-color-resize-handle) 55%,
759 |     transparent 55%
760 |   );
761 | }
762 | 
763 | .baklava-sidebar {
764 |   position: absolute;
765 |   height: 100%;
766 |   width: 25%;
767 |   min-width: 300px;
768 |   max-width: 90%;
769 |   top: 0;
770 |   right: 0;
771 |   z-index: 1000;
772 |   background-color: var(--baklava-sidebar-color-background);
773 |   color: var(--baklava-sidebar-color-foreground);
774 |   box-shadow: none;
775 |   overflow-x: hidden;
776 |   padding: 1em;
777 |   transform: translateX(100%);
778 |   transition: transform 0.5s;
779 |   display: flex;
780 |   flex-direction: column;
781 | }
782 | .baklava-sidebar.--open {
783 |   transform: translateX(0);
784 |   box-shadow: 0px 0px 15px black;
785 | }
786 | .baklava-sidebar .__resizer {
787 |   position: absolute;
788 |   left: 0;
789 |   top: 0;
790 |   height: 100%;
791 |   width: 4px;
792 |   cursor: col-resize;
793 | }
794 | .baklava-sidebar .__header {
795 |   display: flex;
796 |   align-items: center;
797 | }
798 | .baklava-sidebar .__header .__node-name {
799 |   margin-left: 0.5rem;
800 | }
801 | .baklava-sidebar .__close {
802 |   font-size: 2em;
803 |   border: none;
804 |   background: none;
805 |   color: inherit;
806 |   cursor: pointer;
807 | }
808 | .baklava-sidebar .__interface {
809 |   margin: 0.5em 0;
810 | }
811 | 
812 | .baklava-toolbar {
813 |   position: absolute;
814 |   left: 0;
815 |   top: 0;
816 |   width: 100%;
817 |   height: 60px;
818 |   z-index: 3;
819 |   padding: 0.5rem 2rem;
820 |   background: var(--baklava-toolbar-background);
821 |   color: var(--baklava-toolbar-foreground);
822 |   display: flex;
823 |   align-items: center;
824 | }
825 | 
826 | .baklava-toolbar-entry {
827 |   margin-left: 0.5rem;
828 |   margin-right: 0.5rem;
829 | }
830 | 
831 | .baklava-toolbar-button {
832 |   color: var(--baklava-toolbar-foreground);
833 |   background: none;
834 |   border: none;
835 |   transition: color var(--baklava-visual-transition);
836 | }
837 | .baklava-toolbar-button:not([disabled]) {
838 |   cursor: pointer;
839 | }
840 | .baklava-toolbar-button:hover:not([disabled]) {
841 |   color: var(--baklava-control-color-primary);
842 | }
843 | .baklava-toolbar-button[disabled] {
844 |   color: var(--baklava-control-color-disabled-foreground);
845 | }
846 | 
847 | .slide-fade-enter-active {
848 |   transition: all 0.1s ease-out;
849 | }
850 | 
851 | .slide-fade-leave-active {
852 |   transition: all 0.1s ease-out;
853 | }
854 | 
855 | .slide-fade-enter-from,
856 | .slide-fade-leave-to {
857 |   transform: translateY(5px);
858 |   opacity: 0;
859 | }
860 | 
861 | .fade-enter-active {
862 |   transition: opacity 0.1s ease-out !important;
863 | }
864 | 
865 | .fade-leave-active {
866 |   transition: opacity 0.1s ease-out !important;
867 | }
868 | 
869 | .fade-enter-from,
870 | .fade-leave-to {
871 |   opacity: 0;
872 | }
873 | 


--------------------------------------------------------------------------------