@zhangqingcq/vgce 0.0.14 → 0.0.16

package/src/components/svg-editor/left-panel/index.vue

@@ -0,0 +1,83 @@
+<!--左侧工具栏-->
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { ElCollapse, ElCollapseItem, ElIcon, ElMessage } from 'element-plus'
+	import type { IConfig, IConfigItem } from '@/config/types'
+	import { pinia } from '@/hooks'
+	import { useGlobalStore } from '@/stores/global'
+	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+	import { EGlobalStoreIntention } from '@/stores/global/types'
+	import { prosToVBind } from '@/utils'
+
+	const globalStore = useGlobalStore(pinia)
+	const props = defineProps<{ customToolbar: IConfig | undefined }>()
+	const left_tool_bar = ref(
+		props.customToolbar && Object.keys(props.customToolbar).length > 0 ? props.customToolbar : globalStore.config_center
+	)
+	const activeNames = ref([
+		'stateful',
+		'stateless',
+		'have_animation',
+		'custom_svg_group',
+		'element-ui',
+		'custom-vue',
+		'echarts'
+	])
+	const createBegin = (svg_item: IConfigItem) => {
+		globalStore.setCreateInfo(svg_item)
+	}
+	const dragEndEvent = (e: DragEvent) => {
+		//拖动时记录拖动的svg信息
+		if (e.dataTransfer?.dropEffect !== 'copy') {
+			ElMessage.warning('请将组件拖到画布中!')
+			//清空已选择的信息
+			globalStore.intention = EGlobalStoreIntention.None
+			return
+		}
+	}
+</script>
+<template>
+	<div>
+		<el-collapse v-model="activeNames">
+			<el-collapse-item :name="item.groupType" v-for="item of left_tool_bar" :key="item.title">
+				<template #title>
+					<div style="font-weight: bold">{{ item.title }}</div>
+				</template>
+				<div class="component-group flex flex-wrap">
+					<div
+						v-for="svg_item in item.list"
+						class="ideal"
+						:key="svg_item.name"
+						draggable="true"
+						@dragstart="createBegin(svg_item)"
+						@dragend="dragEndEvent"
+						:title="svg_item.title"
+					>
+						<el-icon :size="35" class="flex items-center">
+							<svg-analysis :name="svg_item.name" :props="prosToVBind(svg_item)" />
+						</el-icon>
+					</div>
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</div>
+</template>
+
+<style scoped lang="less">
+	.component-group {
+		.ideal {
+			margin: 5px;
+			border: 1px solid transparent;
+			cursor: pointer;
+
+			&:hover {
+				border-color: #f0a0f8;
+				opacity: 0.85;
+			}
+
+			.items-center {
+				font-style: normal;
+			}
+		}
+	}
+</style>

package/src/components/svg-editor/right-panel/code-edit-modal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+	import { VAceEditor } from 'vue3-ace-editor'
+	import '@/components/ace-edit'
+	import { ElButton, ElDialog } from 'element-plus'
+	import { computed, ref } from 'vue'
+
+	const props = withDefaults(defineProps<{ modelValue: any; lang: string; title: string }>(), {
+		modelValue: () => ({}),
+		lang: 'json',
+		title: '编辑'
+	})
+	const open = ref(false)
+	const emits = defineEmits(['update:modelValue'])
+
+	const content = computed({
+		get() {
+			if (props.lang === 'json') {
+				return JSON.stringify(props.modelValue, null, 2)
+			}
+			return props.modelValue
+		},
+		set(val) {
+			if (props.lang === 'json') {
+				emits('update:modelValue', JSON.parse(val))
+			} else {
+				emits('update:modelValue', val)
+			}
+		}
+	})
+</script>
+
+<template>
+	<div>
+		<el-button @click="open = true">···</el-button>
+		<el-dialog class="modal-full" v-model="open" :title="props.title" width="60%">
+			<v-ace-editor
+				v-model:value="content"
+				:lang="props.lang"
+				theme="kr_theme"
+				style="height: 400px"
+				:options="{
+					useWorker: true,
+					enableBasicAutocompletion: true,
+					enableSnippets: true,
+					enableLiveAutocompletion: true
+				}"
+			/>
+		</el-dialog>
+	</div>
+</template>

