File size: 2,366 Bytes
89ce340
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>

  <div class="editable-element-chart"

    :class="{ 'lock': elementInfo.lock }"

    :style="{

      top: elementInfo.top + 'px',

      left: elementInfo.left + 'px',

      width: elementInfo.width + 'px',

      height: elementInfo.height + 'px',

    }"

  >

    <div

      class="rotate-wrapper"

      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"

    >

      <div 

        class="element-content" 

        :style="{

          backgroundColor: elementInfo.fill,

        }"

        v-contextmenu="contextmenus"

        @mousedown="$event => handleSelectElement($event)"

        @touchstart="$event => handleSelectElement($event)"

        @dblclick="openDataEditor()"

      >

        <ElementOutline

          :width="elementInfo.width"

          :height="elementInfo.height"

          :outline="elementInfo.outline"

        />

        <Chart

          :width="elementInfo.width"

          :height="elementInfo.height"

          :type="elementInfo.chartType"

          :data="elementInfo.data"

          :themeColors="elementInfo.themeColors"

          :textColor="elementInfo.textColor"

          :options="elementInfo.options"

        />

      </div>

    </div>

  </div>

</template>



<script lang="ts" setup>

import type { PPTChartElement } from '@/types/slides'

import type { ContextmenuItem } from '@/components/Contextmenu/types'

import emitter, { EmitterEvents } from '@/utils/emitter'



import ElementOutline from '@/views/components/element/ElementOutline.vue'

import Chart from './Chart.vue'



const props = defineProps<{

  elementInfo: PPTChartElement

  selectElement: (e: MouseEvent | TouchEvent, element: PPTChartElement, canMove?: boolean) => void

  contextmenus: () => ContextmenuItem[] | null

}>()



const handleSelectElement = (e: MouseEvent | TouchEvent) => {

  if (props.elementInfo.lock) return

  e.stopPropagation()



  props.selectElement(e, props.elementInfo)

}



const openDataEditor = () => {

  emitter.emit(EmitterEvents.OPEN_CHART_DATA_EDITOR)

}

</script>



<style lang="scss" scoped>

.editable-element-chart {

  position: absolute;



  &.lock .element-content {

    cursor: default;

  }

}

.rotate-wrapper {

  width: 100%;

  height: 100%;

}

.element-content {

  width: 100%;

  height: 100%;

  overflow: hidden;

  cursor: move;

}

</style>