mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-23 15:52:49 +08:00
feat: 合并1.3.1的内容
This commit is contained in:
奔跑的面条
parent
5588205d8d
commit
a4cd1f31b5
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "go-view",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"engines": {
|
||||
"node": ">=12.0"
|
||||
},
|
||||
|
||||
@ -16,8 +16,7 @@ export enum ThemeEnum {
|
||||
MACARON = 'macaron',
|
||||
BLUE = 'blue',
|
||||
DARKBLUE = 'darkblue',
|
||||
WINE = 'wine',
|
||||
WEIXIN = 'tileLayer'
|
||||
WINE = 'wine'
|
||||
}
|
||||
|
||||
export enum LangEnum {
|
||||
@ -31,6 +30,11 @@ export enum ViewModeEnum {
|
||||
STEREOSCOPIC = '3D'
|
||||
}
|
||||
|
||||
export const ShowHideEnum = {
|
||||
SHOW: true,
|
||||
HIDE: false
|
||||
}
|
||||
|
||||
export enum FeaturesEnum {
|
||||
BG = 'bg',
|
||||
POINT = 'point',
|
||||
@ -71,6 +75,25 @@ export const option = {
|
||||
},
|
||||
mapMarkerType: MarkerEnum.CIRCLE_MARKER,
|
||||
viewMode: ViewModeEnum.PLANE,
|
||||
showLabel: ShowHideEnum.SHOW,
|
||||
satelliteTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 1,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
roadNetTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 2,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
trafficTileLayer: {
|
||||
show: ShowHideEnum.HIDE,
|
||||
zIndex: 3,
|
||||
opacity: 1,
|
||||
zooms: [3, 18]
|
||||
},
|
||||
lang: LangEnum.ZH_CN,
|
||||
features: [FeaturesEnum.BG, FeaturesEnum.POINT, FeaturesEnum.ROAD, FeaturesEnum.BUILDING]
|
||||
}
|
||||
|
||||
@ -22,13 +22,21 @@
|
||||
<n-select size="small" v-model:value="optionData.mapOptions.amapStyleKey" :options="themeOptions" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="内容" :alone="true">
|
||||
<setting-item-box name="显示要素" :alone="true">
|
||||
<n-checkbox-group v-model:value="optionData.mapOptions.features">
|
||||
<n-space item-style="display: flex;">
|
||||
<n-checkbox :value="item.value" :label="item.label" v-for="(item, index) in featuresOptions" :key="index" />
|
||||
</n-space>
|
||||
</n-checkbox-group>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="文字标注" :alone="true">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.showLabel" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="位置">
|
||||
<setting-item name="经度">
|
||||
<n-input-number v-model:value="optionData.mapOptions.amapLon" :show-button="false" size="small">
|
||||
@ -76,11 +84,94 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="图层" :expanded="true">
|
||||
<setting-item-box name="卫星图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.satelliteTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.satelliteTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.satelliteTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="路网图层">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.roadNetTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.roadNetTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.roadNetTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="实时交通">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.mapOptions.trafficTileLayer.show" size="small" />
|
||||
<n-text>是否显示</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="叠加顺序值">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.zIndex"
|
||||
:min="0"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="透明度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.mapOptions.trafficTileLayer.opacity"
|
||||
:min="0"
|
||||
:max="1"
|
||||
step="0.1"
|
||||
size="small"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="缩放级别范围">
|
||||
<n-slider v-model:value="optionData.mapOptions.trafficTileLayer.zooms" range :step="1" :max="18" :min="3" />
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, FeaturesEnum } from './config'
|
||||
import { option, MarkerEnum, ThemeEnum, LangEnum, ViewModeEnum, ShowHideEnum, FeaturesEnum } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
@ -134,10 +225,6 @@ const themeOptions = [
|
||||
{
|
||||
value: ThemeEnum.WINE,
|
||||
label: '酱籽'
|
||||
},
|
||||
{
|
||||
value: ThemeEnum.WEIXIN,
|
||||
label: '卫星'
|
||||
}
|
||||
]
|
||||
|
||||
@ -170,19 +257,19 @@ const viewModeOptions = [
|
||||
const featuresOptions = [
|
||||
{
|
||||
value: FeaturesEnum.BG,
|
||||
label: '显示地图背景'
|
||||
label: '区域面'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.POINT,
|
||||
label: '显示标识'
|
||||
label: '标注'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.ROAD,
|
||||
label: '显示道路'
|
||||
label: '道路'
|
||||
},
|
||||
{
|
||||
value: FeaturesEnum.BUILDING,
|
||||
label: '显示建筑'
|
||||
label: '建筑物'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -28,9 +28,13 @@ let {
|
||||
amapStyleKeyCustom,
|
||||
features,
|
||||
viewMode,
|
||||
showLabel,
|
||||
pitch,
|
||||
skyColor,
|
||||
marker
|
||||
marker,
|
||||
satelliteTileLayer,
|
||||
roadNetTileLayer,
|
||||
trafficTileLayer
|
||||
} = toRefs(props.chartConfig.option.mapOptions)
|
||||
|
||||
let mapIns: any = null
|
||||
@ -42,7 +46,7 @@ const initMap = (newData: any) => {
|
||||
// 初始化
|
||||
AMapLoader.load({
|
||||
key: amapKey.value, //api服务key--另外需要在public中使用安全密钥！！！
|
||||
version: '1.4.8', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete'] // 需要使用的的插件列表
|
||||
})
|
||||
.then(AMap => {
|
||||
@ -56,17 +60,40 @@ const initMap = (newData: any) => {
|
||||
pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
|
||||
skyColor: skyColor.value,
|
||||
viewMode: viewMode.value, // 地图模式
|
||||
showLabel: showLabel.value, // 是否显示地图文字标记
|
||||
willReadFrequently: true
|
||||
})
|
||||
dataHandle(props.chartConfig.option.dataset)
|
||||
let satellite = new AMap.TileLayer.Satellite()
|
||||
let roadNet = new AMap.TileLayer.RoadNet()
|
||||
if (newData.amapStyleKey === ThemeEnum.WEIXIN) {
|
||||
mapIns.add([satellite, roadNet])
|
||||
} else {
|
||||
mapIns.remove([satellite, roadNet])
|
||||
mapIns.setMapStyle(`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`)
|
||||
|
||||
let satelliteLayer = new AMap.TileLayer.Satellite({
|
||||
zIndex: satelliteTileLayer.value.zIndex,
|
||||
opacity: satelliteTileLayer.value.opacity,
|
||||
zooms: satelliteTileLayer.value.zooms
|
||||
})
|
||||
let roadNetLayer = new AMap.TileLayer.RoadNet({
|
||||
zIndex: roadNetTileLayer.value.zIndex,
|
||||
opacity: roadNetTileLayer.value.opacity,
|
||||
zooms: roadNetTileLayer.value.zooms
|
||||
})
|
||||
let trafficLayer = new AMap.TileLayer.Traffic({
|
||||
zIndex: trafficTileLayer.value.zIndex,
|
||||
opacity: trafficTileLayer.value.opacity,
|
||||
zooms: trafficTileLayer.value.zooms
|
||||
})
|
||||
mapIns.remove([satelliteLayer, roadNetLayer, trafficLayer])
|
||||
if (satelliteTileLayer.value.show) {
|
||||
mapIns.add([satelliteLayer])
|
||||
}
|
||||
if (roadNetTileLayer.value.show) {
|
||||
mapIns.add([roadNetLayer])
|
||||
}
|
||||
if (trafficTileLayer.value.show) {
|
||||
mapIns.add([trafficLayer])
|
||||
}
|
||||
|
||||
mapIns.setMapStyle(
|
||||
`amap://styles/${amapStyleKeyCustom.value !== '' ? amapStyleKeyCustom.value : amapStyleKey.value}`
|
||||
)
|
||||
})
|
||||
.catch(e => {})
|
||||
}
|
||||
|
||||
@ -171,7 +171,19 @@ const backLevel = () => {
|
||||
|
||||
// 切换地图
|
||||
const checkOrMap = async (newData: string) => {
|
||||
await getGeojson(newData)
|
||||
if (newData === 'china') {
|
||||
if (props.chartConfig.option.mapRegion.showHainanIsLands) {
|
||||
// 显示南海
|
||||
hainanLandsHandle(true)
|
||||
vEchartsSetOption()
|
||||
} else {
|
||||
// 隐藏南海
|
||||
hainanLandsHandle(false)
|
||||
vEchartsSetOption()
|
||||
}
|
||||
} else {
|
||||
await getGeojson(newData)
|
||||
}
|
||||
props.chartConfig.option.geo.map = newData
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
if (item.type === 'map') item.map = newData
|
||||
|
||||
@ -1,81 +1,80 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { ScatterCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'scatter',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
symbolSize: 12,
|
||||
markArea: {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderType: 'dashed'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
xAxis: 'min',
|
||||
yAxis: 'min'
|
||||
},
|
||||
{
|
||||
xAxis: 'max',
|
||||
yAxis: 'max'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
showDelay: 0,
|
||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||
// console.log(params)
|
||||
return params.value.length > 1
|
||||
? `${params.seriesName}：<br />${params.value[0]} ${params.value[1]}`
|
||||
: `${params.seriesName}：<br />${params.name} ${params.value}`
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
scale: true
|
||||
},
|
||||
yAxis: {
|
||||
scale: true
|
||||
},
|
||||
series: dataJson.map((item, index) => ({
|
||||
...seriesItem,
|
||||
datasetIndex: index
|
||||
}))
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ScatterCommonConfig.key
|
||||
public chartConfig = cloneDeep(ScatterCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { ScatterCommonConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
|
||||
|
||||
export const seriesItem = {
|
||||
type: 'scatter',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
symbolSize: 12,
|
||||
markArea: {
|
||||
silent: true,
|
||||
itemStyle: {
|
||||
color: 'transparent',
|
||||
borderWidth: 1,
|
||||
borderType: 'dashed'
|
||||
},
|
||||
data: [
|
||||
[
|
||||
{
|
||||
xAxis: 'min',
|
||||
yAxis: 'min'
|
||||
},
|
||||
{
|
||||
xAxis: 'max',
|
||||
yAxis: 'max'
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'pin',
|
||||
symbolSize: 50,
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson,
|
||||
tooltip: {
|
||||
showDelay: 0,
|
||||
formatter: (params: { value: string | any[]; seriesName: string; name: string }) => {
|
||||
return params.value.length > 1
|
||||
? `${params.seriesName}：<br />${params.value[0]} ${params.value[1]}`
|
||||
: `${params.name} ${params.value}`
|
||||
},
|
||||
axisPointer: {
|
||||
show: true,
|
||||
type: 'cross',
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
width: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
scale: true
|
||||
},
|
||||
yAxis: {
|
||||
scale: true
|
||||
},
|
||||
series: dataJson.map((item, index) => ({
|
||||
...seriesItem,
|
||||
datasetIndex: index
|
||||
}))
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = ScatterCommonConfig.key
|
||||
public chartConfig = cloneDeep(ScatterCommonConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
|
||||
<template #header>
|
||||
<n-space>
|
||||
<n-text>过滤器函数编辑器</n-text>
|
||||
@ -49,12 +49,12 @@
|
||||
<n-tag type="info">
|
||||
<span class="func-keyword">function</span> filter(data, res) {
|
||||
</n-tag>
|
||||
<monaco-editor v-model:modelValue="filter" width="660px" height="500px" language="javascript" />
|
||||
<monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
|
||||
<n-tag type="info">}</n-tag>
|
||||
</n-space>
|
||||
</div>
|
||||
<n-divider vertical style="height: 580px" />
|
||||
<n-scrollbar style="max-height: 580px">
|
||||
<n-divider vertical style="height: 480px" />
|
||||
<n-scrollbar style="max-height: 480px">
|
||||
<n-space :size="15" vertical>
|
||||
<div class="editor-data-show">
|
||||
<n-space>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">
|
||||
<n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false" :close-on-esc="false">
|
||||
<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
|
||||
<template #header></template>
|
||||
<template #header-extra> </template>
|
||||
|
||||
@ -1,392 +1,392 @@
|
||||
import { toRaw } from 'vue'
|
||||
import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
|
||||
import { createComponent } from '@/packages'
|
||||
import { ConfigType } from '@/packages/index.d'
|
||||
import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
|
||||
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
|
||||
import { throttle, cloneDeep } from 'lodash'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { onClickOutSide } = useContextMenu()
|
||||
|
||||
// * 拖拽到编辑区域里
|
||||
export const dragHandle = async (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
loadingStart()
|
||||
|
||||
// 获取拖拽数据
|
||||
const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DRAG_KEY)
|
||||
if (!drayDataString) {
|
||||
loadingFinish()
|
||||
return
|
||||
}
|
||||
|
||||
// 修改状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
||||
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
|
||||
if (dropData.disabled) return
|
||||
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(dropData)
|
||||
if (dropData.redirectComponent) {
|
||||
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
|
||||
newComponent.chartConfig.title = dropData.title
|
||||
newComponent.chartConfig.chartFrame = dropData.chartFrame
|
||||
}
|
||||
|
||||
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
chartEditStore.setTargetSelectChart(newComponent.id)
|
||||
loadingFinish()
|
||||
} catch (error) {
|
||||
loadingError()
|
||||
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
||||
}
|
||||
}
|
||||
|
||||
// * 进入拖拽区域
|
||||
export const dragoverHandle = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
// * 不拦截默认行为点击
|
||||
export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||
if (item) {
|
||||
chartEditStore.setTargetSelectChart(item.id)
|
||||
return
|
||||
}
|
||||
chartEditStore.setTargetSelectChart(undefined)
|
||||
}
|
||||
|
||||
// * 框选
|
||||
export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||
if (e.which == 2) return
|
||||
if (window.$KeyboardActive?.space) return
|
||||
|
||||
mousedownHandleUnStop(e)
|
||||
|
||||
// 记录点击初始位置
|
||||
const startOffsetX = e.offsetX
|
||||
const startOffsetY = e.offsetY
|
||||
const startScreenX = e.screenX
|
||||
const startScreenY = e.screenY
|
||||
|
||||
// 记录缩放
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
|
||||
chartEditStore.setMousePosition(undefined, undefined, startOffsetX, startOffsetY)
|
||||
|
||||
// 移动框选
|
||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||
// 取消当前选中
|
||||
chartEditStore.setTargetSelectChart()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, true)
|
||||
|
||||
// 这里先把相对值算好，不然组件无法获取 startScreenX 和 startScreenY 的值
|
||||
const currX = startOffsetX + moveEvent.screenX - startScreenX
|
||||
const currY = startOffsetY + moveEvent.screenY - startScreenY
|
||||
chartEditStore.setMousePosition(currX, currY)
|
||||
|
||||
// 计算框选的左上角和右下角
|
||||
const selectAttr = {
|
||||
// 左上角
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
// 右下角
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}
|
||||
if (currX > startOffsetX && currY > startOffsetY) {
|
||||
// 右下方向
|
||||
selectAttr.x1 = startOffsetX
|
||||
selectAttr.y1 = startOffsetY
|
||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||
} else if (currX > startOffsetX && currY < startOffsetY) {
|
||||
// 右上方向
|
||||
selectAttr.x1 = startOffsetX
|
||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||
selectAttr.y2 = startOffsetY
|
||||
} else if (currX < startOffsetX && currY > startOffsetY) {
|
||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||
selectAttr.y1 = startOffsetY
|
||||
selectAttr.x2 = startOffsetX
|
||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||
// 左下方向
|
||||
} else {
|
||||
// 左上方向
|
||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||
selectAttr.x2 = startOffsetX
|
||||
selectAttr.y2 = startOffsetY
|
||||
}
|
||||
|
||||
// 遍历组件
|
||||
chartEditStore.getComponentList.forEach(item => {
|
||||
if (!chartEditStore.getTargetChart.selectId.includes(item.id)) {
|
||||
// 处理左上角
|
||||
let isSelect = false
|
||||
const { x, y, w, h } = item.attr
|
||||
const targetAttr = {
|
||||
// 左上角
|
||||
x1: x,
|
||||
y1: y,
|
||||
// 右下角
|
||||
x2: x + w,
|
||||
y2: y + h
|
||||
}
|
||||
// 全包含则选中
|
||||
if (
|
||||
targetAttr.x1 - selectAttr.x1 >= 0 &&
|
||||
targetAttr.y1 - selectAttr.y1 >= 0 &&
|
||||
targetAttr.x2 - selectAttr.x2 <= 0 &&
|
||||
targetAttr.y2 - selectAttr.y2 <= 0 &&
|
||||
!item.status.lock &&
|
||||
!item.status.hide
|
||||
) {
|
||||
isSelect = true
|
||||
chartEditStore.setTargetSelectChart(item.id, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 30)
|
||||
|
||||
// 鼠标抬起
|
||||
const mouseup = () => {
|
||||
// 鼠标抬起时，结束mousemove的节流函数，避免选框不消失问题
|
||||
mousemove.cancel()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false)
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
}
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
// * 鼠标事件
|
||||
export const useMouseHandle = () => {
|
||||
// * Click 事件, 松开鼠标触发
|
||||
const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (item.status.lock) return
|
||||
// 若此时按下了 CTRL, 表示多选
|
||||
if (window.$KeyboardActive?.ctrl) {
|
||||
// 若已选中，则去除
|
||||
if (chartEditStore.targetChart.selectId.includes(item.id)) {
|
||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
|
||||
chartEditStore.setTargetSelectChart(exList)
|
||||
} else {
|
||||
chartEditStore.setTargetSelectChart(item.id, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * 按下事件（包含移动事件）
|
||||
const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (item.status.lock) return
|
||||
onClickOutSide()
|
||||
// 按下左键 + CTRL
|
||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
|
||||
|
||||
// 按下右键 + 选中多个 + 目标元素是多选子元素
|
||||
const selectId = chartEditStore.getTargetChart.selectId
|
||||
if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id)) return
|
||||
|
||||
// 选中当前目标组件
|
||||
chartEditStore.setTargetSelectChart(item.id)
|
||||
|
||||
// 按下右键
|
||||
if (e.buttons === MouseEventButton.RIGHT) return
|
||||
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
const canvasWidth = chartEditStore.getEditCanvasConfig.width
|
||||
const canvasHeight = chartEditStore.getEditCanvasConfig.height
|
||||
|
||||
// 记录图表初始位置和大小
|
||||
const targetMap = new Map()
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
if (index !== -1) {
|
||||
const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index]).attr
|
||||
targetMap.set(id, { x, y, w, h })
|
||||
}
|
||||
})
|
||||
|
||||
// 记录点击初始位置
|
||||
const startX = e.screenX
|
||||
const startY = e.screenY
|
||||
|
||||
// 记录历史位置
|
||||
let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
// 拿到初始位置数据
|
||||
prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
|
||||
})
|
||||
|
||||
// 记录初始位置
|
||||
chartEditStore.setMousePosition(undefined, undefined, startX, startY)
|
||||
|
||||
// 移动-计算偏移量
|
||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
||||
|
||||
// 当前偏移量，处理 scale 比例问题
|
||||
let offsetX = (moveEvent.screenX - startX) / scale
|
||||
let offsetY = (moveEvent.screenY - startY) / scale
|
||||
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
// 拿到初始位置数据
|
||||
const { x, y, w, h } = targetMap.get(id)
|
||||
const componentInstance = chartEditStore.getComponentList[index]
|
||||
|
||||
let currX = Math.round(x + offsetX)
|
||||
let currY = Math.round(y + offsetY)
|
||||
|
||||
// 要预留的距离
|
||||
const distance = 50
|
||||
|
||||
// 基于左上角位置检测
|
||||
currX = currX < -w + distance ? -w + distance : currX
|
||||
currY = currY < -h + distance ? -h + distance : currY
|
||||
|
||||
// 基于右下角位置检测
|
||||
currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
|
||||
currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
|
||||
if (componentInstance) {
|
||||
componentInstance.attr = Object.assign(componentInstance.attr, {
|
||||
x: currX,
|
||||
y: currY
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
}, 20)
|
||||
|
||||
const mouseup = () => {
|
||||
try {
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
// 加入历史栈
|
||||
if (prevComponentInstance.length) {
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
const curComponentInstance = chartEditStore.getComponentList[index]
|
||||
// 找到记录的所选组件
|
||||
prevComponentInstance.forEach(preItem => {
|
||||
if (preItem.id === id) {
|
||||
preItem.attr = Object.assign(preItem.attr, {
|
||||
offsetX: curComponentInstance.attr.x - preItem.attr.x,
|
||||
offsetY: curComponentInstance.attr.y - preItem.attr.y
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const moveComponentInstance = prevComponentInstance.filter(
|
||||
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||
)
|
||||
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||
}
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
// * 进入事件
|
||||
const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (!chartEditStore.getEditCanvas.isSelect) {
|
||||
chartEditStore.setTargetHoverChart(item.id)
|
||||
}
|
||||
}
|
||||
|
||||
// * 移出事件
|
||||
const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
chartEditStore.setTargetHoverChart(undefined)
|
||||
}
|
||||
|
||||
return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle }
|
||||
}
|
||||
|
||||
// * 移动锚点
|
||||
export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCreateComponentType<'attr'>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
// 设置拖拽状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
|
||||
const itemAttrX = attr.x
|
||||
const itemAttrY = attr.y
|
||||
const itemAttrW = attr.w
|
||||
const itemAttrH = attr.h
|
||||
|
||||
// 记录点击初始位置
|
||||
const startX = e.screenX
|
||||
const startY = e.screenY
|
||||
|
||||
// 记录初始位置
|
||||
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)
|
||||
const isRight = /r/.test(point)
|
||||
|
||||
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)
|
||||
}, 50)
|
||||
|
||||
const mouseup = () => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
import { toRaw } from 'vue'
|
||||
import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
|
||||
import { createComponent } from '@/packages'
|
||||
import { ConfigType } from '@/packages/index.d'
|
||||
import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
|
||||
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils'
|
||||
import { throttle, cloneDeep } from 'lodash'
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
const { onClickOutSide } = useContextMenu()
|
||||
|
||||
// * 拖拽到编辑区域里
|
||||
export const dragHandle = async (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
loadingStart()
|
||||
|
||||
// 获取拖拽数据
|
||||
const drayDataString = e!.dataTransfer!.getData(DragKeyEnum.DRAG_KEY)
|
||||
if (!drayDataString) {
|
||||
loadingFinish()
|
||||
return
|
||||
}
|
||||
|
||||
// 修改状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
|
||||
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
|
||||
if (dropData.disabled) return
|
||||
|
||||
// 创建新图表组件
|
||||
let newComponent: CreateComponentType = await createComponent(dropData)
|
||||
if (dropData.redirectComponent) {
|
||||
dropData.dataset && (newComponent.option.dataset = dropData.dataset)
|
||||
newComponent.chartConfig.title = dropData.title
|
||||
newComponent.chartConfig.chartFrame = dropData.chartFrame
|
||||
}
|
||||
|
||||
setComponentPosition(newComponent, e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
|
||||
chartEditStore.addComponentList(newComponent, false, true)
|
||||
chartEditStore.setTargetSelectChart(newComponent.id)
|
||||
loadingFinish()
|
||||
} catch (error) {
|
||||
loadingError()
|
||||
window['$message'].warning(`图表正在研发中, 敬请期待...`)
|
||||
}
|
||||
}
|
||||
|
||||
// * 进入拖拽区域
|
||||
export const dragoverHandle = (e: DragEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
|
||||
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
|
||||
}
|
||||
|
||||
// * 不拦截默认行为点击
|
||||
export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||
if (item) {
|
||||
chartEditStore.setTargetSelectChart(item.id)
|
||||
return
|
||||
}
|
||||
chartEditStore.setTargetSelectChart(undefined)
|
||||
}
|
||||
|
||||
// * 框选
|
||||
export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
|
||||
if (e.which == 2) return
|
||||
if (window.$KeyboardActive?.space) return
|
||||
|
||||
mousedownHandleUnStop(e)
|
||||
|
||||
// 记录点击初始位置
|
||||
const startOffsetX = e.offsetX
|
||||
const startOffsetY = e.offsetY
|
||||
const startScreenX = e.screenX
|
||||
const startScreenY = e.screenY
|
||||
|
||||
// 记录缩放
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
|
||||
chartEditStore.setMousePosition(undefined, undefined, startOffsetX, startOffsetY)
|
||||
|
||||
// 移动框选
|
||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||
// 取消当前选中
|
||||
chartEditStore.setTargetSelectChart()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, true)
|
||||
|
||||
// 这里先把相对值算好，不然组件无法获取 startScreenX 和 startScreenY 的值
|
||||
const currX = startOffsetX + moveEvent.screenX - startScreenX
|
||||
const currY = startOffsetY + moveEvent.screenY - startScreenY
|
||||
chartEditStore.setMousePosition(currX, currY)
|
||||
|
||||
// 计算框选的左上角和右下角
|
||||
const selectAttr = {
|
||||
// 左上角
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
// 右下角
|
||||
x2: 0,
|
||||
y2: 0
|
||||
}
|
||||
if (currX > startOffsetX && currY > startOffsetY) {
|
||||
// 右下方向
|
||||
selectAttr.x1 = startOffsetX
|
||||
selectAttr.y1 = startOffsetY
|
||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||
} else if (currX > startOffsetX && currY < startOffsetY) {
|
||||
// 右上方向
|
||||
selectAttr.x1 = startOffsetX
|
||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||
selectAttr.x2 = Math.round(startOffsetX + (moveEvent.screenX - startScreenX) / scale)
|
||||
selectAttr.y2 = startOffsetY
|
||||
} else if (currX < startOffsetX && currY > startOffsetY) {
|
||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||
selectAttr.y1 = startOffsetY
|
||||
selectAttr.x2 = startOffsetX
|
||||
selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale)
|
||||
// 左下方向
|
||||
} else {
|
||||
// 左上方向
|
||||
selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale)
|
||||
selectAttr.y1 = Math.round(startOffsetY - (startScreenY - moveEvent.screenY) / scale)
|
||||
selectAttr.x2 = startOffsetX
|
||||
selectAttr.y2 = startOffsetY
|
||||
}
|
||||
|
||||
// 遍历组件
|
||||
chartEditStore.getComponentList.forEach(item => {
|
||||
if (!chartEditStore.getTargetChart.selectId.includes(item.id)) {
|
||||
// 处理左上角
|
||||
let isSelect = false
|
||||
const { x, y, w, h } = item.attr
|
||||
const targetAttr = {
|
||||
// 左上角
|
||||
x1: x,
|
||||
y1: y,
|
||||
// 右下角
|
||||
x2: x + w,
|
||||
y2: y + h
|
||||
}
|
||||
// 全包含则选中
|
||||
if (
|
||||
targetAttr.x1 - selectAttr.x1 >= 0 &&
|
||||
targetAttr.y1 - selectAttr.y1 >= 0 &&
|
||||
targetAttr.x2 - selectAttr.x2 <= 0 &&
|
||||
targetAttr.y2 - selectAttr.y2 <= 0 &&
|
||||
!item.status.lock &&
|
||||
!item.status.hide
|
||||
) {
|
||||
isSelect = true
|
||||
chartEditStore.setTargetSelectChart(item.id, true)
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 30)
|
||||
|
||||
// 鼠标抬起
|
||||
const mouseup = () => {
|
||||
// 鼠标抬起时，结束mousemove的节流函数，避免选框不消失问题
|
||||
mousemove.cancel()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false)
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
}
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
// * 鼠标事件
|
||||
export const useMouseHandle = () => {
|
||||
// * Click 事件, 松开鼠标触发
|
||||
const mouseClickHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (item.status.lock) return
|
||||
// 若此时按下了 CTRL, 表示多选
|
||||
if (window.$KeyboardActive?.ctrl) {
|
||||
// 若已选中，则去除
|
||||
if (chartEditStore.targetChart.selectId.includes(item.id)) {
|
||||
const exList = chartEditStore.targetChart.selectId.filter(e => e !== item.id)
|
||||
chartEditStore.setTargetSelectChart(exList)
|
||||
} else {
|
||||
chartEditStore.setTargetSelectChart(item.id, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// * 按下事件（包含移动事件）
|
||||
const mousedownHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (item.status.lock) return
|
||||
onClickOutSide()
|
||||
// 按下左键 + CTRL
|
||||
if (e.buttons === MouseEventButton.LEFT && window.$KeyboardActive?.ctrl) return
|
||||
|
||||
// 按下右键 + 选中多个 + 目标元素是多选子元素
|
||||
const selectId = chartEditStore.getTargetChart.selectId
|
||||
if (e.buttons === MouseEventButton.RIGHT && selectId.length > 1 && selectId.includes(item.id)) return
|
||||
|
||||
// 选中当前目标组件
|
||||
chartEditStore.setTargetSelectChart(item.id)
|
||||
|
||||
// 按下右键
|
||||
if (e.buttons === MouseEventButton.RIGHT) return
|
||||
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
const canvasWidth = chartEditStore.getEditCanvasConfig.width
|
||||
const canvasHeight = chartEditStore.getEditCanvasConfig.height
|
||||
|
||||
// 记录图表初始位置和大小
|
||||
const targetMap = new Map()
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
if (index !== -1) {
|
||||
const { x, y, w, h } = toRaw(chartEditStore.getComponentList[index]).attr
|
||||
targetMap.set(id, { x, y, w, h })
|
||||
}
|
||||
})
|
||||
|
||||
// 记录点击初始位置
|
||||
const startX = e.screenX
|
||||
const startY = e.screenY
|
||||
|
||||
// 记录历史位置
|
||||
let prevComponentInstance: Array<CreateComponentType | CreateComponentGroupType> = []
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
// 拿到初始位置数据
|
||||
prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index]))
|
||||
})
|
||||
|
||||
// 记录初始位置
|
||||
chartEditStore.setMousePosition(undefined, undefined, startX, startY)
|
||||
|
||||
// 移动-计算偏移量
|
||||
const mousemove = throttle((moveEvent: MouseEvent) => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||
chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY)
|
||||
|
||||
// 当前偏移量，处理 scale 比例问题
|
||||
let offsetX = (moveEvent.screenX - startX) / scale
|
||||
let offsetY = (moveEvent.screenY - startY) / scale
|
||||
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
// 拿到初始位置数据
|
||||
const { x, y, w, h } = targetMap.get(id)
|
||||
const componentInstance = chartEditStore.getComponentList[index]
|
||||
|
||||
let currX = Math.round(x + offsetX)
|
||||
let currY = Math.round(y + offsetY)
|
||||
|
||||
// 要预留的距离
|
||||
const distance = 50
|
||||
|
||||
// 基于左上角位置检测
|
||||
currX = currX < -w + distance ? -w + distance : currX
|
||||
currY = currY < -h + distance ? -h + distance : currY
|
||||
|
||||
// 基于右下角位置检测
|
||||
currX = currX > canvasWidth - distance ? canvasWidth - distance : currX
|
||||
currY = currY > canvasHeight - distance ? canvasHeight - distance : currY
|
||||
if (componentInstance) {
|
||||
componentInstance.attr = Object.assign(componentInstance.attr, {
|
||||
x: currX,
|
||||
y: currY
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
}, 20)
|
||||
|
||||
const mouseup = () => {
|
||||
try {
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
// 加入历史栈
|
||||
if (prevComponentInstance.length) {
|
||||
chartEditStore.getTargetChart.selectId.forEach(id => {
|
||||
if (!targetMap.has(id)) return
|
||||
const index = chartEditStore.fetchTargetIndex(id)
|
||||
const curComponentInstance = chartEditStore.getComponentList[index]
|
||||
// 找到记录的所选组件
|
||||
prevComponentInstance.forEach(preItem => {
|
||||
if (preItem.id === id) {
|
||||
preItem.attr = Object.assign(preItem.attr, {
|
||||
offsetX: curComponentInstance.attr.x - preItem.attr.x,
|
||||
offsetY: curComponentInstance.attr.y - preItem.attr.y
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const moveComponentInstance = prevComponentInstance.filter(
|
||||
item => item.attr.offsetX !== 0 && item.attr.offsetY !== 0
|
||||
)
|
||||
moveComponentInstance.length && chartEditStore.moveComponentList(moveComponentInstance)
|
||||
}
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
// * 进入事件
|
||||
const mouseenterHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (!chartEditStore.getEditCanvas.isSelect) {
|
||||
chartEditStore.setTargetHoverChart(item.id)
|
||||
}
|
||||
}
|
||||
|
||||
// * 移出事件
|
||||
const mouseleaveHandle = (e: MouseEvent, item: CreateComponentType | CreateComponentGroupType) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
chartEditStore.setTargetHoverChart(undefined)
|
||||
}
|
||||
|
||||
return { mouseClickHandle, mousedownHandle, mouseenterHandle, mouseleaveHandle }
|
||||
}
|
||||
|
||||
// * 移动锚点
|
||||
export const useMousePointHandle = (e: MouseEvent, point: string, attr: PickCreateComponentType<'attr'>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
|
||||
// 设置拖拽状态
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true)
|
||||
const scale = chartEditStore.getEditCanvas.scale
|
||||
|
||||
const itemAttrX = attr.x
|
||||
const itemAttrY = attr.y
|
||||
const itemAttrW = attr.w
|
||||
const itemAttrH = attr.h
|
||||
|
||||
// 记录点击初始位置
|
||||
const startX = e.screenX
|
||||
const startY = e.screenY
|
||||
|
||||
// 记录初始位置
|
||||
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)
|
||||
const isRight = /r/.test(point)
|
||||
|
||||
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)
|
||||
}, 50)
|
||||
|
||||
const mouseup = () => {
|
||||
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
|
||||
chartEditStore.setMousePosition(0, 0, 0, 0)
|
||||
document.removeEventListener('mousemove', mousemove)
|
||||
document.removeEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', mousemove)
|
||||
document.addEventListener('mouseup', mouseup)
|
||||
}
|
||||
|
||||
@ -55,6 +55,110 @@ const previewHandle = () => {
|
||||
routerTurnByPath(path, [previewId], undefined, true)
|
||||
}
|
||||
|
||||
// 发布
|
||||
const sendHandle = () => {
|
||||
goDialog({
|
||||
message: '想体验发布功能，请前往 master-fetch 分支查看: https://gitee.com/MTrun/go-view/tree/master-fetch',
|
||||
positiveText: '了然',
|
||||
closeNegativeText: true,
|
||||
onPositiveCallback: () => {}
|
||||
})
|
||||
}
|
||||
|
||||
const btnList = [
|
||||
{
|
||||
select: true,
|
||||
title: '同步内容',
|
||||
type: 'primary',
|
||||
icon: renderIcon(AnalyticsIcon),
|
||||
event: syncData
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
title: '预览',
|
||||
icon: renderIcon(BrowsersOutlineIcon),
|
||||
event: previewHandle
|
||||
},
|
||||
{
|
||||
select: true,
|
||||
title: '发布',
|
||||
icon: renderIcon(SendIcon),
|
||||
event: sendHandle
|
||||
}
|
||||
]
|
||||
|
||||
const comBtnList = computed(() => {
|
||||
if (chartEditStore.getEditCanvas.isCodeEdit) {
|
||||
return btnList
|
||||
}
|
||||
const cloneList = cloneDeep(btnList)
|
||||
cloneList.shift()
|
||||
return cloneList
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.align-center {
|
||||
margin-top: -4px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<n-space class="go-mt-0">
|
||||
<n-button v-for="item in comBtnList" :key="item.title" :type="item.type" ghost @click="item.event">
|
||||
<template #icon>
|
||||
<component :is="item.icon"></component>
|
||||
</template>
|
||||
<span>{{ item.title }}</span>
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { renderIcon, goDialog, fetchPathByName, routerTurnByPath, setSessionStorage, getLocalStorage } from '@/utils'
|
||||
import { PreviewEnum } from '@/enums/pageEnum'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { syncData } from '../../ContentEdit/components/EditTools/hooks/useSyncUpdate.hook'
|
||||
import { icon } from '@/plugins'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const { BrowsersOutlineIcon, SendIcon, AnalyticsIcon } = icon.ionicons5
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const routerParamsInfo = useRoute()
|
||||
|
||||
// 预览
|
||||
const previewHandle = () => {
|
||||
const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
|
||||
if (!path) return
|
||||
const { id } = routerParamsInfo.params
|
||||
// id 标识
|
||||
const previewId = typeof id === 'string' ? id : id[0]
|
||||
const storageInfo = chartEditStore.getStorageInfo()
|
||||
const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
|
||||
|
||||
if (sessionStorageInfo?.length) {
|
||||
const repeateIndex = sessionStorageInfo.findIndex((e: { id: string }) => e.id === previewId)
|
||||
// 重复替换
|
||||
if (repeateIndex !== -1) {
|
||||
sessionStorageInfo.splice(repeateIndex, 1, { id: previewId, ...storageInfo })
|
||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
|
||||
} else {
|
||||
sessionStorageInfo.push({
|
||||
id: previewId,
|
||||
...storageInfo
|
||||
})
|
||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, sessionStorageInfo)
|
||||
}
|
||||
} else {
|
||||
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ id: previewId, ...storageInfo }])
|
||||
}
|
||||
// 跳转
|
||||
routerTurnByPath(path, [previewId], undefined, true)
|
||||
}
|
||||
|
||||
// 发布
|
||||
const sendHandle = () => {
|
||||
goDialog({
|
||||
|
||||
@ -15,13 +15,7 @@
|
||||
</transition-group>
|
||||
</aside>
|
||||
</div>
|
||||
<layout-header>
|
||||
<template #left></template>
|
||||
<template #right>
|
||||
<go-lang-select></go-lang-select>
|
||||
<go-theme-select></go-theme-select>
|
||||
</template>
|
||||
</layout-header>
|
||||
<layout-header></layout-header>
|
||||
<div class="go-login">
|
||||
<div class="go-login-carousel">
|
||||
<n-carousel
|
||||
|
||||
3
types/shims-vue.d.ts
vendored
3
types/shims-vue.d.ts
vendored
@ -5,4 +5,5 @@ declare module '*.vue' {
|
||||
}
|
||||
|
||||
declare module 'lodash/*'
|
||||
declare module 'dom-helpers'
|
||||
declare module 'dom-helpers'
|
||||
declare module 'vue3-sketch-ruler';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user