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 { calculateRotatedPointCoordinate } from '../utils';
|
||||
import { IDoneJson } from '@/store/global/types';
|
||||
import { calculateRotatedPointCoordinate } from '@/utils';
|
||||
|
||||
export const useSetPointCoordinate = () => {
|
||||
const globalStore = useGlobalStore();
|
||||
if (globalStore.handle_svg_info) {
|
||||
const item_point = globalStore.handle_svg_info.info;
|
||||
globalStore.handle_svg_info.info.point_coordinate = {
|
||||
tl: calculateRotatedPointCoordinate(
|
||||
item_point.point_coordinate.tl,
|
||||
item_point.client,
|
||||
-item_point.rotate
|
||||
),
|
||||
tc: calculateRotatedPointCoordinate(
|
||||
item_point.point_coordinate.tc,
|
||||
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
|
||||
)
|
||||
};
|
||||
}
|
||||
export const useSetPointCoordinate = (item: IDoneJson) => {
|
||||
item.point_coordinate = {
|
||||
tl: calculateRotatedPointCoordinate(item.point_coordinate.tl, item.client, -item.rotate),
|
||||
tc: calculateRotatedPointCoordinate(item.point_coordinate.tc, item.client, -item.rotate),
|
||||
tr: calculateRotatedPointCoordinate(item.point_coordinate.tr, item.client, -item.rotate),
|
||||
l: calculateRotatedPointCoordinate(item.point_coordinate.l, item.client, -item.rotate),
|
||||
r: calculateRotatedPointCoordinate(item.point_coordinate.r, item.client, -item.rotate),
|
||||
bl: calculateRotatedPointCoordinate(item.point_coordinate.bl, item.client, -item.rotate),
|
||||
bc: calculateRotatedPointCoordinate(item.point_coordinate.bc, item.client, -item.rotate),
|
||||
br: calculateRotatedPointCoordinate(item.point_coordinate.br, item.client, -item.rotate)
|
||||
};
|
||||
console.log(item, 1515);
|
||||
};
|
||||
|
||||
@ -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