Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/assets/icons/dc/lock_0.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121366655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800 448H704V320c0-106.4-85.6-192-192-192S320 213.6 320 320h64c0-70.4 57.6-128 128-128s128 57.6 128 128v128H224c-17.6 0-32 14.4-32 32v384c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V480c0-17.6-14.4-32-32-32zM512 736c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z" p-id="56888"></path></svg>

src/assets/icons/dc/lock_1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747121371122" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57034" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800 448H704V320c0-106.4-85.6-192-192-192S320 213.6 320 320v128H224c-17.6 0-32 14.4-32 32v384c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V480c0-17.6-14.4-32-32-32zM512 736c-35.2 0-64-28.8-64-64s28.8-64 64-64 64 28.8 64 64-28.8 64-64 64z m128-288H384V320c0-70.4 57.6-128 128-128s128 57.6 128 128v128z" p-id="57035"></path></svg>

src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue

@@ -18,6 +18,10 @@
 			/>
 		</div>
 		<div class="icons">
+			<span @click.stop="onClickLock">
+				<svg-icon v-show="!layer.info.lock" name="dc-lock_0" size="15" />
+				<svg-icon v-show="layer.info.lock" name="dc-lock_1" size="15" color="#1890ff" />
+			</span>
 			<span @click.stop="onClickShowHide"
 				><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
 			/></span>
@@ -64,6 +68,10 @@
 	const onClickLayer = () => {
 		layerManager.setActiveID(props.layer.info.id)
 	}
+	const onClickLock = () => {
+		const info = props.layer.info
+		layerManager.setLayerLockById(info.id, !info.lock)
+	}
 </script>
 
 <style lang="less" scoped>

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -20,7 +20,13 @@ fabric.Object.prototype.toObject = function () {
 			arr.push(...v)
 		}
 	})
-	return this.toObject_(arr)
+	const object = this.toObject_(arr)
+	if (object.info) {
+		let lock = !!object.info.lock
+		object.evented = !lock
+		object.selectable = !lock
+	}
+	return object
 }
 
 interface CanvasInitOptions {
@@ -71,9 +77,12 @@ export class CanvasManager {
 						top: 0,
 						scaleX: 1,
 						scaleY: 1,
+						evented: false,
+						selectable: false,
 						info: {
 							id: createId("image"),
 							name: "图片图层",
+							lock: true,
 						}
 					})
 					image = img
@@ -171,7 +180,7 @@ export class CanvasManager {
 	/** 设置激活对象 */
 	setActiveObjectById(id: string) {
 		const obj = this.getObjectById(id)
-		if (obj) this.canvas.setActiveObject(obj)
+		if (obj && obj.evented) this.canvas.setActiveObject(obj)
 		this.renderAll()
 	}
 	resetZoom(animated = true, adaptive = true) {
@@ -208,13 +217,13 @@ export class CanvasManager {
 	getObjectById(id: string) {
 		return this.getObjects().find((item: any) => item?.info?.id === id)
 	}
-	getActiveObject() {
+	/** 获取选中对象 */
-		return this.getObjectById(this.layerManager.activeID.value)
+	getSelectedObject() {
+		return this.canvas.getActiveObject()
 	}
 	renderAll() {
 		this.canvas.renderAll()
 	}
-
 	deleteObjectById(id: string) {
 		const object = this.getObjectById(id)
 		if (object) {
@@ -223,6 +232,11 @@ export class CanvasManager {
 			this.renderAll()
 		}
 	}
+	/** 取消选中对象 */
+	discardActiveObject() {
+		this.canvas.discardActiveObject()
+		this.renderAll()
+	}
 	// 拖拽排序
 	dragSort(id, newIndex) {
 		this.canvas.moveTo(this.getObjectById(id), newIndex)

src/components/Canvas/DepthCanvas/manager/LayerManager.ts

@@ -41,19 +41,45 @@ export class LayerManager {
 			this.canvasManager.renderAll()
 		}
 	}
+
+	/** 设置图层显示状态 */
 	setLayerVisibleById(id, visible: boolean) {
 		const layer = this.getLayerById(id)
-		if (layer) {
-			layer.visible = visible
-		}
 		const object = this.canvasManager.getObjectById(id)
-		if (object) {
+		if (!layer || !object) return
+		layer.visible = visible
 		object.set({
 			visible: visible
 		})
 		this.canvasManager.renderAll()
+		this.stateManager.recordState()
+	}
+	/** 设置图层锁定状态 */
+	setLayerLockById(id, lock: boolean) {
+		const layer = this.getLayerById(id)
+		const object = this.canvasManager.getObjectById(id)
+		if (!layer || !object) return
+		layer.info.lock = !!lock
+		layer.evented = !lock
+		object.info.lock = !!lock
+		object.set({
+			evented: !lock,
+			selectable: !lock,
+		})
+		if (lock) {
+			// 取消选中对象
+			const e = this.canvasManager.getSelectedObject()
+			if (e) {
+				const objects = [...(e._objects || [e])]
+				if (objects.some(v => v.info?.id === object.info.id)) {
+					this.canvasManager.discardActiveObject()
 				}
 			}
+		}
+		this.canvasManager.renderAll()
+		this.stateManager.recordState()
+	}
+
 	/** 删除指定图层 */
 	deleteLayerById(id, isActive = true) {
 		this.canvasManager.deleteObjectById(id)

src/components/Canvas/DepthCanvas/manager/ToolManager.ts

@@ -117,7 +117,10 @@ export class ToolManager {
 	// 切换工具时，设置画布事件
 	setCanvasEvented(value: boolean) {
 		this.canvasManager.canvas.selection = value
-		this.canvasManager.canvas.getObjects().forEach((v) => v.evented = value)
+		this.canvasManager.canvas.getObjects().forEach((v) => {
+			if (v.info?.lock) return
+			v.evented = value
+		})
 	}
 	/** 选择工具 */
 	setupSelectTool() {

src/views/home/left-nav.vue

@@ -78,13 +78,6 @@
 				</div>
 			</div>
 		</div>
-
-		<div class="menu-item" @click="onCanvas(false)">
-			<span class="title">画布</span>
-		</div>
-		<div class="menu-item" @click="onCanvas(true)">
-			<span class="title">深度画布</span>
-		</div>
 	</div>
 </template>
 
@@ -111,12 +104,6 @@
 	const onCreateProject = () => {
 		router.push({ name: 'mainInput' })
 	}
-	const onHome = () => {}
-	const onCanvas = (depth: boolean) => {
-		const query = {}
-		if (depth) query['depth'] = '1'
-		router.push({ name: 'test', query })
-	}
 	const onHistory = () => {
 		if (isCollapse.value) {
 			globalStore.setHomeLeftNavCollapse(false)