@zhangqingcq/vgce 0.0.14 → 0.0.16

package/src/components/vue3-ruler-tool/index.vue

@@ -0,0 +1,506 @@
+<script lang="ts">
+	import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { pinia } from '@/hooks'
+	import { useSvgEditLayoutStore } from '@/stores/svg-edit-layout'
+
+	export default defineComponent({
+		name: 'V3RulerComponent',
+		props: {
+			position: {
+				type: String,
+				default: 'relative',
+				validator: (val: string) => {
+					return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
+				}
+			}, // 规定元素的定位类型
+			isHotKey: {
+				type: Boolean,
+				default: true
+			}, // 热键开关
+			isScaleRevise: {
+				type: Boolean,
+				default: false
+			}, // 刻度修正(根据content进行刻度重置)
+			value: {
+				type: Array,
+				default: () => {
+					return [
+						{
+							type: 'h',
+							site: 50
+						},
+						{
+							type: 'v',
+							site: 180
+						}
+					] //
+				}
+			}, // 预置参考线
+			contentLayout: {
+				type: Object,
+				default: () => {
+					return {
+						top: 0,
+						left: 0
+					}
+				}
+			}, // 内容部分布局
+			parent: {
+				type: Boolean,
+				default: false
+			},
+			visible: {
+				type: Boolean,
+				default: true
+			},
+			stepLength: {
+				type: Number,
+				default: 50,
+				validator: (val: number) => val % 10 === 0
+			} // 步长
+		},
+		emits: ['input', 'update:visible'],
+		setup(props, context) {
+			const svgEditLayoutStore = useSvgEditLayoutStore(pinia)
+			/**
+			 * @description 绑定事件 on(element, event, handler)
+			 */
+			const on = (function () {
+				return function (element: any, event: any, handler: any) {
+					if (element && event && handler) {
+						element.addEventListener(event, handler, false)
+					}
+				}
+			})()
+
+			/**
+			 * @description 解绑事件 off(element, event, handler)
+			 */
+			const off = (function () {
+				return function (element: any, event: any, handler: any) {
+					if (element && event) {
+						element.removeEventListener(event, handler, false)
+					}
+				}
+			})()
+			const size = 17
+			let left_top = 18 // 内容左上填充
+			let windowWidth = ref(0) // 窗口宽度
+			let windowHeight = ref(0) // 窗口高度
+			let xScale = ref<[{ id: number }]>([{ id: 0 }]) // 水平刻度
+			let yScale = ref<[{ id: number }]>([{ id: 0 }]) // 垂直刻度
+			let topSpacing = 0 // 标尺与窗口上间距
+			let leftSpacing = 0 //  标尺与窗口左间距
+			let isDrag = ref(false)
+			let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
+			let horizontalDottedLeft = ref(-999) // 水平虚线位置
+			let verticalDottedTop = ref(-999) // 垂直虚线位置
+			let rulerWidth = 0 // 垂直标尺的宽度
+			let rulerHeight = 0 // 水平标尺的高度
+			let dragLineId = '' // 被移动线的ID
+			//ref
+			const content = ref(null)
+			const el = ref(null)
+			const verticalRuler = ref(null)
+			const horizontalRuler = ref(null)
+			const wrapperStyle: any = computed(() => {
+				return {
+					width: windowWidth.value + 'px',
+					height: windowHeight.value + 'px',
+					position: props.position
+				}
+			})
+			const contentStyle = computed(() => {
+				return {
+					left: props.contentLayout.left + 'px',
+					top: props.contentLayout.top + 'px',
+					padding: left_top + 'px 0px 0px ' + left_top + 'px'
+				}
+			})
+			const lineList = computed(() => {
+				let hCount = 0
+				let vCount = 0
+				return props.value.map((item: any) => {
+					const isH = item.type === 'h'
+					return {
+						id: `${item.type}_${isH ? hCount++ : vCount++}`,
+						type: item.type,
+						title: item.site.toFixed(2) + 'px',
+						[isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
+					}
+				})
+			})
+
+			svgEditLayoutStore.$subscribe((mutation) => {
+				if (mutation.storeId === 'svg-edit-layout-store') {
+					window.setTimeout(init, 420)
+				}
+			})
+
+			onMounted(() => {
+				on(document, 'mousemove', dottedLineMove)
+				on(document, 'mouseup', dottedLineUp)
+				init()
+				on(window, 'resize', windowResize)
+			})
+			onBeforeUnmount(() => {
+				off(document, 'mousemove', dottedLineMove)
+				off(document, 'mouseup', dottedLineUp)
+				off(window, 'resize', windowResize)
+			})
+			//function
+			const init = () => {
+				box()
+				scaleCalc()
+			}
+
+			const windowResize = () => {
+				xScale.value = [{ id: 0 }]
+				yScale.value = [{ id: 0 }]
+				init()
+			}
+			const getLineStyle = ({ type, top, left }: any) => {
+				return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
+			}
+			const handleDragLine = ({ type, id }: any) => {
+				return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
+			}
+			//获取窗口宽与高
+			const box = () => {
+				if (props.isScaleRevise) {
+					// 根据内容部分进行刻度修正
+					const contentLeft = (content.value as any).offsetLeft
+					const contentTop = (content.value as any).offsetTop
+					getCalcRevise(xScale.value, contentLeft)
+					getCalcRevise(yScale.value, contentTop)
+				}
+				if (props.parent) {
+					const style = window.getComputedStyle((el.value as any).parentNode, null)
+					windowWidth.value = parseInt(style.getPropertyValue('width'), 10)
+					windowHeight.value = parseInt(style.getPropertyValue('height'), 10)
+				} else {
+					windowWidth.value = document.documentElement.clientWidth - leftSpacing
+					windowHeight.value = document.documentElement.clientHeight - topSpacing
+				}
+				rulerWidth = (verticalRuler.value as any).clientWidth
+				rulerHeight = (horizontalRuler.value as any).clientHeight
+				setSpacing()
+			}
+			const setSpacing = () => {
+				topSpacing = (horizontalRuler.value as any).getBoundingClientRect().y //.offsetParent.offsetTop
+				leftSpacing = (verticalRuler.value as any).getBoundingClientRect().x // .offsetParent.offsetLeft
+			}
+			// 计算刻度
+			const scaleCalc = () => {
+				getCalc(xScale.value, windowWidth.value)
+				getCalc(yScale.value, windowHeight.value)
+			}
+
+			//获取刻度
+			const getCalc = (array: [{ id: number }], length: any) => {
+				for (let i = 0; i < (length * props.stepLength) / 50; i += props.stepLength) {
+					if (i % props.stepLength === 0 && i != 0) {
+						array.push({ id: i })
+					}
+				}
+				// console.log(array, 225);
+			}
+			// 获取矫正刻度方法
+			const getCalcRevise = (array: [{ id: number }], length: any) => {
+				for (let i = 0; i < length; i += 1) {
+					if (i % props.stepLength === 0 && i + props.stepLength <= length) {
+						array.push({ id: i })
+					}
+				}
+				// console.log(array, 233);
+			}
+			//生成一个参考线
+			const newLine = (val: any) => {
+				isDrag.value = true
+				dragFlag = val
+			}
+			//虚线移动
+			const dottedLineMove = ($event: any) => {
+				setSpacing()
+				switch (dragFlag) {
+					case 'x':
+						if (isDrag.value) {
+							verticalDottedTop.value = $event.pageY - topSpacing
+						}
+						break
+					case 'y':
+						if (isDrag.value) {
+							horizontalDottedLeft.value = $event.pageX - leftSpacing
+						}
+						break
+					case 'h':
+						if (isDrag.value) {
+							verticalDottedTop.value = $event.pageY - topSpacing
+						}
+						break
+					case 'v':
+						if (isDrag.value) {
+							horizontalDottedLeft.value = $event.pageX - leftSpacing
+						}
+						break
+					default:
+						break
+				}
+			}
+			//虚线松开
+			const dottedLineUp = ($event: any) => {
+				setSpacing()
+				if (isDrag.value) {
+					isDrag.value = false
+					const cloneList = JSON.parse(JSON.stringify(props.value))
+					switch (dragFlag) {
+						case 'x':
+							cloneList.push({
+								type: 'h',
+								site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
+							})
+							context.emit('input', cloneList)
+							break
+						case 'y':
+							cloneList.push({
+								type: 'v',
+								site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
+							})
+							context.emit('input', cloneList)
+							break
+						case 'h':
+							dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')
+							context.emit('input', cloneList)
+							break
+						case 'v':
+							dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')
+							context.emit('input', cloneList)
+							break
+						default:
+							break
+					}
+					verticalDottedTop.value = horizontalDottedLeft.value = -10
+				}
+			}
+			const dragCalc = (list: any, page: any, spacing: any, ruler: any, type: any) => {
+				if (page - spacing < ruler) {
+					let Index
+					lineList.value.forEach((item: any, index: any) => {
+						if (item.id === dragLineId) {
+							Index = index
+						}
+					})
+					list.splice(Index, 1, {
+						type: type,
+						site: -600
+					})
+				} else {
+					let Index
+					lineList.value.forEach((item, index) => {
+						if (item.id === dragLineId) {
+							Index = index
+						}
+					})
+					list.splice(Index, 1, {
+						type: type,
+						site: (page - spacing - size) * (props.stepLength / 50)
+					})
+				}
+			}
+			//水平标尺按下鼠标
+			const horizontalDragRuler = () => {
+				newLine('x')
+			}
+			//垂直标尺按下鼠标
+			const verticalDragRuler = () => {
+				newLine('y')
+			}
+			// 水平线处按下鼠标
+			const dragHorizontalLine = (id: any) => {
+				isDrag.value = true
+				dragFlag = 'h'
+				dragLineId = id
+			}
+			// 垂直线处按下鼠标
+			const dragVerticalLine = (id: any) => {
+				isDrag.value = true
+				dragFlag = 'v'
+				dragLineId = id
+			}
+			return {
+				wrapperStyle,
+				horizontalDragRuler,
+				xScale,
+				verticalDragRuler,
+				yScale,
+				verticalDottedTop,
+				horizontalDottedLeft,
+				lineList,
+				getLineStyle,
+				handleDragLine,
+				contentStyle,
+				isDrag,
+				content,
+				el,
+				verticalRuler,
+				horizontalRuler
+			}
+		}
+	})
+</script>
+
+<template>
+	<div :style="wrapperStyle" class="vue-ruler-wrapper" onselectStart="return false;" ref="el">
+		<section v-show="$props.visible">
+			<div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
+				<span v-for="(item, index) in xScale" :key="index" :style="{ left: index * 50 + 2 + 'px' }" class="n">{{
+					item.id
+				}}</span>
+			</div>
+			<div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
+				<span v-for="(item, index) in yScale" :key="index" :style="{ top: index * 50 + 2 + 'px' }" class="n">{{
+					item.id
+				}}</span>
+			</div>
+			<div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h" />
+			<div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v" />
+			<div
+				v-for="item in lineList"
+				:title="item.title"
+				:style="getLineStyle(item)"
+				:key="item.id"
+				:class="`vue-ruler-ref-line-${item.type}`"
+				@mousedown="handleDragLine(item)"
+			></div>
+		</section>
+		<div ref="content" class="vue-ruler-content" :style="contentStyle">
+			<slot />
+		</div>
+		<div v-show="isDrag" class="vue-ruler-content-mask"></div>
+	</div>
+</template>
+
+<style lang="less">
+	.vue-ruler-wrapper {
+		left: 0;
+		top: 0;
+		z-index: 999;
+		user-select: none;
+	}
+
+	.vue-ruler-h,
+	.vue-ruler-v,
+	.vue-ruler-ref-line-v,
+	.vue-ruler-ref-line-h,
+	.vue-ruler-ref-dot-h,
+	.vue-ruler-ref-dot-v {
+		position: absolute;
+		left: 0;
+		top: 0;
+		overflow: hidden;
+		z-index: 999;
+	}
+
+	.vue-ruler-h {
+		width: calc(100% - 18px);
+		height: 18px;
+		left: 18px;
+		opacity: 0.6;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
+			repeat-x;
+		/*./image/ruler_h.png*/
+	}
+
+	.vue-ruler-v {
+		width: 18px;
+		height: calc(100% - 18px);
+		top: 18px;
+		opacity: 0.6;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
+			repeat-y;
+		/*./image/ruler_v.png*/
+	}
+
+	.vue-ruler-v .n,
+	.vue-ruler-h .n {
+		position: absolute;
+		font:
+			10px/1 Arial,
+			sans-serif;
+		color: #333;
+		cursor: default;
+		top: 1px;
+	}
+
+	.vue-ruler-v .n {
+		width: 8px;
+		left: 3px;
+		word-wrap: break-word;
+	}
+
+	.vue-ruler-ref-line-v,
+	.vue-ruler-ref-line-h,
+	.vue-ruler-ref-dot-h,
+	.vue-ruler-ref-dot-v {
+		z-index: 998;
+	}
+
+	.vue-ruler-ref-line-h {
+		width: 100%;
+		height: 3px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
+			repeat-x left center;
+		/*./image/line_h.png*/
+		cursor: n-resize;
+		/*url(./image/cur_move_h.cur), move*/
+	}
+
+	.vue-ruler-ref-line-v {
+		width: 3px;
+		height: 100%;
+		_height: 9999px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
+			repeat-y center top;
+		/*./image/line_v.png*/
+		cursor: w-resize;
+		/*url(./image/cur_move_v.cur), move*/
+	}
+
+	.vue-ruler-ref-dot-h {
+		width: 100%;
+		height: 3px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+			repeat-x left 1px;
+		/*./image/line_dot.png*/
+		cursor: n-resize;
+		/*url(./image/cur_move_h.cur), move*/
+		top: -10px;
+	}
+
+	.vue-ruler-ref-dot-v {
+		width: 3px;
+		height: 100%;
+		_height: 9999px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
+			repeat-y 1px top;
+		/*./image/line_dot.png*/
+		cursor: w-resize;
+		/*url(./image/cur_move_v.cur), move*/
+		left: -10px;
+	}
+
+	.vue-ruler-content {
+		position: absolute;
+		z-index: 997;
+		width: 100%;
+		height: 100%;
+	}
+
+	.vue-ruler-content-mask {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: transparent;
+		z-index: 998;
+	}
+</style>

package/src/config/files/clock-a.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+
+	const props = withDefaults(defineProps<{ id: string }>(), { id: '' })
+	const nowTime = ref(new Date())
+	const s = nowTime.value.getSeconds()
+	const m = nowTime.value.getMinutes()
+	const h = Math.floor((nowTime.value.getHours() + (m + s / 60) / 60) * 30)
+</script>
+<template>
+	<g :id="props.id">
+		<symbol :id="`${props.id}clock-a-n`" viewBox="0 0 1024 1024">
+			<path d="M512.3 518.9m-469.2 0a469.2 469.2 0 1 0 938.4 0 469.2 469.2 0 1 0-938.4 0Z" fill="#429BCF" />
+			<path d="M512.3 518.9m-392.5 0a392.5 392.5 0 1 0 785 0 392.5 392.5 0 1 0-785 0Z" fill="#FFFFFF" />
+			<path
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1-6.8-6.8-6.8-17.9 0-24.8l130.8-130.8c6.8-6.8 17.9-6.8 24.8 0 6.8 6.8 6.8 17.9 0 24.8L524.7 518.7c-3.5 3.4-7.9 5.1-12.4 5.1z"
+				fill="#2D416C"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${-45 + h} 512.3 506.3`"
+					:to="`${315 + h} 512.3 506.3`"
+					dur="43200s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path
+				d="M512.3 523.8c-4.5 0-9-1.7-12.4-5.1L318.3 337.1c-6.8-6.8-6.8-17.9 0-24.8 6.8-6.8 17.9-6.8 24.8 0L524.7 494c6.8 6.8 6.8 17.9 0 24.8-3.5 3.3-7.9 5-12.4 5z"
+				fill="#365087"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${45 + m * 6} 512.3 506.3`"
+					:to="`${405 + m * 6} 512.3 506.3`"
+					dur="3600s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path d="M512.3 506.3m-47.5 0a47.5 47.5 0 1 0 95 0 47.5 47.5 0 1 0-95 0Z" fill="#365087" />
+			<path
+				d="M512.3 218.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM512.3 880.8c-9 0-16.3-7.3-16.3-16.3v-29.1c0-9 7.3-16.3 16.3-16.3s16.3 7.3 16.3 16.3v29.1c0 9-7.4 16.3-16.3 16.3zM812.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3zM150.4 518.9c0-9 7.3-16.3 16.3-16.3h29.1c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-29.1c-8.9 0-16.3-7.3-16.3-16.3z"
+				fill="#2D416C"
+			/>
+			<path
+				d="M296.9 733.5c-2.2 0-4.5-0.9-6.2-2.6-3.4-3.4-3.4-9 0-12.4L540 469.2c3.4-3.4 9-3.4 12.4 0 3.4 3.4 3.4 9 0 12.4L303.1 731c-1.7 1.7-4 2.5-6.2 2.5z"
+				fill="#C11B16"
+			>
+				<animateTransform
+					attributeName="transform"
+					attributeType="XML"
+					type="rotate"
+					:from="`${135.5 + s * 6} 512.3 506.3`"
+					:to="`${495.5 + s * 6} 512.3 506.3`"
+					dur="60s"
+					repeatCount="indefinite"
+				/>
+			</path>
+			<path d="M512.3 506.3m-22.8 0a22.8 22.8 0 1 0 45.6 0 22.8 22.8 0 1 0-45.6 0Z" fill="#fff" />
+		</symbol>
+		<use :xlink:href="`#${props.id}clock-a-n`" width="200" height="200" />
+	</g>
+</template>

package/src/config/files/common-table.vue

@@ -0,0 +1,49 @@
+<template>
+	<el-table v-bind="table_props">
+		<el-table-column v-for="item in props.colConfig" :key="item.prop" v-bind="item"></el-table-column>
+	</el-table>
+</template>
+<script setup lang="ts">
+	import { ref, watchEffect } from 'vue'
+	import { ElTable, ElTableColumn } from 'element-plus'
+
+	const props = withDefaults(
+		defineProps<{
+			colConfig: ICol[]
+			data: any[]
+			height: number
+			maxHeight: number
+			stripe: boolean
+			border: boolean
+			size: string
+			fit: boolean
+			operateDisplay: boolean
+			selectionData: any[]
+		}>(),
+		{
+			colConfig: () => [],
+			data: () => [],
+			stripe: false,
+			border: false,
+			fit: false,
+			operateDisplay: false,
+			selectionData: () => []
+		}
+	)
+	const table_props = ref({})
+	watchEffect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		const { colConfig, ...temp_props } = props
+		table_props.value = temp_props
+	})
+
+	interface ICol {
+		prop: string
+		label: string
+		width: string
+		fixed: string | boolean
+		sortable: boolean
+		'show-overflow-tooltip': boolean
+	}
+</script>
+<style scoped lang="scss"></style>

