mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat： 新增对齐线

Browse Source
This commit is contained in:
MTrun 2022-03-04 20:57:36 +08:00
parent f767e9aaba
commit 1028ea0302
23 changed files with 452 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -10,7 +10,8 @@ export enum EditCanvasTypeEnum {
SCALE = 'scale',
USER_SCALE = 'userScale',
LOCK_SCALE = 'lockScale',
Is_Drag= 'isDrag',
IS_CREATE = 'isCreate',
IS_DRAG= 'isDrag',
}
// 编辑区域
@ -26,8 +27,10 @@ export type EditCanvasType = {
[EditCanvasTypeEnum.USER_SCALE]: number
// 锁定缩放
[EditCanvasTypeEnum.LOCK_SCALE]: boolean
// 初始化创建
[EditCanvasTypeEnum.IS_CREATE]: boolean
// 拖拽中
[EditCanvasTypeEnum.Is_Drag]: boolean
[EditCanvasTypeEnum.IS_DRAG]: boolean
}
// 滤镜
@ -74,15 +77,21 @@ export interface EditCanvasConfigType {
// 坐标轴信息
export enum EditCanvasTypeEnum {
START_X = 'startX',
START_Y = 'startY',
X = 'x',
Y = 'y'
}
// 鼠标位置
export type MousePositionType = {
// X 轴
// 开始 X
[EditCanvasTypeEnum.START_X]: number
// 开始 Y
[EditCanvasTypeEnum.START_Y]: number
// X
[EditCanvasTypeEnum.X]: number
// y 轴
// y
[EditCanvasTypeEnum.Y]: number
}

20
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -19,8 +19,8 @@ import {
const chartHistoryStoreStore = useChartHistoryStoreStore()
// 编辑区域内容
export const useChartEditStoreStore = defineStore({
id: 'useChartEditStoreStore',
export const useChartEditStore = defineStore({
id: 'useChartEditStore',
state: (): chartEditStoreType => ({
// 画布属性
editCanvas: {
@ -35,6 +35,8 @@ export const useChartEditStoreStore = defineStore({
userScale: 1,
// 锁定缩放
lockScale: false,
// 初始化
isCreate: false,
// 拖拽中
isDrag: false
},
@ -42,6 +44,8 @@ export const useChartEditStoreStore = defineStore({
rightMenuShow: false,
// 鼠标定位
mousePosition: {
startX: 0,
startY: 0,
x: 0,
y: 0
},
@ -128,6 +132,13 @@ export const useChartEditStoreStore = defineStore({
setRecordChart(item: RecordChartType | undefined) {
this.recordChart = cloneDeep(item)
},
// * 设置鼠标位置
setMousePosition(x?: number, y?: number, startX?: number, startY?: number): void {
if (startX) this.mousePosition.startX = startX
if (startY) this.mousePosition.startY = startY
if (x) this.mousePosition.x = x
if (y) this.mousePosition.y = y
},
// * 找到目标 id 数据下标位置
fetchTargetIndex(): number {
if(!this.getTargetChart.selectId) {
@ -451,11 +462,6 @@ export const useChartEditStoreStore = defineStore({
}
},
// ----------------
// * 设置鼠标位置
setMousePosition(x: number, y: number): void {
this.mousePosition.x = x
this.mousePosition.y = y
},
// * 设置页面变换时候的 Class
setPageSizeClass(): void {
const dom = this.getEditCanvas.editContentDom

4
src/store/modules/chartLayoutStore/chartLayoutStore.ts
View File

@ -2,9 +2,9 @@ import { defineStore } from 'pinia'
import { ChartLayoutType } from './chartLayoutStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const { GO_CHART_LAYOUT_STORE } = StorageEnum

4
src/views/chart/ContentBox/index.vue
View File

@ -47,11 +47,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { icon } from '@/plugins'
const { ChevronBackOutlineIcon } = icon.ionicons5
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const emit = defineEmits(['back'])
defineProps({

8
src/views/chart/ContentConfigurations/components/CanvasPage/components/ChartThemeColor/index.vue
View File

@ -29,7 +29,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import {
chartColors,
@ -42,14 +42,14 @@ import cloneDeep from 'lodash/cloneDeep'
import { icon } from '@/plugins'
const { SquareIcon } = icon.ionicons5
const chartEditStoreStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const selectName = computed(() => {
return chartEditStoreStore.getEditCanvasConfig.chartThemeColor
return chartEditStore.getEditCanvasConfig.chartThemeColor
})
// 获取用来展示的色号
@ -59,7 +59,7 @@ const fetchShowColors = (colors: Array<string>) => {
// 设置主体色（在 ContentEdit > List 中进行注入）
const selectTheme = (theme: ChartColorsNameType) => {
chartEditStoreStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.CHART_THEME_COLOR, theme)
}
</script>

22
src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
View File

@ -7,7 +7,7 @@
size="small"
v-model:value="canvasConfig.width"
:validator="validator"
@update:value="chartEditStoreStore.computedScale"
@update:value="chartEditStore.computedScale"
/>
</n-form-item>
<n-form-item label="高度">
@ -15,7 +15,7 @@
size="small"
v-model:value="canvasConfig.height"
:validator="validator"
@update:value="chartEditStoreStore.computedScale"
@update:value="chartEditStore.computedScale"
/>
</n-form-item>
</n-form>
@ -110,7 +110,7 @@
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { backgroundImageSize } from '@/settings/designSetting'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { UploadCustomRequestOptions } from 'naive-ui'
import { fileToUrl, loadAsyncComponent } from '@/utils'
@ -119,8 +119,8 @@ import { icon } from '@/plugins'
const { ColorPaletteIcon } = icon.ionicons5
const { ZAxisIcon } = icon.carbon
const chartEditStoreStore = useChartEditStoreStore()
const canvasConfig = chartEditStoreStore.getEditCanvasConfig
const chartEditStore = useChartEditStore()
const canvasConfig = chartEditStore.getEditCanvasConfig
const uploadFileListRef = ref()
const switchSelectColorLoading = ref(false)
@ -184,11 +184,11 @@ const beforeUploadHandle = async ({ file }) => {
// 清除背景
const clearImage = () => {
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.BACKGROUND_IAMGE,
undefined
)
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.SELECT_COLOR,
true
)
@ -196,12 +196,12 @@ const clearImage = () => {
// 清除颜色
const clearColor = () => {
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.BACKGROUND,
undefined
)
if (canvasConfig.backgroundImage) {
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.SELECT_COLOR,
false
)
@ -232,11 +232,11 @@ const customRequest = (options: UploadCustomRequestOptions) => {
nextTick(() => {
if (file.file) {
const ImageUrl = fileToUrl(file.file)
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.BACKGROUND_IAMGE,
ImageUrl
)
chartEditStoreStore.setEditCanvasConfig(
chartEditStore.setEditCanvasConfig(
EditCanvasConfigEnum.SELECT_COLOR,
false
)

8
src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
View File

@ -25,7 +25,7 @@
<script setup lang="ts">
import { computed, Ref } from 'vue'
import { loadAsyncComponent } from '@/utils'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
import { CreateComponentType } from '@/packages/index.d'
import { SettingItemBox } from '@/components/ChartItemSetting/index'
@ -33,11 +33,11 @@ import { SettingItemBox } from '@/components/ChartItemSetting/index'
const GlobalSettingCom = loadAsyncComponent(() =>
import('@/components/ChartItemSetting/index')
)
const chartEditStoreStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const targetData: Ref<CreateComponentType> = computed(() => {
const list = chartEditStoreStore.getComponentList
const targetIndex = chartEditStoreStore.fetchTargetIndex()
const list = chartEditStore.getComponentList
const targetIndex = chartEditStore.fetchTargetIndex()
return list[targetIndex]
})
</script>

10
src/views/chart/ContentConfigurations/index.vue
View File

@ -82,11 +82,11 @@ import { loadAsyncComponent } from '@/utils'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const { getDetails } = toRefs(useChartLayoutStore())
const { setItem } = useChartLayoutStore()
const chartEditStoreStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, RocketIcon } = icon.ionicons5
@ -117,10 +117,10 @@ const expandHindle = () => {
}
const selectTarget = computed(() => {
const selectId = chartEditStoreStore.getTargetChart.selectId
const selectId = chartEditStore.getTargetChart.selectId
if (!selectId) return undefined
return chartEditStoreStore.componentList[
chartEditStoreStore.fetchTargetIndex()
return chartEditStore.componentList[
chartEditStore.fetchTargetIndex()
]
})

3
src/views/chart/ContentEdit/components/EditAlignLine/index.ts Normal file
View File

@ -0,0 +1,3 @@
import EditAlignLine from './index.vue'
export { EditAlignLine }

321
src/views/chart/ContentEdit/components/EditAlignLine/index.vue Normal file
View File

@ -0,0 +1,321 @@
<template>
<div class="go-edit-align-line">
<div
class="line"
v-for="item in line.lineArr"
:key="item"
:class="[
item.includes('row') ? 'row' : 'col',
line['select'].has(item) && 'visible'
]"
:style="useComponentStyle(line['select'].get(item))"
/>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { CreateComponentType } from '@/packages/index.d'
import throttle from 'lodash/throttle'
import cloneDeep from 'lodash/cloneDeep'
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartEditStore = useChartEditStore()
// 线条集合
const line = reactive({
// 吸附距离（px）
minDistance: 10,
// 行横向row（上中下），列竖线col（左中右）
lineArr: ['rowt', 'rowc', 'rowb', 'coll', 'colc', 'colr'],
// 展示线
select: new Map(),
// 已经吸附
sorptioned: {
x: false,
y: false
}
})
// 位置计算
const useComponentStyle = (attr?: Partial<{ x: number; y: number }>) => {
if (!attr) return {}
const componentStyle = {
left: `${attr.x ? attr.x : 0}px`,
top: `${attr.y ? attr.y : 0}px`
}
return componentStyle
}
// 是否开始计算
const isComputedLine = computed(() => {
const isDrag = chartEditStore.getEditCanvas[EditCanvasTypeEnum.IS_DRAG]
return isDrag
})
// 吸附判定
const isSorption = (selectValue: number, componentValue: number) => {
const isSorption = Math.abs(selectValue - componentValue) <= line.minDistance
return isSorption
}
// 当前目标
const selectId = computed(() => chartEditStore.getTargetChart.selectId)
const selectTatget = computed(
() => chartEditStore.getComponentList[chartEditStore.fetchTargetIndex()]
)
const selectAttr = computed(() => selectTatget.value.attr)
// 画布坐标
const canvasPositionList = computed(() => {
return {
id: '0',
attr: {
w: cloneDeep(chartEditStore.getEditCanvasConfig.width),
h: cloneDeep(chartEditStore.getEditCanvasConfig.height),
x: 0,
y: 0,
zIndex: 0
}
}
})
// 监听鼠标移动
watch(
() => chartEditStore.getMousePosition,
throttle(e => {
if (!isComputedLine.value) return
// 获取目标组件数据
const selectW = selectAttr.value.w
const selectH = selectAttr.value.h
// 距离左侧
const selectLeftX = selectAttr.value.x
const selectHalfX = selectLeftX + selectW / 2
const selectRightX = selectLeftX + selectW
const seletX = [selectLeftX, selectHalfX, selectRightX]
// 距离顶部
const selectTopY = selectAttr.value.y
const selectHalfY = selectTopY + selectH / 2
const selectBottomY = selectTopY + selectH
const seletY = [selectTopY, selectHalfY, selectBottomY]
line.select.clear()
line.sorptioned.y = false
// 循环查询所有组件数据
const componentList = chartEditStore.getComponentList.map((e:CreateComponentType) => {
return {
id: e.id,
attr: e.attr
}
})
componentList.push(canvasPositionList.value)
// 传入画布数据
line.lineArr.forEach(lineItem => {
componentList.forEach((component: typeof canvasPositionList.value) => {
// 排除自身
if (selectId.value === component.id) return
const componentW = component.attr.w
const componentH = component.attr.h
// 距离左侧
const componentLeftX = component.attr.x
const componentHalfX = componentLeftX + componentW / 2
const componentRightX = componentLeftX + componentW
const componentX = [componentLeftX, componentHalfX, componentRightX]
// 距离顶部
const componentTopY = component.attr.y
const componentHalfY = componentTopY + componentH / 2
const componentBottomY = componentTopY + componentH
const componentY = [componentTopY, componentHalfY, componentBottomY]
// 横线对比的是 Y
if (lineItem.includes('rowt')) {
// 顶部
if (isSorption(selectTopY, componentTopY)) {
line.select.set(lineItem, { y: componentTopY })
selectTatget.value.setPosition(selectLeftX, componentTopY)
}
if (isSorption(selectTopY, componentHalfY)) {
line.select.set(lineItem, { y: componentHalfY })
selectTatget.value.setPosition(selectLeftX, componentHalfY)
}
if (isSorption(selectTopY, componentBottomY)) {
line.select.set(lineItem, { y: componentBottomY })
selectTatget.value.setPosition(selectLeftX, componentBottomY)
}
}
if (lineItem.includes('rowc')) {
// 顶部
if (isSorption(selectHalfY, componentTopY)) {
line.select.set(lineItem, { y: componentTopY })
selectTatget.value.setPosition(
selectLeftX,
componentTopY - selectH / 2
)
}
if (isSorption(selectHalfY, componentHalfY)) {
line.select.set(lineItem, { y: componentHalfY })
selectTatget.value.setPosition(
selectLeftX,
componentHalfY - selectH / 2
)
}
if (isSorption(selectHalfY, componentBottomY)) {
line.select.set(lineItem, { y: componentBottomY })
selectTatget.value.setPosition(
selectLeftX,
componentBottomY - selectH / 2
)
}
}
if (lineItem.includes('rowb')) {
// 顶部
if (isSorption(selectBottomY, componentTopY)) {
line.select.set(lineItem, { y: componentTopY })
selectTatget.value.setPosition(selectLeftX, componentTopY - selectH)
}
if (isSorption(selectBottomY, componentHalfY)) {
line.select.set(lineItem, { y: componentHalfY })
selectTatget.value.setPosition(
selectLeftX,
componentHalfY - selectH
)
}
if (isSorption(selectBottomY, componentBottomY)) {
line.select.set(lineItem, { y: componentBottomY })
selectTatget.value.setPosition(
selectLeftX,
componentBottomY - selectH
)
}
}
// 纵线对比的是 X
if (lineItem.includes('coll')) {
if (isSorption(selectLeftX, componentLeftX)) {
line.select.set(lineItem, { x: componentLeftX })
selectTatget.value.setPosition(componentLeftX, selectTopY)
}
if (isSorption(selectLeftX, componentHalfX)) {
line.select.set(lineItem, { x: componentHalfX })
selectTatget.value.setPosition(componentHalfX, selectTopY)
}
if (isSorption(selectLeftX, componentRightX)) {
line.select.set(lineItem, { x: componentRightX })
selectTatget.value.setPosition(componentRightX, selectTopY)
}
}
if (lineItem.includes('colc')) {
if (isSorption(selectHalfX, componentLeftX)) {
line.select.set(lineItem, { x: componentLeftX })
selectTatget.value.setPosition(
componentLeftX - selectW / 2,
selectTopY
)
}
if (isSorption(selectHalfX, componentHalfX)) {
line.select.set(lineItem, { x: componentHalfX })
selectTatget.value.setPosition(
componentHalfX - selectW / 2,
selectTopY
)
}
if (isSorption(selectHalfX, componentRightX)) {
line.select.set(lineItem, { x: componentRightX })
selectTatget.value.setPosition(
componentRightX - selectW / 2,
selectTopY
)
}
}
if (lineItem.includes('colr')) {
if (isSorption(selectRightX, componentLeftX)) {
line.select.set(lineItem, { x: componentLeftX })
selectTatget.value.setPosition(componentLeftX - selectW, selectTopY)
}
if (isSorption(selectRightX, componentHalfX)) {
line.select.set(lineItem, { x: componentHalfX })
selectTatget.value.setPosition(componentHalfX - selectW, selectTopY)
}
if (isSorption(selectRightX, componentRightX)) {
line.select.set(lineItem, { x: componentRightX })
selectTatget.value.setPosition( componentRightX - selectW, selectTopY )
}
}
/*
* 我也不知道为什么这个不行，还没时间调
if(lineItem.includes('row')) {
seletY.forEach(sY => {
componentY.forEach(cY => {
if (isSorption(sY, cY)) {
line.select.set(lineItem, { y: cY })
}
})
})
return
}
if(lineItem.includes('col')) {
seletX.forEach(sX => {
componentX.forEach(cX => {
if (isSorption(sX, cX)) {
line.select.set(lineItem, { x: sX })
}
})
})
return
}
*/
})
})
}, 200),
{
deep: true
}
)
// 取消对齐线
watch(
() => isComputedLine.value,
(val: boolean) => {
if (!val) {
line.select.clear()
line.sorptioned.y = false
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
}
}
)
</script>
<style lang="scss" scoped>
@include go(edit-align-line) {
.line {
z-index: 1;
position: absolute;
top: 0;
left: 0;
display: none;
border-width: 1px;
border-style: solid;
border-color: v-bind('themeColor');
opacity: 0.7;
&.visible {
display: block;
}
}
.row {
width: 100%;
}
.col {
height: 100%;
}
}
</style>

13
src/views/chart/ContentEdit/components/EditBottom/index.vue
View File

@ -62,19 +62,18 @@ import { reactive, ref, toRefs, watchEffect } from 'vue'
import { icon } from '@/plugins'
import { EditHistory } from '../EditHistory/index'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
const { DicomOverlayIcon } = icon.carbon
import {
getChartEditStore,
getChartEditStoreEnum
} from '../../hooks/useStore.hook'
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartEditStore = getChartEditStore()
const ChartEditStoreEnum = getChartEditStoreEnum()
const chartEditStore = useChartEditStore()
const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
// 缩放选项
@ -115,7 +114,7 @@ const selectHandle = (v: number) => {
// 点击锁处理
const lockHandle = () => {
chartEditStore.setEditCanvas(ChartEditStoreEnum.LOCK_SCALE, !lockScale.value)
chartEditStore.setEditCanvas(EditCanvasTypeEnum.LOCK_SCALE, !lockScale.value)
}
// 拖动

13
src/views/chart/ContentEdit/components/EditRange/index.vue
View File

@ -6,18 +6,22 @@
>
<slot></slot>
</div>
<!-- 拖拽时的辅助线 -->
<EditAlignLine />
<!-- 拖拽时的遮罩 -->
<div class="go-edit-range-model" :style="rangeModelStyle"></div>
</template>
<script setup lang="ts">
import { toRefs, computed } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useSizeStyle } from '../../hooks/useStyle.hook'
import { mousedownHandleUnStop } from '../../hooks/useDrag.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditAlignLine } from '../EditAlignLine/index'
const chartEditStoreStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStoreStore)
const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStore)
const size = computed(() => {
return {
@ -40,7 +44,7 @@ const rangeStyle = computed(() => {
// 模态层
const rangeModelStyle = computed(() => {
const dragStyle = getEditCanvas.value.isDrag && {'z-index': 99999 }
const dragStyle = getEditCanvas.value.isCreate && {'z-index': 99999 }
// @ts-ignore
return { ...useSizeStyle(size.value), ...dragStyle}
})
@ -54,6 +58,7 @@ const rangeModelStyle = computed(() => {
@include fetch-theme('box-shadow');
@include filter-border-color('hover-border-color');
@include fetch-theme-custom('border-color', 'background-color4');
@include filter-bg-color('background-color2')
}
@include go(edit-range-model) {
z-index: -1;

7
src/views/chart/ContentEdit/components/EditShapeBox/index.vue
View File

@ -23,9 +23,9 @@
<script setup lang="ts">
import { ref, computed, PropType, toRefs } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
import { CreateComponentType } from '@/packages/index.d'
import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
import { useMousePointHandle } from '../../hooks/useDrag.hook'
@ -39,7 +39,7 @@ const props = defineProps({
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
// 锚点
const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
@ -70,6 +70,7 @@ const select = computed(() => {
border: 3px solid v-bind('themeColor');
border-radius: 5px;
background-color: #fff;
transform: translate(-40%, -30%);
}
/* 选中 */
.shape-modal {

53
src/views/chart/ContentEdit/hooks/useDrag.hook.ts
View File

@ -1,15 +1,18 @@
import { DragKeyEnum } from '@/enums/editPageEnum'
import { createComponent } from '@/packages'
import { ConfigType } from '@/packages/index.d'
import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
import {
CreateComponentType,
PickCreateComponentType
} from '@/packages/index.d'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { getChartEditStore, getChartEditStoreEnum } from './useStore.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { loadingStart, loadingFinish, loadingError } from '@/utils'
import throttle from 'lodash/throttle'
const { onClickoutside } = useContextMenu()
const chartEditStore = getChartEditStore()
const chartEditStoreEnum = getChartEditStoreEnum()
const chartEditStore = useChartEditStore()
const { onClickoutside } = useContextMenu()
// * 拖拽到编辑区域里
export const handleDrag = async (e: DragEvent) => {
@ -25,7 +28,7 @@ export const handleDrag = async (e: DragEvent) => {
}
// 设置拖拽状态
chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, false)
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
const dropData: Exclude<ConfigType, ['node', 'image']> = JSON.parse(
drayDataString
@ -52,7 +55,7 @@ export const handleDragOver = (e: DragEvent) => {
e.stopPropagation()
// 设置拖拽状态
chartEditStore.setEditCanvas(chartEditStoreEnum.Is_Drag, true)
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true)
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
}
@ -90,9 +93,14 @@ export const useMouseHandle = () => {
// 记录点击初始位置
const startX = e.screenX
const startY = e.screenY
// 记录初始位置
chartEditStore.setMousePosition(startX, startY)
// 计算偏移量（处理 scale 比例问题）
const mousemove = throttle((moveEvent: MouseEvent) => {
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
let currX = Math.round(itemAttrX + (moveEvent.screenX - startX) / scale)
let currY = Math.round(itemAttrY + (moveEvent.screenY - startY) / scale)
@ -111,6 +119,8 @@ export const useMouseHandle = () => {
}, 30)
const mouseup = () => {
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
chartEditStore.setMousePosition(0, 0)
document.removeEventListener('mousemove', mousemove)
document.removeEventListener('mouseup', mouseup)
}
@ -144,6 +154,9 @@ export const useMousePointHandle = (
) => {
e.stopPropagation()
e.preventDefault()
// 设置拖拽状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
const scale = chartEditStore.getEditCanvas.scale
const itemAttrX = attr.x
@ -154,11 +167,16 @@ export const useMousePointHandle = (
// 记录点击初始位置
const startX = e.screenX
const startY = e.screenY
const move = throttle((moveEvent: MouseEvent) => {
// 记录初始位置
chartEditStore.setMousePosition(startX, startY)
const mousemove = throttle((moveEvent: MouseEvent) => {
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
let currX = Math.round((moveEvent.screenX - startX) / scale)
let currY = Math.round((moveEvent.screenY - startY) / scale)
const isTop = /t/.test(point)
const isBottom = /b/.test(point)
const isLeft = /l/.test(point)
@ -166,18 +184,21 @@ export const useMousePointHandle = (
const newHeight = itemAttrH + (isTop ? -currY : (isBottom ? currY : 0))
const newWidth = itemAttrW + (isLeft ? -currX : (isRight ? currX : 0))
attr.h = newHeight > 0 ? newHeight : 0
attr.w = newWidth > 0 ? newWidth : 0
attr.x = itemAttrX + (isLeft ? currX : 0)
attr.y = itemAttrY + (isTop ? currY : 0)
})
const up = () => {
document.removeEventListener('mousemove', move)
document.removeEventListener('mouseup', up)
const mouseup = () => {
// 设置拖拽状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
chartEditStore.setMousePosition(0, 0)
document.removeEventListener('mousemove', mousemove)
document.removeEventListener('mouseup', mouseup)
}
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', up)
document.addEventListener('mousemove', mousemove)
document.addEventListener('mouseup', mouseup)
}

4
src/views/chart/ContentEdit/hooks/useLayout.hook.ts
View File

@ -1,8 +1,8 @@
import { onUnmounted, onMounted } from 'vue'
import { getChartEditStore } from './useStore.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
const chartEditStore = getChartEditStore()
const chartEditStore = useChartEditStore()
// 布局处理
export const useLayout = () => {

10
src/views/chart/ContentEdit/hooks/useStore.hook.ts
View File

@ -1,10 +0,0 @@
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
const chartEditStore = useChartEditStoreStore()
export const getChartEditStore = () => {
return chartEditStore
}
export const getChartEditStoreEnum = () => {
return EditCanvasTypeEnum
}

10
src/views/chart/ContentEdit/hooks/useStyle.hook.ts
View File

@ -11,10 +11,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
return componentStyle
}
export const useSizeStyle = (attr: AttrType) => {
export const useSizeStyle = (attr: AttrType, scale?: number) => {
const sizeStyle = {
width: `${attr.w}px`,
height: `${attr.h}px`
width: `${scale ? scale * attr.w : attr.w}px`,
height: `${scale ? scale * attr.h : attr.h}px`
}
return sizeStyle
}
@ -55,11 +55,9 @@ export const usePointStyle = (
}
const style = {
marginLeft: isRight ? '-3px' : '-3px',
marginTop: '-3px',
left: `${newLeft}px`,
top: `${newTop}px`,
cursor: cursorResize[index] + '-resize',
cursor: cursorResize[index] + '-resize'
}
return style

4
src/views/chart/ContentEdit/index.vue
View File

@ -55,12 +55,12 @@ import { useLayout } from './hooks/useLayout.hook'
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
import { handleDrag, handleDragOver, useMouseHandle } from './hooks/useDrag.hook'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { getChartEditStore } from './hooks/useStore.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
import { CreateComponentType } from '@/packages/index.d'
import { chartColors } from '@/settings/chartThemes/index'
const chartEditStore = getChartEditStore()
const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu()
// 布局处理

4
src/views/chart/ContentLayers/components/ListItem/index.vue
View File

@ -25,12 +25,12 @@
import { ref, toRefs, computed } from 'vue'
import { requireErrorImg } from '@/utils'
import { useDesignStore } from '@/store/modules/designStore/designStore'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// 全局颜色
const designStore = useDesignStore()
const themeColor = ref(designStore.getAppTheme)
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const props = defineProps({
componentData: {

4
src/views/chart/ContentLayers/index.vue
View File

@ -30,7 +30,7 @@ import { computed } from 'vue'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep';
import {
@ -48,7 +48,7 @@ import { icon } from '@/plugins'
const { LayersIcon } = icon.ionicons5
const chartLayoutStore = useChartLayoutStore()
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
const { handleContextMenu } = useContextMenu({
hideOptionsList: [MenuEnum.CLEAR, MenuEnum.PARSE]

4
src/views/chart/hooks/useContextMenu.hook.ts
View File

@ -1,5 +1,5 @@
import { reactive, nextTick } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { CreateComponentType } from '@/packages/index.d'
import { renderIcon, loadingError } from '@/utils'
import { icon } from '@/plugins'
@ -14,7 +14,7 @@ const {
} = icon.ionicons5
const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon } = icon.carbon
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
export enum MenuEnum {
DELETE = 'delete',

4
src/views/chart/hooks/useKeyboard.hook.ts
View File

@ -1,8 +1,8 @@
import { isMac, addEventListener, removeEventListener } from '@/utils'
import { getChartEditStore } from '../ContentEdit/hooks/useStore.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook'
const chartEditStore = getChartEditStore()
const chartEditStore = useChartEditStore()
export const keyboardValue = {

4
src/views/chart/index.vue
View File

@ -38,11 +38,11 @@
import { loadAsyncComponent } from '@/utils'
import { HeaderPro } from '@/layout/components/HeaderPro'
import { useContextMenu } from './hooks/useContextMenu.hook'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
const chartHistoryStoreStore = useChartHistoryStoreStore()
const chartEditStore = useChartEditStoreStore()
const chartEditStore = useChartEditStore()
// 记录初始化
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)