jasder
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
pipipi-pikachu 2021-01-03 21:56:40 +08:00
parent 9fdbf35fa1
commit 8ae3efc3d4
10 changed files with 269 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -14,7 +14,5 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="//at.alicdn.com/t/font_2266335_di5qehm4txu.js"></script>
</body>
</html>

16
src/assets/styles/antd.scss Normal file
View File

@ -0,0 +1,16 @@
.ant-popover {
padding-top: 5px !important;
}
.ant-popover-arrow {
display: none;
}
.ant-popover-inner {
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
border: 1px solid #eee;
}
.ant-popover-inner-content {
padding: 12px !important;
}
.ant-btn {
font-size: 13px !important;
}

14
src/assets/styles/global.scss
View File

@ -60,17 +60,3 @@ a {
::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}
.ant-popover {
padding-top: 5px !important;
}
.ant-popover-arrow {
display: none;
}
.ant-popover-inner {
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
border: 1px solid #eee;
}
.ant-popover-inner-content {
padding: 12px !important;
}

1
src/main.ts
View File

@ -5,6 +5,7 @@ import store from './store'
import 'prosemirror-view/style/prosemirror.css'
import '@/assets/styles/prosemirror.scss'
import '@/assets/styles/global.scss'
import '@/assets/styles/antd.scss'
import 'animate.css'
import contextmenu from './plugins/contextmenu'

14
src/views/Editor/CanvasTool/index.vue
View File

