Canvas feature release 1

2024-08-09 11:47:36 +02:00
parent acc5771bbf
commit 9bcab57044
12 changed files with 1651 additions and 21 deletions
--- a/src/views/pages/canvas/MdCanvas.vue
+++ b/src/views/pages/canvas/MdCanvas.vue
@@ -0,0 +1,147 @@
+<template>
+    <div className="card">
+        <Dialog v-model:visible="execScenarioDialogVisible" modal :header="execScenario.name" :style="{ width: '70rem' }">
+            <MdScenarioExctuotionDialog :scenario="execScenario" @add="addFromDialog"/>
+        </Dialog>
+        <ContextMenu ref="menu" :model="items" :style="{'white-space':'nowrap', 'width': 'auto'}"/>
+
+        <MdEditor class="editor" v-model="content" language="en-US" ref="editor"  @contextmenu="onRightClick" previewTheme="github" :toolbars="toolbars">     
+            <template #defToolbars>
+                <Mark />
+                <Emoji />
+                <ExportPDF :modelValue="content" height="700px" />
+            </template>
+
+        </MdEditor>
+        
+    </div>
+</template>
+
+<script setup>
+    import { ref ,computed} from 'vue';
+    import { onMounted } from 'vue';
+    import { ScenarioService } from '@/service/ScenarioService.js';
+    import MdScenarioExctuotionDialog from '@/views/pages/canvas/MdScenarioExecutionDialog.vue';
+
+    import { MdEditor,NormalToolbar ,ModalToolbar } from 'md-editor-v3';
+    import { Emoji, Mark, ExportPDF } from '@vavt/v3-extension';
+    
+    import '@vavt/v3-extension/lib/asset/style.css';
+    import 'md-editor-v3/lib/style.css';
+
+
+    const menu = ref();
+    const currentSelection = ref(null);
+    const currentPosition = ref(null);
+    const content = ref('# Welcome to Olympus Canvas....');
+    const scenarios = ref([]);
+    const items = ref([]);
+    const execScenarioDialogVisible = ref(false);
+    const execScenario = ref({name:""});
+    const editor = ref();
+
+
+    const addFromDialog = (data) => {
+        console.log(data);
+        execScenarioDialogVisible.value = false;
+         editor.value.insert((selectedText) => {
+            return {
+            targetValue: data,
+            select: true,
+            deviationStart: 0,
+            deviationEnd: 0,
+            };
+        });
+    }
+
+    const onRightClick = (event) => {
+        if(editor.value.getSelectedText().length > 0) {
+            items.value=[
+                {label: 'Summarize',icon: 'pi pi-language'},
+                {label: 'Rewrite', icon: 'pi pi-language'}
+            ]
+        }else {
+            items.value=[
+                {  label: 'Ask Hermione', icon: 'pi pi-language'  },
+                {  separator: true},
+                { label: 'Execute Scenario', icon: 'pi pi-volume-up',items: scenarioMenuItems}
+            ]
+        }
+        menu.value.show(event);
+    };
+
+
+    const scenarioMenuItems = computed(() => { 
+        const scenario_items = [];
+        for (let i = 0; i < scenarios.value.length; i++) {
+            scenario_items.push({
+                label: scenarios.value[i].name,
+                icon: 'pi pi-file',
+                command: () => {
+                    executeScenario(scenarios.value[i]);
+                }
+            });
+        }
+        return scenario_items;
+    });
+
+
+    const executeScenario = (scenario) => {
+        console.log(scenario.id);
+        execScenarioDialogVisible.value = true;
+        execScenario.value = scenario;
+    }
+    onMounted(() => {
+        ScenarioService.getScenarios().then(resp=>{
+            scenarios.value = resp.data
+        })
+    });
+
+
+    const toolbars = ref([
+        'bold',
+        'underline',
+        'italic',
+        'strikeThrough',
+        '-',
+        'title',
+        'sub',
+        'sup',
+        'quote',
+        'unorderedList',
+        'orderedList',
+        'task',
+        '-',
+        'codeRow',
+        'code',
+        'link',
+        'image',
+        'table',
+        'mermaid',
+        'katex',
+        0,
+        1,
+        2,
+        3, 
+        '-',
+        'revoke',
+        'next',
+        'save',
+        '=',
+        'prettier',
+        'preview',
+        'previewOnly',
+        'htmlPreview'
+        ]);
+</script>
+
+<style >
+
+.editor ol {
+    list-style-type: decimal !important;
+}
+
+.editor ul {
+    list-style-type: disc !important;
+}
+</style>