|
|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
<div class="elements">
|
|
|
+ <div class="title" style="margin: 8px 0 0 12px">图纸结构</div>
|
|
|
<t-tree
|
|
|
class="flex-grow"
|
|
|
ref="tree"
|
|
|
@@ -8,19 +9,73 @@
|
|
|
activable
|
|
|
:expand-parent="true"
|
|
|
@active="onActive"
|
|
|
- style="margin: 8px 0"
|
|
|
+ style="padding: 0 4px 8px 0"
|
|
|
>
|
|
|
- <template #icon="{ node }">
|
|
|
- <template v-if="!node.data.leaf">
|
|
|
- <t-icon v-if="node.expanded" name="chevron-down" />
|
|
|
- <t-icon v-else name="chevron-right" />
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- <template #label="{ node }">
|
|
|
- <div class="flex middle">
|
|
|
+ <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">
|
|
|
@@ -32,40 +87,112 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { onBeforeMount, reactive, ref } from 'vue';
|
|
|
+import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue';
|
|
|
+import { LockState, Pen } from '@meta2d/core';
|
|
|
|
|
|
const tree = ref<any>(null);
|
|
|
const data = reactive<any>({
|
|
|
- tree: [
|
|
|
- {
|
|
|
- label: '图元1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '图元1.1',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '图元1.2',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- label: '图元2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '图元2.1',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '图元2.2',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
+ tree: [],
|
|
|
actived: [],
|
|
|
});
|
|
|
|
|
|
-onBeforeMount(() => {});
|
|
|
+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);
|
|
|
+};
|
|
|
|
|
|
-const onActive = (value: string[]) => {};
|
|
|
+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 {
|
|
|
@@ -75,6 +202,12 @@ const onActive = (value: string[]) => {};
|
|
|
|
|
|
& > * {
|
|
|
overflow-y: auto;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 2px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.groups {
|
Alsmile