aida_front/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue

<script setup>
import { ref, inject, computed, onMounted, onUnmounted } from "vue";
import { findLayerRecursively, OperationType } from "../utils/layerHelper";
import ToolButton from "../../ExistsImageList/ToolButton.vue";

const emit = defineEmits([
  "tool-selected",
  "trigger-image-upload",
  "add-text",
  "undo",
  "redo",
  "toggle-minimap",
  "zoom-in",
  "zoom-out",
  "toggle-red-green-mode",
  "undo-redo-status-changed",
]);

const props = defineProps({
  activeTool: String,
  minimapEnabled: {
    type: Boolean,
    default: true,
  },
  isRedGreenMode: {
    type: Boolean,
    default: false,
  },
});

const commandManager = inject("commandManager");
const layerManager = inject("layerManager"); // 图层管理器

const lastSelectLayerId = inject("lastSelectLayerId"); // 上次选中的图层ID

// 撤销/重做按钮状态
const canUndo = ref(false);
const canRedo = ref(false);

// 颜色填充相关
const currLayerId = ref(null); // 当前图层ID
const fillColor = ref("#ffffff"); // 默认填充颜色
const fillColorRef = ref(null);

// 监听命令管理器状态变化
commandManager.setChangeCallback((info) => {
  canUndo.value = info.canUndo;
  canRedo.value = info.canRedo;

  emit("undo-redo-status-changed", {
    canUndo: canUndo.value,
    canRedo: canRedo.value,
    commandManager,
  });
});

// 撤销/重做操作
const undoFun = () => commandManager.undo();
const redoFun = () => commandManager.redo();

// 普通模式工具列表
const normalToolsList = ref([
  {
    id: "undo",
    title: "Undo",
    action: undo,
    icon: { name: "CUndo", size: "20" },
    class: "undo-btn",
  },
  {
    id: "redo",
    title: "Redo",
    action: redo,
    icon: { name: "CRedo", size: "20" },
    class: "redo-btn",
  },
  {
    id: OperationType.DRAW,
    title: "Drawing",
    action: () => selectTool(OperationType.DRAW),
    icon: { name: "CBrush", size: "24" },
    class: "draw-btn",
  },
  {
    id: OperationType.ERASER,
    title: "Eraser",
    action: () => selectTool(OperationType.ERASER),
    icon: { name: "CEraser", size: "22" },
    class: "eraser-btn",
  },
  {
    id: "fillColor",
    title: "Fill Color",
    action: () => fillColorRef.value.click(),
    icon: { name: "CThemeColor", size: "22" },
    class: "fill-color-btn",
  },
  {
    id: OperationType.PAN,
    title: "Pan",
    action: () => selectTool(OperationType.PAN),
    icon: { name: "CHand", size: "28" },
    class: "hand-btn",
  },
  {
    id: OperationType.SELECT,
    title: "Select",
    action: () => selectTool(OperationType.SELECT),
    icon: { name: "CSelect", size: "28" },
    class: "select-btn",
  },
  {
    id: OperationType.LIQUIFY,
    title: "Liquefying",
    action: () => selectTool(OperationType.LIQUIFY),
    icon: { name: "CLiquefying", size: "32" },
    class: "liquify-btn",
  },
  {
    id: OperationType.LASSO,
    title: "Lasso",
    action: () => selectTool(OperationType.LASSO),
    icon: { name: "CLasso", size: "28" },
    class: "lasso-btn",
    activeList: [
      OperationType.LASSO,
      OperationType.LASSO_RECTANGLE,
      OperationType.AREA_CUSTOM,
      OperationType.AREA_RECTANGLE,
    ],
  },
  {
    id: "zoomIn",
    title: "Zoom In",
    action: zoomIn,
    icon: { name: "CZoomIn", size: "30" },
    class: "zoom-in-btn",
  },
  {
    id: "zoomOut",
    title: "Zoom Out",
    action: zoomOut,
    icon: { name: "CZoomOut", size: "26" },
    class: "zoom-out-btn",
  },
  {
    id: "upload",
    title: "Upload Image",
    action: triggerImageUpload,
    icon: { name: "CUpload", size: "26" },
    class: "upload-btn",
  },
  {
    id: "addText",
    title: "Add Text",
    action: () => addText(),
    icon: { name: "CFont", size: "20" },
    class: "text-btn",
  },
]);

