添加插入图表相关

src/configs/element.ts

@@ -31,15 +31,15 @@ export const DEFAULT_LINE = {
 }
 
 export const DEFAULT_CHART = {
-  left: 0,
+  left: 300,
-  top: 0,
+  top: 81.25,
-  width: 500,
+  width: 400,
-  height: 500,
+  height: 400,
   data: {
-    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+    labels: ['类别1', '类别2', '类别3', '类别4', '类别5'],
     series: [
-      [12, 19, 3, 5, 2, 18],
+      [12, 19, 5, 2, 18],
-    ]
+    ],
   },
 }
 

src/views/Editor/CanvasTool/ChartPool.vue

@@ -0,0 +1,59 @@
+<template>
+  <ul class="chart-pool">
+    <li class="chart-item" v-for="(chart, index) in chartList" :key="index">
+      <div class="chart-content" @click="selectChart(chart)">
+        <IconChartLine size="24" v-if="chart === 'line'" />
+        <IconChartHistogram size="24" v-else-if="chart === 'bar'" />
+        <IconChartProportion size="24" v-else-if="chart === 'pie'" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'chart-pool',
+  setup(props, { emit }) {
+    const chartList = ['bar', 'line', 'pie']
+
+    const selectChart = (chart: string) => {
+      emit('select', chart)
+    }
+
+    return {
+      chartList,
+      selectChart,
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-pool {
+  width: 120px;
+  margin-bottom: -5px;
+
+  @include grid-layout-wrapper();
+}
+.chart-item {
+  @include grid-layout-item(3, 32%);
+
+  height: 0;
+  padding-bottom: 32%;
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+}
+.chart-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/views/Editor/CanvasTool/index.vue

@@ -34,12 +34,17 @@
           <IconConnection class="handler-item" />
         </Tooltip>
       </Popover>
+      <Popover trigger="click" v-model:visible="chartPoolVisible">
+        <template #content>
+          <ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
+        </template>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
+          <IconChartProportion class="handler-item" />
+        </Tooltip>
+      </Popover>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格">
         <IconInsertTable class="handler-item" />
       </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
-        <IconChartProportion class="handler-item" />
-      </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式">
         <IconFormula class="handler-item" />
       </Tooltip>
@@ -66,12 +71,14 @@ import useCreateElement from '@/hooks/useCreateElement'
 
 import ShapePool from './ShapePool.vue'
 import LinePool from './LinePool.vue'
+import ChartPool from './ChartPool.vue'
 
 export default defineComponent({
   name: 'canvas-tool',
   components: {
     ShapePool,
     LinePool,
+    ChartPool,
   },
   setup() {
     const store = useStore<State>()
@@ -84,7 +91,7 @@ export default defineComponent({
     const { scaleCanvas } = useScaleCanvas()
     const { redo, undo } = useHistorySnapshot()
 
-    const { createImageElement } = useCreateElement()
+    const { createImageElement, createChartElement } = useCreateElement()
 
     const insertImageElement = (files: File[]) => {
       const imageFile = files[0]
@@ -94,6 +101,8 @@ export default defineComponent({
 
     const shapePoolVisible = ref(false)
     const linePoolVisible = ref(false)
+    const chartPoolVisible = ref(false)
+
     const drawText = () => {
       store.commit(MutationTypes.SET_CREATING_ELEMENT, {
         type: 'text',
@@ -125,9 +134,11 @@ export default defineComponent({
       insertImageElement,
       shapePoolVisible,
       linePoolVisible,
+      chartPoolVisible,
       drawText,
       drawShape,
       drawLine,
+      createChartElement,
     }
   },
 })