tiefen_space_h5/components/ImagesMask/index.jsx

"use client";

import React, {
  useState,
  useEffect,
  useRef,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Mask, Image } from "antd-mobile";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { createRoot } from "react-dom/client";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";
function ImagesMask({}, ref) {
  const [visible, setVisible] = useState(false);
  const [images, setImages] = useState([]);
  const [data, setData] = useState(null);
  const scrollRef = useRef(null);
  const defaultIndex = useRef(null);
  const router = useRouter();
  useEffect(() => {
    if (visible) {
      const root = createRoot(document?.getElementById("maskDomBox"));
      root.render(
        <div>
          <ImagesMaskContaint
            images={images}
            visible={visible}
            ref={scrollRef}
            setVisible={setVisible}
            setImages={setImages}
            router={router}
            data={data}
            defaultIndex={defaultIndex.current}
            root={root}
          />
        </div>
      );
    }

    // root.render(<div>xxxx</div>);
  }, [visible]);

  useImperativeHandle(ref, () => ({
    show: (arr, index, data) => {
      defaultIndex.current = index;
      setImages(arr);
      setData(data);
      setVisible((old) => {
        // console.log(arr, index, old);
        return !old;
      });

      // Mask.show
      // const maskDomBox = document.getElementById("maskDomBox");
    },
    close: () => setVisible(false),
  }));

  return <></>;
}