package/src/config/files/light-a.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+	import { watch } from 'vue'
+
+	const props = withDefaults(defineProps<{ id: string; isOpen: boolean }>(), {
+		id: '',
+		isOpen: false
+	})
+
+	const emit = defineEmits(['onChange'])
+
+	watch(
+		() => props.isOpen,
+		() => {
+			emit('onChange')
+		}
+	)
+</script>
+
+<template>
+	<g :id="props.id" style="cursor: pointer">
+		<symbol :id="`${props.id}light-121`" viewBox="0 0 1024 1024">
+			<path
+				d="M565.096296 289.185185s-0.948148 0 0 0c-110.933333-20.859259-208.592593 40.77037-237.985185 148.859259-14.222222 53.096296-24.651852 101.451852 44.562963 221.866667 14.222222 25.6 11.377778 70.162963 8.533333 95.762963-1.896296 14.222222 64.474074 36.02963 89.125926 42.666667l95.762963-509.155556z"
+				:fill="props.isOpen ? '#FDB813' : '#cccccc'"
+			/>
+			<path
+				d="M732.918519 513.896296c11.377778-111.881481-56.888889-203.851852-166.874075-224.711111h-0.948148L469.333333 798.340741c25.6 2.844444 94.814815 6.637037 98.607408-7.585185 6.637037-25.6 20.859259-67.318519 42.666666-86.281482C719.644444 618.192593 727.22963 568.888889 732.918519 513.896296z"
+				:fill="props.isOpen ? '#FD9B13' : '#bbbbbb'"
+			/>
+			<path
+				d="M467.437037 806.874074c-7.585185-0.948148-12.325926-7.585185-14.222222-14.222222l-38.874074-256c-0.948148-5.688889 0.948148-11.377778 4.74074-15.170371 3.792593-3.792593 9.481481-5.688889 15.170371-4.74074l167.822222 31.288889c5.688889 0.948148 10.42963 4.740741 12.325926 9.481481 1.896296 4.740741 1.896296 11.377778-0.948148 16.118519L486.4 798.340741c-3.792593 6.637037-11.377778 10.42963-18.962963 8.533333z m-14.222222-251.259259l27.496296 182.992592L572.681481 578.37037l-119.466666-22.755555z"
+				:fill="props.isOpen ? '#F12A3F' : '#666666'"
+			/>
+			<path
+				d="M375.466667 709.214815l-25.6 137.481481c0 2.844444 1.896296 5.688889 7.585185 10.42963l65.422222 54.992593c5.688889 4.740741 15.17037 8.533333 23.703704 10.429629l36.029629-193.422222-107.14074-19.911111z"
+				fill="#2D4375"
+			/>
+			<path
+				d="M482.607407 729.125926l-36.029629 193.422222c9.481481 1.896296 18.014815 1.896296 25.6-0.948148l80.592592-27.496296c6.637037-1.896296 10.42963-4.740741 11.377778-6.637037L589.748148 749.037037l-107.140741-19.911111z"
+				fill="#1E2D4F"
+			/>
+			<path
+				d="M612.503704 217.125926c-3.792593 18.014815-20.859259 29.392593-38.874074 26.548148-18.014815-3.792593-30.340741-20.859259-26.548149-38.874074l18.962963-100.503704c3.792593-18.014815 20.859259-29.392593 38.874075-26.548148 18.014815 3.792593 30.340741 20.859259 26.548148 38.874074l-18.962963 100.503704z"
+				fill="#FDB813"
+				:fill-opacity="props.isOpen ? 1 : 0"
+			/>
+			<path
+				d="M382.103704 228.503704c10.42963 15.17037 6.637037 36.02963-8.533334 46.459259-15.17037 10.42963-36.02963 6.637037-46.459259-8.533333l-57.837037-84.385186c-10.42963-15.17037-6.637037-36.02963 8.533333-46.459259 15.17037-10.42963 36.02963-6.637037 46.45926 8.533334l57.837037 84.385185zM757.57037 298.666667c-15.17037 10.42963-18.962963 31.288889-8.533333 46.459259 10.42963 15.17037 31.288889 18.962963 46.459259 8.533333l84.385185-57.837037c15.17037-10.42963 18.962963-31.288889 8.533334-46.459259-10.42963-15.17037-31.288889-18.962963-46.459259-8.533333l-84.385186 57.837037z"
+				fill="#FDB813"
+				:fill-opacity="props.isOpen ? 1 : 0"
+			/>
+			<path
+				d="M252.207407 361.244444c18.014815 3.792593 30.340741 20.859259 26.548149 38.874075-3.792593 18.014815-20.859259 29.392593-38.874075 26.548148l-100.503703-18.962963c-18.014815-3.792593-30.340741-20.859259-26.548148-38.874074 3.792593-18.014815 20.859259-29.392593 38.874074-26.548149l100.503703 18.962963zM931.081481 488.296296c18.014815 3.792593 30.340741 20.859259 26.548149 38.874074-3.792593 18.014815-20.859259 29.392593-38.874074 26.548149l-100.503704-18.962963c-18.014815-3.792593-30.340741-20.859259-26.548148-38.874075 3.792593-18.014815 20.859259-29.392593 38.874074-26.548148l100.503703 18.962963z"
+				fill="#FDB813"
+				:fill-opacity="props.isOpen ? 1 : 0"
+			/>
+			<path
+				d="M593.540741 807.822222c1.896296-7.585185-3.792593-15.17037-11.377778-16.118518l-107.140741-19.911111-4.740741 27.496296 107.140741 19.911111c6.637037 0.948148 14.222222-3.792593 16.118519-11.377778z"
+				fill="#CEEFF6"
+			/>
+			<path
+				d="M366.933333 750.933333c-7.585185-1.896296-15.17037 3.792593-16.118518 11.377778-1.896296 7.585185 3.792593 15.17037 11.377778 16.118519l107.14074 19.911111 4.740741-27.496297-107.140741-19.911111zM356.503704 808.77037c-7.585185-1.896296-15.17037 3.792593-16.118519 11.377778-1.896296 7.585185 3.792593 15.17037 11.377778 16.118519l107.140741 19.911111 4.74074-27.496297-107.14074-19.911111z"
+				fill="#FFFFFF"
+			/>
+			<path
+				d="M570.785185 848.592593l-107.140741-19.911112-4.74074 27.496297 107.14074 19.911111c7.585185 1.896296 15.17037-3.792593 16.118519-11.377778 1.896296-7.585185-2.844444-15.17037-11.377778-16.118518z"
+				fill="#CEEFF6"
+			/>
+		</symbol>
+		<use :xlink:href="`#${props.id}light-121`" width="100" height="100" />
+	</g>
+</template>