{{ t('general-setting') }}
-
+
{{ t('language-setting') }}
-
-
-
-
+
+
+
+
+
+
-
+
@@ -89,8 +95,9 @@
-
{{ t('wavecolor') }}
-
{{ t('wavecolor') }}
+
+
+
{{ t('search-scope') }}
-
-
-
-
+
+
+
+
+
+
-
-
+
@@ -204,6 +214,7 @@ watch(() => wavecolor.currentOptionIndex, () => {
console.log(wavecolor.currentOptionIndex);
});
+// 更新默认波形颜色
watch(() => wavecolor.colors, () => {
const colorString = wavecolor.colors[wavecolor.currentOptionIndex];
const rgba = rgba2WebglColor(colorString);
@@ -212,7 +223,8 @@ watch(() => wavecolor.colors, () => {
const waveRender = globalLookup.getWaveRender();
const glColorIndex = wavecolor.glColorMap[currentOption.value];
const colorUpdaters = [{ index: glColorIndex, rgba }];
- if (glColorIndex === 2) { // 默认情况下， value = 0 和 value = 1 保持一致
+ if (glColorIndex === 2) {
+ // 默认情况下， value = 0 和 value = 1 保持一致
colorUpdaters.push({ index: 3, rgba });
}
waveRender.updateGLColor(colorUpdaters, { updateMask: true });
diff --git a/src/components/sidebar/color-picker.js b/src/components/sidebar/color-picker.js
new file mode 100644
index 0000000..68dd1fa
--- /dev/null
+++ b/src/components/sidebar/color-picker.js
@@ -0,0 +1,30 @@
+import { gl_Colors } from '@/hook/wave-view/render-utils';
+import { reactive } from 'vue';
+
+// 用于管理当前信号 link 和对应颜色索引的映射关系
+// 如果 link 不在下表中，则使用默认的颜色索引
+// 默认颜色请参考 render-utils.js 中有关 gl_Colors_template 的定义
+export const userSignalColorMap = new Map();
+
+// 当前选中波形目前的颜色
+export const colorPickerManage = reactive({
+ currentSelecteIndex: -1
+});
+
+/**
+ *
+ * @param {WireItem} signal
+ */
+export function updateColorPickerManage(signal) {
+ if (userSignalColorMap.has(signal.link)) {
+ colorPickerManage.currentSelecteIndex = userSignalColorMap.get(signal.link);
+ } else {
+ // 找到默认的配色
+ if (signal.size === 1) {
+ colorPickerManage.currentSelecteIndex = 2;
+ } else {
+ colorPickerManage.currentSelecteIndex = 5;
+ }
+ }
+}
+
diff --git a/src/components/sidebar/color-picker.vue b/src/components/sidebar/color-picker.vue
new file mode 100644
index 0000000..502f3fd
--- /dev/null
+++ b/src/components/sidebar/color-picker.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/sidebar/exist-group.js b/src/components/sidebar/exist-group.js
new file mode 100644
index 0000000..6fcc68c
--- /dev/null
+++ b/src/components/sidebar/exist-group.js
@@ -0,0 +1,18 @@
+import { globalLookup } from "@/hook/global";
+import { reactive } from "vue";
+
+// 从 globalLookup.currentWiresRenderView 中可以获取当前的分组情况
+export function getCurrentGroups() {
+ const groups = globalLookup.currentWiresRenderView.filter(view => view.renderType === 1);
+ return groups;
+}
+
+export const existGroup = reactive({
+ display: false,
+ show() {
+ this.display = true;
+ },
+ hide() {
+ this.display = false;
+ }
+});
\ No newline at end of file
diff --git a/src/components/sidebar/exist-group.vue b/src/components/sidebar/exist-group.vue
new file mode 100644
index 0000000..d442c13
--- /dev/null
+++ b/src/components/sidebar/exist-group.vue
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+ {{ getItemName(item) }}
+
+
+
+
+
+ {{ t('context-menu.group.empty') }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/sidebar/group-context-menu.vue b/src/components/sidebar/group-context-menu.vue
new file mode 100644
index 0000000..01ffed5
--- /dev/null
+++ b/src/components/sidebar/group-context-menu.vue
@@ -0,0 +1,168 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/sidebar/group-item.vue b/src/components/sidebar/group-item.vue
new file mode 100644
index 0000000..38d26b9
--- /dev/null
+++ b/src/components/sidebar/group-item.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+ {{ props.view.groupInfo.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/sidebar/handle-contextmenu.js b/src/components/sidebar/handle-contextmenu.js
new file mode 100644
index 0000000..fd5f1f6
--- /dev/null
+++ b/src/components/sidebar/handle-contextmenu.js
@@ -0,0 +1,255 @@
+import { globalLookup } from "@/hook/global";
+import { computed, nextTick, reactive } from "vue";
+import { updateColorPickerManage } from "./color-picker";
+import { WaveContainerView } from "@/hook/wave-container-view";
+
+/**
+ * @namespace contextmenu
+ */
+export const contextmenu = reactive({
+ show: false,
+ width: 300,
+ x: 0,
+ y: 0,
+
+ /**
+ * @type {WaveRenderSidebarItem | undefined}
+ */
+ currentView: undefined,
+
+ /**
+ * @type {WireItem | undefined}
+ */
+ currentWire: undefined,
+
+ /**
+ * @type {number}
+ */
+ currentWireIndex: -1,
+
+ isSameSignal(view) {
+ if (this.currentWire) {
+ return this.currentWire.link === view.signalInfo.link;
+ }
+ return false;
+ }
+});
+
+export const contextmenuStyle = computed(() => ({
+ left: contextmenu.x + 'px',
+ top: contextmenu.y + 'px'
+}));
+
+/**
+ *
+ * @param {MouseEvent} event
+ * @param {WaveRenderSidebarItem} view
+ * @param {number | null} index 为 null 说明 handleContextmenu 在 group 内部被调用
+ */
+export function handleContextmenu(event, view, index) {
+ groupcontextmenu.show = false;
+ contextmenu.x = event.x + 10 + window.scrollX;
+ contextmenu.y = event.clientY - 10 + window.scrollY;
+ const realSignal = globalLookup.link2CurrentWires.get(view.signalInfo.link);
+
+ contextmenu.currentView = view;
+ contextmenu.currentWire = realSignal;
+ contextmenu.show = true;
+
+ updateColorPickerManage(realSignal);
+ if (index !== null) {
+ contextmenu.currentWireIndex = index;
+ groupcontextmenu.updateHook = updateCurrentGroupContextMenu(event, view);
+ }
+
+ // 延时 300 ms 是因为这里 menu 出现会使用 一个 0.35 秒的入场动画
+ setTimeout(() => {
+ getContextMenuWidth();
+ }, 200);
+}
+
+
+/**
+ * @description 将当前 signal-item 相连的 group-item 更新进 groupcontextmenu.currentGroupCardEl
+ * @param {MouseEvent} event
+ * @param {WaveRenderSidebarItem} view
+ * @param {Promise
}
+ */
+async function updateCurrentGroupContextMenu(event, view) {
+ const node = event.target;
+ const container = findSignalItemEl(node);
+ if (container) {
+ const groupItem = container.nextSibling;
+ groupcontextmenu.currentGroupView = view;
+ groupcontextmenu.currentGroupCardEl = groupItem.childNodes[0];
+ return true;
+ }
+ return false;
+}
+
+/**
+ *
+ * @param {HTMLElement | undefined} node
+ * @returns {HTMLElement | undefined}
+ */
+function findSignalItemEl(node) {
+ const maxFindTimes = 10;
+ for (let i = 0; ; ++ i) {
+ if (i >= maxFindTimes || node === undefined) {
+ return undefined;
+ }
+ if (node.className.startsWith('signal-item')) {
+ return node;
+ }
+ node = node.parentNode;
+ }
+}
+
+function getContextMenuWidth() {
+ let width = 300;
+ const menus = document.querySelectorAll('.sidebar-context-menu');
+ if (menus) {
+ const menu = menus[0];
+ width = menu.offsetWidth || menu.clientWidth;
+ }
+ contextmenu.width = width;
+ return width;
+}
+
+
+// 用于魔改取色器的
+export const colorPicker = reactive({
+ display: false,
+ show() {
+ this.display = true;
+ },
+ hide() {
+ this.display = false;
+ }
+});
+
+
+export const groupcontextmenu = reactive({
+ show: false,
+ x: 0,
+ y: 0,
+
+ /**
+ * @type {WaveRenderSidebarItem | undefined}
+ */
+ currentGroupView: undefined,
+
+ /**
+ * @type
+ */
+ currentGroupCardEl: null,
+ groupNameInput: null,
+ updateHook: null
+});
+
+export const groupcontextmenuStyle = computed(() => ({
+ left: groupcontextmenu.x + 'px',
+ top: groupcontextmenu.y + 'px'
+}));
+
+/**
+ *
+ * @param {WaveRenderSidebarItem} view
+ */
+export function handleGroupClick(view) {
+ view.groupInfo.collapse = !view.groupInfo.collapse;
+}
+
+/**
+ *
+ * @param {HTMLElement | undefined} node
+ * @returns {HTMLElement | undefined}
+ */
+function findGroupCardEl(node) {
+ const maxSearchTime = 3;
+ for (let i = 0;; ++ i) {
+ // 往外搜索最多三次，找到 group-card 这个类的 span
+ if (i >= maxSearchTime || node === undefined || node === null) {
+ return undefined;
+ }
+ if (node.className.includes('group-card')) {
+ return node;
+ }
+ node = node.parentNode;
+ }
+}
+
+function getScreenPosition(element) {
+ let x = 0;
+ let y = 0;
+
+ // 遍历元素及其所有祖先元素
+ while (element) {
+ x += element.offsetLeft; // 累加 offsetLeft
+ y += element.offsetTop; // 累加 offsetTop
+ element = element.offsetParent; // 移动到下一个祖先元素
+ }
+
+ // 考虑到页面滚动
+ x -= window.pageXOffset;
+ y -= window.pageYOffset;
+
+ return { x: x, y: y };
+}
+
+/**
+ *
+ * @param {MouseEvent} event
+ * @param {WaveRenderSidebarItem} view
+ * @param {number} index
+ */
+export function handleGroupContextmenu(event, view, index) {
+ contextmenu.show = false;
+ const node = event.target;
+ const groupCard = findGroupCardEl(node);
+ if (groupCard) {
+ const {x, y} = getScreenPosition(groupCard);
+ groupcontextmenu.x = x + groupCard.offsetWidth + 10;
+ groupcontextmenu.y = y;
+
+ groupcontextmenu.currentGroupView = view;
+ groupcontextmenu.show = true;
+
+ if (groupcontextmenu.groupNameInput) {
+ groupcontextmenu.groupNameInput.focus();
+ }
+ }
+}
+
+
+export async function handleGroupContextmenuFromSignalItem() {
+ contextmenu.show = false;
+
+ if (groupcontextmenu.updateHook) {
+ // const ok = await groupcontextmenu.updateHook;
+
+ groupcontextmenu.x = contextmenu.x + 10 + window.scrollX;
+ groupcontextmenu.y = contextmenu.y - 5 + window.scrollY;
+ groupcontextmenu.show = true;
+
+ if (groupcontextmenu.groupNameInput) {
+ groupcontextmenu.groupNameInput.focus();
+ }
+ // if (ok && groupcontextmenu.currentGroupCardEl) {
+ // // const groupCard = groupcontextmenu.currentGroupCardEl;
+ // // const {x, y} = getScreenPosition(groupCard);
+
+
+ // }
+ }
+}
+
+
+export function deleteSignalByView() {
+ const signal = contextmenu.currentWire;
+ if (signal) {
+ WaveContainerView.delete(signal);
+ }
+
+ contextmenu.show = false;
+}
\ No newline at end of file
diff --git a/src/components/sidebar/handle-drag.js b/src/components/sidebar/handle-drag.js
new file mode 100644
index 0000000..6ac34b8
--- /dev/null
+++ b/src/components/sidebar/handle-drag.js
@@ -0,0 +1,7 @@
+import { globalLookup } from "@/hook/global";
+import { updateCurrentGroups } from "./manage-group";
+
+export function onUpdate() {
+ globalLookup.render();
+ updateCurrentGroups();
+}
diff --git a/src/components/sidebar/index.vue b/src/components/sidebar/index.vue
index 9829382..f9ebab0 100644
--- a/src/components/sidebar/index.vue
+++ b/src/components/sidebar/index.vue
@@ -1,85 +1,84 @@
-