visualization-design/src/views/components/ElementTree.vue

<template>
  <div class="elements">
    <div class="title" style="margin: 8px 0 0 12px">图纸结构</div>
    <t-tree
      class="flex-grow"
      ref="tree"
      :data="data.tree"
      v-model:actived="data.actived"
      activable
      :expand-parent="true"
      @active="onActive"
      style="padding: 0 4px 8px 0"
    >
      <template #label="{ node }: any">
        <div class="flex middle" :class="{ gray: node.data.visible === false }">
          <template v-if="node.getChildren()">
            <t-icon v-if="node.expanded" name="folder-open" />
            <t-icon v-else name="folder" />
          </template>
          <t-icon v-else name="control-platform" />

          {{ node.label }}
        </div>
      </template>
      <template #operations="{ node }: any">
        <div
          class="flex middle operations"
          :class="{
            gray: node.data.visible === false,
            show: node.data.visible === false || node.data.locked,
          }"
          style="width: 36px; height: 16px"
        >
          <t-tooltip
            class="mr-4"
            v-if="!node.data.locked"
            content="可编辑"
            placement="top"
          >
            <t-icon name="lock-off" @click="lock(node, 1)" />
          </t-tooltip>
          <t-tooltip
            class="mr-4"
            v-else-if="node.data.locked == 1"
            content="禁止编辑"
            placement="top"
          >
            <t-icon name="lock-on" @click="lock(node, 2)" />
          </t-tooltip>
          <t-tooltip
            class="mr-4"
            v-else-if="node.data.locked == 2"
            content="禁止编辑和移动"
            placement="top"
          >
            <svg class="l-icon" aria-hidden="true" @click="lock(node, 10)">
              <use xlink:href="#l-wufayidong"></use>
            </svg>
          </t-tooltip>
          <t-tooltip
            class="mr-4"
            v-else-if="node.data.locked == 10"
            content="禁止所有事件"
            placement="top"
          >
            <svg class="l-icon" aria-hidden="true" @click="lock(node, 0)">
              <use xlink:href="#l-jinyong"></use>
            </svg>
          </t-tooltip>

          <t-icon
            v-if="node.data.visible !== false"
            name="browse"
            @click="visible(node, false)"
          />
          <t-icon v-else name="browse-off" @click="visible(node, true)" />
        </div>
      </template>
    </t-tree>
    <div class="groups">
      <div class="flex middle between">
        <div class="title" style="margin-bottom: 8px">图层分组</div>
        <a> +新建分组</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
import { LockState, Pen } from '@meta2d/core';

const tree = ref<any>(null);
const data = reactive<any>({
  tree: [],
  actived: [],
});

onBeforeMount(() => {
  meta2d.on('opened', getTree);
  meta2d.on('add', getTree);
  meta2d.on('undo', getTree);
  meta2d.on('redo', getTree);
  meta2d.on('delete', getTree);
  meta2d.on('combine', getTree);

  getTree();
});

const getTree = () => {
  data.tree = [];
  for (const item of meta2d.store.data.pens) {
    if (item.parentId) {
      continue;
    }
    const elem = calcElem(item);
    elem && data.tree.push(elem);
  }
};

const calcElem = (node: Pen) => {
  if (!node) {
    return;
  }

  const elem: any = {
    label: (node as any).description || node.name,
    value: node.id,
    locked: node.locked,
    visible: node.visible,
  };

  if (!node.children) {
    return elem;
  }

  elem.children = [];
  for (const id of node.children) {
    const child = calcElem(meta2d.store.pens[id]);
    child && elem.children.push(child);
  }

  return elem;
};

const onActive = (value: string[]) => {
  if (!value.length) {
    return;
  }

  const pens: Pen[] = [];
  for (const item of meta2d.store.data.pens) {
    for (const v of value) {
      if (item.id === v) {
        pens.push(item);
      }
    }
  }
  meta2d.active(pens, false);
  meta2d.render();
};

const lock = (node: any, v: LockState) => {
  node.data.locked = v;
  meta2d.setValue({
    id: node.value,
    locked: v,
  });
};

const visible = (node: any, v: boolean) => {
  node.data.visible = v;
  setChildrenVisible(node, v);
  const pen = meta2d.findOne(node.value);
  pen && meta2d.setVisible(pen, v);
};

function setChildrenVisible(node: any, v: boolean) {
  const children = node.getChildren();
  if (children && children.length > 0) {
    for (const child of children) {
      child.data.visible = v;
      setChildrenVisible(child, v);
    }
  }
}

onBeforeUnmount(() => {
  meta2d.off('opened', getTree);
  meta2d.off('add', getTree);
  meta2d.off('undo', getTree);
  meta2d.off('redo', getTree);
  meta2d.off('delete', getTree);
  meta2d.off('combine', getTree);
});
</script>
<style lang="postcss" scoped>
.elements {
  display: flex;
  flex-direction: column;
  height: 100%;

  & > * {
    overflow-y: auto;
    width: 100%;

    &::-webkit-scrollbar {
      width: 2px;
      height: 6px;
    }
  }

  .groups {
    flex-shrink: 0;
    height: 240px;
    border-top: 1px solid var(--color-border);
    padding: 8px 12px;
  }
}
</style>