绘制形状

src/components/Canvas/DepthCanvas/components/depth-header-tools.vue

@@ -42,11 +42,13 @@
 	const toolManager = inject('toolManager') as any
 	const objectManager = inject('objectManager') as any
 	const canvasManager = inject('canvasManager') as any
+	const layerManager = inject('layerManager') as any
 	const tool = computed(() => toolManager.currentTool.value)
 	const historyIndex = computed(() => stateManager.historyIndex.value)
 	const historyList = computed(() => stateManager.historyList.value)
 	const isUndo = computed(() => !historyList.value[historyIndex.value - 1])
 	const isRedo = computed(() => !historyList.value[historyIndex.value + 1])
+	const activeLayerId = computed(() => layerManager.activeID.value)
 	const tools = ref([
 		{ name: OperationType.SELECT, icon: 'dc-select', iconSize: 16, disabled: ref(false) },
 		{ name: OperationType.PAN, icon: 'dc-move', iconSize: 18, disabled: ref(false) },
@@ -60,7 +62,42 @@
 			on: () => onImageClick()
 		},
 		{ name: OperationType.SELECTBOX, icon: 'dc-selectbox', iconSize: 16, disabled: ref(false) },
-		{ name: OperationType.RECTANGLE, icon: 'dc-rectangle', iconSize: 16, disabled: ref(false) },
+		{
+			name: OperationType.RECTANGLE,
+			icon: 'dc-rectangle',
+			iconSize: 16,
+			disabled: ref(false)
+		},
+		{
+			name: OperationType.LINE,
+			icon: 'dc-line',
+			iconSize: 16,
+			disabled: ref(false)
+		},
+		{
+			name: OperationType.ARROW,
+			icon: 'dc-arrow',
+			iconSize: 16,
+			disabled: ref(false)
+		},
+		{
+			name: OperationType.ELLIPSE,
+			icon: 'dc-ellipse',
+			iconSize: 16,
+			disabled: ref(false)
+		},
+		{
+			name: OperationType.TRIANGLE,
+			icon: 'dc-triangle',
+			iconSize: 16,
+			disabled: ref(false)
+		},
+		{
+			name: OperationType.STAR,
+			icon: 'dc-star',
+			iconSize: 16,
+			disabled: ref(false)
+		},
 		{ type: 'line' },
 		{
 			name: OperationType.UNDO,
@@ -75,6 +112,20 @@
 			iconSize: 18,
 			disabled: isRedo,
 			on: () => stateManager.redoState()
+		},
+		{
+			name: 'copy',
+			icon: 'dc-copy',
+			iconSize: 16,
+			disabled: computed(() => !activeLayerId.value),
+			on: () => onCopyActiveLayer()
+		},
+		{
+			name: 'delete',
+			icon: 'dc-delete',
+			iconSize: 18,
+			disabled: computed(() => !activeLayerId.value),
+			on: () => onDeleteActiveLayer()
 		}
 	])
 	const onClickTool = (tool: any) => {
@@ -91,6 +142,14 @@
 		objectManager.setBlendMode(id, BlendMode.MULTIPLY)
 		objectManager.setFillRepeat(id)
 	}
+	const onCopyActiveLayer = () => {
+		if (!activeLayerId.value) return
+		layerManager.copyLayerById(activeLayerId.value)
+	}
+	const onDeleteActiveLayer = () => {
+		if (!activeLayerId.value) return
+		layerManager.deleteLayerById(activeLayerId.value)
+	}
 	const onWorkbench = async () => {
 		exportCanvasToImage(canvasManager.canvas).then((url) => {
 			emit('workbench', { url })