const ImagesMaskContaint = forwardRef(
  (
    {
      visible,
      images,
      setVisible,
      setImages,
      router,
      data,
      defaultIndex = 0,
      root,
    },
    ref
  ) => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [direction, setDirection] = useState("left");
    const [initialX, setInitialX] = useState(0);
    const [xOffset, setXOffset] = useState(0);
    const [initialMoveX, setInitialMoveX] = useState(0);
    const [initialMoveY, setInitialMoveY] = useState(0);
    const [xOffsetMove, setXOffsetMove] = useState(0);
    const [yOffsetMove, setYOffsetMove] = useState(0);
    const [active, setActive] = useState(false);
    const [zoomed, setZoomed] = useState(false);
    const base = baseRequest();
    const directionX = useRef(0);
    // const imgDom = useRef(null);
    const currentDistance = useRef(0);
    // const getDistance = (e) => {
    //   e.stopPropagation();
    //   const distance = ref.current.scrollLeft;
    //   setDistance(distance);
    // };
    useEffect(() => {
      // setCurrentIndex(defaultIndex);
      // test3(defaultIndex - 1, "left");
      if (defaultIndex) {
        // console.log("defaultIndex.current", defaultIndex);
        test3(defaultIndex - 1, "left", true);
      }
    }, [defaultIndex]);
    useEffect(() => {
      if (ref.current) {
        ref.current.style.transform = `translateX(${
          -window.innerWidth * currentIndex
        }px)`;
      }
    }, [currentIndex]);
    const test1 = (e) => {
      var touches = e.touches;
      // console.log(currentIndex, e.target.children[0].offsetLeft);
      setInitialMoveX(touches[0].clientX - e.target.children[0].offsetLeft);
      setInitialMoveY(touches[0].clientY - e.target.children[0].offsetTop);
      // console.log(touches[0].pageX- ref.current.getBoundingClientRect().left);
      if (touches.length === 2) {
        var touch1 = touches[0];
        var touch2 = touches[1];
        currentDistance.current = Math.hypot(
          touch2.pageX - touch1.pageX,
          touch2.pageY - touch1.pageY
        );
      }
      if (touches.length === 1 && !zoomed) {
        setInitialX(touches[0].clientX - (!currentIndex ? 0 : xOffset));
        // 单点触摸
        setActive(true);
      }
    };
    const test2 = (e) => {
      var touches = e.touches;
      // if (touches.length == 2) {
      //   var touch1 = touches[0];
      //   var touch2 = touches[1];
      //   currentDistance.current = Math.hypot(
      //     touch2.pageX - touch1.pageX,
      //     touch2.pageY - touch1.pageY
      //   );
      //   let scale = currentDistance.current / ref.current.startDistance;
      //   let matrix = new WebKitCSSMatrix(
      //     window.getComputedStyle(ref.current.children[0]).transform
      //   );
      //   let currentScale = matrix.m11;
      //   // alert(currentDistance.current + "-" + ref.current.startDistance);
      //   let size =
      //     currentScale * scale < 0.5
      //       ? 0.5
      //       : currentScale * scale > 3
      //       ? 3
      //       : currentScale * scale;
      //   ref.current.children[0].style.transform =
      //     "matrix(" + size + ", 0, 0, " + size + ", 0, 0)";
      // }
      if (zoomed) {
        let currentX = touches[0].clientX - initialMoveX;
        let currentY = touches[0].clientY - initialMoveY;
        // console.log(currentX + xOffsetMove);
        ref.current.children[currentIndex].style.left = `${
          currentX + xOffsetMove
        }px`;
        ref.current.children[currentIndex].style.top = `${
          currentY + yOffsetMove - 54
        }px`;
      } else {
        if (active) {
          let X = touches[0].clientX - initialX;

          setDirection(
            directionX.current > touches[0].clientX ? "left" : "right"
          );
          ref.current.style.transform = "translateX(" + X + "px)";
          directionX.current = touches[0].clientX;
        }
      }
    };
    const test3 = (index, currentDirection, isActive) => {
      // const rect = ref.current.getBoundingClientRect();
      // console.log(ref.current.children[currentIndex].offsetTop);
      setXOffsetMove(
        ref.current.children[currentIndex].offsetLeft -
          window.innerWidth * currentIndex
      );
      setYOffsetMove(ref.current.children[currentIndex].offsetTop + 54);

      if (active || isActive) {
        let cxOffset = window.innerWidth;
        if (currentDirection == "left") {
          if (index < images.length - 1) {
            setCurrentIndex(index + 1);
          } else {
            ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
          }
        } else {
          if (index > 0) {
            setCurrentIndex(index - 1);
          } else {
            ref.current.style.transform = `translateX(${-cxOffset * index}px)`;
          }
        }
        // setInitialX(currentX);
        setInitialX(
          -cxOffset * (index + (currentDirection == "left" ? 1 : -1))
        );
        if (currentDirection == "left" && index > images.length - 2) return;
        setXOffset(-cxOffset * (index + (currentDirection == "left" ? 1 : -1)));
      }
    };
    // };
    // };
    // };
    function downloadImage(url) {
      let randomNum = "";
      for (let i = 0; i < 10; i++) {
        randomNum += Math.floor(Math.random() * 10);
      }
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          if (typeof window == "undefined") return;
          var a = document.createElement("a");
          a.href = URL.createObjectURL(blob);
          a.download = randomNum + ".jpg";
          a.click();
        });
    }

    return (
      <div>
        <Mask
          visible={visible}
          className="z-[1002] h-screen flex justify-center items-center"
          onMaskClick={() => {
            setVisible(false), setImages([]), setCurrentIndex(null);
            root.unmount();
          }}
          color="#000000d9"
        >
          <div className="relative">
            {images[currentIndex]?.type != "hid" && (
              <div
                className="z-50 flex justify-between items-center absolute top-[12px] left-[12px]"
                style={{ width: "calc(100% - 24px)" }}
              >
                <div>
                  {/* <div
                    onClick={() => downloadImage(images[currentIndex]?.url)}
                    className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
                  >
                    <FontAwesomeIcon icon={faDownload} size="xl" />
                  </div> */}
                </div>
                <div>
                  <div
                    onClick={() => {
                      setZoomed(!zoomed);
                      setActive(false);
                      ref.current.children[currentIndex].style.transform =
                        "matrix(" +
                        (zoomed ? 1 : 3) +
                        ", 0, 0, " +
                        (zoomed ? 1 : 3) +
                        ", 0, 0)";
                      ref.current.children[currentIndex].style.left = `0px`;
                      ref.current.children[currentIndex].style.top = `0px`;
                    }}
                    className="flex justify-center items-center w-[38px] h-[38px] bg-[#ffffff1a] text-[#fff] rounded-full"
                  >
                    {!zoomed ? (
                      <svg
                        t="1723822459763"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4557"
                        width="24"
                        height="24"
                      >
                        <path
                          d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
                          p-id="4558"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M625.792 448H512v-112a32 32 0 0 0-64 0V448h-112a32 32 0 0 0 0 64H448v112a32 32 0 1 0 64 0V512h113.792a32 32 0 1 0 0-64z"
                          p-id="4559"
                          fill="#ffffff"
                        ></path>
                      </svg>
                    ) : (
                      <svg
                        t="1723822428728"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="4379"
                        width="24"
                        height="24"
                      >
                        <path
                          d="M919.264 905.984l-138.912-138.912C851.808 692.32 896 591.328 896 480c0-229.376-186.624-416-416-416S64 250.624 64 480s186.624 416 416 416c95.008 0 182.432-32.384 252.544-86.208l141.44 141.44a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0.032-45.248zM128 480C128 285.92 285.92 128 480 128s352 157.92 352 352-157.92 352-352 352S128 674.08 128 480z"
                          p-id="4380"
                          fill="#ffffff"
                        ></path>
                        <path
                          d="M625.792 448H336a32 32 0 0 0 0 64h289.792a32 32 0 1 0 0-64z"
                          p-id="4381"
                          fill="#ffffff"
                        ></path>
                      </svg>
                    )}
                  </div>
                </div>
              </div>
            )}
            <div className="text-center mb-2 leading-[54px]">
              {currentIndex + 1}/{images.length}
            </div>
            <div
              className="flex justify-start items-center"
              style={{ height: "calc(100vh - 174px)" }}
              onClick={() => {
                setVisible(false), setImages([]), setCurrentIndex(null);
                root.unmount();
              }}
            >
              <div
                ref={ref}
                id="imagesScrollBox"
                className="flex justify-center items-center transition-transform duration-300 h-full relative"
                draggable={true}
                onTouchStart={test1}
                onTouchMove={test2}
                onTouchEnd={() => test3(currentIndex, direction)}
              >
                {images.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className="flex-none w-screen relative h-full"
                      // onDoubleClick={() => {
                      //   setZoomed(!zoomed);
                      //   ref.current.children[0].style.transform =
                      //     "matrix(" + zoomed
                      //       ? 1
                      //       : 3 + ", 0, 0, " + zoomed
                      //       ? 1
                      //       : 3 + ", 0, 0)";
                      //   ref.current.style.left = `0px`;
                      //   ref.current.style.top = `0px`;
                      // }}
                    >
                      {/* <img
                        src={item.url}
                        className="h-full m-auto"
                        style={{
                          filter: item.type == "hid" ? "blur(10px)" : "none",
                        }}
                      /> */}
                      <Image
                        className="h-full m-auto"
                        src={item.url}
                        style={{
                          filter: item.type == "hid" ? "blur(10px)" : "none",
                        }}
                        // draggable={true}
                        height={"100%"}
                        fit="contain"
                        placeholder={
                          <div className="w-full h-full min-h-96 bg-[#1d1d1d] rounded"></div>
                        }
                      />

                      <div className="absolute top-1/2 left-1/2 -ml-[100px] -mt-[14px]">
                        {item.type == "hid" && (
                          <div className="flex justify-center">
                            <div
                              className="rounded-full text-sm h-max w-max px-4 py-1 bg-primary"
                              onClick={() => {
                                router.push(
                                  "/webView/" +
                                    encodeURIComponent(
                                      "/zone/pay/" +
                                        data?.zid +
                                        "/h5_zone_moment/" +
                                        data?.id +
                                        "?base=" +
                                        encodeURIComponent(JSON.stringify(base))
                                    )
                                );
                              }}
                            >
                              此内容暂未解锁，立即解锁
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div
              className="flex justify-between items-center w-screen absolute top-1/2 px-4 pointer-events-none"
              style={{
                marginTop: "calc(-50vh + 118px)",
                height: "calc(100vh - 174px)",
                visibility: images.length > 1 ? "visible" : "hidden",
              }}
            >
              <div
                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
                onClick={() => {
                  setActive(true);
                  setZoomed(false);
                  setInitialMoveX(0);
                  setInitialMoveY(0);
                  setXOffsetMove(0);
                  setYOffsetMove(0);
                  ref.current.children[currentIndex].style.transform =
                    "matrix(1, 0, 0, 1, 0, 0)";
                  ref.current.children[currentIndex].style.left = `0px`;
                  ref.current.children[currentIndex].style.top = `0px`;
                  test3(currentIndex, "right", true);
                }}
              >
                <FontAwesomeIcon icon={faAngleLeft} size="xl" />
              </div>
              <div
                className="w-12 h-full flex items-center justify-center  rounded-full float-left pointer-events-auto"
                onClick={() => {
                  setZoomed(false);
                  setInitialMoveX(0);
                  setInitialMoveY(0);
                  setXOffsetMove(0);
                  setYOffsetMove(0);
                  ref.current.children[currentIndex].style.transform =
                    "matrix(1, 0, 0, 1, 0, 0)";
                  ref.current.children[currentIndex].style.left = `0px`;
                  ref.current.children[currentIndex].style.top = `0px`;
                  test3(currentIndex, "left", true);
                }}
              >
                <FontAwesomeIcon icon={faAngleRight} size="xl" />
              </div>
            </div>
          </div>
        </Mask>
      </div>
    );
  }
);

export default forwardRef(ImagesMask);