+
{
const elementTypeMap = {
- 'image': ImageElementOperate,
- 'text': TextElementOperate,
- 'shape': ShapeElementOperate,
- 'line': LineElementOperate,
+ [ElementTypes.IMAGE]: ImageElementOperate,
+ [ElementTypes.TEXT]: TextElementOperate,
+ [ElementTypes.SHAPE]: ShapeElementOperate,
+ [ElementTypes.LINE]: LineElementOperate,
+ [ElementTypes.CHART]: ChartElementOperate,
}
return elementTypeMap[props.elementInfo.type] || null
})
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue
new file mode 100644
index 00000000..8c37f3ef
--- /dev/null
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue
@@ -0,0 +1,13 @@
+
+
+ chart-style-panel
+
+
+
+
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
index c4f3ad3f..e6687bac 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue
@@ -17,6 +17,7 @@ import TextStylePanel from './TextStylePanel.vue'
import ImageStylePanel from './ImageStylePanel.vue'
import ShapeStylePanel from './ShapeStylePanel.vue'
import LineStylePanel from './LineStylePanel.vue'
+import ChartStylePanel from './ChartStylePanel.vue'
export default defineComponent({
name: 'element-style-panel',
@@ -32,6 +33,7 @@ export default defineComponent({
[ElementTypes.IMAGE]: ImageStylePanel,
[ElementTypes.SHAPE]: ShapeStylePanel,
[ElementTypes.LINE]: LineStylePanel,
+ [ElementTypes.CHART]: ChartStylePanel,
}
return panelMap[handleElement.value.type] || null
})
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 768a02e2..37311fe0 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -29,7 +29,7 @@ export default {
margin-left: 8px;
flex: 1;
}
-.color-btn-icon {
+svg.color-btn-icon {
width: 30px;
font-size: 12px;
margin-top: 2px;
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index 700ccaf9..301877b1 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -9,6 +9,7 @@
@@ -17,12 +18,13 @@
import { computed, defineComponent, PropType, Ref } from 'vue'
import { useStore } from 'vuex'
import { State } from '@/store'
-import { PPTElement, Slide } from '@/types/slides'
+import { ElementTypes, PPTElement, Slide } from '@/types/slides'
import BaseImageElement from '@/views/components/element/ImageElement/BaseImageElement.vue'
import BaseTextElement from '@/views/components/element/TextElement/BaseTextElement.vue'
import BaseShapeElement from '@/views/components/element/ShapeElement/BaseShapeElement.vue'
import BaseLineElement from '@/views/components/element/LineElement/BaseLineElement.vue'
+import BaseChartElement from '@/views/components/element/ChartElement/BaseChartElement.vue'
export default defineComponent({
name: 'screen-element',
@@ -43,10 +45,11 @@ export default defineComponent({
setup(props) {
const currentElementComponent = computed(() => {
const elementTypeMap = {
- 'image': BaseImageElement,
- 'text': BaseTextElement,
- 'shape': BaseShapeElement,
- 'line': BaseLineElement,
+ [ElementTypes.IMAGE]: BaseImageElement,
+ [ElementTypes.TEXT]: BaseTextElement,
+ [ElementTypes.SHAPE]: BaseShapeElement,
+ [ElementTypes.LINE]: BaseLineElement,
+ [ElementTypes.CHART]: BaseChartElement,
}
return elementTypeMap[props.elementInfo.type] || null
})
diff --git a/src/views/Screen/ScreenSlide.vue b/src/views/Screen/ScreenSlide.vue
index 7341e98b..d30102dd 100644
--- a/src/views/Screen/ScreenSlide.vue
+++ b/src/views/Screen/ScreenSlide.vue
@@ -20,7 +20,7 @@
+
+
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
new file mode 100644
index 00000000..ee690714
--- /dev/null
+++ b/src/views/components/element/ChartElement/index.vue
@@ -0,0 +1,94 @@
+
+ handleSelectElement($event)"
+ >
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index 9e7e2d72..f883e6a2 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -4,6 +4,7 @@
top: elementInfo.top + 'px',
left: elementInfo.left + 'px',
width: elementInfo.width + 'px',
+ height: elementInfo.height + 'px',
transform: `rotate(${elementInfo.rotate}deg)`,
}"
>
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index c315eebe..fd4c2eb0 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -5,6 +5,7 @@
top: elementInfo.top + 'px',
left: elementInfo.left + 'px',
width: elementInfo.width + 'px',
+ height: elementInfo.height + 'px',
transform: `rotate(${elementInfo.rotate}deg)`,
}"
@mousedown="$event => handleSelectElement($event)"