feat: 新增连线雏形
咬轮猫
3 years ago
parent
2ec8f34c9c
commit
edfcc4ed23
@ -0,0 +1,186 @@
|
|||||||
|
<!-- eslint-disable prettier/prettier -->
|
||||||
|
<!-- 连线组件 -->
|
||||||
|
<template>
|
||||||
|
<g style="vector-effect: non-scaling-stroke">
|
||||||
|
<circle
|
||||||
|
id="connection_tc"
|
||||||
|
:cx="props.itemInfo.actual_bound.x+props.itemInfo.actual_bound.width/2-offset+radius"
|
||||||
|
:cy="props.itemInfo.actual_bound.y-offset-getCoordinateOffset(props.itemInfo.actual_bound.height,props.itemInfo.scale_y)+radius"
|
||||||
|
:r="radius"
|
||||||
|
stroke="rgba(0,0,0,0)"
|
||||||
|
stroke-width="2"
|
||||||
|
:fill="fill"
|
||||||
|
:style="{ 'vector-effect': 'non-scaling-stroke'}"
|
||||||
|
pointer-events="all"
|
||||||
|
@mousedown="onConnectionMouseDown(ELineBindAnchors.TopCenter,$event)"/>
|
||||||
|
<circle
|
||||||
|
id="connection_l"
|
||||||
|
:cx="props.itemInfo.actual_bound.x-offset-getCoordinateOffset(props.itemInfo.actual_bound.width,props.itemInfo.scale_x)+radius"
|
||||||
|
:cy="props.itemInfo.actual_bound.y-offset+props.itemInfo.actual_bound.height*props.itemInfo.scale_y/2-getCoordinateOffset(props.itemInfo.actual_bound.height,props.itemInfo.scale_y)+radius"
|
||||||
|
:r="radius"
|
||||||
|
stroke="rgba(0,0,0,0)"
|
||||||
|
stroke-width="2"
|
||||||
|
:fill="fill"
|
||||||
|
:style="{ 'vector-effect': 'non-scaling-stroke'}"
|
||||||
|
pointer-events="all"
|
||||||
|
@mousedown="onConnectionMouseDown(ELineBindAnchors.Left,$event)"/>
|
||||||
|
<circle
|
||||||
|
id="connection_r"
|
||||||
|
:cx="props.itemInfo.actual_bound.x-offset+props.itemInfo.actual_bound.width+getCoordinateOffset(props.itemInfo.actual_bound.width,props.itemInfo.scale_x)+radius"
|
||||||
|
:cy="props.itemInfo.actual_bound.y-offset+props.itemInfo.actual_bound.height*props.itemInfo.scale_y/2-getCoordinateOffset(props.itemInfo.actual_bound.height,props.itemInfo.scale_y)+radius"
|
||||||
|
:r="radius"
|
||||||
|
stroke="rgba(0,0,0,0)"
|
||||||
|
stroke-width="2"
|
||||||
|
:fill="fill"
|
||||||
|
:style="{ 'vector-effect': 'non-scaling-stroke'}"
|
||||||
|
pointer-events="all"
|
||||||
|
@mousedown="onConnectionMouseDown(ELineBindAnchors.Right,$event)"/>
|
||||||
|
<circle
|
||||||
|
id="connection_bc"
|
||||||
|
:cx="props.itemInfo.actual_bound.x-offset+props.itemInfo.actual_bound.width/2+radius"
|
||||||
|
:cy="props.itemInfo.actual_bound.y-offset+props.itemInfo.actual_bound.height+getCoordinateOffset(props.itemInfo.actual_bound.height,props.itemInfo.scale_y)+radius"
|
||||||
|
:r="radius"
|
||||||
|
stroke="rgba(0,0,0,0)"
|
||||||
|
stroke-width="2"
|
||||||
|
:fill="fill"
|
||||||
|
:style="{ 'vector-effect': 'non-scaling-stroke'}"
|
||||||
|
pointer-events="all"
|
||||||
|
@mousedown="onConnectionMouseDown(ELineBindAnchors.BottomCenter,$event)"/>
|
||||||
|
|
||||||
|
</g>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
// import { IConfigItem } from '@/config-center/types';
|
||||||
|
import { straight_line_system, connection_line_system } from '@/config-center/svg-file/system';
|
||||||
|
import { ELineBindAnchors, ISystemStraightLine } from '@/config-center/svg-file/system/types';
|
||||||
|
import { useConfigStore } from '@/store/config';
|
||||||
|
import { PropType, ref } from 'vue';
|
||||||
|
import { useGlobalStore } from '@/store/global';
|
||||||
|
import { EGlobalStoreIntention, EMouseInfoState } from '@/store/global/types';
|
||||||
|
import type { IDoneJson } from '@/store/global/types';
|
||||||
|
import {
|
||||||
|
getAnchorPosByAnchorType,
|
||||||
|
getCoordinateOffset,
|
||||||
|
objectDeepClone,
|
||||||
|
randomString
|
||||||
|
} from '@/utils/index';
|
||||||
|
const props = defineProps({
|
||||||
|
itemInfo: {
|
||||||
|
type: Object as PropType<IDoneJson>,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const globalStore = useGlobalStore();
|
||||||
|
const configStore = useConfigStore();
|
||||||
|
const offset = ref(4);
|
||||||
|
const fill = ref('#4F80FF');
|
||||||
|
const radius = ref(4);
|
||||||
|
/**
|
||||||
|
* 点了连线
|
||||||
|
* @param bind_anchor_type 绑定锚点类型
|
||||||
|
* @param e
|
||||||
|
*/
|
||||||
|
const onConnectionMouseDown = (bind_anchor_type: ELineBindAnchors, e: MouseEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const { clientX, clientY } = e;
|
||||||
|
let create_line_info = objectDeepClone<ISystemStraightLine>(connection_line_system);
|
||||||
|
console.log('onConnectionMouseDown', connection_line_system, e);
|
||||||
|
//以后顶部可以选择连线是哪种 直线先不做
|
||||||
|
if (false) {
|
||||||
|
create_line_info = straight_line_system;
|
||||||
|
}
|
||||||
|
create_line_info.bind_anchors.start = {
|
||||||
|
type: bind_anchor_type,
|
||||||
|
target_id: props.itemInfo.id
|
||||||
|
};
|
||||||
|
const { x, y } = getAnchorPosByAnchorType(bind_anchor_type, props.itemInfo);
|
||||||
|
const done_item_json: IDoneJson = {
|
||||||
|
id: straight_line_system.name + randomString(),
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
client: {
|
||||||
|
x: clientX,
|
||||||
|
y: clientY
|
||||||
|
},
|
||||||
|
scale_x: 1,
|
||||||
|
scale_y: 1,
|
||||||
|
rotate: 0,
|
||||||
|
actual_bound: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
|
},
|
||||||
|
point_coordinate: {
|
||||||
|
tl: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
tc: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
tr: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
l: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
r: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
bl: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
bc: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
br: {
|
||||||
|
x: 0,
|
||||||
|
y: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...create_line_info
|
||||||
|
};
|
||||||
|
done_item_json.props.point_position.val.push(
|
||||||
|
{
|
||||||
|
x: configStore.svg.svg_position_center.x,
|
||||||
|
y: configStore.svg.svg_position_center.y
|
||||||
|
},
|
||||||
|
//push一个用来实时显示鼠标移动的
|
||||||
|
{
|
||||||
|
x: configStore.svg.svg_position_center.x,
|
||||||
|
y: configStore.svg.svg_position_center.y
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
done_item_json.props.point_position.val.push();
|
||||||
|
globalStore.setHandleSvgInfo(done_item_json, globalStore.done_json.length);
|
||||||
|
globalStore.setDoneJson(done_item_json);
|
||||||
|
|
||||||
|
globalStore.intention = EGlobalStoreIntention.Connection;
|
||||||
|
globalStore.setMouseInfo({
|
||||||
|
state: EMouseInfoState.Down,
|
||||||
|
position_x: clientX,
|
||||||
|
position_y: clientY,
|
||||||
|
now_position_x: clientX,
|
||||||
|
now_position_y: clientY,
|
||||||
|
new_position_x: 0,
|
||||||
|
new_position_y: 0
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.rotate-circle {
|
||||||
|
stroke: v-bind('fill');
|
||||||
|
stroke-width: 1;
|
||||||
|
fill-opacity: 0;
|
||||||
|
cursor: url('@/assets/icons/rotate.svg') 12 12, auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,51 +1,16 @@
|
|||||||
import { useGlobalStore } from '../store/global';
|
import { IDoneJson } from '@/store/global/types';
|
||||||
import { calculateRotatedPointCoordinate } from '../utils';
|
import { calculateRotatedPointCoordinate } from '@/utils';
|
||||||
|
|
||||||
export const useSetPointCoordinate = () => {
|
export const useSetPointCoordinate = (item: IDoneJson) => {
|
||||||
const globalStore = useGlobalStore();
|
item.point_coordinate = {
|
||||||
if (globalStore.handle_svg_info) {
|
tl: calculateRotatedPointCoordinate(item.point_coordinate.tl, item.client, -item.rotate),
|
||||||
const item_point = globalStore.handle_svg_info.info;
|
tc: calculateRotatedPointCoordinate(item.point_coordinate.tc, item.client, -item.rotate),
|
||||||
globalStore.handle_svg_info.info.point_coordinate = {
|
tr: calculateRotatedPointCoordinate(item.point_coordinate.tr, item.client, -item.rotate),
|
||||||
tl: calculateRotatedPointCoordinate(
|
l: calculateRotatedPointCoordinate(item.point_coordinate.l, item.client, -item.rotate),
|
||||||
item_point.point_coordinate.tl,
|
r: calculateRotatedPointCoordinate(item.point_coordinate.r, item.client, -item.rotate),
|
||||||
item_point.client,
|
bl: calculateRotatedPointCoordinate(item.point_coordinate.bl, item.client, -item.rotate),
|
||||||
-item_point.rotate
|
bc: calculateRotatedPointCoordinate(item.point_coordinate.bc, item.client, -item.rotate),
|
||||||
),
|
br: calculateRotatedPointCoordinate(item.point_coordinate.br, item.client, -item.rotate)
|
||||||
tc: calculateRotatedPointCoordinate(
|
};
|
||||||
item_point.point_coordinate.tc,
|
console.log(item, 1515);
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
tr: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.tr,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
l: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.l,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
r: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.r,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
bl: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.bl,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
bc: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.bc,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
),
|
|
||||||
br: calculateRotatedPointCoordinate(
|
|
||||||
item_point.point_coordinate.br,
|
|
||||||
item_point.client,
|
|
||||||
-item_point.rotate
|
|
||||||
)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,68 @@
|
|||||||
|
import { EConfigItemPropsType, EDoneJsonType } from '@/config-center/types';
|
||||||
|
import type { ISystemStraightLine } from './types';
|
||||||
|
|
||||||
|
export const straight_line_system: ISystemStraightLine = Object.seal({
|
||||||
|
name: 'straight-line',
|
||||||
|
title: '直线',
|
||||||
|
type: EDoneJsonType.StraightLine,
|
||||||
|
config: {
|
||||||
|
can_zoom: false,
|
||||||
|
have_anchor: false
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
fill: {
|
||||||
|
title: '填充色',
|
||||||
|
type: EConfigItemPropsType.Color,
|
||||||
|
val: '#ff0000'
|
||||||
|
},
|
||||||
|
start_x: {
|
||||||
|
title: '起点x坐标',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: 0
|
||||||
|
},
|
||||||
|
start_y: {
|
||||||
|
title: '起点y坐标',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: 0
|
||||||
|
},
|
||||||
|
end_x: {
|
||||||
|
title: '终点x坐标',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: 0
|
||||||
|
},
|
||||||
|
end_y: {
|
||||||
|
title: '终点y坐标',
|
||||||
|
type: EConfigItemPropsType.InputNumber,
|
||||||
|
val: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bind_anchors: {
|
||||||
|
start: null,
|
||||||
|
end: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
export const connection_line_system: ISystemStraightLine = Object.freeze({
|
||||||
|
name: 'connection_line',
|
||||||
|
title: '连接线',
|
||||||
|
type: EDoneJsonType.ConnectionLine,
|
||||||
|
config: {
|
||||||
|
can_zoom: false,
|
||||||
|
have_anchor: false
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
fill: {
|
||||||
|
title: '填充色',
|
||||||
|
type: EConfigItemPropsType.Color,
|
||||||
|
val: '#ff0000'
|
||||||
|
},
|
||||||
|
point_position: {
|
||||||
|
title: '点坐标',
|
||||||
|
type: EConfigItemPropsType.JsonEdit,
|
||||||
|
val: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bind_anchors: {
|
||||||
|
start: null,
|
||||||
|
end: null
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { IConfigItem } from '@/config-center/types';
|
||||||
|
|
||||||
|
export interface ISystemStraightLine extends IConfigItem {
|
||||||
|
//绑定锚点
|
||||||
|
bind_anchors: {
|
||||||
|
start: IBindAnchors | null;
|
||||||
|
end: IBindAnchors | null;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
export interface IBindAnchors {
|
||||||
|
type: ELineBindAnchors;
|
||||||
|
target_id: string;
|
||||||
|
}
|
||||||
|
export enum ELineBindAnchors {
|
||||||
|
TopCenter = 'TopCenter',
|
||||||
|
Left = 'Left',
|
||||||
|
Right = 'Right',
|
||||||
|
BottomCenter = 'BottomCenter'
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue