update

src/controller/MatController.ts

@@ -1,6 +1,63 @@
+import { PackMat } from "@queenjs-modules/queditor/objects";
+import { queenApi } from "queenjs";
+
 export class MatController {
-  changeMatGroupIndex(key: string, matsGroup: MatsMatchComp) {
-    console.log("changeMatGroupIndex");
+  scrollEl: any = undefined;
+
+  async renameMatGroup(matsGroup: MatsMatchComp) {
+    const cusName = await queenApi.showInput({
+      title: "重命名",
+      defaultValue: matsGroup.cusName || matsGroup.name,
+    });
+    if (!cusName) return;
+    matsGroup.cusName = cusName;
+  }
+
+  async lockMatGroup() {
+    //
+  }
+
+  async clearMatGroup(matsGroup: MatsMatchComp) {
+    matsGroup.matIds = [];
+    matsGroup.index = -1;
+  }
+
+  async renameGroupMat(mat: PackMat) {
+    const name = await queenApi.showInput({
+      title: "重命名",
+      defaultValue: mat.name,
+    });
+    if (!name) return;
+    mat.name = name;
+  }
+
+  initScroll(el: any) {
+    console.log("initScroll ");
+  }
+
+  unbindScroll() {
+    console.log("unbindScroll ");
+  }
+
+  initEvent() {
+    console.log("init evnt");
+  }
+
+  destroy() {
+    console.log("destroy evnt");
+  }
+
+  matGroupAction(key: string, matsGroup: MatsMatchComp) {
+    console.log("matGroupAction", key, matsGroup);
+  }
+
+  matItemAction(
+    key: string,
+    matsGroup: MatsMatchComp,
+    index: number,
+    currentMats: any
+  ) {
+    console.log("matGroupAction", key, matsGroup, index, currentMats);
   }
 
   saveMatch() {
@@ -8,22 +65,23 @@ export class MatController {
   }
 
   findMatById(matId: string): any {
-    console.log(" findMatById ");
+    console.log(" findMatById ", matId);
   }
 
   findProductById(productId: string): any {
-    console.log(" findProductById ");
+    console.log(" findProductById ", productId);
   }
 
   switchGroupMatIndex(matsGroup: any, index: number) {
-    console.log(" switchGroupIndex ");
+    console.log(" switchGroupMatIndex ", matsGroup, index);
   }
 
   isGroupActive(matsGroup: MatsMatchComp): boolean {
+    console.log("matsGroup: ", matsGroup);
     return false;
   }
 
-  switchGroup(matsGroup: MatsMatchComp) {
+  switchGroupIndex(matsGroup: MatsMatchComp) {
     console.log("matsGroup: ", matsGroup);
     //
   }

src/modules/match/module/actions/match.ts

@@ -62,26 +62,6 @@ export const matchAction = MatchModule.action({
     this.store.addMatchCategory(group);
   },
 
-  async renameMatGroup(matsGroup) {
-    const cusName = await queenApi.showInput({
-      title: "重命名",
-      defaultValue: matsGroup.cusName || matsGroup.name,
-    });
-    if (!cusName) return;
-    matsGroup.cusName = cusName;
-    // console.log(this.store.designDetail);
-  },
-
-  async clearMatGroup(matsGroup: MatsMatchComp) {
-    matsGroup.matIds = [];
-    matsGroup.index = -1;
-  },
-  async lockMatGroup() {
-    //
-  },
-  async switchMatGroup() {
-    //
-  },
   async renameProductGroup(prodGroup) {
     const name = await queenApi.showInput({
       title: "重命名",
@@ -90,6 +70,7 @@ export const matchAction = MatchModule.action({
     if (!name) return;
     prodGroup.group = name;
   },
+
   async deleteProductGroup(record) {
     if (this.store.currentGroupList.length == 1) {
       queenApi.messageError("至少保留一个分组!");
@@ -107,6 +88,7 @@ export const matchAction = MatchModule.action({
     );
     this.store.designDetail.prodMatchs.splice(i, 1);
   },
+
   async clearProductGroup() {
     //
   },
@@ -114,6 +96,7 @@ export const matchAction = MatchModule.action({
   dropProduct(product, extraData) {
     //
   },
+
   async deleteGroupMat(matsGroup: MatsMatchComp, index) {
     // const res = await queenApi.showConfirm({
     //   content: `删除后不可恢复，确认要删除?`,
@@ -126,13 +109,4 @@ export const matchAction = MatchModule.action({
     }
     //
   },
-
-  async renameGroupMat(mat) {
-    const name = await queenApi.showInput({
-      title: "重命名",
-      defaultValue: mat.name,
-    });
-    if (!name) return;
-    mat.name = name;
-  },
 });

src/pages/match/Editor/components/Canvas3d.tsx

@@ -1,66 +0,0 @@
-import { css } from "@linaria/core";
-import { Spin } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
-
-// const Canvas3d = defineComponent({
-//   setup() {
-//     const hooks = useScenePackPreview(match.assetPack, "");
-
-//     return () => (
-//       <Drop name="canvas3d" class={canvasStyle} type={["asset3d.*"]}>
-//         <canvas ref={hooks.canvasRef} />
-//       </Drop>
-//     );
-//   },
-// });
-
-export default defineComponent({
-  setup() {
-    const state = reactive({ loaded: false });
-
-    // match.initStyleEditor().then((loaded) => {
-    //   if (loaded) {
-    //     state.loaded = loaded;
-    //   }
-    // });
-
-    return () => (
-      <div class={rootstyles}>
-        <Spin />
-      </div>
-    );
-    // return () => (state.loaded ? <Canvas3d /> : <Spin />);
-  },
-});
-
-const rootstyles = css`
-  position: relative;
-  background-color: #dddddd;
-  .content_canvas {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-const canvasStyle = css`
-  transition: all 0.2s ease;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #eee;
-
-  canvas {
-    width: 100%;
-    height: 100%;
-  }
-
-  .canvas3d-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    background-color: #fff;
-  }
-`;

src/pages/match/Editor/components/RightPanel/Mat/UI.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
 import { any, array } from "vue-types";
 
 import { MatController } from "@/controller/MatController";
@@ -13,27 +13,31 @@ export default defineComponent({
     controller: any<MatController>().isRequired,
   },
   setup(props) {
+    const compRef = ref();
+
+    onMounted(() => props.controller.initScroll(compRef.value));
+
+    onBeforeUnmount(() => props.controller.unbindScroll());
+
     return () => {
       const { controller, sourceData } = props;
 
       return (
-        <PanelCard title="部件库" onSave={controller.saveMatch}>
+        <PanelCard title="部件库" onSave={controller.saveMatch} ref={compRef}>
           {sourceData.map((matsGroup: MatsMatchComp, index: number) => {
             const isGroupActive = controller.isGroupActive(matsGroup);
 
             return (
               <PanelGroup
                 key={index}
-                class="cursor-pointer"
+                class="JSDrop cursor-pointer"
                 type="asset3d.mat"
                 title={matsGroup.cusName || matsGroup.name}
                 tools={["rename", "lock", "clear"]}
                 target={matsGroup}
                 active={isGroupActive}
-                onAction={(key) =>
-                  controller.changeMatGroupIndex(key, matsGroup)
-                }
-                onClick={() => controller.switchGroup(matsGroup)}
+                onAction={(key) => controller.matGroupAction(key, matsGroup)}
+                onClick={() => controller.switchGroupIndex(matsGroup)}
               >
                 <List data={matsGroup.matIds || []} columns={5} gap="5px">
                   {{
@@ -47,16 +51,14 @@ export default defineComponent({
                           onClick={() =>
                             controller.switchGroupMatIndex(matsGroup, index)
                           }
-                          // onAction={(key: string) => {
-                          //   switch (key) {
-                          //     case "delete":
-                          //       match.actions.deleteGroupMat(matsGroup, index);
-                          //       break;
-                          //     case "rename":
-                          //       match.actions.renameGroupMat(currentMats);
-                          //       break;
-                          //   }
-                          // }}
+                          onAction={(key: string) =>
+                            controller.matItemAction(
+                              key,
+                              matsGroup,
+                              index,
+                              currentMats
+                            )
+                          }
                         />
                       );
                     },

src/pages/match/Editor/components/RightPanel/Mat/controller.tsx

@@ -3,6 +3,7 @@ import { MatchModule } from "@/modules/match";
 import { QueditorModule } from "@queenjs-modules/queditor";
 import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
 import { PackMat } from "@queenjs-modules/queditor/objects";
+import { queenApi } from "queenjs";
 
 export default function createController(
   match: MatchModule,
@@ -41,16 +42,32 @@ export default function createController(
     queditor.actions.updatePackProductCompMat(targetCom, PackMat.create());
   }
 
-  ctrl.changeMatGroupIndex = (key: string, matsGroup: MatsMatchComp) => {
+  ctrl.matItemAction = (
+    key: string,
+    matsGroup: MatsMatchComp,
+    index: number,
+    currentMats: PackMat
+  ) => {
+    switch (key) {
+      case "delete":
+        match.actions.deleteGroupMat(matsGroup, index);
+        break;
+      case "rename":
+        ctrl.renameGroupMat(currentMats);
+        break;
+    }
+  };
+
+  ctrl.matGroupAction = (key: string, matsGroup: MatsMatchComp) => {
     switch (key) {
       case "rename":
-        match.actions.renameMatGroup(matsGroup);
+        ctrl.renameMatGroup(matsGroup);
         break;
       case "lock":
-        match.actions.lockMatGroup();
+        ctrl.lockMatGroup();
         break;
       case "clear":
-        match.actions.clearMatGroup(matsGroup);
+        ctrl.clearMatGroup(matsGroup);
         // removePackMat? 是否删除面料列表数据
         switchComp(matsGroup.name);
         clearCompMat(matsGroup);
@@ -82,58 +99,97 @@ export default function createController(
     return queditor.store.currActiveProdComp?.name == matsGroup.name;
   };
 
-  ctrl.switchGroup = (matsGroup: MatsMatchComp) => {
+  ctrl.switchGroupIndex = (matsGroup: MatsMatchComp) => {
     switchComp(matsGroup.name || "");
   };
 
-  // queditor.controls.drager.on(
-  //   "drop:selfDrop",
-  //   async (event: DragEvent, { type, data }: any, extraData: any) => {
-  //     const dropData = await data();
-  //     // console.error("dropData: ", dropData);
-  //     if (type == "asset3d.mat") {
-  //       dropMat(dropData, extraData);
-  //     } else if (type == "asset3d.mesh") {
-  //       dropMesh(dropData, extraData);
-  //     }
-  //   }
-  // );
-
-  // function dropMesh(dropData: any, target: any) {
-  //   console.log("dropData: ", dropData, target);
-  //   //
-  // }
-
-  // // 拖拽面料
-  // function dropMat(mat: IMaterial, extraData: any) {
-  //   const currGroup = findmatsGroup(extraData);
-  //   if (!currGroup.matIds) currGroup.matIds = [];
-
-  //   // TODO 判断重复拖拽
-  //   if (currGroup.matIds.includes(mat.id)) {
-  //     queenApi.messageError("不能重复添加色卡");
-  //     return;
-  //   }
-  //   // update
-  //   const targetPro = queditor.store.pack.products.find(
-  //     (p) => p.id == extraData.productId
-  //   );
-  //   const targetCom = targetPro?.components.find(
-  //     (c) => c.name == extraData.name
-  //   );
-  //   if (!targetCom) return;
-  //   queditor.actions.updatePackProductCompMat(targetCom, mat, true);
-  //   currGroup.matIds.push(mat.id);
-  //   currGroup.index = currGroup.matIds.length - 1;
-  // }
-
-  // function findmatsGroup(target: MatsMatchComp) {
-  //   const currGroup = match.store.menuOptions.sourceData.mat.find(
-  //     (r: MatsMatchComp) =>
-  //       r.name == target.name && r.productId == target.productId
-  //   );
-  //   return currGroup;
-  // }
+  ctrl.unbindScroll = () => {
+    const app = queditor.controls.queen3dCtrl.queen3d.getAppInstance();
+    app.unbind("tap:click");
+    ctrl.scrollEl = undefined;
+  };
+
+  ctrl.initScroll = (el) => {
+    const app = queditor.controls.queen3dCtrl.queen3d.getAppInstance();
+
+    app.on("tap:click", (geom: any, clicked: boolean) => {
+      if (!clicked) return;
+      const scrollEl = el.$el.querySelector(".content");
+      ctrl.scrollEl = scrollEl;
+      scrollToElement();
+    });
+  };
+
+  function scrollToElement() {
+    if (!ctrl.scrollEl) return;
+    const doms = ctrl.scrollEl.querySelectorAll(".JSDrop");
+    if (!doms.length) return;
+    const index = match.store.menuOptions.sourceData.mat.findIndex(
+      (d: any) => d.name == queditor.store.currActiveProdComp?.name
+    );
+
+    ctrl.scrollEl.scrollTo({
+      top: doms[index].offsetTop - doms[0].offsetTop,
+      behavior: "smooth",
+    });
+  }
+
+  ctrl.initEvent = () => {
+    // drag to mesh
+    // queditor.actions.on("updatePackProductCompMat:success", (...args) => {
+    //   console.error("updatePackProductCompMat:success*************");
+    //   scrollToElement();
+    // });
+
+    // drag to group
+    queditor.controls.drager.on(
+      "drop:selfDrop",
+      async (event: DragEvent, { type, data }: any, extraData: any) => {
+        const dropData = await data();
+        if (type == "asset3d.mat") {
+          dropMat(dropData, extraData);
+        } else if (type == "asset3d.mesh") {
+          dropMesh(dropData, extraData);
+        }
+      }
+    );
+  };
+
+  ctrl.destroy = () => {
+    queditor.controls.drager.unbind("drop:selfDrop");
+  };
+
+  function dropMesh(dropData: any, target: any) {
+    console.log("dropData: ", dropData, target);
+    //
+  }
+
+  // 拖拽面料
+  function dropMat(mat: PackMat, extraData: any) {
+    const currGroup = findmatsGroup(extraData);
+    if (!currGroup.matIds) currGroup.matIds = [];
+
+    if (currGroup.matIds.includes(mat.id)) {
+      queenApi.messageError("不能重复添加色卡");
+      return;
+    }
+    // update mat
+    const targetPro = queditor.helper.findProductDef(extraData.productId);
+    const targetCom = findCompDef(targetPro, extraData.name);
+    if (!targetCom) return;
+
+    queditor.actions.updatePackProductCompMat(targetCom, mat, true);
+    currGroup.matIds.push(mat.id);
+    currGroup.index = currGroup.matIds.length - 1;
+  }
+
+  function findmatsGroup(target: MatsMatchComp) {
+    const currGroup = match.store.menuOptions.sourceData.mat.find(
+      (r: MatsMatchComp) =>
+        r.name == target.name && r.productId == target.productId
+    );
+    return currGroup;
+  }
 
   return ctrl;
 }

src/pages/match/Editor/components/RightPanel/Mat/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent, onBeforeUnmount, onMounted } from "vue";
 
 import { useMatch } from "@/modules/match";
 import { useQueditor } from "@queenjs-modules/queditor";
@@ -12,6 +12,10 @@ export default defineComponent({
 
     const ctrl = createController(match, queditor);
 
+    onMounted(() => ctrl.initEvent());
+
+    onBeforeUnmount(() => ctrl.destroy());
+
     return () => {
       return (
         <PanelUI

src/pages/match/Editor/index.tsx

@@ -41,6 +41,8 @@ export default defineComponent({
       queditor.actions.initPack(match.store.designDetail.scenePack.source);
       queditor.store.setCurrScene(0);
       expViewer.store.setEditNodeUid(match.store.designDetail._id);
+      const queen3d = queditor.controls.queen3dCtrl.queen3d;
+      queen3d.showGizmo(true);
     };
 
     return () => (