package/src/components/svg-editor/right-panel/common-animate.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+	import { ElTag, ElDrawer, ElTabs, ElTabPane, ElScrollbar, ElIcon } from 'element-plus'
+	import { ref, watch } from 'vue'
+	import { common_animate_list } from '@/components/config'
+	import SvgAnalysis from '@/components/svg-analysis/index.vue'
+
+	const props = defineProps<{ val: string }>()
+	const emits = defineEmits(['updateCommonAniVal'])
+	const select_val = ref(props.val)
+	const drawer_visible = ref(false)
+	const activeName = ref('进入')
+	const play_index = ref<null | number>(null)
+	const addAnimation = (val: string) => {
+		emits('updateCommonAniVal', val)
+		drawer_visible.value = false
+	}
+	watch(
+		() => props.val,
+		(new_val) => {
+			select_val.value = new_val
+		}
+	)
+</script>
+
+<template>
+	<div style="height: 100%">
+		<el-tag closable v-if="select_val" @close="addAnimation('')" @click="drawer_visible = true" style="cursor: pointer"
+			>{{
+				common_animate_list
+					.map((m) => m.children)
+					.reduce((pre, curr) => {
+						return pre.concat(curr)
+					})
+					.find((f) => f.value == select_val)?.label
+			}}
+			<el-icon :size="10">
+				<svg-analysis name="setting" />
+			</el-icon>
+		</el-tag>
+		<el-tag v-else type="success" style="cursor: pointer" @click="drawer_visible = true">新增</el-tag>
+		<el-drawer v-model="drawer_visible" title="选择动画" direction="ltr">
+			<el-tabs v-model="activeName">
+				<el-tab-pane
+					:label="tab_item.label"
+					:name="tab_item.label"
+					v-for="tab_item in common_animate_list"
+					:key="tab_item.label"
+				>
+					<el-scrollbar height="500px">
+						<div class="flex flex-wrap">
+							<div
+								class="animate"
+								v-for="(animate, index) in tab_item.children"
+								:key="index"
+								@mouseenter="play_index = index"
+								@mouseleave="play_index = null"
+								@click="addAnimation(animate.value)"
+							>
+								<div
+									:class="`${
+										play_index == index
+											? `animate__animated animate__${animate.value} animate__slow animate__infinite`
+											: ''
+									}`"
+								>
+									{{ animate.label }}
+								</div>
+							</div>
+						</div>
+					</el-scrollbar>
+				</el-tab-pane>
+			</el-tabs>
+		</el-drawer>
+	</div>
+</template>
+
+<style scoped>
+	.animate {
+		cursor: pointer;
+	}
+
+	.animate > div {
+		width: 80px;
+		height: 60px;
+		background: #f5f8fb;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 12px 10px 12px;
+		font-size: 12px;
+		color: #333;
+		border-radius: 3px;
+		user-select: none;
+		cursor: pointer;
+	}
+</style>

package/src/components/svg-editor/right-panel/condition.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus/es'
+	import type { ICondition } from '@/config/types'
+	import { EConditionType } from '@/config/types'
+
+	const props = withDefaults(defineProps<{ modelValue: ICondition }>(), {
+		modelValue: () => ({ type: EConditionType.None })
+	})
+	const emit = defineEmits(['update:modelValue'])
+	const value = computed({
+		get() {
+			return props.modelValue
+		},
+		set(val) {
+			emit('update:modelValue', val)
+		}
+	})
+
+	const re: { label: string; val: any }[] = [
+		{
+			label: '大于',
+			val: 'greater'
+		},
+		{
+			label: '大于等于',
+			val: '>='
+		},
+		{
+			label: '小于',
+			val: '<'
+		},
+		{
+			label: '小于等于',
+			val: '<='
+		},
+		{
+			label: '等于',
+			val: '=='
+		},
+		{
+			label: '不等于',
+			val: '!='
+		},
+		{
+			label: '介于',
+			val: '>=,=<'
+		},
+		{
+			label: '不介于',
+			val: '<,>'
+		}
+	]
+
+	const typeChange = (d: string) => {
+		if (d !== 'None') {
+			value.value.Relation = {
+				key: '',
+				relation: '',
+				val: '',
+				val2: ''
+			}
+		}
+		emit('update:modelValue', value)
+	}
+</script>
+
+<template>
+	<div class="c-wall-d">
+		<el-form-item label="条件" size="small">
+			<el-select v-model="value.type" @change="typeChange">
+				<el-option value="None" label="无" />
+				<el-option value="Relation" label="关系运算" />
+			</el-select>
+		</el-form-item>
+		<el-form-item label="属性" size="small" v-if="value.type === 'Relation'">
+			<el-input v-model="value.Relation!.key" />
+		</el-form-item>
+		<el-form-item label="关系" size="small" v-if="value.type === 'Relation'">
+			<el-select v-model="value.Relation!.relation">
+				<el-option :value="e.val" :label="e.label" v-for="(e, i) of re" :key="'rop' + i" />
+			</el-select>
+		</el-form-item>
+		<el-form-item label="值" size="small" v-if="value.type === 'Relation'">
+			<el-input v-model="value.Relation!.val" />
+		</el-form-item>
+		<el-form-item
+			label="值2"
+			size="small"
+			v-if="value.type === 'Relation' && (value.Relation?.relation === '>=,=<' || value.Relation?.relation === '<,>')"
+		>
+			<el-input v-model="value.Relation!.val2" />
+		</el-form-item>
+	</div>
+</template>
+
+<style lang="less" scoped>
+	.c-wall-d {
+		padding-top: 10px;
+	}
+</style>

package/src/components/svg-editor/right-panel/dynamic-el-form-item.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+	import { EConfigItemPropsType } from '@/config/types'
+	import type { IConfigItemProps } from '@/config/types'
+	import {
+		ElFormItem,
+		ElColorPicker,
+		ElInputNumber,
+		ElInput,
+		ElSelect,
+		ElOption,
+		ElSwitch,
+		ElTooltip
+	} from 'element-plus'
+	import { getStringWidth } from '@/utils'
+	import CodeEditModal from '@/components/svg-editor/right-panel/code-edit-modal.vue'
+
+	const props = withDefaults(defineProps<{ objInfo?: IConfigItemProps; hide?: string[]; code?: boolean }>(), {
+		objInfo: () => ({}),
+		hide: () => [],
+		code: false
+	})
+</script>
+
+<template>
+	<div v-for="(attr_item, key) in props.objInfo" :key="key">
+		<el-form-item v-if="props.code" class="props-row" size="small">
+			<template #label>
+				<el-tooltip
+					:content="String(key)"
+					v-if="getStringWidth(String(key)) > 78"
+					placement="left"
+					popper-class="props-popper"
+				>
+					<div class="one-row-txt" style="width: 78px">{{ key }}</div>
+				</el-tooltip>
+				<span v-else>{{ key }}</span>
+			</template>
+			<el-tooltip
+				:content="attr_item.val"
+				v-if="getStringWidth(String(attr_item.val)) > 145"
+				placement="left"
+				popper-class="props-popper"
+			>
+				<div class="one-row-txt" style="width: 145px">{{ attr_item.val }}</div>
+			</el-tooltip>
+			<span v-else>{{ attr_item.val }}</span>
+		</el-form-item>
+		<el-form-item :label="attr_item.title" size="small" v-if="props.hide.indexOf(String(key)) < 0">
+			<el-select
+				v-if="attr_item.type === EConfigItemPropsType.Select"
+				v-model="attr_item.val"
+				placeholder="Select"
+				size="small"
+				:disabled="Boolean(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="Boolean(attr_item?.disabled)"
+			></el-input-number>
+			<el-input
+				v-else-if="attr_item.type === EConfigItemPropsType.Input"
+				v-model="attr_item.val"
+				:disabled="Boolean(attr_item?.disabled)"
+			></el-input>
+			<el-color-picker
+				v-else-if="attr_item.type === EConfigItemPropsType.Color"
+				v-model="attr_item.val"
+				:disabled="Boolean(attr_item?.disabled)"
+			></el-color-picker>
+			<el-switch
+				v-else-if="attr_item.type === EConfigItemPropsType.Switch"
+				v-model="attr_item.val"
+				:disabled="Boolean(attr_item?.disabled)"
+			></el-switch>
+			<code-edit-modal
+				v-else-if="attr_item.type === EConfigItemPropsType.JsonEdit"
+				v-model="attr_item.val"
+				:disabled="Boolean(attr_item?.disabled)"
+			/>
+		</el-form-item>
+	</div>
+</template>
+<style lang="less" scoped>
+	.one-row-txt {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>
+<style lang="less">
+	.props-popper {
+		max-width: 350px;
+	}
+</style>