del useless

src/modules/assets/index.ts

@@ -1,3 +0,0 @@
-import { ModuleRoot } from 'queenjs/framework';
-
-export default class extends ModuleRoot {}

src/modules/dbassets/http.ts

@@ -1,9 +0,0 @@
-import { ModuleHttp } from "queenjs/framework";
-const dbId = "628b4ae8633d10f8e3658557";
-export default class AbHttp extends ModuleHttp {
-  getDbassetDetail = (defineId: string, id: string) => {
-    return this.request(`/detail/${dbId}/${defineId}/${id}`, {
-      method: "GET",
-    });
-  };
-}

src/modules/dbassets/index.ts

@@ -1,39 +0,0 @@
-import { ModuleRoot } from "queenjs/framework";
-import AbHttp from "./http";
-
-export default class Dbassets extends ModuleRoot {
-  designId: string = "";
-  designScope: string = "";
-  designFrom: "mall" | "mallc" | "collocate" | "editor" = "editor";
-
-  assetConfId: string = "";
-  assetId: string = "";
-  assetPack: any = "";
-  AbHttp = new AbHttp(this);
-  async load(id: string, sid: string) {
-    const pack = await this.loadDesignConfig(id, sid);
-
-    return pack != null;
-  }
-
-  async loadDesignConfig(id: string, sid: string) {
-    const pack = await this.AbHttp.getDbassetDetail(sid, id);
-
-    this.assetConfId = sid;
-    this.assetId = id;
-
-    this.assetPack = pack.result;
-
-    return pack.result;
-  }
-
-  onInit() {
-    super.onInit();
-
-    const queen3d = this.ctx.pack.queen3d;
-
-    queen3d.on("prod:click", (v) => {
-      console.log("tap:click", v);
-    });
-  }
-}

src/modules/index.ts

@@ -1,6 +1,3 @@
-export { default as assets } from "./assets";
 export { default as user } from "./user";
-export { default as websiteUI } from "./websiteUI";
 export { default as list } from "./list";
-export { default as dbassets } from "./dbassets";
 export { default as pack } from "queentree/module-pack";

src/modules/websiteUI.ts

@@ -1,27 +0,0 @@
-import { ModuleRoot, StateRoot } from "queenjs/framework";
-
-class State extends StateRoot {
-  tabs = [1, 2, 3];
-  currTabIndex = 0;
-  currTabItem = this.computed((state) => {
-    return state.tabs[state.currTabIndex];
-  });
-}
-
-export default class extends ModuleRoot {
-  state = new State().reactive();
-
-  switchTab(index: number) {
-    this.state.currTabIndex = index;
-  }
-
-  async uploadImage() {
-    // uploader.requestConfig = {
-    //   prefix: "/assetcenter",
-    //   baseURL: "http://192.168.110.207:7800/spu3d",
-    // };
-
-    // const ret = await uploader.uploadOneImage();
-    // console.log(ret);
-  }
-}

src/pages/frame3d/routes/frame3d/packcontext.ts

@@ -1,17 +0,0 @@
-import { pack, list } from "@/modules";
-import { createCtxCreator } from "queenjs/framework";
-import { vue_adapter } from "queenjs/framework/adapter/vue";
-
-const modules = {
-  pack, list
-};
-export const Pack3dCtx = createCtxCreator(modules, {
-  adapter: { vue_adapter },
-});
-export const usePack3dCtx = Pack3dCtx.use;
-
-export const CreatePack3dCtx = function() {
-    return createCtxCreator(modules, {
-        adapter: { vue_adapter },
-    });
-}

src/pages/website/context.ts

@@ -1,16 +1,11 @@
-import { assets, user, websiteUI, list, dbassets, pack } from "@/modules";
+import { user, list, pack } from "@/modules";
 import { createCtxCreator } from "queenjs/framework";
 import { vue_adapter } from "queenjs/framework/adapter/vue";
