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

<template>
  <div class="elements">
    <div class="title" style="margin: 8px 0 0 12px">{{$t('视图结构')}}</div>

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

          <t-input
            v-if="node.data.edited"
            v-model="node.data.label"
            :autofocus="true"
            @blur="onDescription(node)"
            @enter="onDescription(node)"
          />
          <span
            v-else
            @click="onActive(node.value)"
            @dblclick="node.data.edited = true"
          >
            {{ node.label }}
          </span>
        </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-tag theme="primary" variant="light-outline">
            {{ node.data.tag }}</t-tag>
          <t-tooltip class="mr-4" v-if="!node.data.locked" placement="top" :content="$t('可编辑')">
            <svg class="l-icon" aria-hidden="true" @click="lock(node, 1)">
              <use xlink:href="#l-unlock"></use>
            </svg>
          </t-tooltip>
          <t-tooltip class="mr-4" v-else-if="node.data.locked == 1" placement="top" :content="$t('禁止编辑')">
            <svg class="l-icon" aria-hidden="true" @click="lock(node, 2)">
              <use xlink:href="#l-lock"></use>
            </svg>
          </t-tooltip>
          <t-tooltip class="mr-4" v-else-if="node.data.locked == 2" placement="top" :content="$t('禁止编辑和移动')">
            <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" placement="top" :content="$t('禁止所有事件')">
            <svg class="l-icon" aria-hidden="true" @click="lock(node, 0)">
              <use xlink:href="#l-jinyong"></use>
            </svg>
          </t-tooltip>
          <browse-icon v-if="node.data.visible !== false"  @click="visible(node, false)"/>
          <browse-off-icon v-else  @click="visible(node, true)"/>
          <!-- <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-panel" style="padding: 8px 0">
      <div class="flex middle between" style="padding: 0 12px">
        <div class="title">{{$t('分组')}}</div>
        <a @click="addGroup"> +{{$t('新建分组')}}</a>
      </div>
      <div class="groups">
        <div
          v-for="(item, i) in data.groups"
          class="flex middle between hover"
          :class="{ primary: i == data.activedGroup }"
        >
          <span
            class="flex-grow"
            v-if="i != data.editedGroup"
            @click="activeGroup(i)"
            @dblclick="
              data.activedGroup = data.editedGroup = i;
              data.group = item;
            "
          >
            {{ item }}
          </span>
          <t-input
            v-else
            v-model="data.group"
            :autofocus="true"
            @blur="setGroup"
            @enter="setGroup"
          />
          <browse-icon  v-if="!data.hiddenGroups.includes(item)"   @click="visibleGroup(item, false)"/>
          <browse-off-icon v-else  @click="visibleGroup(item, true)"/>
          <!-- <t-icon
            v-if="!data.hiddenGroups.includes(item)"
            name="browse"
            @click="visibleGroup(item, false)"
          />
          <t-icon v-else name="browse-off" @click="visibleGroup(item, true)" /> -->
          <t-popconfirm @confirm="delGroup" @cancel="data.deleteGroup = undefined" :content="$t('确认删除该分组吗？')">
            <delete-icon class="ml-8" :class="{ block: i == data.deleteGroup }" @click="data.deleteGroup = i"></delete-icon>
            <!-- <t-icon
              name="delete"
              class="ml-8"
              :class="{ block: i == data.deleteGroup }"
              @click="data.deleteGroup = i"
            /> -->
          </t-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onMounted, onBeforeUnmount, reactive, ref, getCurrentInstance } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';

import { LockState, Pen } from '@meta2d/core';
import { getPenTree, inTreePanel, setChildrenVisible } from '@/services/common';
import {FolderOpenIcon,FolderIcon,ControlPlatformIcon,BrowseIcon,BrowseOffIcon,DeleteIcon} from 'tdesign-icons-vue-next';

const tree = ref<any>(null);
const data = reactive<any>({
  tree: [],
  actived: [],
  groups: [],
  hiddenGroups: [],
  scroll:{
    bufferSize: 20,
    type: 'virtual',
  }
});
const { proxy } = getCurrentInstance();
const $t = proxy.$t


onMounted(() => {
  if(window.innerHeight>800){
    data.scroll.bufferSize = 50;
  }
  meta2d.on('opened', getTree);
  meta2d.on('add', getTree);
  meta2d.on('undo', getTree);
  meta2d.on('redo', getTree);
  meta2d.on('delete', getTree);
  meta2d.on('combine', getTree);
  meta2d.on('click', getActived);
  meta2d.on('paste', getActived);
  meta2d.on('layer', layerChange);

  if (inTreePanel.timer) {
    clearTimeout(inTreePanel.timer);
    inTreePanel.timer = undefined;
  }
  inTreePanel.value = true;

  getTree();
  getActived();

  const d = meta2d.store.data as any;
  if (!d.groups) {
    d.groups = [];
  }
  data.groups = d.groups;
  getHiddenGroups();
});

const getTree = () => {
  data.tree = getPenTree();
};

