feat: 基础连线功能以及连线动画
咬轮猫
3 years ago
parent
8db0925c4a
commit
40f981864a
@ -0,0 +1,11 @@
|
||||
import { IDoneJson } from '@/store/global/types';
|
||||
|
||||
export interface IVisiableInfo {
|
||||
handle_panel: boolean;
|
||||
connection_panel: boolean;
|
||||
connection_line: boolean;
|
||||
select_item: {
|
||||
info: null | IDoneJson;
|
||||
index: number;
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,127 @@
|
||||
<!-- eslint-disable vue/html-indent -->
|
||||
<template>
|
||||
<g>
|
||||
<path
|
||||
:id="props.itemInfo.id"
|
||||
:d="positionArrarToPath(props.itemInfo.props.point_position.val)"
|
||||
fill="none"
|
||||
:stroke="
|
||||
props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity
|
||||
? props.itemInfo.animations.color.val
|
||||
: props.itemInfo.props.stroke.val
|
||||
"
|
||||
stroke-width="2"
|
||||
style="cursor: move"
|
||||
stroke-dashoffset="0"
|
||||
:stroke-dasharray="
|
||||
props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity ? 6 : 0
|
||||
"
|
||||
>
|
||||
<animate
|
||||
v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Electricity"
|
||||
attributeName="stroke-dashoffset"
|
||||
:from="props.itemInfo.animations.reverse.val ? 0 : 1000"
|
||||
:to="props.itemInfo.animations.reverse.val ? 1000 : 0"
|
||||
:dur="`${props.itemInfo.animations.dur.val}s`"
|
||||
:repeatCount="props.itemInfo.animations.repeatCount.val"
|
||||
/>
|
||||
</path>
|
||||
<!-- 水珠 -->
|
||||
<path
|
||||
v-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.WaterDrop"
|
||||
:d="positionArrarToPath(props.itemInfo.props.point_position.val)"
|
||||
fill="none"
|
||||
fill-opacity="0"
|
||||
:stroke="props.itemInfo.animations.color.val"
|
||||
stroke-width="2"
|
||||
stroke-dasharray="6"
|
||||
stroke-dashoffset="0"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
:from="props.itemInfo.animations.reverse.val ? 0 : 1000"
|
||||
:to="props.itemInfo.animations.reverse.val ? 1000 : 0"
|
||||
:dur="`${props.itemInfo.animations.dur.val}s`"
|
||||
:repeatCount="props.itemInfo.animations.repeatCount.val"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
<!-- 轨迹 -->
|
||||
<circle
|
||||
v-else-if="props.itemInfo.animations?.type.val === EConfigAnimationsType.Track"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="5"
|
||||
:fill="props.itemInfo.animations.color.val"
|
||||
>
|
||||
<animateMotion
|
||||
:path="
|
||||
positionArrarToPath(
|
||||
props.itemInfo.animations.reverse.val
|
||||
? [...props.itemInfo.props.point_position.val].reverse()
|
||||
: props.itemInfo.props.point_position.val
|
||||
)
|
||||
"
|
||||
:dur="`${props.itemInfo.animations.dur.val}s`"
|
||||
:repeatCount="props.itemInfo.animations.repeatCount.val"
|
||||
>
|
||||
</animateMotion>
|
||||
</circle>
|
||||
<!-- 更改线段 -->
|
||||
<g v-if="props.pointVisiable">
|
||||
<circle
|
||||
v-for="(item, index) in props.itemInfo.props.point_position.val"
|
||||
:key="index"
|
||||
:cx="item.x"
|
||||
:cy="item.y"
|
||||
r="4"
|
||||
stroke-width="1"
|
||||
:stroke="props.itemInfo.props.stroke.val"
|
||||
fill="#fff"
|
||||
style="cursor: pointer"
|
||||
@mousedown="setConnectionLineNode(index, $event, item.x, item.y)"
|
||||
/></g>
|
||||
</g>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EMouseInfoState, IDoneJson } from '@/store/global/types';
|
||||
import { EGlobalStoreIntention } from '@/store/global/types';
|
||||
import { PropType } from 'vue';
|
||||
import { positionArrarToPath } from '@/utils';
|
||||
import { useGlobalStore } from '@/store/global';
|
||||
import { EConfigAnimationsType } from '@/config-center/types';
|
||||
const props = defineProps({
|
||||
itemInfo: {
|
||||
type: Object as PropType<IDoneJson>,
|
||||
default: () => {}
|
||||
},
|
||||
pointVisiable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const globalStore = useGlobalStore();
|
||||
const setConnectionLineNode = (point_index: number, e: MouseEvent, x: number, y: number) => {
|
||||
if (globalStore.intention === EGlobalStoreIntention.Connection) {
|
||||
return;
|
||||
}
|
||||
globalStore.setHandleSvgInfo(props.itemInfo);
|
||||
const { clientX, clientY } = e;
|
||||
e.stopPropagation();
|
||||
globalStore.connection_line_node_info = {
|
||||
init_pos: { x, y },
|
||||
point_index: point_index
|
||||
};
|
||||
globalStore.intention = EGlobalStoreIntention.SetConnectionLineNode;
|
||||
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>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<el-form-item
|
||||
v-for="(attr_item, key) in props.objInfo"
|
||||
:key="key"
|
||||
:label="attr_item.title"
|
||||
size="small"
|
||||
>
|
||||
<el-select
|
||||
v-if="attr_item.type === EConfigItemPropsType.Select"
|
||||
v-model="attr_item.val"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
:disabled="attr_item?.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in attr_item.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input-number
|
||||
v-else-if="attr_item.type === EConfigItemPropsType.InputNumber"
|
||||
v-model="attr_item.val"
|
||||
:disabled="attr_item?.disabled"
|
||||
></el-input-number>
|
||||
<el-input
|
||||
v-else-if="attr_item.type === EConfigItemPropsType.Input"
|
||||
v-model="attr_item.val"
|
||||
:disabled="attr_item?.disabled"
|
||||
></el-input>
|
||||
<el-color-picker
|
||||
v-else-if="attr_item.type === EConfigItemPropsType.Color"
|
||||
v-model="attr_item.val"
|
||||
:disabled="attr_item?.disabled"
|
||||
></el-color-picker>
|
||||
<el-switch
|
||||
v-else-if="attr_item.type === EConfigItemPropsType.Switch"
|
||||
v-model="attr_item.val"
|
||||
:disabled="attr_item?.disabled"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { EConfigItemPropsType, IConfigItemProps } from '@/config-center/types';
|
||||
import {
|
||||
ElFormItem,
|
||||
ElColorPicker,
|
||||
ElInputNumber,
|
||||
ElInput,
|
||||
ElSelect,
|
||||
ElOption,
|
||||
ElSwitch
|
||||
} from 'element-plus';
|
||||
import { PropType } from 'vue';
|
||||
const props = defineProps({
|
||||
objInfo: {
|
||||
type: Object as PropType<IConfigItemProps>,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue