画图工具栏

quasar.config.js

@@ -47,6 +47,7 @@ module.exports = configure(function (/* ctx */) {
 
       'roboto-font', // optional, you are not bound to it
       'material-icons', // optional, you are not bound to it
+      'material-symbols-outlined',
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build

src/graphics/iscs-fan/IscsFanDrawAssistant.ts

@@ -15,7 +15,7 @@ export class IscsFanDraw extends GraphicDrawAssistant<
 
   constructor(app: JlDrawApp, createData: () => IIscsFanData) {
     const template = new IscsFanTemplate();
-    super(app, template, createData, IscsFan.Type, '风机');
+    super(app, template, createData, 'sym_o_horizontal_rule', '风机');
     IscsFanInteraction.init(app);
   }
 

src/graphics/link/LinkDrawAssistant.ts

@@ -68,7 +68,7 @@ export class LinkDraw extends GraphicDrawAssistant<LinkTemplate, ILinkData> {
   });
 
   constructor(app: JlDrawApp, createData: () => ILinkData) {
-    super(app, new LinkTemplate(), createData, Link.Type, '轨道Link');
+    super(app, new LinkTemplate(), createData, 'sym_o_horizontal_rule', '轨道Link');
     this.container.addChild(this.graphic);
     this.graphicTemplate.curve = true;
 

src/graphics/platform/PlatformDrawAssistant.ts

@@ -32,7 +32,7 @@ export class PlatformDraw extends GraphicDrawAssistant<
       app,
       new PlatformTemplate(),
       createData,
-      Platform.Type,
+      'sym_o_horizontal_rule',
       '站台Platform'
     );
     this.container.addChild(this.platformGraphic);

src/graphics/rect/RectDrawAssistant.ts

@@ -44,7 +44,7 @@ export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
   rectGraphic: Graphics = new Graphics();
 
   constructor(app: JlDrawApp, createData: () => IRectData) {
-    super(app, new RectTemplate(), createData, Rect.Type, '站台Rect');
+    super(app, new RectTemplate(), createData, 'sym_o_square', '站台Rect');
     this.container.addChild(this.rectGraphic);
     RectPointsEditPlugin.init(app);
   }

src/graphics/signal/SignalDrawAssistant.ts

@@ -36,7 +36,13 @@ export class SignalDraw extends GraphicDrawAssistant<
   });
 
   constructor(app: JlDrawApp, createData: () => ISignalData) {
-    super(app, new SignalTemplate(), createData, Signal.Type, '信号机Signal');
+    super(
+      app,
+      new SignalTemplate(),
+      createData,
+      'sym_o_horizontal_rule',
+      '信号机Signal'
+    );
     this.container.addChild(this.codeGraph);
     this.container.addChild(this.lampPost);
     this.container.addChild(this.circularLamp);

src/graphics/station/StationDrawAssistant.ts

@@ -21,7 +21,13 @@ export class StationDraw extends GraphicDrawAssistant<
   codeGraph: VectorText = new VectorText('');
 
   constructor(app: JlDrawApp, createData: () => IStationData) {
-    super(app, new StationTemplate(), createData, Station.Type, '车站Station');
+    super(
+      app,
+      new StationTemplate(),
+      createData,
+      'sym_o_horizontal_rule',
+      '车站Station'
+    );
     this.container.addChild(this.codeGraph);
     stationInteraction.init(app);
   }

src/graphics/train/TrainDrawAssistant.ts

@@ -20,7 +20,13 @@ export class TrainDraw extends GraphicDrawAssistant<TrainTemplate, ITrainData> {
   codeRact: Graphics = new Graphics();
 
   constructor(app: JlDrawApp, createData: () => ITrainData) {
-    super(app, new TrainTemplate(), createData, Train.Type, '列车Train');
+    super(
+      app,
+      new TrainTemplate(),
+      createData,
+      'directions_bus_filled',
+      '列车Train'
+    );
     this.container.addChild(this.arrowLeft);
     this.container.addChild(this.pauseLeft);
     this.container.addChild(this.codeRact);

src/layouts/DrawLayout.vue

@@ -5,10 +5,23 @@
         <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
 
         <q-toolbar-title>
-          <q-avatar>
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
-          </q-avatar>
-          Title
+          <q-btn-toggle
+            v-model="selectUtil"
+            color="brown"
+            text-color="white"
+            toggle-color="orange"
+            toggle-text-color="black"
+            :options="utilsOption"
+            @update:model-value="drawSelect"
+          >
+            <template
+              v-for="(ctl, idx) in utilsOption"
+              :key="idx"
+              v-slot:[ctl.value]
+            >
+              <q-tooltip>{{ ctl.tip }}</q-tooltip>
+            </template>
+          </q-btn-toggle>
         </q-toolbar-title>
 
         <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
@@ -110,11 +123,15 @@
 import DrawProperties from 'src/components/draw-app/DrawProperties.vue';
 import { getDrawApp, loadDrawDatas } from 'src/drawApp';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
-console.log(route.fullPath);
+const selectUtil = ref();
+const utilsOption: ControlItem[] = reactive([]);
+const drawSelect = (item: string) => {
+  getDrawApp()?.interactionPlugin(item).resume();
+};
 
 const drawStore = useDrawStore();
 
@@ -131,6 +148,24 @@ function toggleRightDrawer() {
 
 const link = ref('outbox');
 
+class ControlItem {
+  value: string;
+  slot: string;
+  icon: string;
+  tip: string;
+  show = true;
+
+  constructor(value: string, icon: string, tip: string, show?: boolean) {
+    this.value = value;
+    this.slot = value;
+    this.icon = icon;
+    this.tip = tip;
+    if (show != undefined) {
+      this.show = show;
+    }
+  }
+}
+
 onMounted(() => {
   console.log('绘制应用layout mounted');
   const dom = document.getElementById('draw-app-container');
@@ -142,6 +177,19 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
+  const drawAssistants = (getDrawApp()?._options as { drawAssistants: [] })
+    .drawAssistants;
+  drawAssistants.forEach(
+    (da: { name: string; icon: string; description: string }) => {
+      utilsOption.push(
+        new ControlItem(
+          da.name,
+          da.icon,
+          da.description ? da.description : da.name
+        )
+      );
+    }
+  );
 });
 
 const canvasWidth = ref(0);