移除chart元素和组件

package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "ant-design-vue": "^2.0.0-rc.3",
-    "chart.js": "^2.9.4",
     "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
@@ -35,7 +34,6 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
-    "@types/chart.js": "^2.9.29",
     "@types/clipboard": "^2.0.1",
     "@types/crypto-js": "^4.0.1",
     "@types/jest": "^24.0.19",

src/components/Chart.vue

@@ -1,130 +0,0 @@
-<template>
-  <div 
-    class="chart"
-    :style="{
-      width: width * scale + 'px',
-      height: height * scale + 'px',
-      transform: `scale(${1 / scale})`,
-    }"
-  >
-    <canvas ref="canvasRef"></canvas>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, watch } from 'vue'
-import Chart from 'chart.js'
-import { ChartData, ChartType } from '@/types/slides'
-
-const commonConfigs = {
-  backgroundColor: 'rgba(209, 68, 36, 0.3)',
-  borderColor: 'rgba(209, 68, 36)',
-  borderWidth: 2,
-}
-
-const defaultOptions: Chart.ChartOptions = {
-  maintainAspectRatio: false,
-  animation: {
-    duration: 0,
-  },
-  hover: {
-    animationDuration: 0,
-  },
-  responsiveAnimationDuration: 0,
-  layout: {
-    padding: {
-      left: 5,
-      right: 5,
-      top: 5,
-      bottom: 5,
-    },
-  },
-  legend: {
-    display: false,
-  },
-  elements: {
-    line: {
-      tension: 0,
-      fill: false,
-      ...commonConfigs,
-    },
-    rectangle: {
-      ...commonConfigs,
-    },
-    arc: {
-      ...commonConfigs,
-    },
-  },
-}
-
-export default defineComponent({
-  name: 'chart',
-  props: {
-    type: {
-      type: String as PropType<ChartType>,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    height: {
-      type: Number,
-      required: true,
-    },
-    data: {
-      type: Object as PropType<ChartData>,
-      required: true,
-    },
-    options: {
-      type: Object as PropType<Chart.ChartOptions>,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
-  setup(props) {
-    const canvasRef = ref<HTMLCanvasElement | null>(null)
-    let chart: Chart
-
-    const data = computed(() => ({
-      labels: props.data.labels,
-      datasets: props.data.series.map(item => ({ data: item })),
-    }))
-
-    const options = computed(() => {
-      const options = props.options || {}
-      return { ...defaultOptions, ...options }
-    })
-
-    watch(data, () => {
-      if(!chart) return
-      chart.data = data.value
-      chart.update()
-    })
-
-    onMounted(() => {
-      if(!canvasRef.value) return
-      const ctx = canvasRef.value.getContext('2d') as CanvasRenderingContext2D
-      chart = new Chart(ctx, {
-        type: props.type,
-        data: data.value,
-        options: options.value,
-      })
-    })
-
-    onUnmounted(() => chart.destroy())
-
-    return {
-      canvasRef,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.chart {
-  transform-origin: 0 0;
-}
-</style>

src/mocks/index.ts

@@ -73,26 +73,6 @@ export const slides: Slide[] = [
       },
     ],
   },
-  {
-    id: 'sahduyi',
-    elements: [
-      {
-        id: 'sdasdax',
-        type: 'chart',
-        left: 0,
-        top: 0,
-        width: 400,
-        height: 400,
-        chartType: 'line',
-        data: {
-          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-          series: [
-            [12, 19, 3, 5, 4, 18],
-          ]
-        },
-      },
-    ],
-  },
   {
     id: 'sajd172',
     elements: [

src/types/slides.ts

@@ -122,7 +122,6 @@ export interface PPTChartElement {
   chartType: ChartType;
   data: ChartData;
   outline?: PPTElementOutline;
-  theme?: string;
 }
 
 export interface TableElementCell {

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue

@@ -1,13 +1,27 @@
 <template>
   <div class="chart-style-panel">
-    chart-style-panel
+    <ElementOutline />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import ElementOutline from '../common/ElementOutline.vue'
+
 export default defineComponent({
   name: 'chart-style-panel',
+  components: {
+    ElementOutline,
+  },
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style>

src/views/Screen/ScreenElement.vue

@@ -9,7 +9,6 @@
     <component
       :is="currentElementComponent"
       :elementInfo="elementInfo"
-      target="screen"
     ></component>
   </div>
 </template>

src/views/Screen/ScreenSlide.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { computed, PropType, defineComponent, inject } from 'vue'
+import { computed, PropType, defineComponent } from 'vue'
 import { Slide } from '@/types/slides'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@@ -37,6 +37,10 @@ export default defineComponent({
       type: Object as PropType<Slide>,
       required: true,
     },
+    scale: {
+      type: Number,
+      required: true,
+    },
     animationIndex: {
       type: Number,
       default: -1,
@@ -46,10 +50,7 @@ export default defineComponent({
     const background = computed(() => props.slide.background)
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 
-    const scale = inject('scale')
-
     return {
-      scale,
       backgroundStyle,
       VIEWPORT_SIZE,
       VIEWPORT_ASPECT_RATIO,

src/views/Screen/index.vue

@@ -27,6 +27,7 @@
         >
           <ScreenSlide 
             :slide="slide" 
+            :scale="scale"
             :animationIndex="animationIndex"
           />
         </div>
@@ -58,7 +59,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted, provide, Ref, ref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, Ref, ref } from 'vue'
 import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
 import { MutationTypes, State } from '@/store'
@@ -89,7 +90,6 @@ export default defineComponent({
     const slideHeight = ref(0)
 
     const scale = computed(() => slideWidth.value / VIEWPORT_SIZE)
-    provide('scale', scale)
 
     const slideThumbnailModelVisible = ref(false)
 

src/views/components/ThumbnailSlide/index.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { computed, PropType, defineComponent, provide } from 'vue'
+import { computed, PropType, defineComponent } from 'vue'
 import { Slide } from '@/types/slides'
 import { VIEWPORT_SIZE, VIEWPORT_ASPECT_RATIO } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
@@ -52,7 +52,6 @@ export default defineComponent({
     const { backgroundStyle } = useSlideBackgroundStyle(background)
 
     const scale = computed(() => props.size / VIEWPORT_SIZE)
-    provide('scale', 1)
 
     return {
       scale,

src/views/components/element/ChartElement/BaseChartElement.vue

@@ -13,47 +13,27 @@
         :height="elementInfo.height"
         :outline="elementInfo.outline"
       />
-      <Chart
-        :type="elementInfo.chartType"
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :data="elementInfo.data"
-        :scale="scale"
-        :options="target === 'thumbnail' ? { tooltips: { enabled: false } } : {}"
-      />
+      Chart
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
-import Chart from '@/components/Chart.vue'
 
 export default defineComponent({
   name: 'base-element-chart',
   components: {
     ElementOutline,
-    Chart,
   },
   props: {
     elementInfo: {
       type: Object as PropType<PPTChartElement>,
       required: true,
     },
-    target: {
-      type: String as PropType<'thumbnail' | 'screen'>,
-      required: true,
-    },
-  },
-  setup() {
-    const scale = inject('scale') || 1
-
-    return {
-      scale,
-    }
   },
 })
 </script>

src/views/components/element/ChartElement/index.vue

@@ -18,32 +18,22 @@
         :height="elementInfo.height"
         :outline="elementInfo.outline"
       />
-      <Chart
-        :type="elementInfo.chartType"
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :data="elementInfo.data"
-        :scale="canvasScale"
-      />
+      Chart
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from 'vuex'
-import { State } from '@/store'
+import { defineComponent, PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
-import Chart from '@/components/Chart.vue'
 
 export default defineComponent({
   name: 'editable-element-chart',
   components: {
     ElementOutline,
-    Chart,
   },
   props: {
     elementInfo: {
@@ -66,12 +56,8 @@ export default defineComponent({
       props.selectElement(e, props.elementInfo)
     }
 
-    const store = useStore<State>()
-    const canvasScale = computed(() => store.state.canvasScale)
-
     return {
       handleSelectElement,
-      canvasScale,
     }
   },
 })