Skip to content

Commit

Permalink
differentiation of patient, transtions and components
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaRiewesell
JoshuaRiewesell committed Aug 20, 2024
1 parent f13f498 commit bda554b
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 54 deletions.
39 changes: 26 additions & 13 deletions frontend/src/components/ModulePatientEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
import 'antd/dist/reset.css'
import { Editor } from '@/rete/types'
const modules = ref([])
const patientModule = ref("" as string)
const transitionModules = ref([] as string[])
const componentModules = ref([] as string[])
const editorContainer = ref(null)
const editor = ref(null as unknown as Editor)
Expand Down Expand Up @@ -197,22 +199,33 @@
usePatientStateStore().exportToCSV()
}
function openPatient() {
editor.value?.openModule('', 'patient').then(() => {
editor.value?.layout()
})
patientInfoFormIsVisible.value = true
}
onMounted(() => {
if (editor.value) {
modules.value = editor.value.getModules()
editor.value.openModule(modules.value[0])
patientModule.value = editor.value.getModules().patientModuleData
transitionModules.value = editor.value.getModules().transitionModulesData
componentModules.value = editor.value.getModules().componentModulesData
editor.value.openModule('', 'patient')
}
})
watch(editor, (newEditor) => {
if (newEditor) {
modules.value = newEditor.getModules()
newEditor.openModule(modules.value[0])
patientModule.value = newEditor.getModules().patientModuleData
transitionModules.value = newEditor.getModules().transitionModulesData
componentModules.value = newEditor.getModules().componentModulesData
newEditor.openModule('', 'patient')
}
})
function openModule(id: string) {
editor.value?.openModule(id).then(() => {
function openModule(id: string, type: string) {
editor.value?.openModule(id, type).then(() => {
editor.value?.layout()
})
}
Expand Down Expand Up @@ -244,22 +257,22 @@ function restoreModule() {

<template>
<div class="left-sidebar">
<button @click="patientInfoFormIsVisible = true">
<button @click="openPatient">
Patient
</button>
<p>Transitionen</p>
<button
v-for="module in modules as any"
v-for="module in transitionModules as any"
:key="module.id"
@click="openModule(module.id)"
@click="openModule(module.id, 'transition')"
>
{{ module.name }}
</button>
<p>Komponenten</p>
<button
v-for="module in modules as any"
v-for="module in componentModules as any"
:key="module.id"
@click="openModule(module.id)"
@click="openModule(module.id, 'component')"
>
{{ module.name }}
</button>
Expand All @@ -276,7 +289,7 @@ function restoreModule() {
<button @click="editor?.layout(); console.log('Clicked Layout-Button')">
Auto Layout
</button>
<button @click="download; saveModule">
<button @click="download(); saveModule()">
Export
</button>
</div>
Expand Down
22 changes: 17 additions & 5 deletions frontend/src/rete/data/data.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"static": {},
"flow": [
{"id":"86ebeaf375f35d3d","type":"Action","action":"72d6f3ad-b9a5-4b16-b289-815766b27c4f","quantity":1,"next":{"true":"84fceae523792447","false":"0adde205c19f0837"}},
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":1,"next":{"true":null,"false":null}},
{"id":"84fceae523792447","type":"Action","action":"7613f009-cb28-411d-91a9-26fe438a3bc2","quantity":1,"next":{"true":"5974baa226eb4354","false":null}},
{"id":"5974baa226eb4354","type":"Action","action":"9ed9b301-d4f8-4e81-8e33-f26bbdc24104","quantity":4,"next":{"true":null,"false":null}}
{"id":"86ebeaf375f35d3d","type":"Action","action":"72d6f3ad-b9a5-4b16-b289-815766b27c4f","quantity":10,"next":{"true":"84fceae523792447","false":"0adde205c19f0837"}},
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":10,"next":{"true":null,"false":null}},
{"id":"84fceae523792447","type":"Action","action":"7613f009-cb28-411d-91a9-26fe438a3bc2","quantity":10,"next":{"true":"5974baa226eb4354","false":null}},
{"id":"5974baa226eb4354","type":"Action","action":"9ed9b301-d4f8-4e81-8e33-f26bbdc24104","quantity":10,"next":{"true":null,"false":null}}
],
"states": [],
"transitions": [
Expand All @@ -27,5 +27,17 @@
]
}
],
"modules": []
"components": [
{
"id": "3",
"name": "Komponent 1",
"flow": [
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":1,"next":{"true":null,"false":null}},
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":2,"next":{"true":null,"false":null}},
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":3,"next":{"true":null,"false":null}},
{"id":"0adde205c19f0837","type":"Action","action":"cc8a5284-765d-4854-b634-6c9e5a85d916","quantity":4,"next":{"true":null,"false":null}},
{"id":"5974baa226eb4354","type":"Action","action":"9ed9b301-d4f8-4e81-8e33-f26bbdc24104","quantity":5,"next":{"true":null,"false":null}}
]
}
]
}
134 changes: 101 additions & 33 deletions frontend/src/rete/editor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ref, watch } from 'vue'
import { ClassicPreset as Classic, NodeEditor } from 'rete'
import { AreaExtensions, AreaPlugin } from 'rete-area-plugin'
import { ConnectionPlugin } from 'rete-connection-plugin'
Expand All @@ -14,20 +15,14 @@ import { showPatientStateForm } from '@/components/ModulePatientEditor.vue'
import { Modules } from "./modules.js"
import { clearEditor } from "./utils.js"
import { createNode, exportEditor, importEditor } from "./import.js"
import { patientModule, rootModule, transitModule, doubleModule } from "./modules/index.js"
import { createEngine } from "./processing.js"

import { Schemes, AreaExtra, Context, Connection } from './types'
import CustomDropdown from './customization/CustomDropdown.vue'
import { DropdownControl } from './dropdown'
import data from './data/data.json'

/* const modulesData: { [key in string]: any } = {
patient: patientModule,
root: rootModule,
transit: transitModule,
double: doubleModule
}*/
const editorMode = ref<string>("patient")

export async function createEditor(
container: HTMLElement,
Expand Down Expand Up @@ -56,23 +51,45 @@ export async function createEditor(
})
)*/