// 红绿图模式工具列表
const redGreenToolsList = ref([
  {
    id: "undo",
    title: "Undo",
    action: undo,
    icon: { name: "CUndo", size: "20" },
    class: "undo-btn",
  },
  {
    id: "redo",
    title: "Redo",
    action: redo,
    icon: { name: "CRedo", size: "20" },
    class: "redo-btn",
  },
  {
    id: OperationType.RED_BRUSH,
    title: "Red Brush (R)",
    action: () => selectTool(OperationType.RED_BRUSH, true),
    icon: { name: "CBrush", size: "24" },
    class: "red-brush-btn",
    style: { color: "#FF0000" },
  },
  {
    id: OperationType.GREEN_BRUSH,
    title: "Green Brush (G)",
    action: () => selectTool(OperationType.GREEN_BRUSH, true),
    icon: { name: "CBrush", size: "24" },
    class: "green-brush-btn",
    style: { color: "#00AA00" },
  },
  {
    id: OperationType.ERASER,
    title: "Eraser (E)",
    action: () => selectTool(OperationType.ERASER, true),
    icon: { name: "CEraser", size: "22" },
    class: "eraser-btn",
  },
  {
    id: "zoomIn",
    title: "Zoom In",
    action: zoomIn,
    icon: { name: "CZoomIn", size: "30" },
    class: "zoom-in-btn",
  },
  {
    id: "zoomOut",
    title: "Zoom Out",
    action: zoomOut,
    icon: { name: "CZoomOut", size: "26" },
    class: "zoom-out-btn",
  },
]);

// 根据模式选择工具列表
const toolsList = computed(() => {
  return props.isRedGreenMode ? redGreenToolsList.value : normalToolsList.value;
});

function selectTool(tool, isRedGreenMode = false) {
  emit("tool-selected", tool, isRedGreenMode);
}

function triggerImageUpload() {
  emit("trigger-image-upload");
}

function addText() {
  emit("add-text");
}

function undo() {
  if (!canUndo.value) return;
  undoFun();
  emit("undo", {
    canUndo: canUndo.value,
    canRedo: canRedo.value,
    commandManager,
  });
}

function redo() {
  if (!canRedo.value) return;
  emit("redo", {
    canUndo: canUndo.value,
    canRedo: canRedo.value,
    commandManager,
  });
  redoFun();
}

function toggleMinimap() {
  emit("toggle-minimap", !props.minimapEnabled);
}

function zoomIn() {
  emit("zoom-in");
}

function zoomOut() {
  emit("zoom-out");
}

function toggleRedGreenMode() {
  emit("toggle-red-green-mode");
}

// 键盘快捷键处理
function handleKeyDown(event) {
  // 在红绿图模式下处理特定快捷键
  if (props.isRedGreenMode) {
    const key = event.key.toUpperCase();

    // 当处于输入状态时不触发快捷键
    if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
      return;
    }

    switch (key) {
      case "R":
        selectTool(OperationType.RED_BRUSH, true);
        event.preventDefault();
        break;
      case "G":
        selectTool(OperationType.GREEN_BRUSH, true);
        event.preventDefault();
        break;
      case "E":
        selectTool(OperationType.ERASER, true);
        event.preventDefault();
        break;
    }
  }
}

// 填充颜色选择器
function fillColorChange() {
  layerManager.fillLayerBackground(lastSelectLayerId.value, fillColor.value, true);
}

onMounted(() => {
  // 添加键盘事件监听
  window.addEventListener("keydown", handleKeyDown);
});

onUnmounted(() => {
  // 移除键盘事件监听
  window.removeEventListener("keydown", handleKeyDown);
});

// 处理工具按钮点击
const handleToolClick = (tool) => {
  tool.action();
};
</script>

<template>
  <div class="tools-sidebar">
    <input
      class="fillColor-input"
      v-model="fillColor"
      ref="fillColorRef"
      type="color"
      @change="fillColorChange"
      style="width: 0; height: 0; opacity: 0"
    />

    <ToolButton
      v-for="tool in toolsList"
      :key="tool.id"
      :tool="tool"
      :active-tool="activeTool"
      :can-undo="canUndo"
      :can-redo="canRedo"
      @click="handleToolClick"
    />

    <!-- 自定义工具栏按钮插槽 -->
    <slot name="customTools" :tool-button-props="{ activeTool, canUndo, canRedo }" />
  </div>
</template>

<style scoped>
.tools-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 10px;
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
  user-select: none;
  min-width: 58px;
  height: 100%;
}

.red-green-mode {
  background-color: #fff4f4;
}

.mode-indicator {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
  background-color: #ffcccc;
  color: #a33;
  font-size: 14px;
  text-align: center;
}

.mode-label {
  font-weight: bold;
}

.mode-hint {
  font-size: 12px;
  margin-top: 4px;
}
</style>