-import { UIRoot } from "queenjs/framework/extends/ui";
 
 const modules = {
   pack,
-  assets,
   user,
-  websiteUI,
-  UIRoot,
   list,
-  dbassets,
 };
 
 export const websiteCtx = createCtxCreator(modules, {
@@ -28,12 +23,4 @@ websiteCtx.setConfig({
           : "http://127.0.0.1:7777/museum",
     },
   },
-  dbassets: {
-    httpConfig: {
-      baseURL:
-        process.env.NODE_ENV === "production"
-          ? "http://treetest.3dqueen.cn/assetcenter"
-          : "http://treetest.3dqueen.cn/assetcenter",
-    },
-  },
 });

src/pages/website/routes/frame3d/index.tsx

@@ -1,99 +0,0 @@
-import { css } from "@linaria/core";
-
-import { defineComponent, onMounted, reactive, ref } from "vue";
-import { Provider, CtxContainer } from "queenjs/ui";
-import { usePack3dCtx, Pack3dCtx } from "./packcontext";
-import { object, string } from "vue-types";
-import { useScenePackPreview } from "queentree/hooks/useScenePackPreview";
-import { getQuery } from "queenjs/framework/utils/methods/uri";
-const Canvas3d = defineComponent({
-  props: {
-    pack: object<any>(),
-  },
-  emits: ["init"],
-  setup(props, { emit }) {
-    const state = reactive({ loaded: false });
-    const { pack } = usePack3dCtx();
-    pack.state.showLoading = false;
-    const hooks = useScenePackPreview(props.pack, "1", {
-      onPackLoaded: () => {
-        const app = pack.queen3d.getAppInstance();
-        if (!app) return;
-
-        // app.setNoZoom(true);
-        app.setNoPan(true);
-
-        app.getFeaturesManager()?.enableGizmo(false);
-        // app.setAutoRotateMode(true);
-
-        pack.queen3d.picker.enable = false;
-        pack.queen3d.redraw();
-        state.loaded = true;
-        emit("init", true);
-      },
-      backgroundTransparent: true,
-    });
-
-    return () => (
-      <canvas
-        ref={hooks.canvasRef}
-        class={`${CanvasStyle} ${state.loaded ? "loaded" : null}`}
-      />
-    );
-  },
-});
-
-const Root = defineComponent({
-  props: {
-    meshId: string(),
-  },
-  setup(props) {
-    const packRef = ref();
-    const state = reactive({ loaded: false });
-    const { list } = usePack3dCtx();
-    onMounted(async () => {
-      packRef.value = await list.actions.loadPack3d({
-        meshId: props.meshId,
-      } as any);
-      state.loaded = true;
-    });
-    return () =>
-      state.loaded ? (
-        <Canvas3d
-          pack={packRef.value}
-          onInit={(v) => {
-            //   state.spin = v;
-          }}
-        />
-      ) : (
-        <div>loading...</div>
-      );
-  },
-});
-export default defineComponent({
-  setup() {
-    const query = getQuery();
-    const meshId = query.id;
-    return () => (
-      <CtxContainer ctx={Pack3dCtx}>
-        <Provider>
-          <Root meshId={meshId} />
-        </Provider>
-      </CtxContainer>
-    );
-  },
-});
-
-const rootStyle = css`
-  padding: 30px;
-  background-color: red;
-`;
-
-const CanvasStyle = css`
-  width: 100%;
-  height: 100%;
-  visibility: hidden;
-  &.loaded {
-    visibility: inherit;
-  }
-`;

src/pages/website/routes/frame3d/packcontext.ts

@@ -1,17 +0,0 @@
-import { pack, list } from "@/modules";
-import { createCtxCreator } from "queenjs/framework";
-import { vue_adapter } from "queenjs/framework/adapter/vue";
-
-const modules = {
-  pack, list
-};
-export const Pack3dCtx = createCtxCreator(modules, {
-  adapter: { vue_adapter },
-});
-export const usePack3dCtx = Pack3dCtx.use;
-
-export const CreatePack3dCtx = function() {
-    return createCtxCreator(modules, {
-        adapter: { vue_adapter },
-    });
-}

