style: eslint规则修改
This commit is contained in:
pipipi-pikachu
parent
ea3dfef74f
commit
6ce23b0e01
|
|
@ -49,13 +49,7 @@ module.exports = {
|
|||
'named': 'never',
|
||||
'asyncArrow': 'always',
|
||||
}],
|
||||
'keyword-spacing': ['error', { 'overrides': {
|
||||
'if': { 'after': false },
|
||||
'for': { 'after': false },
|
||||
'while': { 'after': false },
|
||||
'function': { 'after': false },
|
||||
'switch': { 'after': false },
|
||||
}}],
|
||||
'keyword-spacing': ['error'],
|
||||
'prefer-const': 'error',
|
||||
'no-useless-return': 'error',
|
||||
'array-bracket-spacing': 'error',
|
||||
|
|
|
|||
|
|
@ -43,17 +43,17 @@ export default defineComponent({
|
|||
const alphaRef = ref<HTMLElement>()
|
||||
const handleChange = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if(!alphaRef.value) return
|
||||
if (!alphaRef.value) return
|
||||
const containerWidth = alphaRef.value.clientWidth
|
||||
const xOffset = alphaRef.value.getBoundingClientRect().left + window.pageXOffset
|
||||
const left = e.pageX - xOffset
|
||||
let a
|
||||
|
||||
if(left < 0) a = 0
|
||||
else if(left > containerWidth) a = 1
|
||||
if (left < 0) a = 0
|
||||
else if (left > containerWidth) a = 1
|
||||
else a = Math.round(left * 100 / containerWidth) / 100
|
||||
|
||||
if(color.value.a !== a) {
|
||||
if (color.value.a !== a) {
|
||||
emit('colorChange', {
|
||||
r: color.value.r,
|
||||
g: color.value.g,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const renderCheckboard = (white: string, grey: string, size: number) => {
|
|||
canvas.width = canvas.height = size * 2
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
if(!ctx) return null
|
||||
if (!ctx) return null
|
||||
|
||||
ctx.fillStyle = white
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
|
|
@ -24,7 +24,7 @@ const renderCheckboard = (white: string, grey: string, size: number) => {
|
|||
|
||||
const getCheckboard = (white: string, grey: string, size: number) => {
|
||||
const key = white + ',' + grey + ',' + size
|
||||
if(checkboardCache[key]) return checkboardCache[key]
|
||||
if (checkboardCache[key]) return checkboardCache[key]
|
||||
|
||||
const checkboard = renderCheckboard(white, grey, size)
|
||||
checkboardCache[key] = checkboard
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@ export default defineComponent({
|
|||
setup(props, { emit }) {
|
||||
const val = computed(() => {
|
||||
let _hex = ''
|
||||
if(props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
|
||||
if (props.value.a < 1) _hex = tinycolor(props.value).toHex8String().toUpperCase()
|
||||
else _hex = tinycolor(props.value).toHexString().toUpperCase()
|
||||
return _hex.replace('#', '')
|
||||
})
|
||||
|
||||
const handleInput = (e: InputEvent) => {
|
||||
const value = (e.target as HTMLInputElement).value
|
||||
if(value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
|
||||
if (value.length >= 6) emit('colorChange', tinycolor(value).toRgb())
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -37,40 +37,40 @@ export default defineComponent({
|
|||
|
||||
const color = computed(() => {
|
||||
const hsla = tinycolor(props.value).toHsl()
|
||||
if(hsla.s === 0) hsla.h = props.hue
|
||||
if (hsla.s === 0) hsla.h = props.hue
|
||||
return hsla
|
||||
})
|
||||
|
||||
const pointerLeft = computed(() => {
|
||||
if(color.value.h === 0 && pullDirection.value === 'right') return '100%'
|
||||
if (color.value.h === 0 && pullDirection.value === 'right') return '100%'
|
||||
return color.value.h * 100 / 360 + '%'
|
||||
})
|
||||
|
||||
watch(() => props.value, () => {
|
||||
const hsla = tinycolor(props.value).toHsl()
|
||||
const h = hsla.s === 0 ? props.hue : hsla.h
|
||||
if(h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
|
||||
if(h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
|
||||
if (h !== 0 && h - oldHue.value > 0) pullDirection.value = 'right'
|
||||
if (h !== 0 && h - oldHue.value < 0) pullDirection.value = 'left'
|
||||
oldHue.value = h
|
||||
})
|
||||
|
||||
const hueRef = ref<HTMLElement>()
|
||||
const handleChange = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if(!hueRef.value) return
|
||||
if (!hueRef.value) return
|
||||
|
||||
const containerWidth = hueRef.value.clientWidth
|
||||
const xOffset = hueRef.value.getBoundingClientRect().left + window.pageXOffset
|
||||
const left = e.pageX - xOffset
|
||||
let h, percent
|
||||
|
||||
if(left < 0) h = 0
|
||||
else if(left > containerWidth) h = 360
|
||||
if (left < 0) h = 0
|
||||
else if (left > containerWidth) h = 360
|
||||
else {
|
||||
percent = left * 100 / containerWidth
|
||||
h = (360 * percent / 100)
|
||||
}
|
||||
if(color.value.h !== h) {
|
||||
if (color.value.h !== h) {
|
||||
emit('colorChange', {
|
||||
h,
|
||||
l: color.value.l,
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default defineComponent({
|
|||
setup(props, { emit }) {
|
||||
const color = computed(() => {
|
||||
const hsva = tinycolor(props.value).toHsv()
|
||||
if(hsva.s === 0) hsva.h = props.hue
|
||||
if (hsva.s === 0) hsva.h = props.hue
|
||||
return hsva
|
||||
})
|
||||
|
||||
|
|
@ -47,14 +47,14 @@ export default defineComponent({
|
|||
const pointerTop = computed(() => (-(color.value.v * 100) + 1) + 100 + '%')
|
||||
const pointerLeft = computed(() => color.value.s * 100 + '%')
|
||||
|
||||
const emitChangeEvent = throttle(function(param) {
|
||||
const emitChangeEvent = throttle(function (param) {
|
||||
emit('colorChange', param)
|
||||
}, 20, { leading: true, trailing: false })
|
||||
|
||||
const saturationRef = ref<HTMLElement>()
|
||||
const handleChange = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if(!saturationRef.value) return
|
||||
if (!saturationRef.value) return
|
||||
|
||||
const containerWidth = saturationRef.value.clientWidth
|
||||
const containerHeight = saturationRef.value.clientHeight
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
|
|||
const bStep = (_endColor.b - _startColor.b) / step
|
||||
const gradientColorArr = []
|
||||
|
||||
for(let i = 0; i < step; i++) {
|
||||
for (let i = 0; i < step; i++) {
|
||||
const gradientColor = tinycolor({
|
||||
r: _startColor.r + rStep * i,
|
||||
g: _startColor.g + gStep * i,
|
||||
|
|
@ -104,7 +104,7 @@ const gradient = (startColor: string, endColor: string, step: number) => {
|
|||
|
||||
const getPresetColors = () => {
|
||||
const presetColors = []
|
||||
for(const color of presetColorConfig) {
|
||||
for (const color of presetColorConfig) {
|
||||
presetColors.push(gradient(color[1], color[0], 5))
|
||||
}
|
||||
return presetColors
|
||||
|
|
@ -151,7 +151,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats.HSVA) => {
|
||||
if('h' in value) {
|
||||
if ('h' in value) {
|
||||
hue.value = value.h
|
||||
color.value = tinycolor(value).toRgb()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,8 +83,8 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const handleClickMenuItem = (item: ContextmenuItem) => {
|
||||
if(item.disable || item.children) return
|
||||
if(item.handler) item.handler(props.el)
|
||||
if (item.disable || item.children) return
|
||||
if (item.handler) item.handler(props.el)
|
||||
props.removeContextMenu()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@ export default defineComponent({
|
|||
const inputRef = ref<HTMLInputElement>()
|
||||
|
||||
const handleClick = () => {
|
||||
if(!inputRef.value) return
|
||||
if (!inputRef.value) return
|
||||
inputRef.value.value = ''
|
||||
inputRef.value.click()
|
||||
}
|
||||
const handleChange = (e: InputEvent) => {
|
||||
const files = (e.target as HTMLInputElement).files
|
||||
if(files) emit('change', files)
|
||||
if (files) emit('change', files)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -68,10 +68,10 @@ export default defineComponent({
|
|||
const mouseInCanvas = ref(false)
|
||||
|
||||
const initCanvas = () => {
|
||||
if(!canvasRef.value || !writingBoardRef.value) return
|
||||
if (!canvasRef.value || !writingBoardRef.value) return
|
||||
|
||||
ctx = canvasRef.value.getContext('2d')
|
||||
if(!ctx) return
|
||||
if (!ctx) return
|
||||
|
||||
canvasRef.value.width = writingBoardRef.value.clientWidth
|
||||
canvasRef.value.height = writingBoardRef.value.clientHeight
|
||||
|
|
@ -97,17 +97,17 @@ export default defineComponent({
|
|||
const v = s / t
|
||||
let lineWidth
|
||||
|
||||
if(v <= minV) lineWidth = maxWidth
|
||||
else if(v >= maxV) lineWidth = minWidth
|
||||
if (v <= minV) lineWidth = maxWidth
|
||||
else if (v >= maxV) lineWidth = minWidth
|
||||
else lineWidth = maxWidth - v / maxV * maxWidth
|
||||
|
||||
if(lastLineWidth === -1) return lineWidth
|
||||
if (lastLineWidth === -1) return lineWidth
|
||||
return lineWidth * 1 / 3 + lastLineWidth * 2 / 3
|
||||
}
|
||||
|
||||
// 画笔绘制方法
|
||||
const draw = (posX: number, posY: number, lineWidth: number) => {
|
||||
if(!ctx) return
|
||||
if (!ctx) return
|
||||
|
||||
const lastPosX = lastPos.x
|
||||
const lastPosY = lastPos.y
|
||||
|
|
@ -123,7 +123,7 @@ export default defineComponent({
|
|||
|
||||
// 橡皮擦除方法
|
||||
const erase = (posX: number, posY: number) => {
|
||||
if(!ctx || !canvasRef.value) return
|
||||
if (!ctx || !canvasRef.value) return
|
||||
const lastPosX = lastPos.x
|
||||
const lastPosY = lastPos.y
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ export default defineComponent({
|
|||
const time = new Date().getTime()
|
||||
|
||||
// 画笔模式（这里通过绘制速度调节画笔的粗细）
|
||||
if(props.model === 'pen') {
|
||||
if (props.model === 'pen') {
|
||||
const s = getDistance(posX, posY)
|
||||
const t = time - lastTime
|
||||
const lineWidth = getLineWidth(s, t)
|
||||
|
|
@ -192,18 +192,18 @@ export default defineComponent({
|
|||
const handleMousemove = (e: MouseEvent) => {
|
||||
updateMousePosition(e)
|
||||
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
startMove(e.offsetX, e.offsetY)
|
||||
}
|
||||
|
||||
const handleMouseup = () => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
isMouseDown = false
|
||||
}
|
||||
|
||||
// 清空画布
|
||||
const clearCanvas = () => {
|
||||
if(!ctx || !canvasRef.value) return
|
||||
if (!ctx || !canvasRef.value) return
|
||||
ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,31 +18,31 @@ export default () => {
|
|||
const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
|
||||
|
||||
const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
|
||||
for(const element of newElementList) {
|
||||
if(!activeElementIdList.value.includes(element.id)) continue
|
||||
for (const element of newElementList) {
|
||||
if (!activeElementIdList.value.includes(element.id)) continue
|
||||
|
||||
if(command === ElementAlignCommands.TOP) {
|
||||
if (command === ElementAlignCommands.TOP) {
|
||||
const offsetY = minY - 0
|
||||
element.top = element.top - offsetY
|
||||
}
|
||||
else if(command === ElementAlignCommands.VERTICAL) {
|
||||
else if (command === ElementAlignCommands.VERTICAL) {
|
||||
const offsetY = minY + (maxY - minY) / 2 - viewportHeight / 2
|
||||
element.top = element.top - offsetY
|
||||
}
|
||||
else if(command === ElementAlignCommands.BOTTOM) {
|
||||
else if (command === ElementAlignCommands.BOTTOM) {
|
||||
const offsetY = maxY - viewportHeight
|
||||
element.top = element.top - offsetY
|
||||
}
|
||||
|
||||
else if(command === ElementAlignCommands.LEFT) {
|
||||
else if (command === ElementAlignCommands.LEFT) {
|
||||
const offsetX = minX - 0
|
||||
element.left = element.left - offsetX
|
||||
}
|
||||
else if(command === ElementAlignCommands.HORIZONTAL) {
|
||||
else if (command === ElementAlignCommands.HORIZONTAL) {
|
||||
const offsetX = minX + (maxX - minX) / 2 - viewportWidth / 2
|
||||
element.left = element.left - offsetX
|
||||
}
|
||||
else if(command === ElementAlignCommands.RIGHT) {
|
||||
else if (command === ElementAlignCommands.RIGHT) {
|
||||
const offsetX = maxX - viewportWidth
|
||||
element.left = element.left - offsetX
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@ export default () => {
|
|||
|
||||
// 组合元素（为当前所有激活元素添加一个相同的groupId）
|
||||
const combineElements = () => {
|
||||
if(!activeElementList.value.length) return
|
||||
if (!activeElementList.value.length) return
|
||||
|
||||
let newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
|
||||
const groupId = createRandomCode()
|
||||
|
||||
const combineElementList: PPTElement[] = []
|
||||
for(const element of newElementList) {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
for (const element of newElementList) {
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
element.groupId = groupId
|
||||
combineElementList.push(element)
|
||||
}
|
||||
|
|
@ -41,13 +41,13 @@ export default () => {
|
|||
|
||||
// 取消组合元素（移除所有被激活元素的groupId）
|
||||
const uncombineElements = () => {
|
||||
if(!activeElementList.value.length) return
|
||||
if (!activeElementList.value.length) return
|
||||
const hasElementInGroup = activeElementList.value.some(item => item.groupId)
|
||||
if(!hasElementInGroup) return
|
||||
if (!hasElementInGroup) return
|
||||
|
||||
const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
|
||||
for(const element of newElementList) {
|
||||
if(activeElementIdList.value.includes(element.id) && element.groupId) delete element.groupId
|
||||
for (const element of newElementList) {
|
||||
if (activeElementIdList.value.includes(element.id) && element.groupId) delete element.groupId
|
||||
}
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default () => {
|
|||
const { deleteElement } = useDeleteElement()
|
||||
|
||||
const copyElement = () => {
|
||||
if(!activeElementIdList.value.length) return
|
||||
if (!activeElementIdList.value.length) return
|
||||
|
||||
const text = encrypt(JSON.stringify({
|
||||
type: 'elements',
|
||||
|
|
|
|||
|
|
@ -39,11 +39,11 @@ export default () => {
|
|||
getImageSize(src).then(({ width, height }) => {
|
||||
const scale = height / width
|
||||
|
||||
if(scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) {
|
||||
if (scale < VIEWPORT_ASPECT_RATIO && width > VIEWPORT_SIZE) {
|
||||
width = VIEWPORT_SIZE
|
||||
height = width * scale
|
||||
}
|
||||
else if(height > VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO) {
|
||||
else if (height > VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO) {
|
||||
height = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
|
||||
width = height / scale
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default () => {
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const deleteElement = () => {
|
||||
if(!activeElementIdList.value.length) return
|
||||
if (!activeElementIdList.value.length) return
|
||||
const newElementList = currentSlide.value.elements.filter(el => !activeElementIdList.value.includes(el.id))
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
|
||||
|
|
@ -19,7 +19,7 @@ export default () => {
|
|||
}
|
||||
|
||||
const deleteAllElements = () => {
|
||||
if(!currentSlide.value.elements.length) return
|
||||
if (!currentSlide.value.elements.length) return
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: [] })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@ import { ActionTypes, useStore } from '@/store'
|
|||
export default () => {
|
||||
const store = useStore()
|
||||
|
||||
const addHistorySnapshot = debounce(function() {
|
||||
const addHistorySnapshot = debounce(function () {
|
||||
store.dispatch(ActionTypes.ADD_SNAPSHOT)
|
||||
}, 300, { trailing: true })
|
||||
|
||||
const redo = throttle(function() {
|
||||
const redo = throttle(function () {
|
||||
store.dispatch(ActionTypes.RE_DO)
|
||||
}, 100, { leading: true, trailing: false })
|
||||
|
||||
const undo = throttle(function() {
|
||||
const undo = throttle(function () {
|
||||
store.dispatch(ActionTypes.UN_DO)
|
||||
}, 100, { leading: true, trailing: false })
|
||||
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ export default () => {
|
|||
const lockElement = () => {
|
||||
const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
|
||||
|
||||
for(const element of newElementList) {
|
||||
if(activeElementIdList.value.includes(element.id)) element.lock = true
|
||||
for (const element of newElementList) {
|
||||
if (activeElementIdList.value.includes(element.id)) element.lock = true
|
||||
}
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
|
||||
|
|
@ -24,15 +24,15 @@ export default () => {
|
|||
const unlockElement = (handleElement: PPTElement) => {
|
||||
const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))
|
||||
|
||||
if(handleElement.groupId) {
|
||||
for(const element of newElementList) {
|
||||
if(element.groupId === handleElement.groupId) element.lock = false
|
||||
if (handleElement.groupId) {
|
||||
for (const element of newElementList) {
|
||||
if (element.groupId === handleElement.groupId) element.lock = false
|
||||
}
|
||||
return newElementList
|
||||
}
|
||||
|
||||
for(const element of newElementList) {
|
||||
if(element.id === handleElement.id) {
|
||||
for (const element of newElementList) {
|
||||
if (element.id === handleElement.id) {
|
||||
element.lock = false
|
||||
break
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ export default () => {
|
|||
|
||||
const moveElement = (command: string) => {
|
||||
const newElementList = currentSlide.value.elements.map(el => {
|
||||
if(activeElementIdList.value.includes(el.id)) {
|
||||
if (activeElementIdList.value.includes(el.id)) {
|
||||
let { left, top } = el
|
||||
switch(command) {
|
||||
switch (command) {
|
||||
case KEYS.LEFT:
|
||||
left = left - 1
|
||||
break
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@ export default () => {
|
|||
const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
|
||||
|
||||
// 被操作的元素是组合元素成员
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
|
||||
// 获取该组合元素全部成员，以及组合元素层级范围
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
|
||||
const { minIndex, maxIndex } = getCombineElementIndexRange(elementList, combineElementList)
|
||||
|
||||
// 无法移动（已经处在顶层）
|
||||
if(maxIndex === elementList.length - 1) return null
|
||||
if (maxIndex === elementList.length - 1) return null
|
||||
|
||||
// 该组合元素上一层的元素，以下简称为【元素next】
|
||||
const nextElement = copyOfElementList[maxIndex + 1]
|
||||
|
|
@ -39,7 +39,7 @@ export default () => {
|
|||
|
||||
// 如果【元素next】也是组合元素成员（另一个组合，不是上面被移除的那一组，以下简称为【组合next】）
|
||||
// 需要获取【组合next】全部成员的长度，将上面移除的组合元素全部成员添加到【组合next】全部成员的上方
|
||||
if(nextElement.groupId) {
|
||||
if (nextElement.groupId) {
|
||||
const nextCombineElementList = copyOfElementList.filter(_element => _element.groupId === nextElement.groupId)
|
||||
copyOfElementList.splice(minIndex + nextCombineElementList.length, 0, ...movedElementList)
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@ export default () => {
|
|||
const elementIndex = elementList.findIndex(item => item.id === element.id)
|
||||
|
||||
// 无法移动（已经处在顶层）
|
||||
if(elementIndex === elementList.length - 1) return null
|
||||
if (elementIndex === elementList.length - 1) return null
|
||||
|
||||
// 上一层的元素，以下简称为【元素next】
|
||||
const nextElement = copyOfElementList[elementIndex + 1]
|
||||
|
|
@ -65,7 +65,7 @@ export default () => {
|
|||
|
||||
// 如果【元素next】是组合元素成员
|
||||
// 需要获取该组合全部成员的长度，将上面移除的元素添加到该组合全部成员的上方
|
||||
if(nextElement.groupId) {
|
||||
if (nextElement.groupId) {
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === nextElement.groupId)
|
||||
copyOfElementList.splice(elementIndex + combineElementList.length, 0, movedElement)
|
||||
}
|
||||
|
|
@ -81,13 +81,13 @@ export default () => {
|
|||
const moveDownElement = (elementList: PPTElement[], element: PPTElement) => {
|
||||
const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
|
||||
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
|
||||
const { minIndex } = getCombineElementIndexRange(elementList, combineElementList)
|
||||
if(minIndex === 0) return null
|
||||
if (minIndex === 0) return null
|
||||
const prevElement = copyOfElementList[minIndex - 1]
|
||||
const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
|
||||
if(prevElement.groupId) {
|
||||
if (prevElement.groupId) {
|
||||
const prevCombineElementList = copyOfElementList.filter(_element => _element.groupId === prevElement.groupId)
|
||||
copyOfElementList.splice(minIndex - prevCombineElementList.length, 0, ...movedElementList)
|
||||
}
|
||||
|
|
@ -96,10 +96,10 @@ export default () => {
|
|||
|
||||
else {
|
||||
const elementIndex = elementList.findIndex(item => item.id === element.id)
|
||||
if(elementIndex === 0) return null
|
||||
if (elementIndex === 0) return null
|
||||
const prevElement = copyOfElementList[elementIndex - 1]
|
||||
const movedElement = copyOfElementList.splice(elementIndex, 1)[0]
|
||||
if(prevElement.groupId) {
|
||||
if (prevElement.groupId) {
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === prevElement.groupId)
|
||||
copyOfElementList.splice(elementIndex - combineElementList.length, 0, movedElement)
|
||||
}
|
||||
|
|
@ -114,14 +114,14 @@ export default () => {
|
|||
const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
|
||||
|
||||
// 被操作的元素是组合元素成员
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
|
||||
// 获取该组合元素全部成员，以及组合元素层级范围
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
|
||||
const { minIndex, maxIndex } = getCombineElementIndexRange(elementList, combineElementList)
|
||||
|
||||
// 无法移动（已经处在顶层）
|
||||
if(maxIndex === elementList.length - 1) return null
|
||||
if (maxIndex === elementList.length - 1) return null
|
||||
|
||||
// 从元素列表中移除该组合元素全部成员，然后添加到元素列表最上方
|
||||
const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
|
||||
|
|
@ -135,7 +135,7 @@ export default () => {
|
|||
const elementIndex = elementList.findIndex(item => item.id === element.id)
|
||||
|
||||
// 无法移动（已经处在顶层）
|
||||
if(elementIndex === elementList.length - 1) return null
|
||||
if (elementIndex === elementList.length - 1) return null
|
||||
|
||||
// 从元素列表中移除该元素，然后添加到元素列表最上方
|
||||
copyOfElementList.splice(elementIndex, 1)
|
||||
|
|
@ -149,17 +149,17 @@ export default () => {
|
|||
const moveBottomElement = (elementList: PPTElement[], element: PPTElement) => {
|
||||
const copyOfElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList))
|
||||
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
const combineElementList = copyOfElementList.filter(_element => _element.groupId === element.groupId)
|
||||
const { minIndex } = getCombineElementIndexRange(elementList, combineElementList)
|
||||
if(minIndex === 0) return null
|
||||
if (minIndex === 0) return null
|
||||
const movedElementList = copyOfElementList.splice(minIndex, combineElementList.length)
|
||||
copyOfElementList.unshift(...movedElementList)
|
||||
}
|
||||
|
||||
else {
|
||||
const elementIndex = elementList.findIndex(item => item.id === element.id)
|
||||
if(elementIndex === 0) return null
|
||||
if (elementIndex === 0) return null
|
||||
copyOfElementList.splice(elementIndex, 1)
|
||||
copyOfElementList.unshift(element)
|
||||
}
|
||||
|
|
@ -170,12 +170,12 @@ export default () => {
|
|||
const orderElement = (element: PPTElement, command: ElementOrderCommand) => {
|
||||
let newElementList = null
|
||||
|
||||
if(command === ElementOrderCommands.UP) newElementList = moveUpElement(currentSlide.value.elements, element)
|
||||
else if(command === ElementOrderCommands.DOWN) newElementList = moveDownElement(currentSlide.value.elements, element)
|
||||
else if(command === ElementOrderCommands.TOP) newElementList = moveTopElement(currentSlide.value.elements, element)
|
||||
else if(command === ElementOrderCommands.BOTTOM) newElementList = moveBottomElement(currentSlide.value.elements, element)
|
||||
if (command === ElementOrderCommands.UP) newElementList = moveUpElement(currentSlide.value.elements, element)
|
||||
else if (command === ElementOrderCommands.DOWN) newElementList = moveDownElement(currentSlide.value.elements, element)
|
||||
else if (command === ElementOrderCommands.TOP) newElementList = moveTopElement(currentSlide.value.elements, element)
|
||||
else if (command === ElementOrderCommands.BOTTOM) newElementList = moveBottomElement(currentSlide.value.elements, element)
|
||||
|
||||
if(!newElementList) return
|
||||
if (!newElementList) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -21,26 +21,26 @@ export default () => {
|
|||
const pasteElement = (elements: PPTElement[]) => {
|
||||
const groupIdMap = {}
|
||||
const elIdMap = {}
|
||||
for(const element of elements) {
|
||||
for (const element of elements) {
|
||||
const groupId = element.groupId
|
||||
if(groupId && !groupIdMap[groupId]) {
|
||||
if (groupId && !groupIdMap[groupId]) {
|
||||
groupIdMap[groupId] = createRandomCode()
|
||||
}
|
||||
elIdMap[element.id] = createRandomCode()
|
||||
}
|
||||
const currentSlideElementIdList = currentSlide.value.elements.map(el => el.id)
|
||||
|
||||
for(const element of elements) {
|
||||
for (const element of elements) {
|
||||
const inCurrentSlide = currentSlideElementIdList.includes(element.id)
|
||||
|
||||
element.id = elIdMap[element.id]
|
||||
|
||||
if(inCurrentSlide) {
|
||||
if (inCurrentSlide) {
|
||||
element.left = element.left + 10
|
||||
element.top = element.top + 10
|
||||
}
|
||||
|
||||
if(element.groupId) element.groupId = groupIdMap[element.groupId]
|
||||
if (element.groupId) element.groupId = groupIdMap[element.groupId]
|
||||
}
|
||||
store.commit(MutationTypes.ADD_ELEMENT, elements)
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, Object.values(elIdMap))
|
||||
|
|
@ -77,15 +77,15 @@ export default () => {
|
|||
}
|
||||
|
||||
// 粘贴自定义元素或页面
|
||||
if(typeof clipboardData === 'object') {
|
||||
if (typeof clipboardData === 'object') {
|
||||
const { type, data } = clipboardData
|
||||
|
||||
if(type === 'elements' && !onlySlide) pasteElement(data)
|
||||
else if(type === 'slide' && !onlyElements) pasteSlide(data)
|
||||
if (type === 'elements' && !onlySlide) pasteElement(data)
|
||||
else if (type === 'slide' && !onlyElements) pasteSlide(data)
|
||||
}
|
||||
|
||||
// 粘贴普通文本
|
||||
else if(!onlyElements && !onlySlide) pasteText(clipboardData)
|
||||
else if (!onlyElements && !onlySlide) pasteText(clipboardData)
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default () => {
|
|||
const step = 5
|
||||
const max = 120
|
||||
const min = 60
|
||||
if(command === '+' && percentage <= max) percentage += step
|
||||
if(command === '-' && percentage >= min) percentage -= step
|
||||
if (command === '+' && percentage <= max) percentage += step
|
||||
if (command === '-' && percentage >= min) percentage -= step
|
||||
|
||||
store.commit(MutationTypes.SET_CANVAS_PERCENTAGE, percentage)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default () => {
|
|||
|
||||
const exitScreening = () => {
|
||||
store.commit(MutationTypes.SET_SCREENING, false)
|
||||
if(isFullscreen()) exitFullscreen()
|
||||
if (isFullscreen()) exitFullscreen()
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { SlideBackground } from '@/types/slides'
|
|||
|
||||
export default (background: Ref<SlideBackground | undefined>) => {
|
||||
const backgroundStyle = computed(() => {
|
||||
if(!background.value) return { backgroundColor: '#fff' }
|
||||
if (!background.value) return { backgroundColor: '#fff' }
|
||||
|
||||
const {
|
||||
type,
|
||||
|
|
@ -15,10 +15,10 @@ export default (background: Ref<SlideBackground | undefined>) => {
|
|||
gradientType,
|
||||
} = background.value
|
||||
|
||||
if(type === 'solid') return { backgroundColor: color }
|
||||
else if(type === 'image') {
|
||||
if(!image) return { backgroundColor: '#fff' }
|
||||
if(imageSize === 'repeat') {
|
||||
if (type === 'solid') return { backgroundColor: color }
|
||||
else if (type === 'image') {
|
||||
if (!image) return { backgroundColor: '#fff' }
|
||||
if (imageSize === 'repeat') {
|
||||
return {
|
||||
backgroundImage: `url(${image}`,
|
||||
backgroundRepeat: 'repeat',
|
||||
|
|
@ -31,12 +31,12 @@ export default (background: Ref<SlideBackground | undefined>) => {
|
|||
backgroundSize: imageSize || 'cover',
|
||||
}
|
||||
}
|
||||
else if(type === 'gradient') {
|
||||
else if (type === 'gradient') {
|
||||
const rotate = gradientRotate || 0
|
||||
const color1 = gradientColor ? gradientColor[0] : '#fff'
|
||||
const color2 = gradientColor ? gradientColor[1] : '#fff'
|
||||
|
||||
if(gradientType === 'radial') return { backgroundImage: `radial-gradient(${color1}, ${color2}` }
|
||||
if (gradientType === 'radial') return { backgroundImage: `radial-gradient(${color1}, ${color2}` }
|
||||
return { backgroundImage: `linear-gradient(${rotate}deg, ${color1}, ${color2}` }
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@ export default () => {
|
|||
|
||||
const updateSlideIndex = (command: string) => {
|
||||
let targetIndex = 0
|
||||
if(command === KEYS.UP && slideIndex.value > 0) {
|
||||
if (command === KEYS.UP && slideIndex.value > 0) {
|
||||
targetIndex = slideIndex.value - 1
|
||||
}
|
||||
else if(command === KEYS.DOWN && slideIndex.value < slidesLength.value - 1) {
|
||||
else if (command === KEYS.DOWN && slideIndex.value < slidesLength.value - 1) {
|
||||
targetIndex = slideIndex.value + 1
|
||||
}
|
||||
store.commit(MutationTypes.UPDATE_SLIDE_INDEX, targetIndex)
|
||||
|
|
@ -69,7 +69,7 @@ export default () => {
|
|||
}
|
||||
|
||||
const deleteSlide = () => {
|
||||
if(slidesLength.value === 1) return message.warning('无法继续删除')
|
||||
if (slidesLength.value === 1) return message.warning('无法继续删除')
|
||||
|
||||
store.commit(MutationTypes.DELETE_SLIDE, currentSlide.value.id)
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const clickListener = (el: HTMLElement, event: MouseEvent, binding: DirectiveBin
|
|||
const path = event.composedPath()
|
||||
const isClickOutside = path ? path.indexOf(el) < 0 : !el.contains(event.target as HTMLElement)
|
||||
|
||||
if(!isClickOutside) return
|
||||
if (!isClickOutside) return
|
||||
handler(event)
|
||||
}
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ const ClickOutsideDirective: Directive = {
|
|||
},
|
||||
|
||||
unmounted(el: HTMLElement) {
|
||||
if(el[CTX_CLICK_OUTSIDE_HANDLER]) {
|
||||
if (el[CTX_CLICK_OUTSIDE_HANDLER]) {
|
||||
document.removeEventListener('click', el[CTX_CLICK_OUTSIDE_HANDLER])
|
||||
delete el[CTX_CLICK_OUTSIDE_HANDLER]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ const contextmenuListener = (el: HTMLElement, event: MouseEvent, binding: Direct
|
|||
event.preventDefault()
|
||||
|
||||
const menus = binding.value(el)
|
||||
if(!menus) return
|
||||
if (!menus) return
|
||||
|
||||
let container: HTMLDivElement | null = null
|
||||
|
||||
const removeContextMenu = () => {
|
||||
if(container) {
|
||||
if (container) {
|
||||
document.body.removeChild(container)
|
||||
container = null
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ const ContextmenuDirective: Directive = {
|
|||
},
|
||||
|
||||
unmounted(el: HTMLElement) {
|
||||
if(el && el[CTX_CONTEXTMENU_HANDLER]) {
|
||||
if (el && el[CTX_CONTEXTMENU_HANDLER]) {
|
||||
el.removeEventListener('contextmenu', el[CTX_CONTEXTMENU_HANDLER])
|
||||
delete el[CTX_CONTEXTMENU_HANDLER]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view'
|
|||
|
||||
export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string) => {
|
||||
const { selection, doc } = tr
|
||||
if(!selection || !doc) return tr
|
||||
if (!selection || !doc) return tr
|
||||
|
||||
const { from, to } = selection
|
||||
const { nodes } = schema
|
||||
|
|
@ -27,7 +27,7 @@ export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string)
|
|||
doc.nodesBetween(from, to, (node, pos) => {
|
||||
const nodeType = node.type
|
||||
const align = node.attrs.align || ''
|
||||
if(align !== alignment && allowedNodeTypes.has(nodeType)) {
|
||||
if (align !== alignment && allowedNodeTypes.has(nodeType)) {
|
||||
tasks.push({
|
||||
node,
|
||||
pos,
|
||||
|
|
@ -37,12 +37,12 @@ export const setTextAlign = (tr: Transaction, schema: Schema, alignment: string)
|
|||
return true
|
||||
})
|
||||
|
||||
if(!tasks.length) return tr
|
||||
if (!tasks.length) return tr
|
||||
|
||||
tasks.forEach(task => {
|
||||
const { node, pos, nodeType } = task
|
||||
let { attrs } = node
|
||||
if(alignment) attrs = { ...attrs, align: alignment }
|
||||
if (alignment) attrs = { ...attrs, align: alignment }
|
||||
else attrs = { ...attrs, align: null }
|
||||
tr = tr.setNodeMarkup(pos, nodeType, attrs, node.marks)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -16,20 +16,20 @@ export const toggleList = (listType: NodeType, itemType: NodeType) => {
|
|||
const { $from, $to } = selection
|
||||
const range = $from.blockRange($to)
|
||||
|
||||
if(!range) return false
|
||||
if (!range) return false
|
||||
|
||||
const parentList = findParentNode((node: Node) => isList(node, schema))(selection)
|
||||
|
||||
if(range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
|
||||
if(parentList.node.type === listType) {
|
||||
if (range.depth >= 1 && parentList && range.depth - parentList.depth <= 1) {
|
||||
if (parentList.node.type === listType) {
|
||||
return liftListItem(itemType)(state, dispatch)
|
||||
}
|
||||
|
||||
if(isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
|
||||
if (isList(parentList.node, schema) && listType.validContent(parentList.node.content)) {
|
||||
const { tr } = state
|
||||
tr.setNodeMarkup(parentList.pos, listType)
|
||||
|
||||
if(dispatch) dispatch(tr)
|
||||
if (dispatch) dispatch(tr)
|
||||
|
||||
return false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ const forecolor: MarkSpec = {
|
|||
toDOM: mark => {
|
||||
const { color } = mark.attrs
|
||||
let style = ''
|
||||
if(color) style += `color: ${color};`
|
||||
if (color) style += `color: ${color};`
|
||||
return ['span', { style }, 0]
|
||||
},
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@ const backcolor: MarkSpec = {
|
|||
toDOM: mark => {
|
||||
const { backcolor } = mark.attrs
|
||||
let style = ''
|
||||
if(backcolor) style += `background-color: ${backcolor};`
|
||||
if (backcolor) style += `background-color: ${backcolor};`
|
||||
return ['span', { style }, 0]
|
||||
},
|
||||
}
|
||||
|
|
@ -108,7 +108,7 @@ const fontsize: MarkSpec = {
|
|||
toDOM: mark => {
|
||||
const { fontsize } = mark.attrs
|
||||
let style = ''
|
||||
if(fontsize) style += `font-size: ${fontsize}`
|
||||
if (fontsize) style += `font-size: ${fontsize}`
|
||||
return ['span', { style }, 0]
|
||||
},
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ const fontname: MarkSpec = {
|
|||
toDOM: mark => {
|
||||
const { fontname } = mark.attrs
|
||||
let style = ''
|
||||
if(fontname) style += `font-family: ${fontname}`
|
||||
if (fontname) style += `font-family: ${fontname}`
|
||||
return ['span', { style }, 0]
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const paragraph: NodeSpec = {
|
|||
toDOM: (node: Node) => {
|
||||
const { align } = node.attrs
|
||||
let style = ''
|
||||
if(align && align !== 'left') style += `text-align: ${align};`
|
||||
if (align && align !== 'left') style += `text-align: ${align};`
|
||||
|
||||
return ['p', { style }, 0]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ const equalNodeType = (nodeType: NodeType, node: Node) => {
|
|||
}
|
||||
|
||||
const findParentNodeClosestToPos = ($pos: ResolvedPos, predicate: (node: Node) => boolean) => {
|
||||
for(let i = $pos.depth; i > 0; i--) {
|
||||
for (let i = $pos.depth; i > 0; i--) {
|
||||
const node = $pos.node(i)
|
||||
if(predicate(node)) {
|
||||
if (predicate(node)) {
|
||||
return {
|
||||
pos: i > 0 ? $pos.before(i) : 0,
|
||||
start: $pos.start(i),
|
||||
|
|
@ -46,16 +46,16 @@ export const getMarkAttrs = (view: EditorView) => {
|
|||
|
||||
export const getAttrValue = (view: EditorView, markType: string, attr: string) => {
|
||||
const marks = getMarkAttrs(view)
|
||||
for(const mark of marks) {
|
||||
if(mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr]
|
||||
for (const mark of marks) {
|
||||
if (mark.type.name === markType && mark.attrs[attr]) return mark.attrs[attr]
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
export const isActiveMark = (view: EditorView, markType: string) => {
|
||||
const marks = getMarkAttrs(view)
|
||||
for(const mark of marks) {
|
||||
if(mark.type.name === markType) return true
|
||||
for (const mark of marks) {
|
||||
if (mark.type.name === markType) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ export const getAttrValueInSelection = (view: EditorView, attr: string) => {
|
|||
let keepChecking = true
|
||||
let value = ''
|
||||
doc.nodesBetween(from, to, node => {
|
||||
if(keepChecking && node.attrs[attr]) {
|
||||
if (keepChecking && node.attrs[attr]) {
|
||||
keepChecking = false
|
||||
value = node.attrs[attr]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export const actions: ActionTree<State, State> = {
|
|||
const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
|
||||
const lastSnapshot = snapshots.slice(-1)[0]
|
||||
|
||||
if(lastSnapshot) {
|
||||
if (lastSnapshot) {
|
||||
db.snapshots.clear()
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ export const actions: ActionTree<State, State> = {
|
|||
|
||||
let needDeleteKeys: IndexableTypeArray = []
|
||||
|
||||
if(state.snapshotCursor >= 0 && state.snapshotCursor < allKeys.length - 1) {
|
||||
if (state.snapshotCursor >= 0 && state.snapshotCursor < allKeys.length - 1) {
|
||||
needDeleteKeys = allKeys.slice(state.snapshotCursor + 1)
|
||||
}
|
||||
|
||||
|
|
@ -39,11 +39,11 @@ export const actions: ActionTree<State, State> = {
|
|||
|
||||
let snapshotLength = allKeys.length - needDeleteKeys.length + 1
|
||||
|
||||
if(snapshotLength > 20) {
|
||||
if (snapshotLength > 20) {
|
||||
needDeleteKeys.push(allKeys[0])
|
||||
snapshotLength--
|
||||
}
|
||||
if(snapshotLength >= 2) {
|
||||
if (snapshotLength >= 2) {
|
||||
db.snapshots.update(allKeys[snapshotLength - 2] as number, { index: state.slideIndex })
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ export const actions: ActionTree<State, State> = {
|
|||
},
|
||||
|
||||
async [ActionTypes.UN_DO]({ state, commit }) {
|
||||
if(state.snapshotCursor <= 0) return
|
||||
if (state.snapshotCursor <= 0) return
|
||||
|
||||
const snapshotCursor = state.snapshotCursor - 1
|
||||
const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
|
||||
|
|
@ -68,7 +68,7 @@ export const actions: ActionTree<State, State> = {
|
|||
},
|
||||
|
||||
async [ActionTypes.RE_DO]({ state, commit }) {
|
||||
if(state.snapshotCursor >= state.snapshotLength - 1) return
|
||||
if (state.snapshotCursor >= state.snapshotLength - 1) return
|
||||
|
||||
const snapshotCursor = state.snapshotCursor + 1
|
||||
const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ export const getters: GetterTree<State, State> = {
|
|||
|
||||
currentSlideAnimations(state) {
|
||||
const currentSlide = state.slides[state.slideIndex]
|
||||
if(!currentSlide) return null
|
||||
if (!currentSlide) return null
|
||||
const animations = currentSlide.animations
|
||||
if(!animations) return null
|
||||
if (!animations) return null
|
||||
|
||||
const els = currentSlide.elements
|
||||
const elIds = els.map(el => el.id)
|
||||
|
|
@ -19,13 +19,13 @@ export const getters: GetterTree<State, State> = {
|
|||
|
||||
activeElementList(state) {
|
||||
const currentSlide = state.slides[state.slideIndex]
|
||||
if(!currentSlide || !currentSlide.elements) return []
|
||||
if (!currentSlide || !currentSlide.elements) return []
|
||||
return currentSlide.elements.filter(element => state.activeElementIdList.includes(element.id))
|
||||
},
|
||||
|
||||
handleElement(state) {
|
||||
const currentSlide = state.slides[state.slideIndex]
|
||||
if(!currentSlide || !currentSlide.elements) return null
|
||||
if (!currentSlide || !currentSlide.elements) return null
|
||||
return currentSlide.elements.find(element => state.handleElementId === element.id) || null
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export const mutations: MutationTree<State> = {
|
|||
// editor
|
||||
|
||||
[MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST](state, activeElementIdList: string[]) {
|
||||
if(activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0]
|
||||
if (activeElementIdList.length === 1) state.handleElementId = activeElementIdList[0]
|
||||
else state.handleElementId = ''
|
||||
|
||||
state.activeElementIdList = activeElementIdList
|
||||
|
|
@ -96,7 +96,7 @@ export const mutations: MutationTree<State> = {
|
|||
[MutationTypes.DELETE_SLIDE](state, slideId: string) {
|
||||
const deleteIndex = state.slides.findIndex(item => item.id === slideId)
|
||||
|
||||
if(deleteIndex === state.slides.length - 1) {
|
||||
if (deleteIndex === state.slides.length - 1) {
|
||||
state.slideIndex = deleteIndex - 1
|
||||
}
|
||||
state.slides.splice(deleteIndex, 1)
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ export const copyText = (text: string) => {
|
|||
// 读取剪贴板
|
||||
export const readClipboard = (): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if(navigator.clipboard) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.readText().then(text => {
|
||||
if(!text) reject('剪贴板为空或者不包含文本')
|
||||
if (!text) reject('剪贴板为空或者不包含文本')
|
||||
return resolve(text)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export const createRandomCode = (len = 6) => {
|
|||
const charset = `_0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
|
||||
const maxLen = charset.length
|
||||
let ret = ''
|
||||
for(let i = 0; i < len; i++) {
|
||||
for (let i = 0; i < len; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * maxLen)
|
||||
ret += charset[randomIndex]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,13 +46,13 @@ export const getRectRotatedRange = (element: RotatedElementData) => {
|
|||
export const getElementRange = (element: PPTElement) => {
|
||||
let minX, maxX, minY, maxY
|
||||
|
||||
if(element.type === 'line') {
|
||||
if (element.type === 'line') {
|
||||
minX = element.left
|
||||
maxX = element.left + Math.max(element.start[0], element.end[0])
|
||||
minY = element.top
|
||||
maxY = element.top + Math.max(element.start[1], element.end[1])
|
||||
}
|
||||
else if('rotate' in element && element.rotate) {
|
||||
else if ('rotate' in element && element.rotate) {
|
||||
const { left, top, width, height, rotate } = element
|
||||
const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
|
||||
minX = xRange[0]
|
||||
|
|
@ -102,7 +102,7 @@ export const uniqAlignLines = (lines: AlignLine[]) => {
|
|||
const uniqLines: AlignLine[] = []
|
||||
lines.forEach(line => {
|
||||
const index = uniqLines.findIndex(_line => _line.value === line.value)
|
||||
if(index === -1) uniqLines.push(line)
|
||||
if (index === -1) uniqLines.push(line)
|
||||
else {
|
||||
const uniqLine = uniqLines[index]
|
||||
const rangeMin = Math.min(uniqLine.range[0], line.range[0])
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// 判断用户的操作系统是否安装了某字体
|
||||
export const isSupportFontFamily = (fontFamily: string) => {
|
||||
if(typeof fontFamily !== 'string') return false
|
||||
if (typeof fontFamily !== 'string') return false
|
||||
const arial = 'Arial'
|
||||
if(fontFamily.toLowerCase() === arial.toLowerCase()) return true
|
||||
if (fontFamily.toLowerCase() === arial.toLowerCase()) return true
|
||||
const a = 'a'
|
||||
const size = 100
|
||||
const width = 100
|
||||
|
|
@ -11,7 +11,7 @@ export const isSupportFontFamily = (fontFamily: string) => {
|
|||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
|
||||
if(!ctx) return false
|
||||
if (!ctx) return false
|
||||
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
// 进入全屏
|
||||
export const enterFullscreen = () => {
|
||||
const docElm = document.documentElement
|
||||
if(docElm.requestFullscreen) docElm.requestFullscreen()
|
||||
else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen()
|
||||
else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
|
||||
if (docElm.requestFullscreen) docElm.requestFullscreen()
|
||||
else if (docElm.mozRequestFullScreen) docElm.mozRequestFullScreen()
|
||||
else if (docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen()
|
||||
}
|
||||
|
||||
// 退出全屏
|
||||
export const exitFullscreen = () => {
|
||||
if(document.exitFullscreen) document.exitFullscreen()
|
||||
else if(document.mozCancelFullScreen) document.mozCancelFullScreen()
|
||||
else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen()
|
||||
if (document.exitFullscreen) document.exitFullscreen()
|
||||
else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
|
||||
else if (document.webkitCancelFullScreen) document.webkitCancelFullScreen()
|
||||
}
|
||||
|
||||
// 判断是否全屏
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default defineComponent({
|
|||
const top = computed(() => props.axis.y * canvasScale.value + 'px')
|
||||
|
||||
const sizeStyle = computed(() => {
|
||||
if(props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
|
||||
if (props.type === 'vertical') return { height: props.length * canvasScale.value + 'px' }
|
||||
return { width: props.length * canvasScale.value + 'px' }
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default defineComponent({
|
|||
const { copyElement, cutElement } = useCopyAndPasteElement()
|
||||
|
||||
const contextmenus = (): ContextmenuItem[] => {
|
||||
if(props.elementInfo.lock) {
|
||||
if (props.elementInfo.lock) {
|
||||
return [{
|
||||
text: '解锁',
|
||||
handler: () => unlockElement(props.elementInfo),
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ export default defineComponent({
|
|||
y: 0,
|
||||
})
|
||||
onMounted(() => {
|
||||
if(!selectionRef.value) return
|
||||
if (!selectionRef.value) return
|
||||
const { x, y } = selectionRef.value.getBoundingClientRect()
|
||||
offset.x = x
|
||||
offset.y = y
|
||||
|
|
@ -61,23 +61,23 @@ export default defineComponent({
|
|||
start.value = [startPageX, startPageY]
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!creatingElement.value || !isMouseDown) return
|
||||
if (!creatingElement.value || !isMouseDown) return
|
||||
|
||||
let currentPageX = e.pageX
|
||||
let currentPageY = e.pageY
|
||||
|
||||
if(ctrlOrShiftKeyActive.value) {
|
||||
if (ctrlOrShiftKeyActive.value) {
|
||||
const moveX = currentPageX - startPageX
|
||||
const moveY = currentPageY - startPageY
|
||||
|
||||
const absX = Math.abs(moveX)
|
||||
const absY = Math.abs(moveY)
|
||||
|
||||
if(creatingElement.value.type === 'shape') {
|
||||
if (creatingElement.value.type === 'shape') {
|
||||
// moveX和moveY一正一负
|
||||
const isOpposite = (moveY > 0 && moveX < 0) || (moveY < 0 && moveX > 0)
|
||||
|
||||
if(absX > absY) {
|
||||
if (absX > absY) {
|
||||
currentPageY = isOpposite ? startPageY - moveX : startPageY + moveX
|
||||
}
|
||||
else {
|
||||
|
|
@ -85,8 +85,8 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
else if(creatingElement.value.type === 'line') {
|
||||
if(absX > absY) currentPageY = startPageY
|
||||
else if (creatingElement.value.type === 'line') {
|
||||
if (absX > absY) currentPageY = startPageY
|
||||
else currentPageX = startPageX
|
||||
}
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@ export default defineComponent({
|
|||
|
||||
const minSize = 30
|
||||
|
||||
if(Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize) {
|
||||
if (Math.abs(endPageX - startPageX) >= minSize || Math.abs(endPageY - startPageY) >= minSize) {
|
||||
emit('created', {
|
||||
start: start.value,
|
||||
end: end.value,
|
||||
|
|
@ -115,8 +115,8 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const lineData = computed(() => {
|
||||
if(!start.value || !end.value) return null
|
||||
if(!creatingElement.value || creatingElement.value.type !== 'line') return null
|
||||
if (!start.value || !end.value) return null
|
||||
if (!creatingElement.value || creatingElement.value.type !== 'line') return null
|
||||
|
||||
const [_startX, _startY] = start.value
|
||||
const [_endX, _endY] = end.value
|
||||
|
|
@ -147,7 +147,7 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const position = computed(() => {
|
||||
if(!start.value || !end.value) return {}
|
||||
if (!start.value || !end.value) return {}
|
||||
|
||||
const [startX, startY] = start.value
|
||||
const [endX, endY] = end.value
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default defineComponent({
|
|||
const background = computed<SlideBackground | undefined>(() => store.getters.currentSlide?.background)
|
||||
|
||||
const gridColor = computed(() => {
|
||||
if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
|
||||
if (!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)'
|
||||
const color = background.value.color
|
||||
const rgba = tinycolor(color).toRgb()
|
||||
const newRgba = {
|
||||
|
|
@ -48,10 +48,10 @@ export default defineComponent({
|
|||
const maxY = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
|
||||
|
||||
let path = ''
|
||||
for(let i = 0; i <= Math.floor(maxY / gridSize); i++) {
|
||||
for (let i = 0; i <= Math.floor(maxY / gridSize); i++) {
|
||||
path += `M0 ${i * gridSize}, L${maxX} ${i * gridSize}`
|
||||
}
|
||||
for(let i = 0; i <= Math.floor(maxX / gridSize); i++) {
|
||||
for (let i = 0; i <= Math.floor(maxX / gridSize); i++) {
|
||||
path += `M${i * gridSize} 0, L${i * gridSize} ${maxY}`
|
||||
}
|
||||
return path
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default defineComponent({
|
|||
|
||||
const disableResize = computed(() => {
|
||||
return localActiveElementList.value.some(item => {
|
||||
if(
|
||||
if (
|
||||
(item.type === 'image' || item.type === 'shape') &&
|
||||
!item.rotate
|
||||
) return false
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default (
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const dragElement = (e: MouseEvent, element: PPTElement) => {
|
||||
if(!activeElementIdList.value.includes(element.id)) return
|
||||
if (!activeElementIdList.value.includes(element.id)) return
|
||||
let isMouseDown = true
|
||||
|
||||
// 可视范围宽高，用于边缘对齐吸附
|
||||
|
|
@ -47,13 +47,13 @@ export default (
|
|||
let verticalLines: AlignLine[] = []
|
||||
|
||||
// 元素在页面内水平和垂直方向的范围和中心位置（需要特殊计算线条和被旋转的元素）
|
||||
for(const el of elementList.value) {
|
||||
if(el.type === 'line') continue
|
||||
if(isActiveGroupElement && el.id === element.id) continue
|
||||
if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
|
||||
for (const el of elementList.value) {
|
||||
if (el.type === 'line') continue
|
||||
if (isActiveGroupElement && el.id === element.id) continue
|
||||
if (!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
|
||||
|
||||
let left, top, width, height
|
||||
if('rotate' in el && el.rotate) {
|
||||
if ('rotate' in el && el.rotate) {
|
||||
const { xRange, yRange } = getRectRotatedRange({
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
|
|
@ -111,11 +111,11 @@ export default (
|
|||
// 对于鼠标第一次滑动距离过小的操作判定为误操作
|
||||
// 这里仅在误操作标记未被赋值（null，第一次触发移动），以及被标记为误操作时（true，当前处于误操作范围，但可能会脱离该范围转变成正常操作），才会去计算
|
||||
// 已经被标记为非误操作时（false），不需要再次计算（因为不可能从非误操作转变成误操作）
|
||||
if(isMisoperation !== false) {
|
||||
if (isMisoperation !== false) {
|
||||
isMisoperation = Math.abs(startPageX - currentPageX) < sorptionRange &&
|
||||
Math.abs(startPageY - currentPageY) < sorptionRange
|
||||
}
|
||||
if(!isMouseDown || isMisoperation) return
|
||||
if (!isMouseDown || isMisoperation) return
|
||||
|
||||
// 鼠标按下后移动的距离
|
||||
const moveX = (currentPageX - startPageX) / canvasScale.value
|
||||
|
|
@ -130,8 +130,8 @@ export default (
|
|||
// 注意这里需要用元素的原始信息结合移动信息来计算
|
||||
let targetMinX: number, targetMaxX: number, targetMinY: number, targetMaxY: number
|
||||
|
||||
if(activeElementIdList.value.length === 1 || isActiveGroupElement) {
|
||||
if(elOriginRotate) {
|
||||
if (activeElementIdList.value.length === 1 || isActiveGroupElement) {
|
||||
if (elOriginRotate) {
|
||||
const { xRange, yRange } = getRectRotatedRange({
|
||||
left: targetLeft,
|
||||
top: targetTop,
|
||||
|
|
@ -144,7 +144,7 @@ export default (
|
|||
targetMinY = yRange[0]
|
||||
targetMaxY = yRange[1]
|
||||
}
|
||||
else if(element.type === 'line') {
|
||||
else if (element.type === 'line') {
|
||||
targetMinX = targetLeft
|
||||
targetMaxX = targetLeft + Math.max(element.start[0], element.end[0])
|
||||
targetMinY = targetTop
|
||||
|
|
@ -163,7 +163,7 @@ export default (
|
|||
const rightValues = []
|
||||
const bottomValues = []
|
||||
|
||||
for(let i = 0; i < originActiveElementList.length; i++) {
|
||||
for (let i = 0; i < originActiveElementList.length; i++) {
|
||||
const element = originActiveElementList[i]
|
||||
const left = element.left + moveX
|
||||
const top = element.top + moveY
|
||||
|
|
@ -171,14 +171,14 @@ export default (
|
|||
const height = ('height' in element && element.height) ? element.height : 0
|
||||
const rotate = ('rotate' in element && element.rotate) ? element.rotate : 0
|
||||
|
||||
if('rotate' in element && element.rotate) {
|
||||
if ('rotate' in element && element.rotate) {
|
||||
const { xRange, yRange } = getRectRotatedRange({ left, top, width, height, rotate })
|
||||
leftValues.push(xRange[0])
|
||||
topValues.push(yRange[0])
|
||||
rightValues.push(xRange[1])
|
||||
bottomValues.push(yRange[1])
|
||||
}
|
||||
else if(element.type === 'line') {
|
||||
else if (element.type === 'line') {
|
||||
leftValues.push(left)
|
||||
topValues.push(top)
|
||||
rightValues.push(left + Math.max(element.start[0], element.end[0]))
|
||||
|
|
@ -205,43 +205,43 @@ export default (
|
|||
const _alignmentLines: AlignmentLineProps[] = []
|
||||
let isVerticalAdsorbed = false
|
||||
let isHorizontalAdsorbed = false
|
||||
for(let i = 0; i < horizontalLines.length; i++) {
|
||||
for (let i = 0; i < horizontalLines.length; i++) {
|
||||
const { value, range } = horizontalLines[i]
|
||||
const min = Math.min(...range, targetMinX, targetMaxX)
|
||||
const max = Math.max(...range, targetMinX, targetMaxX)
|
||||
|
||||
if(Math.abs(targetMinY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
if (Math.abs(targetMinY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
targetTop = targetTop - (targetMinY - value)
|
||||
isHorizontalAdsorbed = true
|
||||
_alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
|
||||
}
|
||||
if(Math.abs(targetMaxY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
if (Math.abs(targetMaxY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
targetTop = targetTop - (targetMaxY - value)
|
||||
isHorizontalAdsorbed = true
|
||||
_alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
|
||||
}
|
||||
if(Math.abs(targetCenterY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
if (Math.abs(targetCenterY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
targetTop = targetTop - (targetCenterY - value)
|
||||
isHorizontalAdsorbed = true
|
||||
_alignmentLines.push({type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100})
|
||||
}
|
||||
}
|
||||
for(let i = 0; i < verticalLines.length; i++) {
|
||||
for (let i = 0; i < verticalLines.length; i++) {
|
||||
const { value, range } = verticalLines[i]
|
||||
const min = Math.min(...range, targetMinY, targetMaxY)
|
||||
const max = Math.max(...range, targetMinY, targetMaxY)
|
||||
|
||||
if(Math.abs(targetMinX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
if (Math.abs(targetMinX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
targetLeft = targetLeft - (targetMinX - value)
|
||||
isVerticalAdsorbed = true
|
||||
_alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
|
||||
}
|
||||
if(Math.abs(targetMaxX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
if (Math.abs(targetMaxX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
targetLeft = targetLeft - (targetMaxX - value)
|
||||
isVerticalAdsorbed = true
|
||||
_alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
|
||||
}
|
||||
if(Math.abs(targetCenterX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
if (Math.abs(targetCenterX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
targetLeft = targetLeft - (targetCenterX - value)
|
||||
isVerticalAdsorbed = true
|
||||
_alignmentLines.push({type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100})
|
||||
|
|
@ -250,7 +250,7 @@ export default (
|
|||
alignmentLines.value = _alignmentLines
|
||||
|
||||
// 非多选，或者当前操作的元素时激活的组合元素
|
||||
if(activeElementIdList.value.length === 1 || isActiveGroupElement) {
|
||||
if (activeElementIdList.value.length === 1 || isActiveGroupElement) {
|
||||
elementList.value = elementList.value.map(el => {
|
||||
return el.id === element.id ? { ...el, left: targetLeft, top: targetTop } : el
|
||||
})
|
||||
|
|
@ -260,11 +260,11 @@ export default (
|
|||
// 那么其他非操作元素要移动的位置通过操作元素的移动偏移量计算
|
||||
else {
|
||||
const handleElement = elementList.value.find(el => el.id === element.id)
|
||||
if(!handleElement) return
|
||||
if (!handleElement) return
|
||||
|
||||
elementList.value = elementList.value.map(el => {
|
||||
if(activeElementIdList.value.includes(el.id)) {
|
||||
if(el.id === element.id) {
|
||||
if (activeElementIdList.value.includes(el.id)) {
|
||||
if (el.id === element.id) {
|
||||
return {
|
||||
...el,
|
||||
left: targetLeft,
|
||||
|
|
@ -292,7 +292,7 @@ export default (
|
|||
const currentPageY = e.pageY
|
||||
|
||||
// 对比初始位置，没有实际的位移不更新数据
|
||||
if(startPageX === currentPageX && startPageY === currentPageY) return
|
||||
if (startPageX === currentPageX && startPageY === currentPageY) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
const adsorptionPoints: AdsorptionPoint[] = []
|
||||
|
||||
// 获取全部非线条且未旋转元素的8个点作为吸附点
|
||||
for(let i = 0; i < elementList.value.length; i++) {
|
||||
for (let i = 0; i < elementList.value.length; i++) {
|
||||
const _element = elementList.value[i]
|
||||
if(_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
|
||||
if (_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
|
||||
|
||||
const left = _element.left
|
||||
const top = _element.top
|
||||
|
|
@ -63,7 +63,7 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
}
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -81,16 +81,16 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
// 根据拖拽的点，选择修改起点或终点的位置
|
||||
// 两点在水平和垂直方向上有对齐吸附
|
||||
// 靠近其他元素的吸附点有对齐吸附
|
||||
if(command === OperateLineHandlers.START) {
|
||||
if (command === OperateLineHandlers.START) {
|
||||
startX = startX + moveX
|
||||
startY = startY + moveY
|
||||
|
||||
if(Math.abs(startX - endX) < sorptionRange) startX = endX
|
||||
if(Math.abs(startY - endY) < sorptionRange) startY = endY
|
||||
if (Math.abs(startX - endX) < sorptionRange) startX = endX
|
||||
if (Math.abs(startY - endY) < sorptionRange) startY = endY
|
||||
|
||||
for(const adsorptionPoint of adsorptionPoints) {
|
||||
for (const adsorptionPoint of adsorptionPoints) {
|
||||
const { x, y } = adsorptionPoint
|
||||
if(Math.abs(x - startX) < sorptionRange && Math.abs(y - startY) < sorptionRange) {
|
||||
if (Math.abs(x - startX) < sorptionRange && Math.abs(y - startY) < sorptionRange) {
|
||||
startX = x
|
||||
startY = y
|
||||
break
|
||||
|
|
@ -101,12 +101,12 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
endX = endX + moveX
|
||||
endY = endY + moveY
|
||||
|
||||
if(Math.abs(startX - endX) < sorptionRange) endX = startX
|
||||
if(Math.abs(startY - endY) < sorptionRange) endY = startY
|
||||
if (Math.abs(startX - endX) < sorptionRange) endX = startX
|
||||
if (Math.abs(startY - endY) < sorptionRange) endY = startY
|
||||
|
||||
for(const adsorptionPoint of adsorptionPoints) {
|
||||
for (const adsorptionPoint of adsorptionPoints) {
|
||||
const { x, y } = adsorptionPoint
|
||||
if(Math.abs(x - endX) < sorptionRange && Math.abs(y - endY) < sorptionRange) {
|
||||
if (Math.abs(x - endX) < sorptionRange && Math.abs(y - endY) < sorptionRange) {
|
||||
endX = x
|
||||
endY = y
|
||||
break
|
||||
|
|
@ -122,18 +122,18 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
|
||||
const start: [number, number] = [0, 0]
|
||||
const end: [number, number] = [maxX - minX, maxY - minY]
|
||||
if(startX > endX) {
|
||||
if (startX > endX) {
|
||||
start[0] = maxX - minX
|
||||
end[0] = 0
|
||||
}
|
||||
if(startY > endY) {
|
||||
if (startY > endY) {
|
||||
start[1] = maxY - minY
|
||||
end[1] = 0
|
||||
}
|
||||
|
||||
// 修改线条的位置和两点的坐标
|
||||
elementList.value = elementList.value.map(el => {
|
||||
if(el.id === element.id) {
|
||||
if (el.id === element.id) {
|
||||
return {
|
||||
...el,
|
||||
left: minX,
|
||||
|
|
@ -155,7 +155,7 @@ export default (elementList: Ref<PPTElement[]>) => {
|
|||
const currentPageY = e.pageY
|
||||
|
||||
// 对比原始鼠标位置，没有实际的位移不更新数据
|
||||
if(startPageX === currentPageX && startPageY === currentPageY) return
|
||||
if (startPageX === currentPageX && startPageY === currentPageY) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -10,18 +10,18 @@ export default (elementRef: Ref<HTMLElement | undefined>) => {
|
|||
const { createImageElement, createTextElement } = useCreateElement()
|
||||
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
if(!e.dataTransfer) return
|
||||
if (!e.dataTransfer) return
|
||||
const dataTransferItem = e.dataTransfer.items[0]
|
||||
|
||||
if(dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
|
||||
if (dataTransferItem.kind === 'file' && dataTransferItem.type.indexOf('image') !== -1) {
|
||||
const imageFile = dataTransferItem.getAsFile()
|
||||
if(imageFile) {
|
||||
if (imageFile) {
|
||||
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
|
||||
}
|
||||
}
|
||||
else if(dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
|
||||
else if (dataTransferItem.kind === 'string' && dataTransferItem.type === 'text/plain') {
|
||||
dataTransferItem.getAsString(text => {
|
||||
if(disableHotkeys.value) return
|
||||
if (disableHotkeys.value) return
|
||||
createTextElement({
|
||||
left: 0,
|
||||
top: 0,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
|
|||
const formatCreateSelection = (selectionData: CreateElementSelectionData) => {
|
||||
const { start, end } = selectionData
|
||||
|
||||
if(!viewportRef.value) return
|
||||
if (!viewportRef.value) return
|
||||
const viewportRect = viewportRef.value.getBoundingClientRect()
|
||||
|
||||
const [startX, startY] = start
|
||||
|
|
@ -32,7 +32,7 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
|
|||
const formatCreateSelectionForLine = (selectionData: CreateElementSelectionData) => {
|
||||
const { start, end } = selectionData
|
||||
|
||||
if(!viewportRef.value) return
|
||||
if (!viewportRef.value) return
|
||||
const viewportRect = viewportRef.value.getBoundingClientRect()
|
||||
|
||||
const [startX, startY] = start
|
||||
|
|
@ -67,18 +67,18 @@ export default (viewportRef: Ref<HTMLElement | undefined>) => {
|
|||
const { createTextElement, createShapeElement, createLineElement } = useCreateElement()
|
||||
|
||||
const insertElementFromCreateSelection = (selectionData: CreateElementSelectionData) => {
|
||||
if(!creatingElement.value) return
|
||||
if (!creatingElement.value) return
|
||||
|
||||
const type = creatingElement.value.type
|
||||
if(type === 'text') {
|
||||
if (type === 'text') {
|
||||
const position = formatCreateSelection(selectionData)
|
||||
position && createTextElement(position)
|
||||
}
|
||||
else if(type === 'shape') {
|
||||
else if (type === 'shape') {
|
||||
const position = formatCreateSelection(selectionData)
|
||||
position && createShapeElement(position, (creatingElement.value as CreatingShapeElement).data)
|
||||
}
|
||||
else if(type === 'line') {
|
||||
else if (type === 'line') {
|
||||
const position = formatCreateSelectionForLine(selectionData)
|
||||
position && createLineElement(position, (creatingElement.value as CreatingLineElement).data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
})
|
||||
|
||||
const updateMouseSelection = (e: MouseEvent) => {
|
||||
if(!viewportRef.value) return
|
||||
if (!viewportRef.value) return
|
||||
|
||||
let isMouseDown = true
|
||||
const viewportRect = viewportRef.value.getBoundingClientRect()
|
||||
|
|
@ -38,7 +38,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
mouseSelectionState.height = 0
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -49,13 +49,13 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
const width = Math.abs(offsetWidth)
|
||||
const height = Math.abs(offsetHeight)
|
||||
|
||||
if( width < minSelectionRange || height < minSelectionRange ) return
|
||||
if ( width < minSelectionRange || height < minSelectionRange ) return
|
||||
|
||||
let quadrant = 0
|
||||
if( offsetWidth > 0 && offsetHeight > 0 ) quadrant = 4
|
||||
else if( offsetWidth < 0 && offsetHeight < 0 ) quadrant = 1
|
||||
else if( offsetWidth > 0 && offsetHeight < 0 ) quadrant = 2
|
||||
else if( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
|
||||
if ( offsetWidth > 0 && offsetHeight > 0 ) quadrant = 4
|
||||
else if ( offsetWidth < 0 && offsetHeight < 0 ) quadrant = 1
|
||||
else if ( offsetWidth > 0 && offsetHeight < 0 ) quadrant = 2
|
||||
else if ( offsetWidth < 0 && offsetHeight > 0 ) quadrant = 3
|
||||
|
||||
mouseSelectionState.isShow = true
|
||||
mouseSelectionState.quadrant = quadrant
|
||||
|
|
@ -71,7 +71,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
// 计算当前页面中的每一个元素是否处在鼠标选择范围中（必须完全包裹）
|
||||
// 将选择范围中的元素添加为激活元素
|
||||
let inRangeElementList: PPTElement[] = []
|
||||
for(let i = 0; i < elementList.value.length; i++) {
|
||||
for (let i = 0; i < elementList.value.length; i++) {
|
||||
const element = elementList.value[i]
|
||||
const mouseSelectionLeft = mouseSelectionState.left
|
||||
const mouseSelectionTop = mouseSelectionState.top
|
||||
|
|
@ -83,25 +83,25 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
const { minX, maxX, minY, maxY } = getElementRange(element)
|
||||
|
||||
let isInclude = false
|
||||
if(quadrant === 4) {
|
||||
if (quadrant === 4) {
|
||||
isInclude = minX > mouseSelectionLeft &&
|
||||
maxX < mouseSelectionLeft + mouseSelectionWidth &&
|
||||
minY > mouseSelectionTop &&
|
||||
maxY < mouseSelectionTop + mouseSelectionHeight
|
||||
}
|
||||
else if(quadrant === 1) {
|
||||
else if (quadrant === 1) {
|
||||
isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) &&
|
||||
maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth &&
|
||||
minY > (mouseSelectionTop - mouseSelectionHeight) &&
|
||||
maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
|
||||
}
|
||||
else if(quadrant === 2) {
|
||||
else if (quadrant === 2) {
|
||||
isInclude = minX > mouseSelectionLeft &&
|
||||
maxX < mouseSelectionLeft + mouseSelectionWidth &&
|
||||
minY > (mouseSelectionTop - mouseSelectionHeight) &&
|
||||
maxY < (mouseSelectionTop - mouseSelectionHeight) + mouseSelectionHeight
|
||||
}
|
||||
else if(quadrant === 3) {
|
||||
else if (quadrant === 3) {
|
||||
isInclude = minX > (mouseSelectionLeft - mouseSelectionWidth) &&
|
||||
maxX < (mouseSelectionLeft - mouseSelectionWidth) + mouseSelectionWidth &&
|
||||
minY > mouseSelectionTop &&
|
||||
|
|
@ -109,12 +109,12 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
}
|
||||
|
||||
// 被锁定的元素除外
|
||||
if(isInclude && !element.lock) inRangeElementList.push(element)
|
||||
if (isInclude && !element.lock) inRangeElementList.push(element)
|
||||
}
|
||||
|
||||
// 对于组合元素成员，必须所有成员都在选择范围中才算被选中
|
||||
inRangeElementList = inRangeElementList.filter(inRangeElement => {
|
||||
if(inRangeElement.groupId) {
|
||||
if (inRangeElement.groupId) {
|
||||
const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
|
||||
const groupElementList = elementList.value.filter(element => element.groupId === inRangeElement.groupId)
|
||||
return groupElementList.every(groupElement => inRangeElementIdList.includes(groupElement.id))
|
||||
|
|
@ -122,7 +122,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
return true
|
||||
})
|
||||
const inRangeElementIdList = inRangeElementList.map(inRangeElement => inRangeElement.id)
|
||||
if(inRangeElementIdList.length) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, inRangeElementIdList)
|
||||
if (inRangeElementIdList.length) store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, inRangeElementIdList)
|
||||
|
||||
mouseSelectionState.isShow = false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
const centerX = elLeft + elWidth / 2
|
||||
const centerY = elTop + elHeight / 2
|
||||
|
||||
if(!viewportRef.value) return
|
||||
if (!viewportRef.value) return
|
||||
const viewportRect = viewportRef.value.getBoundingClientRect()
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
// 计算鼠标基于旋转中心的坐标
|
||||
const mouseX = (e.pageX - viewportRect.left) / canvasScale.value
|
||||
|
|
@ -47,15 +47,15 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
|
||||
// 45°的倍数位置有吸附效果
|
||||
const sorptionRange = 5
|
||||
if( Math.abs(angle) <= sorptionRange ) angle = 0
|
||||
else if( angle > 0 && Math.abs(angle - 45) <= sorptionRange ) angle -= (angle - 45)
|
||||
else if( angle < 0 && Math.abs(angle + 45) <= sorptionRange ) angle -= (angle + 45)
|
||||
else if( angle > 0 && Math.abs(angle - 90) <= sorptionRange ) angle -= (angle - 90)
|
||||
else if( angle < 0 && Math.abs(angle + 90) <= sorptionRange ) angle -= (angle + 90)
|
||||
else if( angle > 0 && Math.abs(angle - 135) <= sorptionRange ) angle -= (angle - 135)
|
||||
else if( angle < 0 && Math.abs(angle + 135) <= sorptionRange ) angle -= (angle + 135)
|
||||
else if( angle > 0 && Math.abs(angle - 180) <= sorptionRange ) angle -= (angle - 180)
|
||||
else if( angle < 0 && Math.abs(angle + 180) <= sorptionRange ) angle -= (angle + 180)
|
||||
if ( Math.abs(angle) <= sorptionRange ) angle = 0
|
||||
else if ( angle > 0 && Math.abs(angle - 45) <= sorptionRange ) angle -= (angle - 45)
|
||||
else if ( angle < 0 && Math.abs(angle + 45) <= sorptionRange ) angle -= (angle + 45)
|
||||
else if ( angle > 0 && Math.abs(angle - 90) <= sorptionRange ) angle -= (angle - 90)
|
||||
else if ( angle < 0 && Math.abs(angle + 90) <= sorptionRange ) angle -= (angle + 90)
|
||||
else if ( angle > 0 && Math.abs(angle - 135) <= sorptionRange ) angle -= (angle - 135)
|
||||
else if ( angle < 0 && Math.abs(angle + 135) <= sorptionRange ) angle -= (angle + 135)
|
||||
else if ( angle > 0 && Math.abs(angle - 180) <= sorptionRange ) angle -= (angle - 180)
|
||||
else if ( angle < 0 && Math.abs(angle + 180) <= sorptionRange ) angle -= (angle + 180)
|
||||
|
||||
// 修改元素角度
|
||||
elementList.value = elementList.value.map(el => element.id === el.id ? { ...el, rotate: angle } : el)
|
||||
|
|
@ -66,7 +66,7 @@ export default (elementList: Ref<PPTElement[]>, viewportRef: Ref<HTMLElement | u
|
|||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
|
||||
if(elOriginRotate === angle) return
|
||||
if (elOriginRotate === angle) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export default (
|
|||
let horizontalLines: AlignLine[] = []
|
||||
let verticalLines: AlignLine[] = []
|
||||
|
||||
if('rotate' in element && element.rotate) {
|
||||
if ('rotate' in element && element.rotate) {
|
||||
// 元素旋转后的各点坐标以及对角坐标
|
||||
const { left, top, width, height } = element
|
||||
points = getRotateElementPoints({ left, top, width, height }, elRotate)
|
||||
|
|
@ -137,11 +137,11 @@ export default (
|
|||
const edgeHeight = VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO
|
||||
const isActiveGroupElement = element.id === activeGroupElementId.value
|
||||
|
||||
for(const el of elementList.value) {
|
||||
if('rotate' in el && el.rotate) continue
|
||||
if(el.type === 'line') continue
|
||||
if(isActiveGroupElement && el.id === element.id) continue
|
||||
if(!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
|
||||
for (const el of elementList.value) {
|
||||
if ('rotate' in el && el.rotate) continue
|
||||
if (el.type === 'line') continue
|
||||
if (isActiveGroupElement && el.id === element.id) continue
|
||||
if (!isActiveGroupElement && activeElementIdList.value.includes(el.id)) continue
|
||||
|
||||
const left = el.left
|
||||
const top = el.top
|
||||
|
|
@ -183,26 +183,26 @@ export default (
|
|||
let isHorizontalAdsorbed = false
|
||||
const correctionVal = { offsetX: 0, offsetY: 0 }
|
||||
|
||||
if(currentY || currentY === 0) {
|
||||
for(let i = 0; i < horizontalLines.length; i++) {
|
||||
if (currentY || currentY === 0) {
|
||||
for (let i = 0; i < horizontalLines.length; i++) {
|
||||
const { value, range } = horizontalLines[i]
|
||||
const min = Math.min(...range, currentX || 0)
|
||||
const max = Math.max(...range, currentX || 0)
|
||||
|
||||
if(Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
if (Math.abs(currentY - value) < sorptionRange && !isHorizontalAdsorbed) {
|
||||
correctionVal.offsetY = currentY - value
|
||||
isHorizontalAdsorbed = true
|
||||
_alignmentLines.push({ type: 'horizontal', axis: {x: min - 50, y: value}, length: max - min + 100 })
|
||||
}
|
||||
}
|
||||
}
|
||||
if(currentX || currentX === 0) {
|
||||
for(let i = 0; i < verticalLines.length; i++) {
|
||||
if (currentX || currentX === 0) {
|
||||
for (let i = 0; i < verticalLines.length; i++) {
|
||||
const { value, range } = verticalLines[i]
|
||||
const min = Math.min(...range, (currentY || 0))
|
||||
const max = Math.max(...range, (currentY || 0))
|
||||
|
||||
if(Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
if (Math.abs(currentX - value) < sorptionRange && !isVerticalAdsorbed) {
|
||||
correctionVal.offsetX = currentX - value
|
||||
isVerticalAdsorbed = true
|
||||
_alignmentLines.push({ type: 'vertical', axis: {x: value, y: min - 50}, length: max - min + 100 })
|
||||
|
|
@ -214,7 +214,7 @@ export default (
|
|||
}
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -228,52 +228,52 @@ export default (
|
|||
let top = elOriginTop
|
||||
|
||||
// 元素被旋转的情况下
|
||||
if(elRotate) {
|
||||
if (elRotate) {
|
||||
// 根据元素旋转的角度，修正鼠标按下后移动的距离（因为拖动的方向发生了改变）
|
||||
const revisedX = (Math.cos(rotateRadian) * x + Math.sin(rotateRadian) * y) / canvasScale.value
|
||||
let revisedY = (Math.cos(rotateRadian) * y - Math.sin(rotateRadian) * x) / canvasScale.value
|
||||
|
||||
// 锁定宽高比例
|
||||
if(fixedRatio) {
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
|
||||
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) revisedY = revisedX / aspectRatio
|
||||
if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) revisedY = -revisedX / aspectRatio
|
||||
}
|
||||
|
||||
// 根据不同的操作点分别计算元素缩放后的大小和位置
|
||||
// 这里计算的位置是错误的，因为旋转后缩放实际上也改变了元素的位置，需要在后面进行矫正
|
||||
// 这里计算的大小是正确的，因为上面修正鼠标按下后移动的距离时其实已经进行过了矫正
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
width = getSizeWithinRange(elOriginWidth + revisedX)
|
||||
height = getSizeWithinRange(elOriginHeight + revisedY)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
width = getSizeWithinRange(elOriginWidth - revisedX)
|
||||
height = getSizeWithinRange(elOriginHeight + revisedY)
|
||||
left = elOriginLeft - (width - elOriginWidth)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_TOP) {
|
||||
else if (command === OperateResizeHandlers.LEFT_TOP) {
|
||||
width = getSizeWithinRange(elOriginWidth - revisedX)
|
||||
height = getSizeWithinRange(elOriginHeight - revisedY)
|
||||
left = elOriginLeft - (width - elOriginWidth)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
else if (command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
width = getSizeWithinRange(elOriginWidth + revisedX)
|
||||
height = getSizeWithinRange(elOriginHeight - revisedY)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.TOP) {
|
||||
else if (command === OperateResizeHandlers.TOP) {
|
||||
height = getSizeWithinRange(elOriginHeight - revisedY)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.BOTTOM) {
|
||||
height = getSizeWithinRange(elOriginHeight + revisedY)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT) {
|
||||
else if (command === OperateResizeHandlers.LEFT) {
|
||||
width = getSizeWithinRange(elOriginWidth - revisedX)
|
||||
left = elOriginLeft - (width - elOriginWidth)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT) {
|
||||
else if (command === OperateResizeHandlers.RIGHT) {
|
||||
width = getSizeWithinRange(elOriginWidth + revisedX)
|
||||
}
|
||||
|
||||
|
|
@ -295,40 +295,40 @@ export default (
|
|||
let moveX = x / canvasScale.value
|
||||
let moveY = y / canvasScale.value
|
||||
|
||||
if(fixedRatio) {
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
|
||||
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) moveY = moveX / aspectRatio
|
||||
if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) moveY = -moveX / aspectRatio
|
||||
}
|
||||
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + elOriginHeight + moveY)
|
||||
moveX = moveX - offsetX
|
||||
moveY = moveY - offsetY
|
||||
if(fixedRatio) {
|
||||
if(offsetY) moveX = moveY * aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (offsetY) moveX = moveY * aspectRatio
|
||||
else moveY = moveX / aspectRatio
|
||||
}
|
||||
width = getSizeWithinRange(elOriginWidth + moveX)
|
||||
height = getSizeWithinRange(elOriginHeight + moveY)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + elOriginHeight + moveY)
|
||||
moveX = moveX - offsetX
|
||||
moveY = moveY - offsetY
|
||||
if(fixedRatio) {
|
||||
if(offsetY) moveX = -moveY * aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (offsetY) moveX = -moveY * aspectRatio
|
||||
else moveY = -moveX / aspectRatio
|
||||
}
|
||||
width = getSizeWithinRange(elOriginWidth - moveX)
|
||||
height = getSizeWithinRange(elOriginHeight + moveY)
|
||||
left = elOriginLeft - (width - elOriginWidth)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_TOP) {
|
||||
else if (command === OperateResizeHandlers.LEFT_TOP) {
|
||||
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + moveX, elOriginTop + moveY)
|
||||
moveX = moveX - offsetX
|
||||
moveY = moveY - offsetY
|
||||
if(fixedRatio) {
|
||||
if(offsetY) moveX = moveY * aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (offsetY) moveX = moveY * aspectRatio
|
||||
else moveY = moveX / aspectRatio
|
||||
}
|
||||
width = getSizeWithinRange(elOriginWidth - moveX)
|
||||
|
|
@ -336,36 +336,36 @@ export default (
|
|||
left = elOriginLeft - (width - elOriginWidth)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
else if (command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
const { offsetX, offsetY } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, elOriginTop + moveY)
|
||||
moveX = moveX - offsetX
|
||||
moveY = moveY - offsetY
|
||||
if(fixedRatio) {
|
||||
if(offsetY) moveX = -moveY * aspectRatio
|
||||
if (fixedRatio) {
|
||||
if (offsetY) moveX = -moveY * aspectRatio
|
||||
else moveY = -moveX / aspectRatio
|
||||
}
|
||||
width = getSizeWithinRange(elOriginWidth + moveX)
|
||||
height = getSizeWithinRange(elOriginHeight - moveY)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT) {
|
||||
else if (command === OperateResizeHandlers.LEFT) {
|
||||
const { offsetX } = alignedAdsorption(elOriginLeft + moveX, null)
|
||||
moveX = moveX - offsetX
|
||||
width = getSizeWithinRange(elOriginWidth - moveX)
|
||||
left = elOriginLeft - (width - elOriginWidth)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT) {
|
||||
else if (command === OperateResizeHandlers.RIGHT) {
|
||||
const { offsetX } = alignedAdsorption(elOriginLeft + elOriginWidth + moveX, null)
|
||||
moveX = moveX - offsetX
|
||||
width = getSizeWithinRange(elOriginWidth + moveX)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.TOP) {
|
||||
else if (command === OperateResizeHandlers.TOP) {
|
||||
const { offsetY } = alignedAdsorption(null, elOriginTop + moveY)
|
||||
moveY = moveY - offsetY
|
||||
height = getSizeWithinRange(elOriginHeight - moveY)
|
||||
top = elOriginTop - (height - elOriginHeight)
|
||||
}
|
||||
else if(command === OperateResizeHandlers.BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.BOTTOM) {
|
||||
const { offsetY } = alignedAdsorption(null, elOriginTop + elOriginHeight + moveY)
|
||||
moveY = moveY - offsetY
|
||||
height = getSizeWithinRange(elOriginHeight + moveY)
|
||||
|
|
@ -381,7 +381,7 @@ export default (
|
|||
document.onmouseup = null
|
||||
alignmentLines.value = []
|
||||
|
||||
if(startPageX === e.pageX && startPageY === e.pageY) return
|
||||
if (startPageX === e.pageX && startPageY === e.pageY) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
|
||||
emitter.emit(EmitterEvents.SCALE_ELEMENT_STATE, false)
|
||||
|
|
@ -404,7 +404,7 @@ export default (
|
|||
const originElementList: PPTElement[] = JSON.parse(JSON.stringify(elementList.value))
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -414,9 +414,9 @@ export default (
|
|||
let y = (currentPageY - startPageY) / canvasScale.value
|
||||
|
||||
// 锁定宽高比例
|
||||
if(ctrlOrShiftKeyActive.value) {
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) y = x / aspectRatio
|
||||
if(command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) y = -x / aspectRatio
|
||||
if (ctrlOrShiftKeyActive.value) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM || command === OperateResizeHandlers.LEFT_TOP) y = x / aspectRatio
|
||||
if (command === OperateResizeHandlers.LEFT_BOTTOM || command === OperateResizeHandlers.RIGHT_TOP) y = -x / aspectRatio
|
||||
}
|
||||
|
||||
// 获取鼠标缩放时当前所有激活元素的范围
|
||||
|
|
@ -425,32 +425,32 @@ export default (
|
|||
let currentMinY = minY
|
||||
let currentMaxY = maxY
|
||||
|
||||
if(command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
if (command === OperateResizeHandlers.RIGHT_BOTTOM) {
|
||||
currentMaxX = maxX + x
|
||||
currentMaxY = maxY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.LEFT_BOTTOM) {
|
||||
currentMinX = minX + x
|
||||
currentMaxY = maxY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT_TOP) {
|
||||
else if (command === OperateResizeHandlers.LEFT_TOP) {
|
||||
currentMinX = minX + x
|
||||
currentMinY = minY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
else if (command === OperateResizeHandlers.RIGHT_TOP) {
|
||||
currentMaxX = maxX + x
|
||||
currentMinY = minY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.TOP) {
|
||||
else if (command === OperateResizeHandlers.TOP) {
|
||||
currentMinY = minY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.BOTTOM) {
|
||||
else if (command === OperateResizeHandlers.BOTTOM) {
|
||||
currentMaxY = maxY + y
|
||||
}
|
||||
else if(command === OperateResizeHandlers.LEFT) {
|
||||
else if (command === OperateResizeHandlers.LEFT) {
|
||||
currentMinX = minX + x
|
||||
}
|
||||
else if(command === OperateResizeHandlers.RIGHT) {
|
||||
else if (command === OperateResizeHandlers.RIGHT) {
|
||||
currentMaxX = maxX + x
|
||||
}
|
||||
|
||||
|
|
@ -462,13 +462,13 @@ export default (
|
|||
let widthScale = currentOppositeWidth / operateWidth
|
||||
let heightScale = currentOppositeHeight / operateHeight
|
||||
|
||||
if(widthScale <= 0) widthScale = 0
|
||||
if(heightScale <= 0) heightScale = 0
|
||||
if (widthScale <= 0) widthScale = 0
|
||||
if (heightScale <= 0) heightScale = 0
|
||||
|
||||
// 根据上面计算的比例，修改所有被激活元素的位置大小
|
||||
// 宽高通过乘以对应的比例得到，位置通过将被操作元素在所有元素整体中的相对位置乘以对应比例获得
|
||||
elementList.value = elementList.value.map(el => {
|
||||
if((el.type === 'image' || el.type === 'shape') && activeElementIdList.value.includes(el.id)) {
|
||||
if ((el.type === 'image' || el.type === 'shape') && activeElementIdList.value.includes(el.id)) {
|
||||
const originElement = originElementList.find(originEl => originEl.id === el.id) as PPTImageElement | PPTShapeElement
|
||||
return {
|
||||
...el,
|
||||
|
|
@ -487,7 +487,7 @@ export default (
|
|||
document.onmousemove = null
|
||||
document.onmouseup = null
|
||||
|
||||
if(startPageX === e.pageX && startPageY === e.pageY) return
|
||||
if (startPageX === e.pageX && startPageY === e.pageY) return
|
||||
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { elements: elementList.value })
|
||||
addHistorySnapshot()
|
||||
|
|
|
|||
|
|
@ -15,22 +15,22 @@ export default (
|
|||
const ctrlOrShiftKeyActive = computed<boolean>(() => store.getters.ctrlOrShiftKeyActive)
|
||||
|
||||
const selectElement = (e: MouseEvent, element: PPTElement, canMove = true) => {
|
||||
if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
|
||||
if (!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
|
||||
|
||||
// 如果被点击的元素处于未激活状态，则将他设置为激活元素（单选），或者加入到激活元素中（多选）
|
||||
if(!activeElementIdList.value.includes(element.id)) {
|
||||
if (!activeElementIdList.value.includes(element.id)) {
|
||||
let newActiveIdList: string[] = []
|
||||
|
||||
if(ctrlOrShiftKeyActive.value) {
|
||||
if (ctrlOrShiftKeyActive.value) {
|
||||
newActiveIdList = [...activeElementIdList.value, element.id]
|
||||
}
|
||||
else newActiveIdList = [element.id]
|
||||
|
||||
// 同时如果该元素是分组成员，需要将和他同组的元素一起激活
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
const groupMembersId: string[] = []
|
||||
elementList.value.forEach((el: PPTElement) => {
|
||||
if(el.groupId === element.groupId) groupMembersId.push(el.id)
|
||||
if (el.groupId === element.groupId) groupMembersId.push(el.id)
|
||||
})
|
||||
newActiveIdList = [...newActiveIdList, ...groupMembersId]
|
||||
}
|
||||
|
|
@ -40,14 +40,14 @@ export default (
|
|||
}
|
||||
|
||||
// 如果被点击的元素已激活，且按下了多选按钮，则取消其激活状态（除非该元素或分组是最后的一个激活元素）
|
||||
else if(ctrlOrShiftKeyActive.value) {
|
||||
else if (ctrlOrShiftKeyActive.value) {
|
||||
let newActiveIdList: string[] = []
|
||||
|
||||
// 同时如果该元素是分组成员，需要将和他同组的元素一起取消
|
||||
if(element.groupId) {
|
||||
if (element.groupId) {
|
||||
const groupMembersId: string[] = []
|
||||
elementList.value.forEach((el: PPTElement) => {
|
||||
if(el.groupId === element.groupId) groupMembersId.push(el.id)
|
||||
if (el.groupId === element.groupId) groupMembersId.push(el.id)
|
||||
})
|
||||
newActiveIdList = activeElementIdList.value.filter(id => !groupMembersId.includes(id))
|
||||
}
|
||||
|
|
@ -55,18 +55,18 @@ export default (
|
|||
newActiveIdList = activeElementIdList.value.filter(id => id !== element.id)
|
||||
}
|
||||
|
||||
if(newActiveIdList.length > 0) {
|
||||
if (newActiveIdList.length > 0) {
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, newActiveIdList)
|
||||
}
|
||||
}
|
||||
|
||||
// 如果被点击的元素已激活，且没有按下多选按钮，且该元素不是当前操作元素，则将其设置为当前操作元素
|
||||
else if(handleElementId.value !== element.id) {
|
||||
else if (handleElementId.value !== element.id) {
|
||||
store.commit(MutationTypes.SET_HANDLE_ELEMENT_ID, element.id)
|
||||
}
|
||||
|
||||
// 如果被点击的元素是当前操作元素，且没有按下多选按钮，则该元素下次保持该状态再次被点击时，将被设置为多选元素中的激活成员
|
||||
else if(activeGroupElementId.value !== element.id) {
|
||||
else if (activeGroupElementId.value !== element.id) {
|
||||
const startPageX = e.pageX
|
||||
const startPageY = e.pageY
|
||||
|
||||
|
|
@ -74,14 +74,14 @@ export default (
|
|||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
||||
if(startPageX === currentPageX && startPageY === currentPageY) {
|
||||
if (startPageX === currentPageX && startPageY === currentPageY) {
|
||||
activeGroupElementId.value = element.id
|
||||
;(e.target as HTMLElement).onmouseup = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(canMove) moveElement(e, element)
|
||||
if (canMove) moveElement(e, element)
|
||||
}
|
||||
|
||||
const selectAllElement = () => {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
|
|||
const canvasPercentage = computed(() => store.state.canvasPercentage)
|
||||
|
||||
const setViewportSize = () => {
|
||||
if(!canvasRef.value) return
|
||||
if (!canvasRef.value) return
|
||||
const canvasWidth = canvasRef.value.clientWidth
|
||||
const canvasHeight = canvasRef.value.clientHeight
|
||||
|
||||
if(canvasHeight / canvasWidth > VIEWPORT_ASPECT_RATIO) {
|
||||
if (canvasHeight / canvasWidth > VIEWPORT_ASPECT_RATIO) {
|
||||
const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100)
|
||||
store.commit(MutationTypes.SET_CANVAS_SCALE, viewportActualWidth / VIEWPORT_SIZE)
|
||||
viewportLeft.value = (canvasWidth - viewportActualWidth) / 2
|
||||
|
|
@ -40,10 +40,10 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
|
|||
const resizeObserver = new ResizeObserver(setViewportSize)
|
||||
|
||||
onMounted(() => {
|
||||
if(canvasRef.value) resizeObserver.observe(canvasRef.value)
|
||||
if (canvasRef.value) resizeObserver.observe(canvasRef.value)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if(canvasRef.value) resizeObserver.unobserve(canvasRef.value)
|
||||
if (canvasRef.value) resizeObserver.unobserve(canvasRef.value)
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -159,24 +159,24 @@ export default defineComponent({
|
|||
|
||||
const handleClickBlankArea = (e: MouseEvent) => {
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
|
||||
if(!ctrlOrShiftKeyActive.value) updateMouseSelection(e)
|
||||
if(!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
|
||||
if (!ctrlOrShiftKeyActive.value) updateMouseSelection(e)
|
||||
if (!editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, true)
|
||||
removeAllRanges()
|
||||
}
|
||||
|
||||
const removeEditorAreaFocus = () => {
|
||||
if(editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
|
||||
if (editorAreaFocus.value) store.commit(MutationTypes.SET_EDITORAREA_FOCUS, false)
|
||||
}
|
||||
|
||||
const { scaleCanvas } = useScaleCanvas()
|
||||
const throttleScaleCanvas = throttle(scaleCanvas, 100, { leading: true, trailing: false })
|
||||
|
||||
const mousewheelScaleCanvas = (e: WheelEvent) => {
|
||||
if(!ctrlKeyState.value) return
|
||||
if (!ctrlKeyState.value) return
|
||||
|
||||
e.preventDefault()
|
||||
if(e.deltaY > 0) throttleScaleCanvas('-')
|
||||
else if(e.deltaY < 0) throttleScaleCanvas('+')
|
||||
if (e.deltaY > 0) throttleScaleCanvas('-')
|
||||
else if (e.deltaY < 0) throttleScaleCanvas('+')
|
||||
}
|
||||
|
||||
const showGridLines = computed(() => store.state.showGridLines)
|
||||
|
|
|
|||
|
|
@ -65,14 +65,14 @@ export default defineComponent({
|
|||
const isCustom = ref(false)
|
||||
|
||||
const handleClickTable = () => {
|
||||
if(!endCell.value.length) return
|
||||
if (!endCell.value.length) return
|
||||
const [row, col] = endCell.value
|
||||
emit('insert', { row, col })
|
||||
}
|
||||
|
||||
const insertCustomTable = () => {
|
||||
if(customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
|
||||
if(customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
|
||||
if (customRow.value < 1 || customRow.value > 20) return message.warning('行数/列数必须在0~20之间！')
|
||||
if (customCol.value < 1 || customCol.value > 20) return message.warning('行数/列数必须在0~20之间！')
|
||||
emit('insert', { row: customRow.value, col: customCol.value })
|
||||
isCustom.value = false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ export default defineComponent({
|
|||
|
||||
const insertImageElement = (files: File[]) => {
|
||||
const imageFile = files[0]
|
||||
if(!imageFile) return
|
||||
if (!imageFile) return
|
||||
getImageDataURL(imageFile).then(dataURL => createImageElement(dataURL))
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,20 +66,20 @@ export default defineComponent({
|
|||
const changSlideIndex = (index: number) => {
|
||||
store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
|
||||
|
||||
if(slideIndex.value === index) return
|
||||
if (slideIndex.value === index) return
|
||||
store.commit(MutationTypes.UPDATE_SLIDE_INDEX, index)
|
||||
}
|
||||
|
||||
const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
|
||||
|
||||
const setThumbnailsFocus = (focus: boolean) => {
|
||||
if(thumbnailsFocus.value === focus) return
|
||||
if (thumbnailsFocus.value === focus) return
|
||||
store.commit(MutationTypes.SET_THUMBNAILS_FOCUS, focus)
|
||||
}
|
||||
|
||||
const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
|
||||
const { newIndex, oldIndex } = eventData
|
||||
if(oldIndex === newIndex) return
|
||||
if (oldIndex === newIndex) return
|
||||
|
||||
const _slides = JSON.parse(JSON.stringify(slides.value))
|
||||
const _slide = _slides[oldIndex]
|
||||
|
|
|
|||
|
|
@ -77,8 +77,8 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
|
|||
import Draggable from 'vuedraggable'
|
||||
|
||||
const animationTypes: { [key: string]: string } = {}
|
||||
for(const type of ANIMATIONS) {
|
||||
for(const animation of type.children) {
|
||||
for (const type of ANIMATIONS) {
|
||||
for (const animation of type.children) {
|
||||
animationTypes[animation.value] = animation.name
|
||||
}
|
||||
}
|
||||
|
|
@ -102,11 +102,11 @@ export default defineComponent({
|
|||
const animations = ANIMATIONS
|
||||
|
||||
const animationSequence = computed(() => {
|
||||
if(!currentSlideAnimations.value) return []
|
||||
if (!currentSlideAnimations.value) return []
|
||||
const animationSequence = []
|
||||
for(const animation of currentSlideAnimations.value) {
|
||||
for (const animation of currentSlideAnimations.value) {
|
||||
const el = currentSlide.value.elements.find(el => el.id === animation.elId)
|
||||
if(!el) continue
|
||||
if (!el) continue
|
||||
const elType = ELEMENT_TYPE_ZH[el.type]
|
||||
const animationType = animationTypes[animation.type]
|
||||
|
||||
|
|
@ -120,16 +120,16 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const handleElementAnimation = computed(() => {
|
||||
if(!handleElement.value) return null
|
||||
if (!handleElement.value) return null
|
||||
const animations = currentSlideAnimations.value || []
|
||||
const animation = animations.find(item => item.elId === handleElement.value.id)
|
||||
if(!animation) return null
|
||||
if (!animation) return null
|
||||
return animationTypes[animation.type]
|
||||
})
|
||||
|
||||
const updateElementAnimation = (type: string) => {
|
||||
const animations = (currentSlideAnimations.value as PPTAnimation[]).map(item => {
|
||||
if(item.elId === handleElement.value.id) return { ...item, type }
|
||||
if (item.elId === handleElement.value.id) return { ...item, type }
|
||||
return item
|
||||
})
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { animations })
|
||||
|
|
@ -138,7 +138,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const addAnimation = (type: string) => {
|
||||
if(handleElementAnimation.value) {
|
||||
if (handleElementAnimation.value) {
|
||||
updateElementAnimation(type)
|
||||
return
|
||||
}
|
||||
|
|
@ -161,7 +161,7 @@ export default defineComponent({
|
|||
|
||||
const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
|
||||
const { newIndex, oldIndex } = eventData
|
||||
if(oldIndex === newIndex) return
|
||||
if (oldIndex === newIndex) return
|
||||
|
||||
const animations: PPTAnimation[] = JSON.parse(JSON.stringify(currentSlideAnimations.value))
|
||||
const animation = animations[oldIndex]
|
||||
|
|
@ -175,7 +175,7 @@ export default defineComponent({
|
|||
const runAnimation = (elId: string, animationType: string) => {
|
||||
const prefix = 'animate__'
|
||||
const elRef = document.querySelector(`#editable-element-${elId} [class^=editable-element-]`)
|
||||
if(elRef) {
|
||||
if (elRef) {
|
||||
const animationName = `${prefix}${animationType}`
|
||||
elRef.classList.add(`${prefix}animated`, animationName)
|
||||
|
||||
|
|
|
|||
|
|
@ -156,19 +156,19 @@ export default defineComponent({
|
|||
const fixedRatio = ref(false)
|
||||
|
||||
const minSize = computed(() => {
|
||||
if(!handleElement.value) return 20
|
||||
if (!handleElement.value) return 20
|
||||
return MIN_SIZE[handleElement.value.type] || 20
|
||||
})
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
|
||||
left.value = round(handleElement.value.left, 1)
|
||||
top.value = round(handleElement.value.top, 1)
|
||||
|
||||
fixedRatio.value = 'fixedRatio' in handleElement.value && !!handleElement.value.fixedRatio
|
||||
|
||||
if(handleElement.value.type !== 'line') {
|
||||
if (handleElement.value.type !== 'line') {
|
||||
width.value = round(handleElement.value.width, 1)
|
||||
height.value = round(handleElement.value.height, 1)
|
||||
rotate.value = 'rotate' in handleElement.value && handleElement.value.rotate !== undefined ? round(handleElement.value.rotate, 1) : 0
|
||||
|
|
@ -212,11 +212,11 @@ export default defineComponent({
|
|||
}
|
||||
const updateRotate45 = (command: '+' | '-') => {
|
||||
let _rotate = Math.floor(rotate.value / 45) * 45
|
||||
if(command === '+') _rotate = _rotate + 45
|
||||
else if(command === '-') _rotate = _rotate - 45
|
||||
if (command === '+') _rotate = _rotate + 45
|
||||
else if (command === '-') _rotate = _rotate - 45
|
||||
|
||||
if(_rotate < -180) _rotate = -180
|
||||
if(_rotate > 180) _rotate = 180
|
||||
if (_rotate < -180) _rotate = -180
|
||||
if (_rotate > 180) _rotate = 180
|
||||
|
||||
const props = { rotate: _rotate }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
|
|
|
|||
|
|
@ -86,18 +86,18 @@ export default defineComponent({
|
|||
const rowCount = labels.length
|
||||
const colCount = series.length
|
||||
|
||||
for(let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
||||
const row = [labels[rowIndex]]
|
||||
for(let colIndex = 0; colIndex < colCount; colIndex++) {
|
||||
for (let colIndex = 0; colIndex < colCount; colIndex++) {
|
||||
row.push(series[colIndex][rowIndex] + '')
|
||||
}
|
||||
_data.push(row)
|
||||
}
|
||||
|
||||
for(let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
||||
for(let colIndex = 0; colIndex < colCount + 1; colIndex++) {
|
||||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
|
||||
for (let colIndex = 0; colIndex < colCount + 1; colIndex++) {
|
||||
const inputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
|
||||
if(!inputRef) continue
|
||||
if (!inputRef) continue
|
||||
inputRef.value = _data[rowIndex][colIndex] + ''
|
||||
}
|
||||
}
|
||||
|
|
@ -113,19 +113,19 @@ export default defineComponent({
|
|||
const labels: string[] = []
|
||||
const series: number[][] = []
|
||||
|
||||
for(let rowIndex = 0; rowIndex < row; rowIndex++) {
|
||||
for (let rowIndex = 0; rowIndex < row; rowIndex++) {
|
||||
let labelsItem = `类别${rowIndex + 1}`
|
||||
const labelInputRef = document.querySelector(`#cell-${rowIndex}-0`) as HTMLInputElement
|
||||
if(labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
|
||||
if (labelInputRef && labelInputRef.value) labelsItem = labelInputRef.value
|
||||
labels.push(labelsItem)
|
||||
}
|
||||
|
||||
for(let colIndex = 1; colIndex < col; colIndex++) {
|
||||
for (let colIndex = 1; colIndex < col; colIndex++) {
|
||||
const seriesItem = []
|
||||
for(let rowIndex = 0; rowIndex < row; rowIndex++) {
|
||||
for (let rowIndex = 0; rowIndex < row; rowIndex++) {
|
||||
const valueInputRef = document.querySelector(`#cell-${rowIndex}-${colIndex}`) as HTMLInputElement
|
||||
let value = 0
|
||||
if(valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
|
||||
if (valueInputRef && valueInputRef.value && !!(+valueInputRef.value)) {
|
||||
value = +valueInputRef.value
|
||||
}
|
||||
seriesItem.push(value)
|
||||
|
|
@ -148,7 +148,7 @@ export default defineComponent({
|
|||
const originHeight = selectedRange.value[1] * CELL_HEIGHT
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -170,18 +170,18 @@ export default defineComponent({
|
|||
const endPageX = e.pageX
|
||||
const endPageY = e.pageY
|
||||
|
||||
if(startPageX === endPageX && startPageY === endPageY) return
|
||||
if (startPageX === endPageX && startPageY === endPageY) return
|
||||
|
||||
let width = tempRangeSize.value.width
|
||||
let height = tempRangeSize.value.height
|
||||
if(width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
|
||||
if(height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
|
||||
if (width % CELL_WIDTH > CELL_WIDTH * 0.5) width = width + (CELL_WIDTH - width % CELL_WIDTH)
|
||||
if (height % CELL_HEIGHT > CELL_HEIGHT * 0.5) height = height + (CELL_HEIGHT - height % CELL_HEIGHT)
|
||||
|
||||
let row = Math.round(height / CELL_HEIGHT)
|
||||
let col = Math.round(width / CELL_WIDTH)
|
||||
|
||||
if(row < 3) row = 3
|
||||
if(col < 2) col = 2
|
||||
if (row < 3) row = 3
|
||||
if (col < 2) col = 2
|
||||
|
||||
selectedRange.value = [col, row]
|
||||
tempRangeSize.value = { width: 0, height: 0 }
|
||||
|
|
|
|||
|
|
@ -136,10 +136,10 @@ export default defineComponent({
|
|||
const donut = ref(false)
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value || handleElement.value.type !== 'chart') return
|
||||
if (!handleElement.value || handleElement.value.type !== 'chart') return
|
||||
fill.value = handleElement.value.fill || '#000'
|
||||
|
||||
if(handleElement.value.options) {
|
||||
if (handleElement.value.options) {
|
||||
const {
|
||||
lineSmooth: _lineSmooth,
|
||||
showLine: _showLine,
|
||||
|
|
@ -148,11 +148,11 @@ export default defineComponent({
|
|||
donut: _donut,
|
||||
} = handleElement.value.options
|
||||
|
||||
if(_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
|
||||
if(_showLine !== undefined) showLine.value = _showLine
|
||||
if(_showArea !== undefined) showArea.value = _showArea
|
||||
if(_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
|
||||
if(_donut !== undefined) donut.value = _donut
|
||||
if (_lineSmooth !== undefined) lineSmooth.value = _lineSmooth
|
||||
if (_showLine !== undefined) showLine.value = _showLine
|
||||
if (_showArea !== undefined) showArea.value = _showArea
|
||||
if (_horizontalBars !== undefined) horizontalBars.value = _horizontalBars
|
||||
if (_donut !== undefined) donut.value = _donut
|
||||
}
|
||||
|
||||
themeColor.value = handleElement.value.themeColor
|
||||
|
|
|
|||
|
|
@ -178,9 +178,9 @@ export default defineComponent({
|
|||
const filterOptions = ref<FilterOption[]>(JSON.parse(JSON.stringify(defaultFilters)))
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value || handleElement.value.type !== 'image') return
|
||||
if (!handleElement.value || handleElement.value.type !== 'image') return
|
||||
|
||||
if(handleElement.value.flip) {
|
||||
if (handleElement.value.flip) {
|
||||
flip.value = {
|
||||
x: handleElement.value.flip.x || 0,
|
||||
y: handleElement.value.flip.y || 0,
|
||||
|
|
@ -189,9 +189,9 @@ export default defineComponent({
|
|||
else flip.value = { x: 0, y: 0 }
|
||||
|
||||
const filters = handleElement.value.filters
|
||||
if(filters) {
|
||||
if (filters) {
|
||||
filterOptions.value = defaultFilters.map(item => {
|
||||
if(filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
|
||||
if (filters[item.key] !== undefined) return { ...item, value: parseInt(filters[item.key]) }
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
|
@ -251,14 +251,14 @@ export default defineComponent({
|
|||
} = getImageElementDataBeforeClip()
|
||||
|
||||
// 设置形状和纵横比
|
||||
if(ratio) {
|
||||
if (ratio) {
|
||||
const imageRatio = originHeight / originWidth
|
||||
|
||||
const min = 0
|
||||
const max = 100
|
||||
let range
|
||||
|
||||
if(imageRatio > ratio) {
|
||||
if (imageRatio > ratio) {
|
||||
const distance = ((1 - ratio / imageRatio) / 2) * 100
|
||||
range = [[min, distance], [max, max - distance]]
|
||||
}
|
||||
|
|
@ -292,7 +292,7 @@ export default defineComponent({
|
|||
|
||||
const replaceImage = (files: File[]) => {
|
||||
const imageFile = files[0]
|
||||
if(!imageFile) return
|
||||
if (!imageFile) return
|
||||
getImageDataURL(imageFile).then(dataURL => {
|
||||
const props = { src: dataURL }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
|
|
@ -301,7 +301,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const resetImage = () => {
|
||||
if(handleElement.value.clip) {
|
||||
if (handleElement.value.clip) {
|
||||
const {
|
||||
originWidth,
|
||||
originHeight,
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export default defineComponent({
|
|||
const fillType = ref('fill')
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value || handleElement.value.type !== 'shape') return
|
||||
if (!handleElement.value || handleElement.value.type !== 'shape') return
|
||||
fill.value = handleElement.value.fill || '#000'
|
||||
|
||||
gradient.value = handleElement.value.gradient || { type: 'linear', rotate: 0, color: [fill.value, '#fff'] }
|
||||
|
|
@ -116,7 +116,7 @@ export default defineComponent({
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const updateFillType = (type: 'gradient' | 'fill') => {
|
||||
if(type === 'fill') {
|
||||
if (type === 'fill') {
|
||||
store.commit(MutationTypes.REMOVE_ELEMENT_PROPS, {
|
||||
id: handleElement.value.id,
|
||||
propName: 'gradient',
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ export default defineComponent({
|
|||
const minColCount = ref(0)
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value || handleElement.value.type !== 'table') return
|
||||
if (!handleElement.value || handleElement.value.type !== 'table') return
|
||||
|
||||
theme.value = handleElement.value.theme
|
||||
hasTheme.value = !!theme.value
|
||||
|
|
@ -242,18 +242,18 @@ export default defineComponent({
|
|||
const selectedCells = ref<string[]>([])
|
||||
|
||||
const updateTextAttrState = () => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
|
||||
let rowIndex = 0
|
||||
let colIndex = 0
|
||||
if(selectedCells.value.length) {
|
||||
if (selectedCells.value.length) {
|
||||
const selectedCell = selectedCells.value[0]
|
||||
rowIndex = +selectedCell.split('_')[0]
|
||||
colIndex = +selectedCell.split('_')[1]
|
||||
}
|
||||
const style = handleElement.value.data[rowIndex][colIndex].style
|
||||
|
||||
if(!style) {
|
||||
if (!style) {
|
||||
textAttrs.value = {
|
||||
bold: false,
|
||||
em: false,
|
||||
|
|
@ -301,9 +301,9 @@ export default defineComponent({
|
|||
const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
|
||||
const data: TableCell[][] = JSON.parse(JSON.stringify(handleElement.value.data))
|
||||
|
||||
for(let i = 0; i < data.length; i++) {
|
||||
for(let j = 0; j < data[i].length; j++) {
|
||||
if(!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
for (let j = 0; j < data[i].length; j++) {
|
||||
if (!selectedCells.value.length || selectedCells.value.includes(`${i}_${j}`)) {
|
||||
const style = data[i][j].style || {}
|
||||
data[i][j].style = { ...style, ...textAttrProp }
|
||||
}
|
||||
|
|
@ -324,7 +324,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const toggleTheme = (checked: boolean) => {
|
||||
if(checked) {
|
||||
if (checked) {
|
||||
const props = {
|
||||
theme: {
|
||||
color: '#d14424',
|
||||
|
|
@ -346,8 +346,8 @@ export default defineComponent({
|
|||
const value = +(e.target as HTMLInputElement).value
|
||||
const rowCount = handleElement.value.data.length
|
||||
|
||||
if(value === rowCount) return
|
||||
if(value < rowCount) return message.warning('设置行数不能少于当前值')
|
||||
if (value === rowCount) return
|
||||
if (value < rowCount) return message.warning('设置行数不能少于当前值')
|
||||
|
||||
const rowCells: TableCell[] = new Array(colCount.value).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
|
||||
const newTableCells: TableCell[][] = new Array(value - rowCount).fill(rowCells)
|
||||
|
|
@ -364,8 +364,8 @@ export default defineComponent({
|
|||
const value = +(e.target as HTMLInputElement).value
|
||||
const colCount = handleElement.value.data[0].length
|
||||
|
||||
if(value === colCount) return
|
||||
if(value < colCount) return message.warning('设置列数不能少于当前值')
|
||||
if (value === colCount) return
|
||||
if (value < colCount) return message.warning('设置列数不能少于当前值')
|
||||
|
||||
const tableCells = handleElement.value.data.map(item => {
|
||||
const cells: TableCell[] = new Array(value - colCount).fill({ id: createRandomCode(), colspan: 1, rowspan: 1, text: '' })
|
||||
|
|
|
|||
|
|
@ -326,7 +326,7 @@ export default defineComponent({
|
|||
const wordSpace = ref<number>()
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value || handleElement.value.type !== 'text') return
|
||||
if (!handleElement.value || handleElement.value.type !== 'text') return
|
||||
|
||||
fill.value = handleElement.value.fill || '#000'
|
||||
lineHeight.value = handleElement.value.lineHeight || 1.5
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default defineComponent({
|
|||
const handleElement = computed<PPTElement>(() => store.getters.handleElement)
|
||||
|
||||
const currentPanelComponent = computed(() => {
|
||||
if(!handleElement.value) return null
|
||||
if (!handleElement.value) return null
|
||||
|
||||
const panelMap = {
|
||||
[ElementTypes.TEXT]: TextStylePanel,
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default defineComponent({
|
|||
|
||||
const canCombine = computed(() => {
|
||||
const firstGroupId = activeElementList.value[0].groupId
|
||||
if(!firstGroupId) return true
|
||||
if (!firstGroupId) return true
|
||||
|
||||
const inSameGroup = activeElementList.value.every(el => (el.groupId && el.groupId) === firstGroupId)
|
||||
return !inSameGroup
|
||||
|
|
@ -66,17 +66,17 @@ export default defineComponent({
|
|||
|
||||
// 获取每一个组合的宽高位置
|
||||
const groupElementRangeMap = {}
|
||||
for(const activeElement of activeElementList.value) {
|
||||
if(activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
|
||||
for (const activeElement of activeElementList.value) {
|
||||
if (activeElement.groupId && !groupElementRangeMap[activeElement.groupId]) {
|
||||
const groupElements = activeElementList.value.filter(item => item.groupId === activeElement.groupId)
|
||||
groupElementRangeMap[activeElement.groupId] = getElementListRange(groupElements)
|
||||
}
|
||||
}
|
||||
|
||||
if(command === ElementAlignCommands.LEFT) {
|
||||
if (command === ElementAlignCommands.LEFT) {
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) element.left = minX
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) element.left = minX
|
||||
else {
|
||||
const range = groupElementRangeMap[element.groupId]
|
||||
const offset = range.minX - minX
|
||||
|
|
@ -85,10 +85,10 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
else if(command === ElementAlignCommands.RIGHT) {
|
||||
else if (command === ElementAlignCommands.RIGHT) {
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) {
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) {
|
||||
const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
|
||||
element.left = maxX - elWidth
|
||||
}
|
||||
|
|
@ -100,10 +100,10 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
else if(command === ElementAlignCommands.TOP) {
|
||||
else if (command === ElementAlignCommands.TOP) {
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) element.top = minY
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) element.top = minY
|
||||
else {
|
||||
const range = groupElementRangeMap[element.groupId]
|
||||
const offset = range.minY - minY
|
||||
|
|
@ -112,10 +112,10 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
else if(command === ElementAlignCommands.BOTTOM) {
|
||||
else if (command === ElementAlignCommands.BOTTOM) {
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) {
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) {
|
||||
const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
|
||||
element.top = maxY - elHeight
|
||||
}
|
||||
|
|
@ -127,11 +127,11 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
else if(command === ElementAlignCommands.HORIZONTAL) {
|
||||
else if (command === ElementAlignCommands.HORIZONTAL) {
|
||||
const horizontalCenter = (minX + maxX) / 2
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) {
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) {
|
||||
const elWidth = element.type === 'line' ? Math.max(element.start[0], element.end[0]) : element.width
|
||||
element.left = horizontalCenter - elWidth / 2
|
||||
}
|
||||
|
|
@ -144,11 +144,11 @@ export default defineComponent({
|
|||
}
|
||||
})
|
||||
}
|
||||
else if(command === ElementAlignCommands.VERTICAL) {
|
||||
else if (command === ElementAlignCommands.VERTICAL) {
|
||||
const verticalCenter = (minY + maxY) / 2
|
||||
elementList.forEach(element => {
|
||||
if(activeElementIdList.value.includes(element.id)) {
|
||||
if(!element.groupId) {
|
||||
if (activeElementIdList.value.includes(element.id)) {
|
||||
if (!element.groupId) {
|
||||
const elHeight = element.type === 'line' ? Math.max(element.start[1], element.end[1]) : element.height
|
||||
element.top = verticalCenter - elHeight / 2
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default defineComponent({
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const updateTurningMode = (mode: string) => {
|
||||
if(mode === currentTurningMode.value) return
|
||||
if (mode === currentTurningMode.value) return
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { turningMode: mode })
|
||||
addHistorySnapshot()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export default defineComponent({
|
|||
const availableFonts = computed(() => store.state.availableFonts)
|
||||
|
||||
const background = computed(() => {
|
||||
if(!currentSlide.value.background) {
|
||||
if (!currentSlide.value.background) {
|
||||
return {
|
||||
type: 'solid',
|
||||
value: '#fff',
|
||||
|
|
@ -218,7 +218,7 @@ export default defineComponent({
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
|
||||
if(type === 'solid') {
|
||||
if (type === 'solid') {
|
||||
const newBackground: SlideBackground = {
|
||||
...background.value,
|
||||
type: 'solid',
|
||||
|
|
@ -226,7 +226,7 @@ export default defineComponent({
|
|||
}
|
||||
store.commit(MutationTypes.UPDATE_SLIDE, { background: newBackground })
|
||||
}
|
||||
else if(type === 'image') {
|
||||
else if (type === 'image') {
|
||||
const newBackground: SlideBackground = {
|
||||
...background.value,
|
||||
type: 'image',
|
||||
|
|
@ -255,7 +255,7 @@ export default defineComponent({
|
|||
|
||||
const uploadBackgroundImage = (files: File[]) => {
|
||||
const imageFile = files[0]
|
||||
if(!imageFile) return
|
||||
if (!imageFile) return
|
||||
getImageDataURL(imageFile).then(dataURL => updateBackground({ image: dataURL }))
|
||||
}
|
||||
|
||||
|
|
@ -278,8 +278,8 @@ export default defineComponent({
|
|||
const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
|
||||
const { themeColor, backgroundColor, fontColor } = theme.value
|
||||
|
||||
for(const slide of newSlides) {
|
||||
if(!slide.background || slide.background.type !== 'image') {
|
||||
for (const slide of newSlides) {
|
||||
if (!slide.background || slide.background.type !== 'image') {
|
||||
slide.background = {
|
||||
...slide.background,
|
||||
type: 'solid',
|
||||
|
|
@ -288,16 +288,16 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const elements = slide.elements
|
||||
for(const el of elements) {
|
||||
if(el.type === 'shape') el.fill = themeColor
|
||||
else if(el.type === 'line') el.color = themeColor
|
||||
else if(el.type === 'text') {
|
||||
if(el.fill) el.fill = themeColor
|
||||
for (const el of elements) {
|
||||
if (el.type === 'shape') el.fill = themeColor
|
||||
else if (el.type === 'line') el.color = themeColor
|
||||
else if (el.type === 'text') {
|
||||
if (el.fill) el.fill = themeColor
|
||||
}
|
||||
else if(el.type === 'table') {
|
||||
if(el.theme) el.theme.color = themeColor
|
||||
else if (el.type === 'table') {
|
||||
if (el.theme) el.theme.color = themeColor
|
||||
}
|
||||
else if(el.type === 'chart') {
|
||||
else if (el.type === 'chart') {
|
||||
el.themeColor = themeColor
|
||||
el.gridColor = fontColor
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default defineComponent({
|
|||
const opacity = ref<number>()
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? handleElement.value.opacity : 1
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default defineComponent({
|
|||
const hasOutline = ref(false)
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
outline.value = 'outline' in handleElement.value ? handleElement.value.outline : undefined
|
||||
hasOutline.value = !!outline.value
|
||||
}, { deep: true, immediate: true })
|
||||
|
|
@ -86,7 +86,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const toggleOutline = (checked: boolean) => {
|
||||
if(checked) {
|
||||
if (checked) {
|
||||
const props = { outline: { width: 2, color: '#000', style: 'solid' } }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default defineComponent({
|
|||
const hasShadow = ref(false)
|
||||
|
||||
watch(handleElement, () => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
shadow.value = 'shadow' in handleElement.value ? handleElement.value.shadow : undefined
|
||||
hasShadow.value = !!shadow.value
|
||||
}, { deep: true, immediate: true })
|
||||
|
|
@ -91,7 +91,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const toggleShadow = (checked: boolean) => {
|
||||
if(checked) {
|
||||
if (checked) {
|
||||
const props = { shadow: { h: 1, v: 1, blur: 2, color: '#000' } }
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,14 +54,14 @@ export default defineComponent({
|
|||
|
||||
const activeElementIdList = computed(() => store.state.activeElementIdList)
|
||||
const currentTabs = computed(() => {
|
||||
if(!activeElementIdList.value.length) return slideTabs
|
||||
else if(activeElementIdList.value.length > 1) return multiSelectTabs
|
||||
if (!activeElementIdList.value.length) return slideTabs
|
||||
else if (activeElementIdList.value.length > 1) return multiSelectTabs
|
||||
return elementTabs
|
||||
})
|
||||
|
||||
watch(currentTabs, () => {
|
||||
const currentTabsValue = currentTabs.value.map(tab => tab.value)
|
||||
if(!currentTabsValue.includes(toolbarState.value)) {
|
||||
if (!currentTabsValue.includes(toolbarState.value)) {
|
||||
store.commit(MutationTypes.SET_TOOLBAR_STATE, currentTabsValue[0])
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -49,56 +49,56 @@ export default () => {
|
|||
const { scaleCanvas, setCanvasPercentage } = useScaleCanvas()
|
||||
|
||||
const copy = () => {
|
||||
if(activeElementIdList.value.length) copyElement()
|
||||
else if(thumbnailsFocus.value) copySlide()
|
||||
if (activeElementIdList.value.length) copyElement()
|
||||
else if (thumbnailsFocus.value) copySlide()
|
||||
}
|
||||
|
||||
const cut = () => {
|
||||
if(activeElementIdList.value.length) cutElement()
|
||||
else if(thumbnailsFocus.value) cutSlide()
|
||||
if (activeElementIdList.value.length) cutElement()
|
||||
else if (thumbnailsFocus.value) cutSlide()
|
||||
}
|
||||
|
||||
const quickCopy = () => {
|
||||
if(activeElementIdList.value.length) quickCopyElement()
|
||||
else if(thumbnailsFocus.value) copyAndPasteSlide()
|
||||
if (activeElementIdList.value.length) quickCopyElement()
|
||||
else if (thumbnailsFocus.value) copyAndPasteSlide()
|
||||
}
|
||||
|
||||
const selectAll = () => {
|
||||
if(!editorAreaFocus.value) return
|
||||
if (!editorAreaFocus.value) return
|
||||
selectAllElement()
|
||||
}
|
||||
|
||||
const lock = () => {
|
||||
if(!editorAreaFocus.value) return
|
||||
if (!editorAreaFocus.value) return
|
||||
lockElement()
|
||||
}
|
||||
const combine = () => {
|
||||
if(!editorAreaFocus.value) return
|
||||
if (!editorAreaFocus.value) return
|
||||
combineElements()
|
||||
}
|
||||
|
||||
const uncombine = () => {
|
||||
if(!editorAreaFocus.value) return
|
||||
if (!editorAreaFocus.value) return
|
||||
uncombineElements()
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
if(activeElementIdList.value.length) deleteElement()
|
||||
else if(thumbnailsFocus.value) deleteSlide()
|
||||
if (activeElementIdList.value.length) deleteElement()
|
||||
else if (thumbnailsFocus.value) deleteSlide()
|
||||
}
|
||||
|
||||
const move = (key: string) => {
|
||||
if(activeElementIdList.value.length) moveElement(key)
|
||||
else if(key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
|
||||
if (activeElementIdList.value.length) moveElement(key)
|
||||
else if (key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
|
||||
}
|
||||
|
||||
const order = (command: ElementOrderCommand) => {
|
||||
if(!handleElement.value) return
|
||||
if (!handleElement.value) return
|
||||
orderElement(handleElement.value, command)
|
||||
}
|
||||
|
||||
const create = () => {
|
||||
if(!thumbnailsFocus.value) return
|
||||
if (!thumbnailsFocus.value) return
|
||||
createSlide()
|
||||
}
|
||||
|
||||
|
|
@ -107,122 +107,122 @@ export default () => {
|
|||
|
||||
const key = e.key.toUpperCase()
|
||||
|
||||
if(ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
|
||||
if(shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
|
||||
if (ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
|
||||
if (shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
|
||||
|
||||
if(ctrlKey && key === KEYS.F) {
|
||||
if (ctrlKey && key === KEYS.F) {
|
||||
e.preventDefault()
|
||||
enterScreening()
|
||||
store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
|
||||
}
|
||||
|
||||
if(!editorAreaFocus.value && !thumbnailsFocus.value) return
|
||||
if (!editorAreaFocus.value && !thumbnailsFocus.value) return
|
||||
|
||||
if((ctrlKey || metaKey) && key === KEYS.C) {
|
||||
if(disableHotkeys.value) return
|
||||
if ((ctrlKey || metaKey) && key === KEYS.C) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
copy()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.X) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.X) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
cut()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.D) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.D) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
quickCopy()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.Z) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.Z) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
undo()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.Y) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.Y) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
redo()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.A) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.A) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
selectAll()
|
||||
}
|
||||
if(ctrlKey && key === KEYS.L) {
|
||||
if(disableHotkeys.value) return
|
||||
if (ctrlKey && key === KEYS.L) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
lock()
|
||||
}
|
||||
if(!shiftKey && ctrlKey && key === KEYS.G) {
|
||||
if(disableHotkeys.value) return
|
||||
if (!shiftKey && ctrlKey && key === KEYS.G) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
combine()
|
||||
}
|
||||
if(shiftKey && ctrlKey && key === KEYS.G) {
|
||||
if(disableHotkeys.value) return
|
||||
if (shiftKey && ctrlKey && key === KEYS.G) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
uncombine()
|
||||
}
|
||||
if(altKey && key === KEYS.F) {
|
||||
if(disableHotkeys.value) return
|
||||
if (altKey && key === KEYS.F) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
order(ElementOrderCommands.TOP)
|
||||
}
|
||||
if(altKey && key === KEYS.B) {
|
||||
if(disableHotkeys.value) return
|
||||
if (altKey && key === KEYS.B) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
order(ElementOrderCommands.BOTTOM)
|
||||
}
|
||||
if(key === KEYS.DELETE) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.DELETE) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
remove()
|
||||
}
|
||||
if(key === KEYS.UP) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.UP) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
move(KEYS.UP)
|
||||
}
|
||||
if(key === KEYS.DOWN) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.DOWN) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
move(KEYS.DOWN)
|
||||
}
|
||||
if(key === KEYS.LEFT) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.LEFT) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
move(KEYS.LEFT)
|
||||
}
|
||||
if(key === KEYS.RIGHT) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.RIGHT) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
move(KEYS.RIGHT)
|
||||
}
|
||||
if(key === KEYS.ENTER) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.ENTER) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
create()
|
||||
}
|
||||
if(key === KEYS.MINUS) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.MINUS) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
scaleCanvas('-')
|
||||
}
|
||||
if(key === KEYS.EQUAL) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.EQUAL) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
scaleCanvas('+')
|
||||
}
|
||||
if(key === KEYS.DIGIT_0) {
|
||||
if(disableHotkeys.value) return
|
||||
if (key === KEYS.DIGIT_0) {
|
||||
if (disableHotkeys.value) return
|
||||
e.preventDefault()
|
||||
setCanvasPercentage(90)
|
||||
}
|
||||
}
|
||||
|
||||
const keyupListener = () => {
|
||||
if(ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
|
||||
if(shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
|
||||
if (ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
|
||||
if (shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -18,25 +18,25 @@ export default () => {
|
|||
}
|
||||
|
||||
const pasteListener = (e: ClipboardEvent) => {
|
||||
if(!editorAreaFocus.value && !thumbnailsFocus.value) return
|
||||
if(disableHotkeys.value) return
|
||||
if (!editorAreaFocus.value && !thumbnailsFocus.value) return
|
||||
if (disableHotkeys.value) return
|
||||
|
||||
if(!e.clipboardData) return
|
||||
if (!e.clipboardData) return
|
||||
|
||||
const clipboardDataItems = e.clipboardData.items
|
||||
const clipboardDataFirstItem = clipboardDataItems[0]
|
||||
|
||||
if(!clipboardDataFirstItem) return
|
||||
if (!clipboardDataFirstItem) return
|
||||
|
||||
for(const item of clipboardDataItems) {
|
||||
if(item.kind === 'file' && item.type.indexOf('image') !== -1) {
|
||||
for (const item of clipboardDataItems) {
|
||||
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
|
||||
const imageFile = item.getAsFile()
|
||||
if(imageFile) pasteImageFile(imageFile)
|
||||
if (imageFile) pasteImageFile(imageFile)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if(clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
|
||||
if (clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
|
||||
clipboardDataFirstItem.getAsString(text => pasteTextClipboardData(text))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default defineComponent({
|
|||
const needWaitAnimation = computed(() => {
|
||||
const animations = currentSlide.value.animations || []
|
||||
const elementIndexInAnimation = animations.findIndex(animation => animation.elId === props.elementInfo.id)
|
||||
if(elementIndexInAnimation !== -1 && elementIndexInAnimation >= props.animationIndex) return true
|
||||
if (elementIndexInAnimation !== -1 && elementIndexInAnimation >= props.animationIndex) return true
|
||||
return false
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default defineComponent({
|
|||
const writingBoardModel = ref('pen')
|
||||
|
||||
const changePen = () => {
|
||||
if(!writingBoardVisible.value) writingBoardVisible.value = true
|
||||
if (!writingBoardVisible.value) writingBoardVisible.value = true
|
||||
writingBoardModel.value = 'pen'
|
||||
emit('close')
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const changeColor = (color: string) => {
|
||||
if(writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
|
||||
if (writingBoardModel.value !== 'pen') writingBoardModel.value = 'pen'
|
||||
writingBoardColor.value = color
|
||||
emit('close')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,11 +101,11 @@ export default defineComponent({
|
|||
const winHeight = document.body.clientHeight
|
||||
let width, height
|
||||
|
||||
if(winHeight / winWidth === VIEWPORT_ASPECT_RATIO) {
|
||||
if (winHeight / winWidth === VIEWPORT_ASPECT_RATIO) {
|
||||
width = winWidth
|
||||
height = winHeight
|
||||
}
|
||||
else if(winHeight / winWidth > VIEWPORT_ASPECT_RATIO) {
|
||||
else if (winHeight / winWidth > VIEWPORT_ASPECT_RATIO) {
|
||||
width = winWidth
|
||||
height = winWidth * VIEWPORT_ASPECT_RATIO
|
||||
}
|
||||
|
|
@ -121,7 +121,7 @@ export default defineComponent({
|
|||
|
||||
const windowResizeListener = () => {
|
||||
setSlideContentSize()
|
||||
if(!isFullscreen()) exitScreening()
|
||||
if (!isFullscreen()) exitScreening()
|
||||
}
|
||||
|
||||
const animationIndex = ref(0)
|
||||
|
|
@ -133,7 +133,7 @@ export default defineComponent({
|
|||
animationIndex.value += 1
|
||||
|
||||
const elRef = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
|
||||
if(elRef) {
|
||||
if (elRef) {
|
||||
const animationName = `${prefix}${animation.type}`
|
||||
elRef.classList.add(`${prefix}animated`, animationName)
|
||||
|
||||
|
|
@ -145,20 +145,20 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const execPrev = () => {
|
||||
if(animations.value.length && animationIndex.value > 0) {
|
||||
if (animations.value.length && animationIndex.value > 0) {
|
||||
animationIndex.value -= 1
|
||||
}
|
||||
else if(slideIndex.value > 0) {
|
||||
else if (slideIndex.value > 0) {
|
||||
store.commit(MutationTypes.UPDATE_SLIDE_INDEX, slideIndex.value - 1)
|
||||
const lastIndex = animations.value ? animations.value.length : 0
|
||||
animationIndex.value = lastIndex
|
||||
}
|
||||
}
|
||||
const execNext = () => {
|
||||
if(animations.value.length && animationIndex.value < animations.value.length) {
|
||||
if (animations.value.length && animationIndex.value < animations.value.length) {
|
||||
runAnimation()
|
||||
}
|
||||
else if(slideIndex.value < slides.value.length - 1) {
|
||||
else if (slideIndex.value < slides.value.length - 1) {
|
||||
store.commit(MutationTypes.UPDATE_SLIDE_INDEX, slideIndex.value + 1)
|
||||
animationIndex.value = 0
|
||||
}
|
||||
|
|
@ -166,8 +166,8 @@ export default defineComponent({
|
|||
|
||||
const keydownListener = (e: KeyboardEvent) => {
|
||||
const key = e.key.toUpperCase()
|
||||
if(key === KEYS.UP || key === KEYS.LEFT) execPrev()
|
||||
else if(
|
||||
if (key === KEYS.UP || key === KEYS.LEFT) execPrev()
|
||||
else if (
|
||||
key === KEYS.DOWN ||
|
||||
key === KEYS.RIGHT ||
|
||||
key === KEYS.SPACE ||
|
||||
|
|
@ -175,9 +175,9 @@ export default defineComponent({
|
|||
) execNext()
|
||||
}
|
||||
|
||||
const mousewheelListener = throttle(function(e: WheelEvent) {
|
||||
if(e.deltaY < 0) execPrev()
|
||||
else if(e.deltaY > 0) execNext()
|
||||
const mousewheelListener = throttle(function (e: WheelEvent) {
|
||||
if (e.deltaY < 0) execPrev()
|
||||
else if (e.deltaY > 0) execNext()
|
||||
}, 500, { leading: true, trailing: false })
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const renderChart = () => {
|
||||
if(!chartRef.value) return
|
||||
if (!chartRef.value) return
|
||||
|
||||
const type = upperFirst(props.type)
|
||||
const { data, options } = getDataAndOptions()
|
||||
|
|
@ -84,7 +84,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const updateChart = () => {
|
||||
if(!chart) {
|
||||
if (!chart) {
|
||||
renderChart()
|
||||
return
|
||||
}
|
||||
|
|
@ -102,13 +102,13 @@ export default defineComponent({
|
|||
onMounted(renderChart)
|
||||
|
||||
const updateTheme = () => {
|
||||
if(!chartRef.value) return
|
||||
if (!chartRef.value) return
|
||||
|
||||
const hsla = tinycolor(props.themeColor).toHsl()
|
||||
|
||||
for(let i = 0; i < 10; i++) {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let h = hsla.h + i * 36
|
||||
if(h > 360) h = h - 360
|
||||
if (h > 360) h = h - 360
|
||||
|
||||
const _hsla = {
|
||||
...hsla,
|
||||
|
|
@ -117,7 +117,7 @@ export default defineComponent({
|
|||
chartRef.value.style.setProperty(`--theme-color-${i + 1}`, tinycolor(_hsla).toRgbString())
|
||||
}
|
||||
|
||||
if(props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
|
||||
if (props.gridColor) chartRef.value.style.setProperty(`--grid-color`, props.gridColor)
|
||||
}
|
||||
|
||||
watch([
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const handleSelectElement = (e: MouseEvent) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
|
||||
props.selectElement(e, props.elementInfo)
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const imgPosition = computed(() => {
|
||||
if(!props.elementInfo || !props.elementInfo.clip) {
|
||||
if (!props.elementInfo || !props.elementInfo.clip) {
|
||||
return {
|
||||
top: '0',
|
||||
left: '0',
|
||||
|
|
@ -107,27 +107,27 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const clipShape = computed(() => {
|
||||
if(!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
|
||||
if (!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
|
||||
const shape = props.elementInfo.clip.shape || ClipPathTypes.RECT
|
||||
|
||||
return CLIPPATHS[shape]
|
||||
})
|
||||
|
||||
const filter = computed(() => {
|
||||
if(!props.elementInfo.filters) return ''
|
||||
if (!props.elementInfo.filters) return ''
|
||||
let filter = ''
|
||||
for(const key of Object.keys(props.elementInfo.filters)) {
|
||||
for (const key of Object.keys(props.elementInfo.filters)) {
|
||||
filter += `${key}(${props.elementInfo.filters[key]}) `
|
||||
}
|
||||
return filter
|
||||
})
|
||||
|
||||
const flip = computed(() => {
|
||||
if(!props.elementInfo.flip) return ''
|
||||
if (!props.elementInfo.flip) return ''
|
||||
const { x, y } = props.elementInfo.flip
|
||||
if(x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
|
||||
else if(x) return `rotateX(${x}deg)`
|
||||
else if(y) return `rotateY(${y}deg)`
|
||||
if (x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
|
||||
else if (x) return `rotateX(${x}deg)`
|
||||
else if (y) return `rotateY(${y}deg)`
|
||||
return ''
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -175,9 +175,9 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const handleClip = () => {
|
||||
if(isSettingClipRange.value) return
|
||||
if (isSettingClipRange.value) return
|
||||
|
||||
if(!currentRange.value) {
|
||||
if (!currentRange.value) {
|
||||
emit('clip', null)
|
||||
return
|
||||
}
|
||||
|
|
@ -200,7 +200,7 @@ export default defineComponent({
|
|||
|
||||
const keyboardClip = (e: KeyboardEvent) => {
|
||||
const key = e.key.toUpperCase()
|
||||
if(key === KEYS.ENTER) handleClip()
|
||||
if (key === KEYS.ENTER) handleClip()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -249,7 +249,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -261,12 +261,12 @@ export default defineComponent({
|
|||
let targetTop = originPositopn.top + moveY
|
||||
|
||||
// 范围限制
|
||||
if(targetLeft < 0) targetLeft = 0
|
||||
else if(targetLeft + originPositopn.width > bottomPosition.width) {
|
||||
if (targetLeft < 0) targetLeft = 0
|
||||
else if (targetLeft + originPositopn.width > bottomPosition.width) {
|
||||
targetLeft = bottomPosition.width - originPositopn.width
|
||||
}
|
||||
if(targetTop < 0) targetTop = 0
|
||||
else if(targetTop + originPositopn.height > bottomPosition.height) {
|
||||
if (targetTop < 0) targetTop = 0
|
||||
else if (targetTop + originPositopn.height > bottomPosition.height) {
|
||||
targetTop = bottomPosition.height - originPositopn.height
|
||||
}
|
||||
|
||||
|
|
@ -305,7 +305,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const currentPageX = e.pageX
|
||||
const currentPageY = e.pageY
|
||||
|
|
@ -316,17 +316,17 @@ export default defineComponent({
|
|||
let targetLeft, targetTop, targetWidth, targetHeight
|
||||
|
||||
// 根据不同缩放点，计算目标大小和位置，同时做大小和范围的限制
|
||||
if(type === 't-l') {
|
||||
if(originPositopn.left + moveX < 0) {
|
||||
if (type === 't-l') {
|
||||
if (originPositopn.left + moveX < 0) {
|
||||
moveX = -originPositopn.left
|
||||
}
|
||||
if(originPositopn.top + moveY < 0) {
|
||||
if (originPositopn.top + moveY < 0) {
|
||||
moveY = -originPositopn.top
|
||||
}
|
||||
if(originPositopn.width - moveX < minWidth) {
|
||||
if (originPositopn.width - moveX < minWidth) {
|
||||
moveX = originPositopn.width - minWidth
|
||||
}
|
||||
if(originPositopn.height - moveY < minHeight) {
|
||||
if (originPositopn.height - moveY < minHeight) {
|
||||
moveY = originPositopn.height - minHeight
|
||||
}
|
||||
targetWidth = originPositopn.width - moveX
|
||||
|
|
@ -334,17 +334,17 @@ export default defineComponent({
|
|||
targetLeft = originPositopn.left + moveX
|
||||
targetTop = originPositopn.top + moveY
|
||||
}
|
||||
else if(type === 't-r') {
|
||||
if(originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
|
||||
else if (type === 't-r') {
|
||||
if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
|
||||
moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
|
||||
}
|
||||
if(originPositopn.top + moveY < 0) {
|
||||
if (originPositopn.top + moveY < 0) {
|
||||
moveY = -originPositopn.top
|
||||
}
|
||||
if(originPositopn.width + moveX < minWidth) {
|
||||
if (originPositopn.width + moveX < minWidth) {
|
||||
moveX = minWidth - originPositopn.width
|
||||
}
|
||||
if(originPositopn.height - moveY < minHeight) {
|
||||
if (originPositopn.height - moveY < minHeight) {
|
||||
moveY = originPositopn.height - minHeight
|
||||
}
|
||||
targetWidth = originPositopn.width + moveX
|
||||
|
|
@ -352,17 +352,17 @@ export default defineComponent({
|
|||
targetLeft = originPositopn.left
|
||||
targetTop = originPositopn.top + moveY
|
||||
}
|
||||
else if(type === 'b-l') {
|
||||
if(originPositopn.left + moveX < 0) {
|
||||
else if (type === 'b-l') {
|
||||
if (originPositopn.left + moveX < 0) {
|
||||
moveX = -originPositopn.left
|
||||
}
|
||||
if(originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
|
||||
if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
|
||||
moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
|
||||
}
|
||||
if(originPositopn.width - moveX < minWidth) {
|
||||
if (originPositopn.width - moveX < minWidth) {
|
||||
moveX = originPositopn.width - minWidth
|
||||
}
|
||||
if(originPositopn.height + moveY < minHeight) {
|
||||
if (originPositopn.height + moveY < minHeight) {
|
||||
moveY = minHeight - originPositopn.height
|
||||
}
|
||||
targetWidth = originPositopn.width - moveX
|
||||
|
|
@ -371,16 +371,16 @@ export default defineComponent({
|
|||
targetTop = originPositopn.top
|
||||
}
|
||||
else {
|
||||
if(originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
|
||||
if (originPositopn.left + originPositopn.width + moveX > bottomPosition.width) {
|
||||
moveX = bottomPosition.width - (originPositopn.left + originPositopn.width)
|
||||
}
|
||||
if(originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
|
||||
if (originPositopn.top + originPositopn.height + moveY > bottomPosition.height) {
|
||||
moveY = bottomPosition.height - (originPositopn.top + originPositopn.height)
|
||||
}
|
||||
if(originPositopn.width + moveX < minWidth) {
|
||||
if (originPositopn.width + moveX < minWidth) {
|
||||
moveX = minWidth - originPositopn.width
|
||||
}
|
||||
if(originPositopn.height + moveY < minHeight) {
|
||||
if (originPositopn.height + moveY < minHeight) {
|
||||
moveY = minHeight - originPositopn.height
|
||||
}
|
||||
targetWidth = originPositopn.width + moveX
|
||||
|
|
|
|||
|
|
@ -114,19 +114,19 @@ export default defineComponent({
|
|||
const { shadowStyle } = useElementShadow(shadow)
|
||||
|
||||
const handleSelectElement = (e: MouseEvent) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
props.selectElement(e, props.elementInfo)
|
||||
}
|
||||
const clipShape = computed(() => {
|
||||
if(!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
|
||||
if (!props.elementInfo || !props.elementInfo.clip) return CLIPPATHS.rect
|
||||
const shape = props.elementInfo.clip.shape || ClipPathTypes.RECT
|
||||
|
||||
return CLIPPATHS[shape]
|
||||
})
|
||||
|
||||
const imgPosition = computed(() => {
|
||||
if(!props.elementInfo || !props.elementInfo.clip) {
|
||||
if (!props.elementInfo || !props.elementInfo.clip) {
|
||||
return {
|
||||
top: '0',
|
||||
left: '0',
|
||||
|
|
@ -151,27 +151,27 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const filter = computed(() => {
|
||||
if(!props.elementInfo.filters) return ''
|
||||
if (!props.elementInfo.filters) return ''
|
||||
let filter = ''
|
||||
for(const key of Object.keys(props.elementInfo.filters)) {
|
||||
for (const key of Object.keys(props.elementInfo.filters)) {
|
||||
filter += `${key}(${props.elementInfo.filters[key]}) `
|
||||
}
|
||||
return filter
|
||||
})
|
||||
|
||||
const flip = computed(() => {
|
||||
if(!props.elementInfo.flip) return ''
|
||||
if (!props.elementInfo.flip) return ''
|
||||
const { x, y } = props.elementInfo.flip
|
||||
if(x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
|
||||
else if(x) return `rotateX(${x}deg)`
|
||||
else if(y) return `rotateY(${y}deg)`
|
||||
if (x && y) return `rotateX(${x}deg) rotateY(${y}deg)`
|
||||
else if (x) return `rotateX(${x}deg)`
|
||||
else if (y) return `rotateY(${y}deg)`
|
||||
return ''
|
||||
})
|
||||
|
||||
const clip = (data: ImageClipedEmitData) => {
|
||||
store.commit(MutationTypes.SET_CLIPING_IMAGE_ELEMENT_ID, '')
|
||||
|
||||
if(!data) return
|
||||
if (!data) return
|
||||
|
||||
const { range, position } = data
|
||||
const originClip = props.elementInfo.clip || {}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const handleSelectElement = (e: MouseEvent) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
|
||||
props.selectElement(e, props.elementInfo)
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export default defineComponent({
|
|||
},
|
||||
setup(props) {
|
||||
const handleSelectElement = (e: MouseEvent) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
|
||||
props.selectElement(e, props.elementInfo)
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@ export default defineComponent({
|
|||
const isFocus = ref(false)
|
||||
|
||||
watch(() => props.modelValue, () => {
|
||||
if(isFocus.value) return
|
||||
if (isFocus.value) return
|
||||
text.value = props.modelValue
|
||||
if(textareaRef.value) textareaRef.value.innerHTML = props.modelValue
|
||||
if (textareaRef.value) textareaRef.value.innerHTML = props.modelValue
|
||||
}, { immediate: true })
|
||||
|
||||
const handleInput = () => {
|
||||
if(!textareaRef.value) return
|
||||
if (!textareaRef.value) return
|
||||
const text = textareaRef.value.innerHTML
|
||||
emit('update:modelValue', text)
|
||||
}
|
||||
|
|
@ -45,14 +45,14 @@ export default defineComponent({
|
|||
const handleFocus = () => {
|
||||
isFocus.value = true
|
||||
|
||||
if(!textareaRef.value) return
|
||||
if (!textareaRef.value) return
|
||||
textareaRef.value.onpaste = (e: ClipboardEvent) => {
|
||||
e.preventDefault()
|
||||
if(!e.clipboardData) return
|
||||
if (!e.clipboardData) return
|
||||
|
||||
const clipboardDataFirstItem = e.clipboardData.items[0]
|
||||
|
||||
if(clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
|
||||
if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
|
||||
clipboardDataFirstItem.getAsString(text => emit('update:modelValue', text))
|
||||
}
|
||||
}
|
||||
|
|
@ -60,11 +60,11 @@ export default defineComponent({
|
|||
|
||||
const handleBlur = () => {
|
||||
isFocus.value = false
|
||||
if(textareaRef.value) textareaRef.value.onpaste = null
|
||||
if (textareaRef.value) textareaRef.value.onpaste = null
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if(textareaRef.value) textareaRef.value.onpaste = null
|
||||
if (textareaRef.value) textareaRef.value.onpaste = null
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export default defineComponent({
|
|||
|
||||
const subThemeColor = ref(['', ''])
|
||||
watch(() => props.theme, () => {
|
||||
if(props.theme) {
|
||||
if (props.theme) {
|
||||
const rgba = tinycolor(props.theme.color).toRgb()
|
||||
const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
|
||||
const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
|
||||
|
|
@ -155,12 +155,12 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
watch(() => props.editable, () => {
|
||||
if(!props.editable) removeSelectedCells()
|
||||
if (!props.editable) removeSelectedCells()
|
||||
})
|
||||
|
||||
const dragLinePosition = computed(() => {
|
||||
const dragLinePosition: number[] = []
|
||||
for(let i = 1; i < colSizeList.value.length + 1; i++) {
|
||||
for (let i = 1; i < colSizeList.value.length + 1; i++) {
|
||||
const pos = colSizeList.value.slice(0, i).reduce((a, b) => (a + b))
|
||||
dragLinePosition.push(pos)
|
||||
}
|
||||
|
|
@ -170,15 +170,15 @@ export default defineComponent({
|
|||
const hideCells = computed(() => {
|
||||
const hideCells = []
|
||||
|
||||
for(let i = 0; i < tableCells.value.length; i++) {
|
||||
for (let i = 0; i < tableCells.value.length; i++) {
|
||||
const rowCells = tableCells.value[i]
|
||||
|
||||
for(let j = 0; j < rowCells.length; j++) {
|
||||
for (let j = 0; j < rowCells.length; j++) {
|
||||
const cell = rowCells[j]
|
||||
|
||||
if(cell.colspan > 1 || cell.rowspan > 1) {
|
||||
for(let row = i; row < i + cell.rowspan; row++) {
|
||||
for(let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
|
||||
if (cell.colspan > 1 || cell.rowspan > 1) {
|
||||
for (let row = i; row < i + cell.rowspan; row++) {
|
||||
for (let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
|
||||
hideCells.push(`${row}_${col}`)
|
||||
}
|
||||
}
|
||||
|
|
@ -189,13 +189,13 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const selectedCells = computed(() => {
|
||||
if(!startCell.value.length) return []
|
||||
if (!startCell.value.length) return []
|
||||
const [startX, startY] = startCell.value
|
||||
|
||||
if(!endCell.value.length) return [`${startX}_${startY}`]
|
||||
if (!endCell.value.length) return [`${startX}_${startY}`]
|
||||
const [endX, endY] = endCell.value
|
||||
|
||||
if(startX === endX && startY === endY) return [`${startX}_${startY}`]
|
||||
if (startX === endX && startY === endY) return [`${startX}_${startY}`]
|
||||
|
||||
const selectedCells = []
|
||||
|
||||
|
|
@ -204,10 +204,10 @@ export default defineComponent({
|
|||
const maxX = Math.max(startX, endX)
|
||||
const maxY = Math.max(startY, endY)
|
||||
|
||||
for(let i = 0; i < tableCells.value.length; i++) {
|
||||
for (let i = 0; i < tableCells.value.length; i++) {
|
||||
const rowCells = tableCells.value[i]
|
||||
for(let j = 0; j < rowCells.length; j++) {
|
||||
if(i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
|
||||
for (let j = 0; j < rowCells.length; j++) {
|
||||
if (i >= minX && i <= maxX && j >= minY && j <= maxY) selectedCells.push(`${i}_${j}`)
|
||||
}
|
||||
}
|
||||
return selectedCells
|
||||
|
|
@ -218,18 +218,18 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const activedCell = computed(() => {
|
||||
if(selectedCells.value.length > 1) return null
|
||||
if (selectedCells.value.length > 1) return null
|
||||
return selectedCells.value[0]
|
||||
})
|
||||
|
||||
const selectedRange = computed(() => {
|
||||
if(!startCell.value.length) return null
|
||||
if (!startCell.value.length) return null
|
||||
const [startX, startY] = startCell.value
|
||||
|
||||
if(!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
|
||||
if (!endCell.value.length) return { row: [startX, startX], col: [startY, startY] }
|
||||
const [endX, endY] = endCell.value
|
||||
|
||||
if(startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
|
||||
if (startX === endX && startY === endY) return { row: [startX, startX], col: [startY, startY] }
|
||||
|
||||
const minX = Math.min(startX, endX)
|
||||
const minY = Math.min(startY, endY)
|
||||
|
|
@ -245,7 +245,7 @@ export default defineComponent({
|
|||
const handleMouseup = () => isStartSelect.value = false
|
||||
|
||||
const handleCellMousedown = (e: MouseEvent, rowIndex: number, colIndex: number) => {
|
||||
if(e.button === 0) {
|
||||
if (e.button === 0) {
|
||||
endCell.value = []
|
||||
isStartSelect.value = true
|
||||
startCell.value = [rowIndex, colIndex]
|
||||
|
|
@ -253,7 +253,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const handleCellMouseenter = (rowIndex: number, colIndex: number) => {
|
||||
if(!isStartSelect.value) return
|
||||
if (!isStartSelect.value) return
|
||||
endCell.value = [rowIndex, colIndex]
|
||||
}
|
||||
|
||||
|
|
@ -290,13 +290,13 @@ export default defineComponent({
|
|||
|
||||
const targetCells = tableCells.value[rowIndex]
|
||||
const hideCellsPos = []
|
||||
for(let i = 0; i < targetCells.length; i++) {
|
||||
if(isHideCell(rowIndex, i)) hideCellsPos.push(i)
|
||||
for (let i = 0; i < targetCells.length; i++) {
|
||||
if (isHideCell(rowIndex, i)) hideCellsPos.push(i)
|
||||
}
|
||||
|
||||
for(const pos of hideCellsPos) {
|
||||
for(let i = rowIndex; i >= 0; i--) {
|
||||
if(!isHideCell(i, pos)) {
|
||||
for (const pos of hideCellsPos) {
|
||||
for (let i = rowIndex; i >= 0; i--) {
|
||||
if (!isHideCell(i, pos)) {
|
||||
_tableCells[i][pos].rowspan = _tableCells[i][pos].rowspan - 1
|
||||
break
|
||||
}
|
||||
|
|
@ -311,13 +311,13 @@ export default defineComponent({
|
|||
const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
|
||||
|
||||
const hideCellsPos = []
|
||||
for(let i = 0; i < tableCells.value.length; i++) {
|
||||
if(isHideCell(i, colIndex)) hideCellsPos.push(i)
|
||||
for (let i = 0; i < tableCells.value.length; i++) {
|
||||
if (isHideCell(i, colIndex)) hideCellsPos.push(i)
|
||||
}
|
||||
|
||||
for(const pos of hideCellsPos) {
|
||||
for(let i = colIndex; i >= 0; i--) {
|
||||
if(!isHideCell(pos, i)) {
|
||||
for (const pos of hideCellsPos) {
|
||||
for (let i = colIndex; i >= 0; i--) {
|
||||
if (!isHideCell(pos, i)) {
|
||||
_tableCells[pos][i].colspan = _tableCells[pos][i].colspan - 1
|
||||
break
|
||||
}
|
||||
|
|
@ -336,7 +336,7 @@ export default defineComponent({
|
|||
const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
|
||||
|
||||
const rowCells: TableCell[] = []
|
||||
for(let i = 0; i < _tableCells[0].length; i++) {
|
||||
for (let i = 0; i < _tableCells[0].length; i++) {
|
||||
rowCells.push({
|
||||
colspan: 1,
|
||||
rowspan: 1,
|
||||
|
|
@ -401,7 +401,7 @@ export default defineComponent({
|
|||
const minWidth = 50
|
||||
|
||||
document.onmousemove = e => {
|
||||
if(!isMouseDown) return
|
||||
if (!isMouseDown) return
|
||||
|
||||
const moveX = (e.pageX - startPageX) / canvasScale.value
|
||||
const width = originWidth + moveX < minWidth ? minWidth : Math.round(originWidth + moveX)
|
||||
|
|
@ -420,9 +420,9 @@ export default defineComponent({
|
|||
const clearSelectedCellText = () => {
|
||||
const _tableCells: TableCell[][] = JSON.parse(JSON.stringify(tableCells.value))
|
||||
|
||||
for(let i = 0; i < _tableCells.length; i++) {
|
||||
for(let j = 0; j < _tableCells[i].length; j++) {
|
||||
if(selectedCells.value.includes(`${i}_${j}`)) {
|
||||
for (let i = 0; i < _tableCells.length; i++) {
|
||||
for (let j = 0; j < _tableCells[i].length; j++) {
|
||||
if (selectedCells.value.includes(`${i}_${j}`)) {
|
||||
_tableCells[i][j].text = ''
|
||||
}
|
||||
}
|
||||
|
|
@ -432,9 +432,9 @@ export default defineComponent({
|
|||
|
||||
const tabActiveCell = () => {
|
||||
const getNextCell = (i: number, j: number): [number, number] | null => {
|
||||
if(!tableCells.value[i]) return null
|
||||
if(!tableCells.value[i][j]) return getNextCell(i + 1, 0)
|
||||
if(isHideCell(i, j)) return getNextCell(i, j + 1)
|
||||
if (!tableCells.value[i]) return null
|
||||
if (!tableCells.value[i][j]) return getNextCell(i + 1, 0)
|
||||
if (isHideCell(i, j)) return getNextCell(i, j + 1)
|
||||
return [i, j]
|
||||
}
|
||||
|
||||
|
|
@ -444,7 +444,7 @@ export default defineComponent({
|
|||
const nextCol = startCell.value[1] + 1
|
||||
|
||||
const nextCell = getNextCell(nextRow, nextCol)
|
||||
if(!nextCell) {
|
||||
if (!nextCell) {
|
||||
insertRow(nextRow + 1)
|
||||
startCell.value = [nextRow + 1, 0]
|
||||
}
|
||||
|
|
@ -452,41 +452,41 @@ export default defineComponent({
|
|||
|
||||
nextTick(() => {
|
||||
const textRef = document.querySelector('.cell-text.active') as HTMLInputElement
|
||||
if(textRef) textRef.focus()
|
||||
if (textRef) textRef.focus()
|
||||
})
|
||||
}
|
||||
|
||||
const keydownListener = (e: KeyboardEvent) => {
|
||||
if(!props.editable || !selectedCells.value.length) return
|
||||
if (!props.editable || !selectedCells.value.length) return
|
||||
|
||||
const key = e.key.toUpperCase()
|
||||
if(selectedCells.value.length < 2) {
|
||||
if(key === KEYS.TAB) {
|
||||
if (selectedCells.value.length < 2) {
|
||||
if (key === KEYS.TAB) {
|
||||
e.preventDefault()
|
||||
tabActiveCell()
|
||||
}
|
||||
if(e.ctrlKey && key === KEYS.UP) {
|
||||
if (e.ctrlKey && key === KEYS.UP) {
|
||||
e.preventDefault()
|
||||
const rowIndex = +selectedCells.value[0].split('_')[0]
|
||||
insertRow(rowIndex)
|
||||
}
|
||||
if(e.ctrlKey && key === KEYS.DOWN) {
|
||||
if (e.ctrlKey && key === KEYS.DOWN) {
|
||||
e.preventDefault()
|
||||
const rowIndex = +selectedCells.value[0].split('_')[0]
|
||||
insertRow(rowIndex + 1)
|
||||
}
|
||||
if(e.ctrlKey && key === KEYS.LEFT) {
|
||||
if (e.ctrlKey && key === KEYS.LEFT) {
|
||||
e.preventDefault()
|
||||
const colIndex = +selectedCells.value[0].split('_')[1]
|
||||
insertCol(colIndex)
|
||||
}
|
||||
if(e.ctrlKey && key === KEYS.RIGHT) {
|
||||
if (e.ctrlKey && key === KEYS.RIGHT) {
|
||||
e.preventDefault()
|
||||
const colIndex = +selectedCells.value[0].split('_')[1]
|
||||
insertCol(colIndex + 1)
|
||||
}
|
||||
}
|
||||
else if(key === KEYS.DELETE) {
|
||||
else if (key === KEYS.DELETE) {
|
||||
clearSelectedCellText()
|
||||
}
|
||||
}
|
||||
|
|
@ -499,7 +499,7 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const getTextStyle = (style?: TableCellStyle) => {
|
||||
if(!style) return {}
|
||||
if (!style) return {}
|
||||
const {
|
||||
bold,
|
||||
em,
|
||||
|
|
@ -524,20 +524,20 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
const handleInput = debounce(function() {
|
||||
const handleInput = debounce(function () {
|
||||
emit('change', tableCells.value)
|
||||
}, 300, { trailing: true })
|
||||
|
||||
const getEffectiveTableCells = () => {
|
||||
const effectiveTableCells = []
|
||||
|
||||
for(let i = 0; i < tableCells.value.length; i++) {
|
||||
for (let i = 0; i < tableCells.value.length; i++) {
|
||||
const rowCells = tableCells.value[i]
|
||||
const _rowCells = []
|
||||
for(let j = 0; j < rowCells.length; j++) {
|
||||
if(!isHideCell(i, j)) _rowCells.push(rowCells[j])
|
||||
for (let j = 0; j < rowCells.length; j++) {
|
||||
if (!isHideCell(i, j)) _rowCells.push(rowCells[j])
|
||||
}
|
||||
if(_rowCells.length) effectiveTableCells.push(_rowCells)
|
||||
if (_rowCells.length) effectiveTableCells.push(_rowCells)
|
||||
}
|
||||
|
||||
return effectiveTableCells
|
||||
|
|
@ -566,7 +566,7 @@ export default defineComponent({
|
|||
const rowIndex = +cellIndex.split('_')[0]
|
||||
const colIndex = +cellIndex.split('_')[1]
|
||||
|
||||
if(!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
|
||||
if (!selectedCells.value.includes(`${rowIndex}_${colIndex}`)) {
|
||||
startCell.value = [rowIndex, colIndex]
|
||||
endCell.value = []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,15 +89,15 @@ export default defineComponent({
|
|||
const hideCells = computed(() => {
|
||||
const hideCells = []
|
||||
|
||||
for(let i = 0; i < props.data.length; i++) {
|
||||
for (let i = 0; i < props.data.length; i++) {
|
||||
const rowCells = props.data[i]
|
||||
|
||||
for(let j = 0; j < rowCells.length; j++) {
|
||||
for (let j = 0; j < rowCells.length; j++) {
|
||||
const cell = rowCells[j]
|
||||
|
||||
if(cell.colspan > 1 || cell.rowspan > 1) {
|
||||
for(let row = i; row < i + cell.rowspan; row++) {
|
||||
for(let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
|
||||
if (cell.colspan > 1 || cell.rowspan > 1) {
|
||||
for (let row = i; row < i + cell.rowspan; row++) {
|
||||
for (let col = row === i ? j + 1 : j; col < j + cell.colspan; col++) {
|
||||
hideCells.push(`${row}_${col}`)
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +109,7 @@ export default defineComponent({
|
|||
|
||||
const subThemeColor = ref(['', ''])
|
||||
watch(() => props.theme, () => {
|
||||
if(props.theme) {
|
||||
if (props.theme) {
|
||||
const rgba = tinycolor(props.theme.color).toRgb()
|
||||
const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
|
||||
const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
|
||||
|
|
@ -121,7 +121,7 @@ export default defineComponent({
|
|||
}, { immediate: true })
|
||||
|
||||
const getTextStyle = (style?: TableCellStyle) => {
|
||||
if(!style) return {}
|
||||
if (!style) return {}
|
||||
const {
|
||||
bold,
|
||||
em,
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default defineComponent({
|
|||
const { addHistorySnapshot } = useHistorySnapshot()
|
||||
|
||||
const handleSelectElement = (e: MouseEvent) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
|
||||
props.selectElement(e, props.elementInfo)
|
||||
|
|
@ -82,7 +82,7 @@ export default defineComponent({
|
|||
const handleElementId = computed(() => store.state.handleElementId)
|
||||
|
||||
watch(handleElementId, () => {
|
||||
if(handleElementId.value !== props.elementInfo.id) editable.value = false
|
||||
if (handleElementId.value !== props.elementInfo.id) editable.value = false
|
||||
})
|
||||
|
||||
watch(editable, () => {
|
||||
|
|
@ -97,9 +97,9 @@ export default defineComponent({
|
|||
const scaleElementStateListener = (state: boolean) => {
|
||||
isScaling.value = state
|
||||
|
||||
if(state) editable.value = false
|
||||
if (state) editable.value = false
|
||||
|
||||
if(!state && realHeightCache.value !== -1) {
|
||||
if (!state && realHeightCache.value !== -1) {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: props.elementInfo.id,
|
||||
props: { height: realHeightCache.value },
|
||||
|
|
@ -115,12 +115,12 @@ export default defineComponent({
|
|||
|
||||
const updateTableElementHeight = (entries: ResizeObserverEntry[]) => {
|
||||
const contentRect = entries[0].contentRect
|
||||
if(!elementRef.value) return
|
||||
if (!elementRef.value) return
|
||||
|
||||
const realHeight = contentRect.height
|
||||
|
||||
if(props.elementInfo.height !== realHeight) {
|
||||
if(!isScaling.value) {
|
||||
if (props.elementInfo.height !== realHeight) {
|
||||
if (!isScaling.value) {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: props.elementInfo.id,
|
||||
props: { height: realHeight },
|
||||
|
|
@ -133,10 +133,10 @@ export default defineComponent({
|
|||
const resizeObserver = new ResizeObserver(updateTableElementHeight)
|
||||
|
||||
onMounted(() => {
|
||||
if(elementRef.value) resizeObserver.observe(elementRef.value)
|
||||
if (elementRef.value) resizeObserver.observe(elementRef.value)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if(elementRef.value) resizeObserver.unobserve(elementRef.value)
|
||||
if (elementRef.value) resizeObserver.unobserve(elementRef.value)
|
||||
})
|
||||
|
||||
const updateTableCells = (data: TableCell[][]) => {
|
||||
|
|
@ -162,7 +162,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
const startEdit = () => {
|
||||
if(!props.elementInfo.lock) editable.value = true
|
||||
if (!props.elementInfo.lock) editable.value = true
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export default defineComponent({
|
|||
const scaleElementStateListener = (state: boolean) => {
|
||||
isScaling.value = state
|
||||
|
||||
if(!state && realHeightCache.value !== -1) {
|
||||
if (!state && realHeightCache.value !== -1) {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: props.elementInfo.id,
|
||||
props: { height: realHeightCache.value },
|
||||
|
|
@ -105,12 +105,12 @@ export default defineComponent({
|
|||
|
||||
const updateTextElementHeight = (entries: ResizeObserverEntry[]) => {
|
||||
const contentRect = entries[0].contentRect
|
||||
if(!elementRef.value) return
|
||||
if (!elementRef.value) return
|
||||
|
||||
const realHeight = contentRect.height
|
||||
|
||||
if(props.elementInfo.height !== realHeight) {
|
||||
if(!isScaling.value) {
|
||||
if (props.elementInfo.height !== realHeight) {
|
||||
if (!isScaling.value) {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: props.elementInfo.id,
|
||||
props: { height: realHeight },
|
||||
|
|
@ -122,10 +122,10 @@ export default defineComponent({
|
|||
const resizeObserver = new ResizeObserver(updateTextElementHeight)
|
||||
|
||||
onMounted(() => {
|
||||
if(elementRef.value) resizeObserver.observe(elementRef.value)
|
||||
if (elementRef.value) resizeObserver.observe(elementRef.value)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if(elementRef.value) resizeObserver.unobserve(elementRef.value)
|
||||
if (elementRef.value) resizeObserver.unobserve(elementRef.value)
|
||||
})
|
||||
|
||||
const editorViewRef = ref<HTMLElement>()
|
||||
|
|
@ -137,7 +137,7 @@ export default defineComponent({
|
|||
const handleBlur = () => {
|
||||
store.commit(MutationTypes.SET_DISABLE_HOTKEYS_STATE, false)
|
||||
}
|
||||
const handleInput = debounce(function() {
|
||||
const handleInput = debounce(function () {
|
||||
store.commit(MutationTypes.UPDATE_ELEMENT, {
|
||||
id: props.elementInfo.id,
|
||||
props: { content: editorView.dom.innerHTML },
|
||||
|
|
@ -145,7 +145,7 @@ export default defineComponent({
|
|||
addHistorySnapshot()
|
||||
}, 300, { trailing: true })
|
||||
|
||||
const handleClick = debounce(function() {
|
||||
const handleClick = debounce(function () {
|
||||
const attr = getTextAttrs(editorView)
|
||||
emitter.emit(EmitterEvents.UPDATE_TEXT_STATE, attr)
|
||||
}, 30, { trailing: true })
|
||||
|
|
@ -157,8 +157,8 @@ export default defineComponent({
|
|||
|
||||
const textContent = computed(() => props.elementInfo.content)
|
||||
watch(textContent, () => {
|
||||
if(!editorView) return
|
||||
if(editorView.hasFocus()) return
|
||||
if (!editorView) return
|
||||
if (editorView.hasFocus()) return
|
||||
editorView.dom.innerHTML = textContent.value
|
||||
})
|
||||
|
||||
|
|
@ -183,7 +183,7 @@ export default defineComponent({
|
|||
})
|
||||
|
||||
const handleSelectElement = (e: MouseEvent, canMove = true) => {
|
||||
if(props.elementInfo.lock) return
|
||||
if (props.elementInfo.lock) return
|
||||
e.stopPropagation()
|
||||
|
||||
props.selectElement(e, props.elementInfo, canMove)
|
||||
|
|
@ -195,85 +195,85 @@ export default defineComponent({
|
|||
const handleElementId = computed(() => store.state.handleElementId)
|
||||
|
||||
const execCommand = (payload: CommandPayload | CommandPayload[]) => {
|
||||
if(handleElementId.value !== props.elementInfo.id) return
|
||||
if (handleElementId.value !== props.elementInfo.id) return
|
||||
|
||||
const commands = ('command' in payload) ? [payload] : payload
|
||||
|
||||
for(const item of commands) {
|
||||
if(item.command === 'fontname' && item.value) {
|
||||
for (const item of commands) {
|
||||
if (item.command === 'fontname' && item.value) {
|
||||
const mark = editorView.state.schema.marks.fontname.create({ fontname: item.value })
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
const { $from, $to } = editorView.state.selection
|
||||
editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
|
||||
}
|
||||
else if(item.command === 'fontsize' && item.value) {
|
||||
else if (item.command === 'fontsize' && item.value) {
|
||||
const mark = editorView.state.schema.marks.fontsize.create({ fontsize: item.value })
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
const { $from, $to } = editorView.state.selection
|
||||
editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
|
||||
}
|
||||
else if(item.command === 'color' && item.value) {
|
||||
else if (item.command === 'color' && item.value) {
|
||||
const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
const { $from, $to } = editorView.state.selection
|
||||
editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
|
||||
}
|
||||
else if(item.command === 'backcolor' && item.value) {
|
||||
else if (item.command === 'backcolor' && item.value) {
|
||||
const mark = editorView.state.schema.marks.backcolor.create({ backcolor: item.value })
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
const { $from, $to } = editorView.state.selection
|
||||
editorView.dispatch(editorView.state.tr.addMark($from.pos, $to.pos, mark))
|
||||
}
|
||||
else if(item.command === 'bold') {
|
||||
else if (item.command === 'bold') {
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
toggleMark(editorView.state.schema.marks.strong)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'em') {
|
||||
else if (item.command === 'em') {
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
toggleMark(editorView.state.schema.marks.em)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'underline') {
|
||||
else if (item.command === 'underline') {
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
toggleMark(editorView.state.schema.marks.underline)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'strikethrough') {
|
||||
else if (item.command === 'strikethrough') {
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
toggleMark(editorView.state.schema.marks.strikethrough)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'subscript') {
|
||||
else if (item.command === 'subscript') {
|
||||
toggleMark(editorView.state.schema.marks.subscript)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'superscript') {
|
||||
else if (item.command === 'superscript') {
|
||||
toggleMark(editorView.state.schema.marks.superscript)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'blockquote') {
|
||||
else if (item.command === 'blockquote') {
|
||||
wrapIn(editorView.state.schema.nodes.blockquote)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'code') {
|
||||
else if (item.command === 'code') {
|
||||
toggleMark(editorView.state.schema.marks.code)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'align' && item.value) {
|
||||
else if (item.command === 'align' && item.value) {
|
||||
alignmentCommand(editorView, item.value)
|
||||
}
|
||||
else if(item.command === 'bulletList') {
|
||||
else if (item.command === 'bulletList') {
|
||||
const { bullet_list: bulletList, list_item: listItem } = editorView.state.schema.nodes
|
||||
toggleList(bulletList, listItem)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'orderedList') {
|
||||
else if (item.command === 'orderedList') {
|
||||
const { ordered_list: orderedList, list_item: listItem } = editorView.state.schema.nodes
|
||||
toggleList(orderedList, listItem)(editorView.state, editorView.dispatch)
|
||||
}
|
||||
else if(item.command === 'clear') {
|
||||
else if (item.command === 'clear') {
|
||||
const { empty } = editorView.state.selection
|
||||
if(empty) selectAll(editorView.state, editorView.dispatch)
|
||||
if (empty) selectAll(editorView.state, editorView.dispatch)
|
||||
const { $from, $to } = editorView.state.selection
|
||||
editorView.dispatch(editorView.state.tr.removeMark($from.pos, $to.pos))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default (shadow: Ref<PPTElementShadow | undefined>) => {
|
|||
const shadowStyle = ref('')
|
||||
|
||||
watchEffect(() => {
|
||||
if(shadow.value) {
|
||||
if (shadow.value) {
|
||||
const { h, v, blur, color } = shadow.value
|
||||
shadowStyle.value = `${h}px ${v}px ${blur}px ${color}`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue