screenShow/src/modules/list/objects/canvas.ts

import ListModule from "..";
import { ColDataType } from "./item";

export function InitCanvasDragEvent(
  this: ListModule,
  canvas: HTMLCanvasElement
) {
  let down = false;
  let downIndex = -1;
  let downY = 0;
  let downX = 0;

  let initOffset = 0;
  let downTime = 0;
  let moving = false;
  const fingers: { [name: number]: any } = {};
  const scrollType = this.store.animate.scrollType;
  const canvasData = this.store.canvas;
  const onMouseDown = (e: MouseEvent) => {
    const x = e.clientX * canvasData.scale;
    const y = e.clientY * canvasData.scale;
    downY = e.clientY * canvasData.scale;
    downX = e.clientX * canvasData.scale;
    down = true;
    downIndex =
      scrollType == "vertical"
        ? Math.floor(x / (canvasData.itemOffset + canvasData.padding))
        : Math.floor(y / (canvasData.itemOffset + canvasData.padding));

    canvasData.linesData[downIndex].dragging = true;
    initOffset = canvasData.linesData[downIndex].offset;
    downTime = Date.now();
  };

  const onMouseMove = (e: MouseEvent) => {
    if (!down || downIndex < 0) return;
    moving = true;

    console.log("move");
    let dtaOffset = 0;
    if (scrollType == "vertical") {
      dtaOffset = e.clientY * canvasData.scale - dtaOffset;
    }
    if (scrollType == "horizontal") {
      dtaOffset = e.clientX * canvasData.scale - dtaOffset;
    }

    canvasData.linesData[downIndex].offset = initOffset + dtaOffset;
  };
  const onMouseUp = (e: MouseEvent) => {
    console.log("up");
    down = false;
    if (downIndex >= 0) {
      canvasData.linesData[downIndex].dragging = false;
      const dtaTime = Date.now() - downTime;
      if (dtaTime < 200 && !moving) {
        const line = canvasData.linesData[downIndex];
        let offset = line.offset;
        if (offset >= line.halfOffset) offset -= line.halfOffset;
        if (offset < 0) offset += line.halfOffset;

        const n = line.items.length;
        let z =
          scrollType == "vertical"
            ? offset + canvasData.height
            : offset + canvasData.width;
        for (let k = 0; k < n; k++) {
          const item = line.items[k];
          if (scrollType == "vertical") {
            z -= item.offsetY;
            if (downY > z && downY < z + item.offsetY) {
              console.log("click->", item.name);
              this.actions.popDialog(e, item);
              break;
            }
          }
          if (scrollType == "horizontal") {
            z -= item.offsetX;
            if (downX > z && downX < z + item.offsetX) {
              console.log("click->", item.name);
              this.actions.popDialog(e, item);
              break;
            }
          }
        }
      }
    }
    downIndex = -1;
    moving = false;
  };
  const onTouchstart = (e: TouchEvent) => {
    const touches = e.touches;
    for (let i = 0; i < touches.length; i++) {
      const touch = touches[i];
      if (fingers[touch.identifier]) {
        continue;
      }
      const x = touch.clientX * canvasData.scale;
      const y = touch.clientY * canvasData.scale;
      const downIndex =
        scrollType == "vertical"
          ? Math.floor(x / (canvasData.itemOffset + canvasData.padding))
          : Math.floor(y / (canvasData.itemOffset + canvasData.padding));
      canvasData.linesData[downIndex].dragging = true;
      const offset = canvasData.linesData[downIndex].offset;
      fingers[touch.identifier] = {
        identifier: touch.identifier,
        downY: y,
        downX: x,
        downIndex: downIndex,
        offset: offset,
        downTime: Date.now(),
      };
    }
  };
  const onTouchMove = (e: TouchEvent) => {
    const touches = e.changedTouches;
    for (let i = 0; i < touches.length; i++) {
      const touch = touches[i];
      const finger = fingers[touch.identifier];
      if (!finger) {
        continue;
      }
      finger.moving = true;
      let dtaOffset = 0;
      if (scrollType == "vertical") {
        dtaOffset = touch.clientY * canvasData.scale - finger.downY;
      }
      if (scrollType == "horizontal") {
        dtaOffset = touch.clientX * canvasData.scale - finger.downY;
      }
      canvasData.linesData[finger.downIndex].offset = finger.offset + dtaOffset;
    }
  };

  const onTouchEnd = (e: TouchEvent) => {
    const touches = e.changedTouches;
    for (let i = 0; i < touches.length; i++) {
      const touch = touches[i];
      const finger = fingers[touch.identifier];

      if (!finger) {
        continue;
      }

      canvasData.linesData[finger.downIndex].dragging = false;
      const dtaTime = Date.now() - finger.downTime;
      if (dtaTime < 200 && !finger.moving) {
        const line = canvasData.linesData[finger.downIndex];
        let offset = line.offset;
        if (offset >= line.halfOffset) offset -= line.halfOffset;
        if (offset < 0) offset += line.halfOffset;
        const n = line.items.length;
        let z =
          scrollType == "vertical"
            ? offset + canvasData.height
            : offset + canvasData.width;
        for (let k = 0; k < n; k++) {
          const item = line.items[k];

          if (scrollType == "vertical") {
            z -= item.offsetY;
            if (finger.downY > z && finger.downY < z + item.offsetY) {
              this.actions.popDialog(touch, item);
              break;
            }
          }
          if (scrollType == "horizontal") {
            z -= item.offsetX;
            if (finger.downX > z && finger.downX < z + item.offsetX) {
              this.actions.popDialog(touch, item);
              break;
            }
          }
        }
      }
      delete fingers[touch.identifier];
    }
  };
  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);
}

export function ListDraw(
  this: ListModule,
  line: ColDataType,
  row: number,
  ctx: any
) {
  const scrollType = this.store.animate.scrollType;
  const canvasData = this.store.canvas;
  let x = 0,
    y = 0;
  const offseStep = canvasData.itemOffset + canvasData.padding;

  if (scrollType == "vertical") {
    x =
      row > 0
        ? Math.floor(row * offseStep) + canvasData.padding
        : canvasData.padding;
    y = line.offset + canvasData.height;
  }
  if (scrollType == "horizontal") {
    x = line.offset + canvasData.width;
    y =
      row > 0
        ? Math.floor(row * offseStep) + canvasData.padding
        : canvasData.padding;
  }

  const items = line.items;
  const total = items.length;

  for (let k = 0; k < total; k++) {
    //绘制
    const item = items[k];

    if (scrollType == "vertical") {
      y -= item.offsetY; //从下往上绘制
      if (y > canvasData.height || y < -item.offsetY) continue; //超出部分，不进行绘制提交
      ctx.drawImage(
        item.img,
        0,
        0,
        item.w,
        item.h,
        Math.floor(x),
        Math.floor(y),
        Math.floor(canvasData.itemOffset),
        Math.floor(item.offsetY - canvasData.padding)
      );
    }
    if (scrollType == "horizontal") {
      x -= item.offsetX;
      if (x > canvasData.width || x < -item.offsetX) continue;
      ctx.drawImage(
        item.img,
        0,
        0,
        item.w,
        item.h,
        Math.floor(x),
        Math.floor(y),
        Math.floor(item.offsetX - canvasData.padding),
        Math.floor(canvasData.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));
  }
}