From 395df00bd2504858f83b8162a16c3025bc6c33c9 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu <1171051090@qq.com> Date: Sat, 9 Jan 2021 15:49:29 +0800 Subject: [PATCH] update --- src/components/IconFont.ts | 2 +- src/hooks/useSlideBackgroundStyle.ts | 15 +++- src/main.ts | 45 +++++++++++ src/types/slides.ts | 1 + .../Editor/Canvas/ElementCreateSelection.vue | 5 -- .../Canvas/Operate/ImageClipHandler.vue | 5 -- src/views/Editor/CanvasTool/LinePool.vue | 2 - src/views/Editor/CanvasTool/ShapePool.vue | 5 -- src/views/Editor/CanvasTool/index.vue | 46 +++-------- src/views/Editor/EditorHeader/index.vue | 6 +- .../Editor/Toolbar/ElementAnimationPanel.vue | 15 +--- .../Editor/Toolbar/ElementPositionPanel.vue | 29 +------ .../ElementStylePanel/TextStylePanel.vue | 77 ++++--------------- .../Editor/Toolbar/MultiPositionPanel.vue | 10 --- src/views/Editor/Toolbar/SlideStylePanel.vue | 2 +- .../Editor/Toolbar/common/ElementOpacity.vue | 5 -- .../Editor/Toolbar/common/ElementOutline.vue | 16 +--- .../Editor/Toolbar/common/ElementShadow.vue | 14 +--- .../components/element/ElementOutline.vue | 6 +- .../ImageElement/ImageEllipseOutline.vue | 4 - .../ImageElement/ImagePolygonOutline.vue | 4 - .../element/ImageElement/ImageRectOutline.vue | 4 - .../element/LineElement/BaseLineElement.vue | 2 - .../components/element/LineElement/index.vue | 2 - .../element/ShapeElement/BaseShapeElement.vue | 5 -- .../components/element/ShapeElement/index.vue | 5 -- 26 files changed, 95 insertions(+), 237 deletions(-) diff --git a/src/components/IconFont.ts b/src/components/IconFont.ts index 7622167b..b17bb0f6 100644 --- a/src/components/IconFont.ts +++ b/src/components/IconFont.ts @@ -3,5 +3,5 @@ import { createFromIconfontCN } from '@ant-design/icons-vue' export default createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/font_2317509_4g5g5hxi0xh.js', + scriptUrl: '//at.alicdn.com/t/font_2317509_83tu8tohuv.js', }) as any \ No newline at end of file diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index 41e74564..fbfa15b1 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -5,9 +5,20 @@ export default (background: Ref) => { const backgroundStyle = computed(() => { if(!background.value) return { backgroundColor: '#fff' } - const { type, value } = background.value + const { type, value, size } = background.value if(type === 'solid') return { backgroundColor: value } - else if(type === 'image') return { backgroundImage: `url(${value}` } + else if(type === 'image') { + if(size === 'repeat') { + return { + backgroundImage: `url(${value}`, + backgroundRepeat: 'repeat', + } + } + return { + backgroundImage: `url(${value}`, + backgroundSize: size, + } + } return { backgroundColor: '#fff' } }) diff --git a/src/main.ts b/src/main.ts index 476e44b0..002a4b1c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,8 +11,53 @@ import 'animate.css' import contextmenu from './plugins/contextmenu' import clickOutside from './plugins/clickOutside' +import IconFont from '@/components/IconFont' +import FileInput from '@/components/FileInput.vue' +import SvgWrapper from '@/components/SvgWrapper.vue' +import CheckboxButton from '@/components/CheckboxButton.vue' +import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' +import ColorPicker from '@/components/ColorPicker/index.vue' + +import { + InputNumber, + Divider, + Button, + Tooltip, + Popover, + Slider, + Select, + Switch, + Radio, + Input, +} from 'ant-design-vue' + const app = createApp(App) + +app.component('InputNumber', InputNumber) +app.component('Divider', Divider) +app.component('Button', Button) +app.component('ButtonGroup', Button.Group) +app.component('Tooltip', Tooltip) +app.component('Popover', Popover) +app.component('Slider', Slider) +app.component('Select', Select) +app.component('SelectOption', Select.Option) +app.component('Switch', Switch) +app.component('Radio', Radio) +app.component('RadioGroup', Radio.Group) +app.component('RadioButton', Radio.Button) +app.component('Input', Input) +app.component('InputGroup', Input.Group) + app.use(contextmenu) app.use(clickOutside) + +app.component('IconFont', IconFont) +app.component('FileInput', FileInput) +app.component('SvgWrapper', SvgWrapper) +app.component('CheckboxButton', CheckboxButton) +app.component('CheckboxButtonGroup', CheckboxButtonGroup) +app.component('ColorPicker', ColorPicker) + app.use(store) app.mount('#app') diff --git a/src/types/slides.ts b/src/types/slides.ts index 76ed095a..7ffb5bf3 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -153,6 +153,7 @@ export interface PPTAnimation { export interface SlideBackground { type: 'solid' | 'image'; value: string; + size?: 'cover' | 'contain' | 'repeat'; } export interface Slide { diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue index def3b4b7..ea1ad05a 100644 --- a/src/views/Editor/Canvas/ElementCreateSelection.vue +++ b/src/views/Editor/Canvas/ElementCreateSelection.vue @@ -32,13 +32,8 @@ import { computed, defineComponent, onMounted, reactive, Ref, ref } from 'vue' import { useStore } from 'vuex' import { MutationTypes, State } from '@/store' -import SvgWrapper from '@/components/SvgWrapper.vue' - export default defineComponent({ name: 'element-create-selection', - components: { - SvgWrapper, - }, setup(props, { emit }) { const store = useStore() const ctrlOrShiftKeyActive: Ref = computed(() => store.getters.ctrlOrShiftKeyActive) diff --git a/src/views/Editor/Canvas/Operate/ImageClipHandler.vue b/src/views/Editor/Canvas/Operate/ImageClipHandler.vue index dfe9ce59..ba011640 100644 --- a/src/views/Editor/Canvas/Operate/ImageClipHandler.vue +++ b/src/views/Editor/Canvas/Operate/ImageClipHandler.vue @@ -52,15 +52,10 @@ import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, import { KEYS } from '@/configs/hotkey' import { ImageClipData, ImageClipDataRange, ImageClipedEmitData } from '@/types/edit' -import SvgWrapper from '@/components/SvgWrapper.vue' - type ScaleClipRangeType = 't-l' | 't-r' | 'b-l' | 'b-r' export default defineComponent({ name: 'image-clip-handler', - components: { - SvgWrapper, - }, props: { src: { type: String, diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue index c64de9f1..6e5f6123 100644 --- a/src/views/Editor/CanvasTool/LinePool.vue +++ b/src/views/Editor/CanvasTool/LinePool.vue @@ -47,13 +47,11 @@ import { defineComponent } from 'vue' import { LINE_LIST, LinePoolItem } from '@/configs/lines' -import SvgWrapper from '@/components/SvgWrapper.vue' import LinePointMarker from '@/views/components/element/LineElement/LinePointMarker.vue' export default defineComponent({ name: 'line-pool', components: { - SvgWrapper, LinePointMarker, }, setup(props, { emit }) { diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue index c8865c1f..030aa63a 100644 --- a/src/views/Editor/CanvasTool/ShapePool.vue +++ b/src/views/Editor/CanvasTool/ShapePool.vue @@ -31,13 +31,8 @@ import { defineComponent } from 'vue' import { SHAPE_LIST, ShapePoolItem } from '@/configs/shapes' -import SvgWrapper from '@/components/SvgWrapper.vue' - export default defineComponent({ name: 'shape-pool', - components: { - SvgWrapper, - }, setup(props, { emit }) { const shapeList = SHAPE_LIST diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue index 66521fed..192cbabd 100644 --- a/src/views/Editor/CanvasTool/index.vue +++ b/src/views/Editor/CanvasTool/index.vue @@ -1,35 +1,35 @@ @@ -47,38 +47,12 @@ import useCreateElement from '@/hooks/useCreateElement' import ShapePool from './ShapePool.vue' import LinePool from './LinePool.vue' -import FileInput from '@/components/FileInput.vue' -import { Popover } from 'ant-design-vue' -import { - UndoOutlined, - RedoOutlined, - FontSizeOutlined, - PictureOutlined, - StarOutlined, - LineOutlined, - TableOutlined, - PieChartOutlined, - MinusOutlined, - PlusOutlined, -} from '@ant-design/icons-vue' export default defineComponent({ name: 'canvas-tool', components: { ShapePool, LinePool, - FileInput, - UndoOutlined, - RedoOutlined, - FontSizeOutlined, - PictureOutlined, - StarOutlined, - LineOutlined, - TableOutlined, - PieChartOutlined, - MinusOutlined, - PlusOutlined, - Popover, }, setup() { const store = useStore() diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue index dfbc8705..f3efcf97 100644 --- a/src/views/Editor/EditorHeader/index.vue +++ b/src/views/Editor/EditorHeader/index.vue @@ -11,7 +11,7 @@
- +
@@ -19,13 +19,9 @@ diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue index a22cc4b7..511c1466 100644 --- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue +++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue @@ -45,10 +45,10 @@
【{{element.elType}}】{{element.animationType}}
- + - +
@@ -67,11 +67,6 @@ import { ELEMENT_TYPE } from '@/configs/element' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import Draggable from 'vuedraggable' -import { Button, Divider, Popover, Tooltip } from 'ant-design-vue' -import { - PlayCircleOutlined, - CloseOutlined, -} from '@ant-design/icons-vue' const animationTypes: { [key: string]: string } = {} for(const type of ANIMATIONS) { @@ -84,12 +79,6 @@ export default defineComponent({ name: 'element-animation-panel', components: { Draggable, - Button, - Divider, - PlayCircleOutlined, - CloseOutlined, - Popover, - Tooltip, }, setup() { const store = useStore() diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue index 640c19ec..fb4d9ec8 100644 --- a/src/views/Editor/Toolbar/ElementPositionPanel.vue +++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue @@ -75,10 +75,10 @@ />
@@ -106,10 +106,10 @@
旋转：
- + - +
() const handleElement: Ref = computed(() => store.getters.handleElement) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue index 994afb4f..1c624df9 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue @@ -31,7 +31,7 @@ @@ -45,7 +45,7 @@ @@ -59,7 +59,7 @@ @@ -72,28 +72,28 @@ style="flex: 1;" :checked="richTextAttrs.bold" @click="emitRichTextCommand('bold')" - > + > + > + > + > @@ -143,13 +143,13 @@ @change="e => emitRichTextCommand('align', e.target.value)" > - + - + - + @@ -159,14 +159,14 @@ style="flex: 1;" :checked="richTextAttrs.bulletList" @click="emitRichTextCommand('bulletList')" - > + > + > @@ -175,14 +175,14 @@
行间距：
字间距：
@@ -208,27 +208,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot' import ElementOpacity from '../common/ElementOpacity.vue' import ElementOutline from '../common/ElementOutline.vue' import ElementShadow from '../common/ElementShadow.vue' -import ColorPicker from '@/components/ColorPicker/index.vue' -import CheckboxButton from '@/components/CheckboxButton.vue' -import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' -import { Select, Input, Button, Divider, Popover, Radio, Tooltip } from 'ant-design-vue' -import { - FontColorsOutlined, - HighlightOutlined, - BgColorsOutlined, - BoldOutlined, - ItalicOutlined, - UnderlineOutlined, - StrikethroughOutlined, - AlignLeftOutlined, - AlignCenterOutlined, - AlignRightOutlined, - OrderedListOutlined, - UnorderedListOutlined, - ColumnHeightOutlined, - ColumnWidthOutlined, -} from '@ant-design/icons-vue' -import IconFont from '@/components/IconFont' export default defineComponent({ name: 'text-style-panel', @@ -236,34 +215,6 @@ export default defineComponent({ ElementOpacity, ElementOutline, ElementShadow, - ColorPicker, - CheckboxButton, - CheckboxButtonGroup, - Select, - SelectOption: Select.Option, - InputGroup: Input.Group, - Button, - ButtonGroup: Button.Group, - Divider, - Popover, - RadioGroup: Radio.Group, - RadioButton: Radio.Button, - Tooltip, - FontColorsOutlined, - HighlightOutlined, - BgColorsOutlined, - BoldOutlined, - ItalicOutlined, - UnderlineOutlined, - StrikethroughOutlined, - AlignLeftOutlined, - AlignCenterOutlined, - AlignRightOutlined, - OrderedListOutlined, - UnorderedListOutlined, - ColumnHeightOutlined, - ColumnWidthOutlined, - IconFont, }, setup() { const store = useStore() diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue index 110a0143..4b54e2f5 100644 --- a/src/views/Editor/Toolbar/MultiPositionPanel.vue +++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue @@ -42,18 +42,8 @@ import { getElementListRange } from '@/utils/element' import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useCombineElement from '@/hooks/useCombineElement' -import { Button, Divider, Tooltip } from 'ant-design-vue' -import IconFont from '@/components/IconFont' - export default defineComponent({ name: 'multi-position-panel', - components: { - Button, - ButtonGroup: Button.Group, - Divider, - Tooltip, - IconFont, - }, setup() { const store = useStore() const activeElementIdList = computed(() => store.state.activeElementIdList) diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index c9dec99c..e37a0ee6 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -1,6 +1,6 @@ diff --git a/src/views/Editor/Toolbar/common/ElementOpacity.vue b/src/views/Editor/Toolbar/common/ElementOpacity.vue index 5d14988c..ff18d375 100644 --- a/src/views/Editor/Toolbar/common/ElementOpacity.vue +++ b/src/views/Editor/Toolbar/common/ElementOpacity.vue @@ -21,13 +21,8 @@ import { MutationTypes, State } from '@/store' import { PPTElement } from '@/types/slides' import useHistorySnapshot from '@/hooks/useHistorySnapshot' -import { Slider } from 'ant-design-vue' - export default defineComponent({ name: 'element-opacity', - components: { - Slider, - }, setup() { const store = useStore() const handleElement: Ref = computed(() => store.getters.handleElement) diff --git a/src/views/Editor/Toolbar/common/ElementOutline.vue b/src/views/Editor/Toolbar/common/ElementOutline.vue index d1721201..891e07c5 100644 --- a/src/views/Editor/Toolbar/common/ElementOutline.vue +++ b/src/views/Editor/Toolbar/common/ElementOutline.vue @@ -32,7 +32,7 @@
@@ -55,22 +55,8 @@ import { MutationTypes, State } from '@/store' import { PPTElement, PPTElementOutline } from '@/types/slides' import useHistorySnapshot from '@/hooks/useHistorySnapshot' -import ColorPicker from '@/components/ColorPicker/index.vue' -import { Select, Button, Popover, InputNumber, Switch } from 'ant-design-vue' -import { DownOutlined } from '@ant-design/icons-vue' - export default defineComponent({ name: 'element-outline', - components: { - ColorPicker, - Select, - SelectOption: Select.Option, - Button, - Popover, - InputNumber, - Switch, - DownOutlined, - }, setup() { const store = useStore() const handleElement: Ref = computed(() => store.getters.handleElement) diff --git a/src/views/Editor/Toolbar/common/ElementShadow.vue b/src/views/Editor/Toolbar/common/ElementShadow.vue index 50027489..ffa523c2 100644 --- a/src/views/Editor/Toolbar/common/ElementShadow.vue +++ b/src/views/Editor/Toolbar/common/ElementShadow.vue @@ -51,7 +51,7 @@ @@ -66,20 +66,8 @@ import { MutationTypes, State } from '@/store' import { PPTElement, PPTElementShadow } from '@/types/slides' import useHistorySnapshot from '@/hooks/useHistorySnapshot' -import ColorPicker from '@/components/ColorPicker/index.vue' -import { Slider, Button, Popover, Switch } from 'ant-design-vue' -import { DownOutlined } from '@ant-design/icons-vue' - export default defineComponent({ name: 'element-shadow', - components: { - ColorPicker, - Slider, - Button, - Popover, - Switch, - DownOutlined, - }, setup() { const store = useStore() const handleElement: Ref = computed(() => store.getters.handleElement) diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue index 021a92be..76415ac7 100644 --- a/src/views/components/element/ElementOutline.vue +++ b/src/views/components/element/ElementOutline.vue @@ -23,14 +23,10 @@