绘制模板表单

src/components/draw-app/DrawProperties.vue

@@ -1,9 +1,15 @@
 <template>
-  <div v-if="drawStore.drawMode" class="q-pa-md">图形模板</div>
+  <div v-if="drawStore.drawMode" class="q-pa-md">
+    <template v-if="drawStore.drawGraphicType === Link.Type">
+      <link-template></link-template>
+    </template>
+  </div>
   <div v-else class="q-pa-md"></div>
 </template>
 
 <script setup lang="ts">
+import LinkTemplate from './templates/LinkTemplate.vue';
+import { Link } from 'src/graphics/link/Link';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, ref } from 'vue';
 

src/components/draw-app/templates/LinkTemplate.vue

@@ -1,65 +1,57 @@
 <template>
-  <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
-    <q-input
-      filled
-      v-model="name"
-      label="Your name *"
-      hint="Name and surname"
-      lazy-rules
-      :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-    />
-
+  <q-form class="q-gutter-md">
     <q-input
       filled
+      v-model.number="template.lineWidth"
       type="number"
-      v-model="age"
-      label="Your age *"
+      label="线宽 *"
       lazy-rules
-      :rules="[
-        (val) => (val !== null && val !== '') || 'Please type your age',
-        (val) => (val > 0 && val < 100) || 'Please type a real age',
-      ]"
+      :rules="[(val) => (val && val.length > 0) || '线宽必须大于0']"
     />
 
-    <q-toggle v-model="accept" label="I accept the license and terms" />
-
-    <div>
-      <q-btn label="Submit" type="submit" color="primary" />
-      <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
-    </div>
+    <q-input
+      filled
+      v-model="template.lineColor"
+      label="线色 *"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色必须设置']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color v-model="template.lineColor" />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
   </q-form>
 </template>
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { ref } from 'vue';
+import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref } from 'vue';
 const $q = useQuasar();
 
-const name = ref(null);
-const age = ref(null);
-const accept = ref(false);
+const drawStore = useDrawStore();
+const template = reactive({
+  lineWidth: 1,
+  lineColor: '#0000ff',
+  curve: 0,
+  segmentsCount: 10,
+});
 
-function onSubmit() {
-  if (accept.value !== true) {
-    $q.notify({
-      color: 'red-5',
-      textColor: 'white',
-      icon: 'warning',
-      message: 'You need to accept the license and terms first',
-    });
-  } else {
-    $q.notify({
-      color: 'green-4',
-      textColor: 'white',
-      icon: 'cloud_done',
-      message: 'Submitted',
-    });
+onMounted(() => {
+  const type = drawStore.drawGraphicType;
+  if (type) {
+    const app = drawStore.getDrawApp();
+    const plugin = app.interactionPlugin<LinkDraw>(type);
+    const gt = plugin.graphicTemplate;
+    template.lineWidth = gt.lineWidth;
+    template.lineColor = gt.lineColor;
+    template.curve = gt.curve ? 1 : 0;
+    template.segmentsCount = gt.segmentsCount;
   }
-}
-
-function onReset() {
-  name.value = null;
-  age.value = null;
-  accept.value = false;
-}
+});
 </script>

src/layouts/DrawLayout.vue

@@ -108,7 +108,7 @@
 
 <script setup lang="ts">
 import DrawProperties from 'src/components/draw-app/DrawProperties.vue';
-import { getDrawApp, initDrawApp, loadDrawDatas } from 'src/examples/app';
+import { getDrawApp, loadDrawDatas } from 'src/examples/app';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, onUnmounted, ref } from 'vue';
 

src/stores/draw-store.ts

@@ -1,28 +1,37 @@
 import { defineStore } from 'pinia';
-import { destroyDrawApp, initDrawApp } from 'src/examples/app';
-import { GraphicDrawAssistant } from 'src/jlgraphic';
+import { destroyDrawApp, getDrawApp, initDrawApp } from 'src/examples/app';
+import { GraphicDrawAssistant, JlDrawApp } from 'src/jlgraphic';
 
 export const useDrawStore = defineStore('draw', {
   state: () => ({
-    drawMode: false,
+    drawGraphicType: null as string | null,
   }),
-  getters: {},
+  getters: {
+    drawMode: (state) => state.drawGraphicType != null,
+  },
   actions: {
+    getDrawApp(): JlDrawApp {
+      const app = getDrawApp();
+      if (app == null) {
+        throw new Error('未初始化app');
+      }
+      return app;
+    },
     initDrawApp(dom: HTMLElement) {
       const app = initDrawApp(dom);
       app.on('interaction-plugin-resume', (plugin) => {
         if (plugin.isAppPlugin()) {
           if (plugin instanceof GraphicDrawAssistant) {
-            this.drawMode = true;
+            this.drawGraphicType = plugin.name;
           } else {
-            this.drawMode = false;
+            this.drawGraphicType = null;
           }
         }
       });
       return app;
     },
     destroy() {
-      this.drawMode = false;
+      this.drawGraphicType = null;
       destroyDrawApp();
     },
   },