const layerChange = () =>{
  getTree();
  setTimeout(() => {
    if(meta2d.store.active&&meta2d.store.active[0]){
      let index = data.tree.findIndex((item) => item.value === meta2d.store.active[0].id);
      tree.value?.scrollToElement({index:index-5});
    }
  }, 500);
}

const getHiddenGroups = () => {
  data.groups.forEach((item) => {
    if (
      meta2d.store.data.pens.some(
        (pen) =>
          !pen.parentId && pen.tags?.includes(item) && pen.visible === false
      )
    ) {
      data.hiddenGroups.push(item);
    }
  });
};

const getActived = () => {
  data.actived = [];
  if (meta2d.store.active && meta2d.store.active.length) {
   
    for (const pen of meta2d.store.active) {
      data.actived.push(pen.id);
    }

    const element = document.body.querySelector(
      `[data-value="${data.actived[0]}"]`
    );
    if (element) {
      element.scrollIntoView({behavior:'smooth', block: 'nearest' });
    } else {
      // setTimeout(() => {
      //   const element = document.body.querySelector(
      //     `[data-value="${data.actived[0]}"]`
      //   );
      //   element && element.scrollIntoView({ block: 'center' });
      // }, 500);
      // let pens = meta2d.store.data.pens.filter((pen) => !pen.parentId);
      // let index = pens.findIndex((item) => item.id === meta2d.store.active[0].id);
      let index = data.tree.findIndex((item) => item.value === meta2d.store.active[0].id);
      tree.value?.scrollToElement({index:index-5});
    }
  }
};

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,
    tag: (node as any).tag,
  };

  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: any) => {
  if (!value) {
    return;
  }

  const pens: Pen[] = [];
  for (const item of meta2d.store.data.pens) {
    // for (const v of value) {
    if (item.id === value) {
      pens.push(item);
    }
    // }
  }
  meta2d.active(pens, true);
  if (!pens[0].calculative?.inView) {
    meta2d.gotoView(pens[0]);
    meta2d.resize();
  }
  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);
};

const visibleGroup = (item, v: boolean) => {
  if (v) {
    let index = data.hiddenGroups.indexOf(item);
    if (index !== -1) {
      data.hiddenGroups.splice(index, 1);
    }
  } else {
    data.hiddenGroups.push(item);
  }
  let pens = meta2d.store.data.pens.filter(
    (pen) => !pen.parentId && pen.tags?.includes(item)
  );
  pens.forEach((pen) => {
    meta2d.setValue(
      { id: pen.id, visible: v },
      { render: false, doEvent: false }
    );
  });
  meta2d.render();
};

const onDescription = (node: any) => {
  node.data.edited = false;
  node.setData({ label: node.data.label });
  meta2d.setValue({
    id: node.value,
    description: node.data.label,
  });
};

const addGroup = () => {
  const i = data.groups.length + 1;
  data.group = $t('组') + i;
  data.groups.push(data.group);
  data.activedGroup = data.editedGroup = i;
};

const activeGroup = (i: number) => {
  data.activedGroup = i;
  const group = data.groups[i];
  const pens: Pen[] = [];
  for (const item of meta2d.store.data.pens) {
    if (item.tags?.includes(group)) {
      pens.push(item);
    }
  }
  meta2d.active(pens, false);
  meta2d.render();
};

const setGroup = () => {
  if (data.groups[data.editedGroup] === data.group) {
    data.editedGroup = undefined;
    return;
  }

  if (data.groups.includes(data.group)) {
    MessagePlugin.error($t('已经存在相同分组！'));
    return;
  }

  for (const item of meta2d.store.data.pens) {
    // @ts-ignore
    if (item.group === data.groups[data.editedGroup]) {
      // @ts-ignore
      item.group === data.group;
    }
  }

  data.groups[data.editedGroup] = data.group;
  data.editedGroup = undefined;
};

const delGroup = () => {
  for (const item of meta2d.store.data.pens) {
    // @ts-ignore
    if (item.group === data.groups[data.deleteGroup]) {
      // @ts-ignore
      delete item.group;
    }
  }
  data.groups.splice(data.deleteGroup, 1);
  data.deleteGroup = undefined;
};

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);
  meta2d.off('click', getActived);
  meta2d.off('paste', getActived);
  meta2d.off('layer', layerChange);

  inTreePanel.timer = setTimeout(() => {
    inTreePanel.value = false;
  }, 500);
});
</script>
<style lang="postcss" scoped>
.elements {
  display: flex;
  flex-direction: column;
  height: 100%;

  & > * {
    overflow-y: auto;
    width: 100%;
  }
  .t-tree {
    .t-tag {
      background-color: #4583ff33;
      position: absolute;
      right: 45px;
      width: 45.6px;
      height: 21.6px;
      font-size: 10px;
      line-height: 14px;
      transform: scale(0.83333);
      transform-origin: 0 0;
    }
  }

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

  .groups {
    height: calc(100% - 24px);
    overflow-y: auto;
    padding: 0 12px 16px 12px;
    & > div {
      height: 30px;
      line-height: 30px;

      svg {
        display: none;
        &.block {
          display: block;
        }
      }

      &:hover {
        svg {
          display: block;
        }
      }
    }
  }
}
</style>