src/pages/website/routes/home/index.tsx

@@ -1,24 +1,162 @@
 import { css } from "@linaria/core";
-import { PageListController } from "queenjs/framework/utils";
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import { useCtx } from "../../context";
+import { ShowItem } from "@/modules/list/state";
+import Dialog from "../list/dialog";
+import { conformsTo, divide } from "lodash";
+import dialog from "@/modules/list/actions/dialog";
+import { nextTick } from "process";
 
 export default defineComponent({
   setup() {
     const ctx = useCtx();
-    const { user, websiteUI } = ctx;
-    const list = new PageListController(ctx);
+    const { list } = ctx;
+    const canvasRef = ref();
+    const cacheCanvasRef = ref();
+    const state = reactive({
+      scrollElement: [] as any,
+      dialogId: 0,
+    });
+
+    function clickItem(e: any, itemIndex: number) {
+      list.actions.addDialog(e, itemIndex);
+    }
+    const rows: number[] = [];
+    for (let i = 0; i < list.state.totalRow; i++) {
+      rows.push(i);
+    }
+
+    const rootRef = ref<HTMLElement>();
+
+    onMounted(async () => {
+      await list.actions.initListCanvasDatas(
+        rootRef.value?.clientWidth as number,
+        rootRef.value?.clientHeight as number
+      );
+
+      list.actions.startListRunning(canvasRef.value);
+
+      return;
+
+      canvasRef.value.width = rootRef.value?.clientWidth;
+      canvasRef.value.height = rootRef.value?.clientHeight;
+      let cacheCanvas = document.createElement("canvas");
+      cacheCanvas.width = rootRef.value?.clientWidth;
+      cacheCanvas.height = rootRef.value?.clientHeight;
+      cacheCanvasRef.value = cacheCanvas;
+      canvasEvent();
+      canvasDraw();
+      scrollStart();
+    });
+
+    let timmerRef = ref<any>(0);
+    let speedRef = ref<number>(1);
+    onUnmounted(() => {
+      if (timmerRef.value) {
+        cancelAnimationFrame(timmerRef.value);
+      }
+    });
+
+    const scrollStart = () => {
+      list.state.scrollOffset += speedRef.value;
+      if (list.state.scrollOffset == list.state.repeatWidth) {
+        cancelAnimationFrame(timmerRef.value);
+        return false;
+      }
+      list.actions.updateCanvasItem(speedRef.value);
+      canvasDraw();
+      timmerRef.value = requestAnimationFrame(scrollStart);
+    };
+    const canvasDraw = () => {
+      let items = list.state.items;
+      let renderW = canvasRef.value.width;
+      let renderH = canvasRef.value.height;
+      let cacheCtx = cacheCanvasRef.value.getContext("2d");
+      cacheCtx.clearRect(0, 0, renderW + 1, renderH + 1);
+      items.map((item, i) => {
+        let image = new Image();
+        image.src = item.url;
+
+        cacheCtx.drawImage(image, item.x, item.y, item.w, item.h);
+        cacheCtx.font = "12px sans-serif";
+        cacheCtx.fillStyle = "#FFFFFF";
+        cacheCtx.textBaseline = "top";
+        let text =
+          item.name.length > 10 ? item.name.substring(0, 9) + "..." : item.name;
+        cacheCtx.fillText(text, item.x, item.y + item.h + 6);
+      });
+      let ctx = canvasRef.value.getContext("2d");
+      ctx.clearRect(0, 0, renderW + 1, renderH + 1);
+      ctx.drawImage(cacheCanvasRef.value, 0, 0, renderW, renderH);
+    };
+    const clickCol = (e: any) => {
+      let x = e.clientX;
+      let totalRow = list.state.totalRow;
+      const paddingW = list.state.paddingW;
+      const parentWidth = list.state.parentWidth;
+      for (let i = 0; i < totalRow; i++) {
+        const rowCount = list.state.rowCount;
+        const start = i * rowCount;
+        const end = start + rowCount;
+        const ItemWidth = Math.round(
+          (parentWidth - (totalRow + 1) * paddingW) / totalRow
+        );
+        const nowx = (i + 1) * paddingW + i * ItemWidth;
+        if (x > nowx && x < nowx + ItemWidth) {
+          let itemIndex = findItem(e, start, end);
+          clickItem(e, itemIndex);
+          return false;
+        }
+      }
+    };
+    const findItem = (e: any, start: number, end: number) => {
+      for (let i = start; i < end; i++) {
+        const item = list.state.items[i];
+        const x = e.clientX;
+        const y = e.clientY;
+        if (
+          x >= item.x &&
+          x <= item.x + item.w &&
+          y >= item.y &&
+          y <= item.y + item.h
+        ) {
+          return i;
+        }
+      }
+    };
+    const canvasEvent = () => {
+      canvasRef.value.addEventListener("click", (e) => {
+        clickCol(e);
+      });
+    };
+    const MoveStart = (id: number) => {
+      state.dialogId = id;
+    };
+
     return () => (
-      <div class={rootStyle}>
-        首页{user.state.userInfo.username}
-        <button onClick={user.actions.create}>getUserInfo</button>
-        <button onClick={() => websiteUI.uploadImage()}>上传图片</button>
+      <div class={rootStyle} ref={rootRef}>
+        <canvas ref={canvasRef} />
+
+        {list.state.dialogs.map((item) => (
+          <Dialog data={item} key={item.id} onMove={MoveStart} />
+        ))}
       </div>
     );
   },
 });
 
 const rootStyle = css`
-  padding: 30px;
-  background-color: red;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  background-color: #3f322c;
+  overflow: hidden;
+  user-select: none;
+  flex-flow: row;
+  canvas {
+    width: 100%;
+    height: 100%;
+    /* background-color: #fff; */
+  }
 `;

