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

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) {
-			object.set({
-				visible: visible
-			})
-			this.canvasManager.renderAll()
-		}
+		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() {