|
@@ -1,13 +1,13 @@
|
|
|
|
+import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
|
|
import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
|
|
import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
|
|
import { css } from "@linaria/core";
|
|
import { css } from "@linaria/core";
|
|
import { Image } from "@queenjs/ui";
|
|
import { Image } from "@queenjs/ui";
|
|
import { useReactive } from "@queenjs/use";
|
|
import { useReactive } from "@queenjs/use";
|
|
import { Tree } from "ant-design-vue";
|
|
import { Tree } from "ant-design-vue";
|
|
-import { defineComponent, effect } from "vue";
|
|
|
|
|
|
+import { defineComponent, watch } from "vue";
|
|
import { string } from "vue-types";
|
|
import { string } from "vue-types";
|
|
import { useEditor } from "../../../..";
|
|
import { useEditor } from "../../../..";
|
|
import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
|
|
import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
|
|
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
|
|
|
|
|
|
|
|
type TreeItem = {
|
|
type TreeItem = {
|
|
key: string;
|
|
key: string;
|
|
@@ -25,7 +25,7 @@ export const CompTree = defineComponent({
|
|
expandedKeys: [] as string[],
|
|
expandedKeys: [] as string[],
|
|
treeData() {
|
|
treeData() {
|
|
const rootComp = helper.findRootComp();
|
|
const rootComp = helper.findRootComp();
|
|
-
|
|
|
|
|
|
+
|
|
function getCompChildren(ids: string[]): TreeItem[] {
|
|
function getCompChildren(ids: string[]): TreeItem[] {
|
|
return ids.map((id) => {
|
|
return ids.map((id) => {
|
|
const comp = helper.findComp(id) as DesignComp;
|
|
const comp = helper.findComp(id) as DesignComp;
|
|
@@ -44,35 +44,44 @@ export const CompTree = defineComponent({
|
|
},
|
|
},
|
|
}));
|
|
}));
|
|
|
|
|
|
-
|
|
|
|
|
|
+ watch(
|
|
|
|
+ () => store.currCompId,
|
|
|
|
+ () => {
|
|
|
|
+ state.expandedKeys = store.currCompId
|
|
|
|
+ ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
|
|
|
|
+ : [];
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
|
|
return () => {
|
|
return () => {
|
|
-
|
|
|
|
- state.expandedKeys = store.currCompId ? helper.getCompTrees(store.currCompId).map((comp) => comp.id):[];
|
|
|
|
return (
|
|
return (
|
|
- <Tree
|
|
|
|
- class={treeStyle}
|
|
|
|
- treeData={ state.treeData}
|
|
|
|
- v-model={[state.expandedKeys, "expandedKeys"]}
|
|
|
|
- selectedKeys={[store.currCompId]}
|
|
|
|
- blockNode={true}
|
|
|
|
- onSelect={(ids) =>{
|
|
|
|
- const id = ids[0] as string || state.expandedKeys.at(-2) || "root";
|
|
|
|
- if (helper.isStreamCardChild(id)) {
|
|
|
|
- controls.selectCtrl.selecteObjs([new CompObject(store.compMap[id])])
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- actions.pickComp(id)
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- {{
|
|
|
|
- title: (data: any) => {
|
|
|
|
- return <CompNode title={data.title} id={data.key} />;
|
|
|
|
- },
|
|
|
|
- }}
|
|
|
|
- </Tree>
|
|
|
|
- );
|
|
|
|
- }},
|
|
|
|
|
|
+ <Tree
|
|
|
|
+ class={treeStyle}
|
|
|
|
+ treeData={state.treeData}
|
|
|
|
+ v-model={[state.expandedKeys, "expandedKeys"]}
|
|
|
|
+ selectedKeys={[store.currCompId]}
|
|
|
|
+ blockNode={true}
|
|
|
|
+ onSelect={(ids) => {
|
|
|
|
+ const id =
|
|
|
|
+ (ids[0] as string) || state.expandedKeys.at(-2) || "root";
|
|
|
|
+ if (helper.isStreamCardChild(id)) {
|
|
|
|
+ controls.selectCtrl.selecteObjs([
|
|
|
|
+ new CompObject(store.compMap[id]),
|
|
|
|
+ ]);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ actions.pickComp(id);
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ {{
|
|
|
|
+ title: (data: any) => {
|
|
|
|
+ return <CompNode title={data.title} id={data.key} />;
|
|
|
|
+ },
|
|
|
|
+ }}
|
|
|
|
+ </Tree>
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
+ },
|
|
});
|
|
});
|
|
|
|
|
|
const CompNode = defineComponent({
|
|
const CompNode = defineComponent({
|