scroll type

src/modules/list/actions/canvas.ts

@@ -1,72 +1,100 @@
 // import item from "@/pages/website/routes/list/item";
-import list from "queenjs/ui/list";
 import ListModule from "..";
-import { Dialog, ShowItem } from "../state";
-import { isPc } from "queenjs/framework/utils";
+import { ShowItem } from "../state";
 type ColDataType = {
   offset: number;
   items: any[];
-  halfHeight: number;
+  halfOffset: number;
   dragging: boolean;
   speed: number;
 };
 
 export default (listModule: ListModule) => {
-  const cols: ColDataType[] = []; //{offset, items:[], halfHeight: 0, dragging: false}
-
-  let totalColCount = 0; //每列的数量
+  const cols: ColDataType[] = []; //{offset, items:[], halfOffset: 0, dragging: false}
+  const totalRow = listModule.state.totalRow || 8;
   let CanvasWidth = 0;
   let CanvasHeight = 0;
   let textH = 0;
-  let paddingW = 0;
-  let itemW = 0;
+  let paddingOffset = 0;
+  let totalSizeCount = 0; //每行或每列的数量
+  let itemOffset = 0;
 
   let ctx: CanvasRenderingContext2D;
   let scale = 1;
 
   return {
     async initListCanvasDatas(wWidth: number, wHeight: number) {
-      const totalRow = listModule.state.totalRow || 8;
-      const actions = listModule.actions;
+      const scrollType = listModule.state.scrollType;
       const items = await listModule.actions.loadData(wWidth, wHeight);
-      const itemsLen = items.length;
       scale = Math.max(devicePixelRatio, 2);
 
-      textH = 24 * scale;
+      // textH = 24 * scale;
       CanvasWidth = wWidth * scale;
       CanvasHeight = wHeight * scale;
-      paddingW = 12 * scale;
-      itemW = (CanvasWidth - paddingW * (totalRow + 1)) / totalRow;
+      paddingOffset = 12 * scale;
+      totalSizeCount = Math.ceil(items.length / totalRow) * 2;
 
-      totalColCount = Math.ceil(items.length / totalRow) * 2;
+      if (scrollType == "vertical") {
+        listModule.actions.initVerticalList(items);
+      }
+      if (scrollType == "horizontal") {
+        listModule.actions.initHorizontalList(items);
+      }
+    },
+    initVerticalList(items) {
+      itemOffset = (CanvasWidth - paddingOffset * (totalRow + 1)) / totalRow;
+      for (let i = 0; i < totalRow; i++) {
+        let off = i * totalSizeCount;
+        let arr: ShowItem[] = [];
+        for (let k = 0; k < totalSizeCount; k++) {
+          arr.push(items[(off + k) % items.length]);
+        }
+        listModule.actions.shuffleSelf(arr, totalSizeCount);
+        //计算总高度
+        let halfOffset = 0;
+        arr.forEach((item) => {
+          let h = ((item.h * 1.0) / item.w) * itemOffset;
+          item.offsetY = h + textH + paddingOffset; //y step;
+          halfOffset += item.offsetY;
+        });
 
+        const colData = {
+          items: [...arr, ...arr],
+          offset: 0,
+          halfOffset: halfOffset,
+          dragging: false,
+          speed: i % 2 == 0 ? 1 : 2,
+        };
+        cols.push(colData);
+      }
+    },
+    initHorizontalList(items) {
+      itemOffset = (CanvasHeight - paddingOffset * (totalRow + 1)) / totalRow;
       for (let i = 0; i < totalRow; i++) {
-        let off = i * totalColCount;
+        let off = i * totalSizeCount;
         let arr: ShowItem[] = [];
-        for (let k = 0; k < totalColCount; k++) {
-          arr.push(items[(off + k) % itemsLen]);
+        for (let k = 0; k < totalSizeCount; k++) {
+          arr.push(items[(off + k) % items.length]);
         }
-        actions.shuffleSelf(arr, totalColCount);
+        listModule.actions.shuffleSelf(arr, totalSizeCount);
 
         //计算总高度
-        let halfHeight = 0;
+        let halfOffset = 0;
         arr.forEach((item) => {
-          let h = ((item.h * 1.0) / item.w) * itemW;
-          item.offsetY = h + textH + paddingW; //y step;
-          halfHeight += item.offsetY;
+          let w = ((item.w * 1.0) / item.h) * itemOffset;
+          item.offsetX = w + textH + paddingOffset; //y step;
+          halfOffset += item.offsetX;
         });
 
         const colData = {
           items: [...arr, ...arr],
           offset: 0,
-          halfHeight: halfHeight,
+          halfOffset: halfOffset,
           dragging: false,
           speed: i % 2 == 0 ? 1 : 2,
         };
-        // colData.speed = 0;
         cols.push(colData);
       }
-      console.log(cols);
     },
 
     startListRunning(canvas: HTMLCanvasElement) {
@@ -84,45 +112,6 @@ export default (listModule: ListModule) => {
       cacheCtx.textBaseline = "top";
 
       let loopId = 0;
-      let x = 0,
-        y = 0,
-        xStep = itemW + paddingW;
-
-      function draw(col: ColDataType, row: number) {
-        x = row > 0 ? Math.floor(row * xStep) + paddingW : paddingW;
-        const items = col.items;
-        let total = items.length;
-
-        y = col.offset + CanvasHeight;
-
-        for (let k = 0; k < total; k++) {
-          //绘制
-          let item = items[k];
-          y -= item.offsetY; //从下往上绘制
-          if (y > CanvasHeight || y < -item.offsetY) continue; //超出部分，不进行绘制提交
-
-          cacheCtx.drawImage(
-            item.img,
-            0,
-            0,
-            item.w,
-            item.h,
-            x,
-            Math.floor(y),
-            Math.floor(itemW),
-            Math.floor(item.offsetY - textH - paddingW)
-          );
-          let text =
-            item.name.length > 20
-              ? item.name.substring(0, 19) + "..."
-              : item.name;
-          cacheCtx.fillText(
-            text,
-            x,
-            Math.round(y + item.offsetY - textH * 1.2)
-          );
-        }
-      }
 
       let n = cols.length;
       let i = 0;
@@ -139,13 +128,13 @@ export default (listModule: ListModule) => {
             item.offset = Math.floor(item.offset + item.speed);
           }
           //   console.log(item.offset);
-          if (item.offset >= item.halfHeight) item.offset -= item.halfHeight;
-          if (item.offset < 0) item.offset += item.halfHeight;
+          if (item.offset >= item.halfOffset) item.offset -= item.halfOffset;
+          if (item.offset < 0) item.offset += item.halfOffset;
         }
         cacheCtx.clearRect(0, 0, CanvasWidth, CanvasHeight);
         n = cols.length;
         for (i = 0; i < n; i++) {
-          draw(cols[i], i);
+          listModule.actions.listDraw(cols[i], i, cacheCtx);
         }
         ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
         ctx.drawImage(cache, 0, 0);
@@ -153,29 +142,155 @@ export default (listModule: ListModule) => {
       }
       loop();
     },
+    listDraw(col: ColDataType, row: number, ctx: any) {
+      const scrollType = listModule.state.scrollType;
+      let x = 0,
+        y = 0,
+        offseStep = itemOffset + paddingOffset;
+
+      if (scrollType == "vertical") {
+        x =
+          row > 0 ? Math.floor(row * offseStep) + paddingOffset : paddingOffset;
+        y = col.offset + CanvasHeight;
+      }
+      if (scrollType == "horizontal") {
+        x = col.offset + CanvasWidth;
+        y =
+          row > 0 ? Math.floor(row * offseStep) + paddingOffset : paddingOffset;
+      }
+
+      const items = col.items;
+      let total = items.length;
+
+      for (let k = 0; k < total; k++) {
+        //绘制
+        let item = items[k];
+
+        if (scrollType == "vertical") {
+          y -= item.offsetY; //从下往上绘制
+          if (y > CanvasHeight || y < -item.offsetY) continue; //超出部分，不进行绘制提交
+          ctx.drawImage(
+            item.img,
+            0,
+            0,
+            item.w,
+            item.h,
+            Math.floor(x),
+            Math.floor(y),
+            Math.floor(itemOffset),
+            Math.floor(item.offsetY - textH - paddingOffset)
+          );
+        }
+        if (scrollType == "horizontal") {
+          x -= item.offsetX;
+          if (x > CanvasWidth || x < -item.offsetX) continue;
+          ctx.drawImage(
+            item.img,
+            0,
+            0,
+            item.w,
+            item.h,
+            Math.floor(x),
+            Math.floor(y),
+            Math.floor(item.offsetX - textH - paddingOffset),
+            Math.floor(itemOffset)
+          );
+        }
+
+        // let text =
+        //   item.name.length > 20
+        //     ? item.name.substring(0, 19) + "..."
+        //     : item.name;
+        // ctx.fillText(text, x, Math.round(y + item.offsetY - textH * 1.2));
+      }
+    },
 
     endListRuning() {},
 
     initDragEvents(canvas: HTMLCanvasElement) {
       let down = false;
-      let downCol = -1;
+      let downIndex = -1;
       let downY = 0;
+      let downX = 0;
 
       let initOffset = 0;
       let downTime = 0;
       let moving = false;
       let fingers = {};
+      const scrollType = listModule.state.scrollType;
 
       function onMouseDown(e: MouseEvent) {
         let x = e.clientX * scale;
+        let y = e.clientY * scale;
         downY = e.clientY * scale;
+        downX = e.clientX * scale;
         down = true;
-        downCol = Math.floor(x / (itemW + paddingW));
-        console.log(downCol);
-        cols[downCol].dragging = true;
-        initOffset = cols[downCol].offset;
+        downIndex =
+          scrollType == "vertical"
+            ? Math.floor(x / (itemOffset + paddingOffset))
+            : Math.floor(y / (itemOffset + paddingOffset));
+
+        cols[downIndex].dragging = true;
+        initOffset = cols[downIndex].offset;
         downTime = Date.now();
       }
+
+      function onMouseMove(e) {
+        if (!down || downIndex < 0) return;
+        moving = true;
+
+        console.log("move");
+        let dtaOffset = 0;
+        if (scrollType == "vertical") {
+          dtaOffset = e.clientY * scale - dtaOffset;
+        }
+        if (scrollType == "horizontal") {
+          dtaOffset = e.clientX * scale - dtaOffset;
+        }
+
+        cols[downIndex].offset = initOffset + dtaOffset;
+      }
+      function onMouseUp(e) {
+        console.log("up");
+        down = false;
+        if (downIndex >= 0) {
+          cols[downIndex].dragging = false;
+          let dtaTime = Date.now() - downTime;
+          if (dtaTime < 200 && !moving) {
+            const col = cols[downIndex];
+            let offset = col.offset;
+            if (offset >= col.halfOffset) offset -= col.halfOffset;
+            if (offset < 0) offset += col.halfOffset;
+
+            let n = col.items.length;
+            let z =
+              scrollType == "vertical"
+                ? offset + CanvasHeight
+                : offset + CanvasWidth;
+            for (let k = 0; k < n; k++) {
+              const item = col.items[k];
+              if (scrollType == "vertical") {
+                z -= item.offsetY;
+                if (downY > z && downY < z + item.offsetY) {
+                  console.log("click->", item.name);
+                  listModule.actions.popDialog(e, item);
+                  break;
+                }
+              }
+              if (scrollType == "horizontal") {
+                z -= item.offsetX;
+                if (downX > z && downX < z + item.offsetX) {
+                  console.log("click->", item.name);
+                  listModule.actions.popDialog(e, item);
+                  break;
+                }
+              }
+            }
+          }
+        }
+        downIndex = -1;
+        moving = false;
+      }
       function onTouchstart(e: TouchEvent) {
         let touches = e.touches;
         for (let i = 0; i < touches.length; i++) {
@@ -185,27 +300,22 @@ export default (listModule: ListModule) => {
           }
           let x = touch.clientX * scale;
           let y = touch.clientY * scale;
-          let downCol = Math.floor(x / (itemW + paddingW));
-          cols[downCol].dragging = true;
-          let offset = cols[downCol].offset;
+          let downIndex =
+            scrollType == "vertical"
+              ? Math.floor(x / (itemOffset + paddingOffset))
+              : Math.floor(y / (itemOffset + paddingOffset));
+          cols[downIndex].dragging = true;
+          let offset = cols[downIndex].offset;
           fingers[touch.identifier] = {
             identifier: touch.identifier,
             downY: y,
-            downCol: downCol,
+            downX: x,
+            downIndex: downIndex,
             offset: offset,
             downTime: Date.now(),
           };
         }
       }
-
-      function onMouseMove(e) {
-        if (!down || downCol < 0) return;
-        moving = true;
-
-        console.log("move");
-        let dtaY = e.clientY * scale - downY;
-        cols[downCol].offset = initOffset + dtaY;
-      }
       function onTouchMove(e: TouchEvent) {
         let touches = e.changedTouches;
         for (let i = 0; i < touches.length; i++) {
@@ -215,40 +325,17 @@ export default (listModule: ListModule) => {
             continue;
           }
           finger.moving = true;
-          let dtaY = touch.clientY * scale - finger.downY;
-          cols[finger.downCol].offset = finger.offset + dtaY;
-        }
-      }
-
-      function onMouseUp(e) {
-        console.log("up");
-        down = false;
-        if (downCol >= 0) {
-          cols[downCol].dragging = false;
-          let dtaTime = Date.now() - downTime;
-          if (dtaTime < 200 && !moving) {
-            // alert("click")
-            const col = cols[downCol];
-            let offset = col.offset;
-            if (offset >= col.halfHeight) offset -= col.halfHeight;
-            if (offset < 0) offset += col.halfHeight;
-
-            let n = col.items.length;
-            let z = offset + CanvasHeight;
-            for (let k = 0; k < n; k++) {
-              const item = col.items[k];
-              z -= item.offsetY; //从下往上绘制
-              if (downY > z && downY < z + item.offsetY) {
-                console.log("click->", item.name);
-                listModule.actions.popDialog(e, item);
-                break;
-              }
-            }
+          let dtaOffset = 0;
+          if (scrollType == "vertical") {
+            dtaOffset = touch.clientY * scale - finger.downY;
           }
+          if (scrollType == "horizontal") {
+            dtaOffset = touch.clientX * scale - finger.downY;
+          }
+          cols[finger.downIndex].offset = finger.offset + dtaOffset;
         }
-        downCol = -1;
-        moving = false;
       }
+
       function onTouchEnd(e: TouchEvent) {
         let touches = e.changedTouches;
         for (let i = 0; i < touches.length; i++) {
@@ -259,21 +346,34 @@ export default (listModule: ListModule) => {
             continue;
           }
 
-          cols[finger.downCol].dragging = false;
+          cols[finger.downIndex].dragging = false;
           let dtaTime = Date.now() - finger.downTime;
           if (dtaTime < 200 && !finger.moving) {
-            const col = cols[finger.downCol];
+            const col = cols[finger.downIndex];
             let offset = col.offset;
-            if (offset >= col.halfHeight) offset -= col.halfHeight;
-            if (offset < 0) offset += col.halfHeight;
+            if (offset >= col.halfOffset) offset -= col.halfOffset;
+            if (offset < 0) offset += col.halfOffset;
             let n = col.items.length;
-            let z = offset + CanvasHeight;
+            let z =
+              scrollType == "vertical"
+                ? offset + CanvasHeight
+                : offset + CanvasWidth;
             for (let k = 0; k < n; k++) {
               const item = col.items[k];
-              z -= item.offsetY;
-              if (finger.downY > z && finger.downY < z + item.offsetY) {
-                listModule.actions.popDialog(touch, item);
-                break;
+
+              if (scrollType == "vertical") {
+                z -= item.offsetY;
+                if (finger.downY > z && finger.downY < z + item.offsetY) {
+                  listModule.actions.popDialog(touch, item);
+                  break;
+                }
+              }
+              if (scrollType == "horizontal") {
+                z -= item.offsetX;
+                if (finger.downX > z && finger.downX < z + item.offsetX) {
+                  listModule.actions.popDialog(touch, item);
+                  break;
+                }
               }
             }
           }

src/modules/list/actions/index.ts

@@ -2,7 +2,7 @@ import cood from "./cood";
 import dialog from "./dialog";
 import load from "./load";
 import curd from "./curd";
-import loadCanvas from "./loadCanvas";
+
 import canvas from "./canvas";
 
-export default [load, dialog, cood, curd, loadCanvas, canvas];
+export default [load, dialog, cood, curd, canvas];

src/modules/list/actions/loadCanvas.ts

@@ -1,138 +0,0 @@
-import ListModule from "..";
-import ItemObject from "../objects/item";
-import { Dialog, ShowItem } from "../state";
-const artifacts = "./Artifacts.json";
-
-function shuffleSelf(array, size) {
-  let index = -1,
-    length = array.length,
-    lastIndex = length - 1;
-  size = size === undefined ? length : size;
-
-  while (++index < size) {
-    // var rand = baseRandom(index, lastIndex),
-    const rand = index + Math.floor(Math.random() * (lastIndex - index + 1));
-    const value = array[rand];
-    array[rand] = array[index];
-    array[index] = value;
-  }
-  array.length = size;
-  return array;
-}
-
-export default (listModule: ListModule) => {
-  const getUrl = (url: string) => {
-    return "./artifacts" + url.substring(1);
-  };
-
-  function loadImg(url: string, id: string, name: string): Promise<ShowItem> {
-    return new Promise((resolve, reject) => {
-      const m = new Image();
-      m.src = url;
-      m.onload = () => {
-        resolve({
-          id: id,
-          w: m.width,
-          h: m.height,
-          url: url,
-          offsetX: 0,
-          offsetY: 0,
-          x: 0,
-          y: 0,
-          z: 0,
-          padding: 0,
-          opacity: 0,
-          currX: 0,
-          currY: 0,
-          show: false,
-          offsetZ: 0,
-          timer: 0,
-          name,
-          img:m,
-        });
-      };
-    });
-  }
-
-  return {
-    async loadCanvasData(wWidth: number, wHeight: number) {
-      listModule.state.parentWidth = wWidth;
-      listModule.state.parentHeight = wHeight;
-      //   listModule.state.scrollOffsetY = wWidth;
-
-      //@ts-ignore
-      listModule.list = await listModule.http.request(artifacts, {
-        method: "GET",
-        baseURL: "",
-      });
-      return this.initLoadShowItems(wWidth, wHeight);
-    },
-
-    async initLoadShowItems(wWidth: number, wHeight: number) {
-      const ps = listModule.list.map((item, index) =>
-        loadImg(item.thumbnail, item._id, item.name)
-      );
-      const rets = await Promise.all(ps);
-
-      const totalRow = listModule.state.totalRow;
-      const paddingH = listModule.state.paddingH;
-      const paddingW = listModule.state.paddingW;
-
-      const ItemWidth = Math.round(
-        (wWidth - (totalRow + 1) * paddingW) / totalRow
-      );
-
-      let MaxContent = 0;
-
-      rets.forEach((item) => {
-        item.h = Math.floor((item.h * ItemWidth) / item.w);
-        item.w = ItemWidth;
-        MaxContent += item.h;
-      });
-
-      MaxContent += (rets.length + 1) * paddingH;
-      listModule.state.itemTotalSize = MaxContent - 20;
-      for (let i = 0; i < totalRow; i++) {
-        const x = (i + 1) * paddingW + i * ItemWidth;
-
-        //随机排序下
-        shuffleSelf(rets, rets.length);
-
-        let offset = -listModule.state.repeatWidth;
-        rets.forEach((item, index) => {
-          const it = JSON.parse(JSON.stringify(item));
-          it.x = x;
-          it.y = index > 0 ? index * paddingH + offset + 10 : offset + 10;
-          offset += item.h;
-          listModule.state.items.push(it);
-        });
-      }
-
-      return rets;
-    },
-    updateCanvasItem(speed: number) {
-      const items = listModule.state.items;
-      const actions = listModule.actions;
-
-      let k = items.length;
-
-      while (k--) {
-        const item = items[k];
-        const pos = actions.col2Speed(item.x, item.y,speed);
-        item.x = pos.x;
-        item.y = pos.y;
-      }
-    },
-
-    async loadPack3d(item: ItemObject) {
-      let meshId = item.meshId;
-      if (!meshId) return;
-
-      //@ts-ignore
-      let ret = await listModule.http.request(meshId, { baseURL: "" });
-      console.log(ret);
-
-      return ret;
-    },
-  };
-};

src/modules/list/state.ts

@@ -38,10 +38,10 @@ export type Dialog = {
 export default class extends StateRoot {
   items: ShowItem[] = [];
   scrollOffset = 0; //屏幕滚动值
-  scrollType = "vertical"; // 滚动方式 vertical horizontal
-  paddingH = 30; //上下的行距
-  paddingW = 10; //左右的行距
-  totalRow = 8; //行数
+  scrollType = "horizontal"; // 滚动方式 vertical horizontal
+  // paddingH = 30; //上下的行距
+  // paddingW = 10; //左右的行距
+  totalRow = 8; //行数或列数
   dialogs: Dialog[] = [];
   parentWidth = 0;
   parentHeight = 0;

src/pages/website/routes/index.ts

@@ -4,7 +4,7 @@ import home from "./home";
 import list from "./list";
 import list2 from "./list/list2";
 import list3 from "./list/list3";
-import listCanvas from "./list/listCanvas";
+
 import BasicLayout from "./backend/components/layout/BasicLayout";
 import Backend from "./backend";
 import Total from "./backend/total";
@@ -32,11 +32,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "list3",
     component: list3,
   },
-  {
-    path: "/list4",
-    name: "list4",
-    component: listCanvas,
-  },
   {
     path: "/backend",
     name: "backend",

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

@@ -1,162 +0,0 @@
-import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
-import { useCtx } from "../../context";
-import { ShowItem } from "@/modules/list/state";
-import Dialog from "./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 { 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} ref={rootRef}>
-        <canvas ref={canvasRef} />
-
-        {list.state.dialogs.map((item) => (
-          <Dialog data={item} key={item.id} />
-        ))}
-      </div>
-    );
-  },
-});
-
-const rootStyle = css`
-  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; */
-  }
-`;