home

src/modules/list/actions/canvas.ts

@@ -280,15 +280,14 @@ export default (listModule: ListModule) => {
           delete fingers[touch.identifier];
         }
       }
-      // if (isPc()) {
-        canvas.addEventListener("mousedown", onMouseDown, false);
-        canvas.addEventListener("mousemove", onMouseMove, false);
-        document.addEventListener("mouseup", onMouseUp, false);
-      // } else {
-        canvas.addEventListener("touchstart", onTouchstart, false);
-        canvas.addEventListener("touchmove", onTouchMove, false);
-        document.addEventListener("touchend", onTouchEnd, false);
-      // }
+
+      canvas.addEventListener("mousedown", onMouseDown, false);
+      canvas.addEventListener("mousemove", onMouseMove, false);
+      document.addEventListener("mouseup", onMouseUp, false);
+
+      canvas.addEventListener("touchstart", onTouchstart, false);
+      canvas.addEventListener("touchmove", onTouchMove, false);
+      document.addEventListener("touchend", onTouchEnd, false);
     },
   };
 };

src/modules/list/state.ts

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

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

@@ -12,19 +12,6 @@ export default defineComponent({
     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>();
 
@@ -33,112 +20,15 @@ export default defineComponent({
         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} onMove={MoveStart} />
+          <Dialog data={item} key={item.id} />
         ))}
       </div>
     );

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

@@ -19,7 +19,7 @@ export default defineComponent({
     data: object<Dialog>().isRequired,
   },
   emits: ["move"],
-  setup(props, { emit }) {
+  setup(props) {
     const ctx = useCtx();
     const { list } = ctx;
     const closeRef = ref();

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

@@ -35,7 +35,7 @@ export default defineComponent({
       );
 
       list.actions.startListRunning(canvasRef.value);
-      
+
       return;
 
       canvasRef.value.width = rootRef.value?.clientWidth;
@@ -138,7 +138,7 @@ export default defineComponent({
         <canvas ref={canvasRef} />
 
         {list.state.dialogs.map((item) => (
-          <Dialog data={item} key={item.id} onMove={MoveStart} />
+          <Dialog data={item} key={item.id} />
         ))}
       </div>
     );