src/pages/website/routes/index.ts

@@ -1,8 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 import home from "./home";
 
-import pageUI from "./pageUI";
-import TestEffect from "./test/TestEffect";
 import list from "./list";
 import list2 from "./list/list2";
 import list3 from "./list/list3";
@@ -15,22 +13,9 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
     name: "Home",
-    redirect: "/list4",
     component: home,
     children: [],
   },
-  {
-    path: "/test",
-    name: "Test",
-    component: TestEffect,
-    children: [],
-  },
-  {
-    path: "/ui",
-    name: "UI",
-    component: pageUI,
-    children: [],
-  },
   {
     path: "/list",
     name: "list",

src/pages/website/routes/list/item.tsx

@@ -13,18 +13,18 @@ export default defineComponent({
   },
   emits: ["close", "move", "touch"],
   setup(props, { emit }) {
-    const ctx = useCtx();
-    const state = reactive({
-      descShow: false,
-      loaded: false,
-      spin: false,
-    });
+    // const ctx = useCtx();
+    // const state = reactive({
+    //   descShow: false,
+    //   loaded: false,
+    //   spin: false,
+    // });
     const moveRef = ref<HTMLElement>();
-    const editorRef= ref<HTMLElement>()
+    // const editorRef = ref<HTMLElement>();
     onMounted(() => {
-      if (props.data.desc) {
-        initQuillEditor();
-      }
+      // if (props.data.desc) {
+      //   initQuillEditor();
+      // }
       moveRef.value?.addEventListener("touchstart", (e) => {
         let targetTouch = e.targetTouches[0];
         emit("touch", { x: targetTouch.clientX, y: targetTouch.clientY });
@@ -34,34 +34,34 @@ export default defineComponent({
         emit("move", true);
       });
     });
-    const descTigger = () => {
-      state.descShow = !state.descShow;
-    };
+    // const descTigger = () => {
+    //   state.descShow = !state.descShow;
+    // };
 
-    const initQuillEditor = () => {
-      let quill = new Quill(editorRef.value, {
-        theme: "snow",
-        readOnly: true,
-        modules: {
-          toolbar: false,
-        },
-      });
-      let delta = JSON.parse(props.data.desc);
-      quill.setContents(delta);
-      quill.update();
-    };
-    const getExt = (url: string) => {
-      const nameIndex = url.lastIndexOf("/") + 1;
-      const name = url.substring(nameIndex);
-      const ext = name.substring(name.indexOf(".") + 1);
-      return ext;
-    };
+    // const initQuillEditor = () => {
+    //   let quill = new Quill(editorRef.value, {
+    //     theme: "snow",
+    //     readOnly: true,
+    //     modules: {
+    //       toolbar: false,
+    //     },
+    //   });
+    //   let delta = JSON.parse(props.data.desc);
+    //   quill.setContents(delta);
+    //   quill.update();
+    // };
+    // const getExt = (url: string) => {
+    //   const nameIndex = url.lastIndexOf("/") + 1;
+    //   const name = url.substring(nameIndex);
+    //   const ext = name.substring(name.indexOf(".") + 1);
+    //   return ext;
+    // };
 
     return () => {
       const { data } = props;
       return (
         <div class={ItemStyle}>
-          <div class={"name"}>{data?.name}</div>
+          {/* <div class={"name"}>{data?.name}</div>
           {data?.subName && <div class={"sub_name"}>{data?.subName}</div>}
           {data?.type == "img" && (
             <div class={"images"}>
@@ -85,28 +85,26 @@ export default defineComponent({
                 您的浏览器不支持 video 标签。
               </video>
             </div>
-          )}
+          )} */}
 
-          {data?.type == "3D" && (
-            <div class={"view_3d"}>
-              <iframe
-                src={
-                  "./frame3d.html#/?id=" +
-                  props.data.meshId +
-                  "&dialogid=" +
-                  props.dialogId
-                }
-                allowtransparency="true"
-                style={{ backgroundColor: "transparent" }}
-                frameborder="0"
-                width="100%"
-                height="100%"
-                scrolling="no"
-              />
-            </div>
-          )}
+          <div class={"view_3d"}>
+            <iframe
+              src={
+                "./frame3d.html#/?id=" +
+                props.data.meshId +
+                "&dialogid=" +
+                props.dialogId
+              }
+              allowtransparency="true"
+              style={{ backgroundColor: "transparent" }}
+              frameborder="0"
+              width="100%"
+              height="100%"
+              scrolling="no"
+            />
+          </div>
 
-          {data?.desc && (
+          {/* {data?.desc && (
             <div class={"desc_view"}>
               <div class={`desc_editor ${state.descShow ? "show" : ""}`}>
                 <div ref={editorRef}></div>
@@ -121,14 +119,14 @@ export default defineComponent({
                 </div>
               )}
             </div>
-          )}
+          )} */}
 
           <div class={"btm_btn_view"}>
-            {state.descShow && (
+            {/* {state.descShow && (
               <div class={"btn"} onClick={descTigger}>
                 <img src={require("@/assets/btn_back.png")} />
               </div>
-            )}
+            )} */}
             <div class={"btn"} ref={moveRef}>
               <img src={require("@/assets/btn_move.png")} />
             </div>
@@ -190,7 +188,7 @@ const ItemStyle = css`
     position: relative;
     margin: 0 auto;
     width: 100%;
-    height: 3.4rem;
+    height: 4rem;
     .loading {
       position: absolute;
       top: 50%;

src/pages/website/routes/pageUI/index.less

@@ -1,14 +0,0 @@
-.inficon {
-  display: inline-block;
-  color: inherit;
-  font-style: normal;
-  line-height: 0;
-  text-align: center;
-  text-transform: none;
-  vertical-align: -0.125em;
-  text-rendering: optimizeLegibility;
-  svg {
-    width: 1em;
-    height: 1em;
-  }
-}

src/pages/website/routes/pageUI/index.tsx

@@ -1,56 +0,0 @@
-import { IconWait } from "@queenjs/icons";
-import { Input } from "ant-design-vue";
-import {
-  Button,
-  Form,
-  Image,
-  List,
-  Loadmore,
-  Modal,
-  Splitline,
-} from "queenjs/ui";
-import { defineComponent } from "vue";
-
-export default defineComponent(() => {
-  function showModal() {
-    Modal.form({
-      title: "danger",
-      formData: {},
-      content: (
-        <>
-          <Form.Item path="name" child={() => <Input />} />
-        </>
-      ),
-    });
-  }
-
-  return () => (
-    <div class="page">
-      <Button type="primary" onClick={showModal}>
-        123
-      </Button>
-      <Splitline height="20px" width="1px" />
-      <Image src="xxx" />
-      <List data={["xxx", "ccc", "bbb"]}>
-        {{
-          item(data: any) {
-            return <div style="font-size: 14px;">{data}</div>;
-          },
-          loadmore(props: any) {
-            return <Loadmore {...props} />;
-          },
-        }}
-      </List>
-      <IconWait class="xxxx" />
-    </div>
-  );
-});
-
-const ModalContent = defineComponent(() => {
-  const modal = Modal.use();
-  return () => (
-    <div style="width: 300px; height: 300px;">
-      <Button onClick={modal.close}>关闭</Button>
-    </div>
-  );
-});

src/pages/website/routes/test/TestEffect.tsx

@@ -1,148 +0,0 @@
-import { moduleEffect } from "queenjs/framework";
-import { defineComponent, reactive, computed } from "vue";
-
-export default defineComponent(() => {
-  const state: any = reactive({
-    user: {
-      name: "",
-      phone: 18981937200,
-      url: "xxxx",
-    },
-    projects: [
-      {
-        id: 1,
-        name: "No.0",
-      },
-    ],
-
-    lastItem: computed(() => {
-      return state.projects[state.projects.length - 1];
-    }),
-  });
-
-  const effectCtrl = moduleEffect(() => state.user)
-    .item(
-      (item) => item.name,
-      (item) => console.log(item.name)
-    )
-    .item(
-      (item) => item.phone,
-      (item) => console.log("update phone", item.phone)
-    )
-    .run();
-
-  const effectCtrl2 = moduleEffect(() => state.projects)
-    .list({
-      add(item) {
-        console.log("add item", item);
-      },
-      remove(item) {
-        console.log("remove item", item);
-      },
-    })
-    .item(
-      (item) => item.name,
-      (item) => console.log(item.name)
-    )
-    .run();
-
-  return () => (
-    <div>
-      <div>
-        {/* <button
-          onClick={() => {
-            state.user.name = Date.now().toString();
-          }}
-        >
-          update name
-        </button>
-        <button
-          onClick={() => {
-            state.user.phone = Math.random();
-          }}
-        >
-          update phone
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl.run();
-          }}
-        >
-          run
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl.stop();
-          }}
-        >
-          stop
-        </button>
-        */}
-      </div>
-      <div>
-        <button
-          onClick={() => {
-            state.projects.push({
-              id: Date.now(),
-              name: `No.${state.projects.length}`,
-            });
-          }}
-        >
-          add
-        </button>
-        <button
-          onClick={() => {
-            state.projects.pop();
-          }}
-        >
-          删除最后
-        </button>
-        <button
-          onClick={() => {
-            state.projects.shift();
-          }}
-        >
-          删除第一个
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl2.run();
-          }}
-        >
-          run
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl2.stop();
-          }}
-        >
-          stop
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl2.pause();
-          }}
-        >
-          pause
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl2.play();
-          }}
-        >
-          play
-        </button>
-        <button
-          onClick={() => {
-            effectCtrl2.pause();
-            state.lastItem.name = Math.random().toString();
-            effectCtrl2.play();
-          }}
-        >
-          changeName
-        </button>
-      </div>
-      <div>{JSON.stringify(state)}</div>
-    </div>
-  );
-});