@ -10,13 +10,13 @@
<FileInput @change="files => insertImageElement(files)">
<PictureOutlined class="handler-item" />
</FileInput>
<Popover trigger="click">
<Popover trigger="click" v-model:visible="isOpenShapePool">
<template v-slot:content>
<ShapePool @select="shape => drawShape(shape)" />
</template>
<StarOutlined class="handler-item" />
</Popover>
<Popover trigger="click">
<Popover trigger="click" v-model:visible="isOpenlinePool">
<template v-slot:content>
<LinePool @select="line => drawLine(line)" />
</template>
@ -35,7 +35,7 @@
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
import { MutationTypes, State } from '@/store'
import { getImageDataURL } from '@/utils/image'
@ -99,25 +99,27 @@ export default defineComponent({
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
}
const isOpenShapePool = ref(false)
const isOpenlinePool = ref(false)
const drawText = () => {
store.commit(MutationTypes.SET_CREATING_ELEMENT, {
type: 'text',
data: null,
})
}
const drawShape = (shape: ShapePoolItem) => {
store.commit(MutationTypes.SET_CREATING_ELEMENT, {
type: 'shape',
data: shape,
})
isOpenShapePool.value = false
}
const drawLine = (line: LinePoolItem) => {
store.commit(MutationTypes.SET_CREATING_ELEMENT, {
type: 'line',
data: line,
})
isOpenShapePool.value = false
}
return {
@ -128,6 +130,8 @@ export default defineComponent({
redo,
undo,
insertImageElement,
isOpenShapePool,
isOpenlinePool,
drawText,
drawShape,
drawLine,

86
src/views/Editor/Toolbar/ElementPositionPanel.vue
View File

@ -1,13 +1,95 @@
<template>
<div class="element-positopn-panel">
element-positopn-panel
<ButtonGroup class="row">
<Button style="flex: 1;">顶</Button>
<Button style="flex: 1;">底</Button>
<Button style="flex: 1;">上移</Button>
<Button style="flex: 1;">下移</Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;">左</Button>
<Button style="flex: 1;">中</Button>
<Button style="flex: 1;">右</Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;">上</Button>
<Button style="flex: 1;">中</Button>
<Button style="flex: 1;">下</Button>
</ButtonGroup>
<Divider />
<div class="row">
<div style="flex: 3;">位置：</div>
<InputNumber style="flex: 4;" />
<div style="flex: 1;"></div>
<InputNumber style="flex: 4;" />
</div>
<div class="row">
<div style="flex: 3;"></div>
<div style="flex: 4;" class="label">X</div>
<div style="flex: 1;"></div>
<div style="flex: 4;" class="label">Y</div>
</div>
<div class="row">
<div style="flex: 3;">大小：</div>
<InputNumber style="flex: 4;" />
<LockOutlined style="flex: 1;" class="icon-btn" />
<InputNumber style="flex: 4;" />
</div>
<div class="row">
<div style="flex: 3;"></div>
<div style="flex: 4;" class="label">宽</div>
<div style="flex: 1;"></div>
<div style="flex: 4;" class="label">高</div>
</div>
<Divider />
<div class="row">
<div style="flex: 3;">旋转：</div>
<RotateLeftOutlined class="icon-btn" style="flex: 2;" />
<RotateRightOutlined class="icon-btn" style="flex: 2;" />
<div style="flex: 1;"></div>
<InputNumber style="flex: 4;" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { InputNumber, Divider, Button } from 'ant-design-vue'
import {
LockOutlined,
RotateLeftOutlined,
RotateRightOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({
name: 'element-positopn-panel',
components: {
InputNumber,
Divider,
Button,
ButtonGroup: Button.Group,
LockOutlined,
RotateLeftOutlined,
RotateRightOutlined,
},
})
</script>
</script>
<style lang="scss" scoped>
.row {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label {
text-align: center;
}
.icon-btn {
cursor: pointer;
}
</style>

125
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -1,13 +1,134 @@
<template>
<div class="text-style-panel">
text-style-panel
<InputGroup compact class="row">
<Select
style="flex: 3;"
>
<SelectOption value="jack">Jack</SelectOption>
<SelectOption value="lucy">Lucy</SelectOption>
<SelectOption value="disabled">Disabled</SelectOption>
<SelectOption value="Yiminghe">yiminghe</SelectOption>
</Select>
<Select
style="flex: 2;"
>
<SelectOption value="jack">Jack</SelectOption>
<SelectOption value="lucy">Lucy</SelectOption>
<SelectOption value="disabled">Disabled</SelectOption>
<SelectOption value="Yiminghe">yiminghe</SelectOption>
</Select>
</InputGroup>
<ButtonGroup class="row">
<Button style="flex: 1;"><FontColorsOutlined /></Button>
<Button style="flex: 1;"><HighlightOutlined /></Button>
<Button style="flex: 1;"><BgColorsOutlined /></Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;"><BoldOutlined /></Button>
<Button style="flex: 1;"><ItalicOutlined /></Button>
<Button style="flex: 1;"><UnderlineOutlined /></Button>
<Button style="flex: 1;"><StrikethroughOutlined /></Button>
</ButtonGroup>
<Divider />
<ButtonGroup class="row">
<Button style="flex: 1;"><AlignLeftOutlined /></Button>
<Button style="flex: 1;"><AlignCenterOutlined /></Button>
<Button style="flex: 1;"><AlignRightOutlined /></Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;"><OrderedListOutlined /></Button>
<Button style="flex: 1;"><UnorderedListOutlined /></Button>
</ButtonGroup>
<Divider />
<div class="row">
<div style="flex: 2;">行间距：</div>
<Select style="flex: 3;">
<SelectOption value="jack">Jack</SelectOption>
<SelectOption value="lucy">Lucy</SelectOption>
<SelectOption value="disabled">Disabled</SelectOption>
<SelectOption value="Yiminghe">yiminghe</SelectOption>
</Select>
</div>
<div class="row">
<div style="flex: 2;">字间距：</div>
<Select style="flex: 3;">
<SelectOption value="jack">Jack</SelectOption>
<SelectOption value="lucy">Lucy</SelectOption>
<SelectOption value="disabled">Disabled</SelectOption>
<SelectOption value="Yiminghe">yiminghe</SelectOption>
</Select>
</div>
<Divider />
<ButtonGroup class="row">
<Button style="flex: 1;">边框</Button>
<Button style="flex: 1;">阴影</Button>
</ButtonGroup>
<div class="row">
<div style="flex: 2;">透明度：</div>
<Slider style="flex: 3;" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Select, Input, Button, Divider, Slider } from 'ant-design-vue'
import {
FontColorsOutlined,
HighlightOutlined,
BgColorsOutlined,
BoldOutlined,
ItalicOutlined,
UnderlineOutlined,
StrikethroughOutlined,
AlignLeftOutlined,
AlignCenterOutlined,
AlignRightOutlined,
OrderedListOutlined,
UnorderedListOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({
name: 'text-style-panel',
components: {
Select,
SelectOption: Select.Option,
InputGroup: Input.Group,
Button,
ButtonGroup: Button.Group,
Divider,
Slider,
FontColorsOutlined,
HighlightOutlined,
BgColorsOutlined,
BoldOutlined,
ItalicOutlined,
UnderlineOutlined,
StrikethroughOutlined,
AlignLeftOutlined,
AlignCenterOutlined,
AlignRightOutlined,
OrderedListOutlined,
UnorderedListOutlined,
},
})
</script>
</script>
<style lang="scss" scoped>
.row {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style>

2
src/views/Editor/Toolbar/ElementStylePanel/index.vue
View File

@ -22,6 +22,8 @@ export default defineComponent({
const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
const currentPanelComponent = computed(() => {
if(!handleElement.value) return null
const panelMap = {
[ElementTypes.TEXT]: TextStylePanel,
[ElementTypes.IMAGE]: ImageStylePanel,

35
src/views/Editor/Toolbar/MultiPositionPanel.vue
View File

@ -1,13 +1,44 @@
<template>
<div class="multi-position-panel">
multi-position-panel
<ButtonGroup class="row">
<Button style="flex: 1;">左</Button>
<Button style="flex: 1;">中</Button>
<Button style="flex: 1;">右</Button>
</ButtonGroup>
<ButtonGroup class="row">
<Button style="flex: 1;">上</Button>
<Button style="flex: 1;">中</Button>
<Button style="flex: 1;">下</Button>
</ButtonGroup>
<Divider />
<ButtonGroup class="row">
<Button style="flex: 1;">组合</Button>
<Button style="flex: 1;">取消组合</Button>
</ButtonGroup>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Button, Divider } from 'ant-design-vue'
export default defineComponent({
name: 'multi-position-panel',
components: {
Button,
ButtonGroup: Button.Group,
Divider,
},
})
</script>
</script>
<style lang="scss" scoped>
.row {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 10px;
}
</style>

1
src/views/Editor/Toolbar/index.vue
View File

@ -121,6 +121,7 @@ export default defineComponent({
}
.content {
padding: 12px;
font-size: 13px;
overflow: auto;
}
</style>