feat: 合并1.1.1

This commit is contained in:
奔跑的面条
2022-10-08 21:04:41 +08:00
73 changed files with 3154 additions and 6430 deletions
@@ -11,7 +11,8 @@
...useComponentStyle(groupData.attr, groupIndex),
...useSizeStyle(groupData.attr),
...getFilterStyle(groupData.styles),
...getTransformStyle(groupData.styles)
...getTransformStyle(groupData.styles),
...getBlendModeStyle(groupData.styles) as any
}"
@click="mouseClickHandle($event, groupData)"
@mousedown="mousedownHandle($event, groupData)"
@@ -55,7 +56,7 @@ import { MenuEnum } from '@/enums/editPageEnum'
import { chartColors } from '@/settings/chartThemes/index'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook'
import { useMouseHandle } from '../../hooks/useDrag.hook'
@@ -85,26 +86,32 @@ const optionsHandle = (
allList: MenuOptionsItemType[],
targetInstance: CreateComponentType
) => {
// 多选
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
// 单选
const singleMenuEnums = [MenuEnum.UN_GROUP]
const filter = (menulist: MenuEnum[]) => {
const list: MenuOptionsItemType[] = []
allList.forEach(item => {
if (menulist.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
return allList.filter(i => menulist.includes(i.key as MenuEnum))
}
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
return filter(moreMenuEnums)
return filter([MenuEnum.GROUP, MenuEnum.DELETE])
} else {
return [...filter(singleMenuEnums), divider(), ...targetList]
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
// 单选
const singleMenuEnums = [MenuEnum.UN_GROUP]
return [
...filter(singleMenuEnums),
divider(),
...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
]
}
}
@@ -48,8 +48,19 @@ import {
HistoryActionTypeEnum
} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
const { DesktopOutlineIcon, PencilIcon, TrashIcon, CopyIcon, LayersIcon, DuplicateIcon, HelpOutlineIcon } =
icon.ionicons5
const {
DesktopOutlineIcon,
PencilIcon,
TrashIcon,
CopyIcon,
LayersIcon,
DuplicateIcon,
HelpOutlineIcon,
LockClosedOutlineIcon,
LockOpenOutlineIcon,
EyeOffOutlineIcon,
EyeOutlineIcon
} = icon.ionicons5
const { StackedMoveIcon, Carbon3DCursorIcon, Carbon3DSoftwareIcon } = icon.carbon
const chartHistoryStoreStore = useChartHistoryStore()
@@ -83,6 +94,14 @@ const iconHandle = (e: HistoryItemType) => {
return Carbon3DCursorIcon
case HistoryActionTypeEnum.UN_GROUP:
return Carbon3DSoftwareIcon
case HistoryActionTypeEnum.LOCK:
return LockClosedOutlineIcon
case HistoryActionTypeEnum.UNLOCK:
return LockOpenOutlineIcon
case HistoryActionTypeEnum.HIDE:
return EyeOffOutlineIcon
case HistoryActionTypeEnum.SHOW:
return EyeOutlineIcon
default:
return PencilIcon
}
@@ -109,9 +128,7 @@ const options = computed(() => {
}
})
return reverse(options.filter(item => {
return item.label
}))
return reverse(options.filter(item => item.label))
})
</script>
@@ -1,5 +1,5 @@
<template>
<div class="go-shape-box">
<div class="go-shape-box" :class="{ lock, hide }">
<slot></slot>
<!-- 锚点 -->
<template v-if="!hiddenPoint">
@@ -55,14 +55,26 @@ const themeColor = computed(() => {
// 计算当前选中目标
const hover = computed(() => {
if (props.item.status.lock) return false
return props.item.id === chartEditStore.getTargetChart.hoverId
})
// 兼容多值场景
const select = computed(() => {
const id = props.item.id
if (props.item.status.lock) return false
return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
})
// 锁定
const lock = computed(() => {
return props.item.status.lock
})
// 隐藏
const hide = computed(() => {
return props.item.status.hide
})
</script>
<style lang="scss" scoped>
@@ -70,6 +82,14 @@ const select = computed(() => {
position: absolute;
cursor: move;
&.lock {
cursor: default !important;
}
&.hide {
display: none;
}
/* 锚点 */
.shape-point {
z-index: 1;
@@ -63,6 +63,26 @@ const shortcutKeyOptions = [
win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
},
{
label: '锁定',
win: `${WinKeyboard.CTRL.toUpperCase()} + L `,
mac: `${MacKeyboard.CTRL.toUpperCase()} + L `
},
{
label: '解锁',
win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()}+ L `,
mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + L `
},
{
label: '展示',
win: `${WinKeyboard.CTRL.toUpperCase()} + H `,
mac: `${MacKeyboard.CTRL.toUpperCase()} + H `
},
{
label: '隐藏',
win: `${WinKeyboard.CTRL.toUpperCase()} + ${WinKeyboard.SHIFT.toUpperCase()} + H `,
mac: `${MacKeyboard.CTRL.toUpperCase()} + ${MacKeyboard.SHIFT.toUpperCase()} + H `
},
{
label: '删除',
win: 'Delete'.toUpperCase(),
@@ -179,7 +179,8 @@ $asideBottom: 70px;
}
@include deep() {
.n-button__icon {
margin-right: 4px;
margin-right: 0;
margin-left: 0;
margin-bottom: 12px;
}
}
@@ -140,7 +140,9 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
targetAttr.x1 - selectAttr.x1 >= 0 &&
targetAttr.y1 - selectAttr.y1 >= 0 &&
targetAttr.x2 - selectAttr.x2 <= 0 &&
targetAttr.y2 - selectAttr.y2 <= 0
targetAttr.y2 - selectAttr.y2 <= 0 &&
!item.status.lock &&
!item.status.hide
) {
isSelect = true
chartEditStore.setTargetSelectChart(item.id, true)
@@ -166,6 +168,7 @@ export const useMouseHandle = () => {
const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
if (item.status.lock) return
// 若此时按下了 CTRL, 表示多选
if (
window.$KeyboardActive?.has(WinKeyboard.CTRL_SOURCE_KEY) ||
@@ -185,6 +188,7 @@ export const useMouseHandle = () => {
const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
e.preventDefault()
e.stopPropagation()
if (item.status.lock) return
onClickOutSide()
// 按下左键 + CTRL
if (
+18 -17
View File
@@ -37,7 +37,10 @@
v-else
:data-id="item.id"
:index="index"
:style="useComponentStyle(item.attr, index)"
:style="{
...useComponentStyle(item.attr, index),
...getBlendModeStyle(item.styles) as any
}"
:item="item"
@click="mouseClickHandle($event, item)"
@mousedown="mousedownHandle($event, item)"
@@ -81,7 +84,7 @@ import { onMounted, computed } from 'vue'
import { chartColors } from '@/settings/chartThemes/index'
import { MenuEnum } from '@/enums/editPageEnum'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -116,24 +119,22 @@ const optionsHandle = (
allList: MenuOptionsItemType[],
targetInstance: CreateComponentType
) => {
// 多选
const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
// 单选
const singleMenuEnums = targetList
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
const list: MenuOptionsItemType[] = []
allList.forEach(item => {
// 成组
if (moreMenuEnums.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum))
}
return singleMenuEnums
const statusMenuEnums: MenuEnum[] = []
if (targetInstance.status.lock) {
statusMenuEnums.push(MenuEnum.LOCK)
} else {
statusMenuEnums.push(MenuEnum.UNLOCK)
}
if (targetInstance.status.hide) {
statusMenuEnums.push(MenuEnum.HIDE)
} else {
statusMenuEnums.push(MenuEnum.SHOW)
}
return targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum))
}
// 主题色