const contextMenu = new ContextMenuPlugin<Schemes>({
items: ContextMenuPresets.classic.setup([
['State', () => createNode(context, "State", { value: 0 })],
["Number", () => createNode(context, "Number", { value: 0 })],
["Add", () => createNode(context, "Add", {})],
["Input", () => createNode(context, "Input", { key: "key" })],
["Output", () => createNode(context, "Output", { key: "key" })],
["Module", () => createNode(context, "Module", { name: "" })],
["Action", () => createNode(context, "Action", {})],
["ist im Wertebereich", () => createNode(context, "isInRange", { fromValue: 1, toValue: 2 })]
])
})
let contextMenu = new ContextMenuPlugin<Schemes>({
items: ContextMenuPresets.classic.setup([])
})

function updateContextMenu() {
let items = <BSchemes>[]

if (editorMode.value === "patient") {
items = ContextMenuPresets.classic.setup([
['State', () => createNode(context, "State", { value: 0 })],
["Module", () => createNode(context, "Module", { name: "" })]
])
} else if (editorMode.value === "transition") {
items = ContextMenuPresets.classic.setup([
["Input", () => createNode(context, "Input", { key: "key" })],
["Output", () => createNode(context, "Output", { key: "key" })],
["Module", () => createNode(context, "Module", { name: "" })],
["Action", () => createNode(context, "Action", {})]
])
} else if (editorMode.value === "component") {
items = ContextMenuPresets.classic.setup([
["Input", () => createNode(context, "Input", { key: "key" })],
["Output", () => createNode(context, "Output", { key: "key" })],
["Module", () => createNode(context, "Module", { name: "" })],
["Action", () => createNode(context, "Action", {})]
])
}

contextMenu = new ContextMenuPlugin<Schemes>({ items })
}

updateContextMenu()
watch(editorMode, updateContextMenu)

editor.use(area)
area.use(vueRender)
area.use(connection)
area.use(contextMenu)

editor.use(area)
area.use(vueRender)
area.use(connection)
area.use(contextMenu)

area.area.setZoomHandler(null)

Expand Down Expand Up @@ -136,12 +153,16 @@ export async function createEditor(
const { dataflow, process } = createEngine(editor, area)
editor.use(dataflow)

const modulesData = data.transitions
// Modules

const modules = new Modules<Schemes>(
(id) => modulesData.find((module) => module.id === id),
const patientModuleData = data.flow
const transitionModulesData = data.transitions
const componentModulesData = data.components

const patientModule = new Modules<Schemes>(
true,
async (id, editor) => {
const data = modulesData.find((module) => module.id === id)?.flow
const data = patientModuleData

if (!data) throw new Error("cannot find module")
await importEditor(
Expand All @@ -153,10 +174,43 @@ export async function createEditor(
)
}
)

const transitionModules = new Modules<Schemes>(
(id) => transitionModulesData.find((module) => module.id === id),
async (id, editor) => {
const data = transitionModulesData.find((module) => module.id === id)?.flow

if (!data) throw new Error("cannot find module")
await importEditor(
{
...context,
editor
},
data
)
}
)

const componentModules = new Modules<Schemes>(
(id) => componentModulesData.find((module) => module.id === id),
async (id, editor) => {
const data = componentModulesData.find((module) => module.id === id)?.flow

if (!data) throw new Error("cannot find module")
await importEditor(
{
...context,
editor
},
data
)
}
)

const context: Context = {
editor,
area,
modules,
modules: transitionModules,
dataflow,
process
}
Expand All @@ -165,12 +219,22 @@ export async function createEditor(

let currentModuleId: null | string = null

async function openModule(id: string) {
async function openModule(id: string, type: string) {
currentModuleId = null

await clearEditor(editor)

const module = modules.findModule(id)
editorMode.value = type

let module = null

if (type === "patient") {
module = patientModule.findModule(id)
} else if (type === "transition") {
module = transitionModules.findModule(id)
} else if (type === "component") {
module = componentModules.findModule(id)
}

if (module) {
currentModuleId = id
Expand All @@ -186,12 +250,16 @@ export async function createEditor(

return {
getModules() {
return modulesData
return {
patientModuleData,
transitionModulesData,
componentModulesData
}
},
saveModule: () => {
if (currentModuleId) {
const data = exportEditor(context)
modulesData[currentModuleId] = data
transitionModulesData[currentModuleId] = data

const json = JSON.stringify(data)
const blob = new Blob([json], { type: 'text/json' })
Expand All @@ -207,7 +275,7 @@ export async function createEditor(
if (currentModulePath) openModule(currentModulePath)
},
newModule: (id: string) => {
modulesData[id] = { nodes: [], connections: [] }
transitionModulesData[id] = { nodes: [], connections: [] }
},
openModule,
layout: async () => {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/rete/modules.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export class Modules<S extends Schemes> {
) {}

public findModule = (id: string): null | Module<S> => {
if (!this.has(id)) return null
//if (!this.has(id)) return null

return {
apply: (editor: NodeEditor<S>) => this.graph(id, editor),
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/rete/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ export type Context = {
}

export interface Editor {
getModules(): string[];
getModules(): { patientModuleData: string, transitionModulesData: string[], componentModulesData: string[] };
saveModule(): void;
restoreModule(): void;
newModule(path: string): void;
openModule(path: string): Promise<void>;
openModule(id: string, type: string): Promise<void>;
layout(): Promise<void>;
destroy(): void;
}

0 comments on commit bda554b

Please sign in to comment.