plain-design 1.0.0-beta.4 → 1.0.0-beta.40

package/src/packages/components/ImagePreviewer/ImagePreviewer.tsx

@@ -0,0 +1,574 @@
+import {computed, designComponent, iHTMLDivElement, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles, watch} from "plain-design-composition";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "./image-previewer.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {addElementListener} from "plain-utils/dom/addElementListener";
+import {delay} from "plain-utils/utils/delay";
+import Carousel from "../Carousel";
+import CarouselItem from "../CarouselItem";
+import {ImagePreviewerGallery} from "./ImagePreviewerGallery";
+import {ImagePreviewerCarouselImage} from "./ImagePreviewerCarouselImage";
+import './image-previewer.scss';
+import {ImagePreviewerButtonBar} from "./ImagePreviewerButtonBar";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import $previewer from "../$previewer";
+import {buildCycleIndexList} from "../../utils/buildCycleIndexList";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+export const ImagePreviewer = designComponent({
+  name: 'image-preview-component',
+  props: {
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true },
+    closable: { type: Boolean }
+  },
+  inheritPropsType: iHTMLDivElement,
+  setup({ props }) {
+
+    const { effects: setupEffects } = createEffects();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement, carousel: Carousel });
+
+    const state = reactive({
+      /*当前显示的图片索引*/
+      current: props.option.current || 0,
+      /*shadowImageElement显示隐藏有过度时间，这里等过度时间结束再做显示隐藏*/
+      show: false,
+      aspectRatio: null as null | number,
+      closing: false,
+      /*标记图片的thumb url已经加载完毕*/
+      readyMap: {} as Record<string, boolean | undefined>
+    });
+
+    const classes = useClasses(() => [
+      'image-previewer-component',
+      {
+        'image-previewer-component-waiting': !state.show
+      }
+    ]);
+
+    const galleryStyles = useStyles(style => {
+      style.height = `${props.option.galleryHeight}px`;
+    });
+
+    const maskStyles = useStyles(style => {
+      style.backgroundColor = props.option.maskColor || 'rgba(0,0,0,0.9)';
+    });
+
+    const methods = {
+      /**
+       * 关闭预览
+       * @author  韦胜健
+       * @date    2024/1/5 11:24
+       */
+      close: async () => {
+        if (state.closing) {return;}
+        state.closing = true;
+
+        const currentImgElement = refs.carousel!.refs.el!.querySelector('img[data-active=true]') as undefined | HTMLImageElement;
+        /*当前渲染的图片如果不存在，虽然不可能，这里直接关闭previewer*/
+        if (!currentImgElement) {
+          $previewer.close(props.option.id);
+          return;
+        }
+
+        /*当前正在显示的图片元素，关闭时让这个元素显示一个缩小动画*/
+        const currentUrl = props.option.urls[state.current!].url;
+        const sourceImgElement = props.option.imageElement?.getAttribute('src') === currentUrl ? props.option.imageElement : (Array.from(document.querySelectorAll('img')) as HTMLImageElement[]).find(i => i.getAttribute('src') === currentUrl && i !== currentImgElement && !i.hasAttribute('data-ignore'));
+
+        const currentRect = getCenterRect({ imageElement: currentImgElement, containerElement: refs.carousel!.refs.el! });
+
+        /*页面上原始的图片元素如果存在，则让当前显示的图片元素缩放并且移动到这个原始位置在关闭，否则移动到屏幕正中间在关闭*/
+        const sourceRect = !!sourceImgElement ? getRectAutoFormat(sourceImgElement) : (() => {
+          const { clientHeight, clientWidth } = document.documentElement;
+          const width = 10;
+          const height = 10;
+          const top = Number(((clientHeight - height) / 2).toFixed(2));
+          const left = Number(((clientWidth - width) / 2).toFixed(2));
+          return { top, left, width, height };
+        })();
+
+        currentImgElement.style.transition = 'all ease 300ms';
+        const newScale = Number(((sourceRect.width / currentRect.width)).toFixed(2));
+        const newLeft = Math.ceil(sourceRect.left - (currentRect.left + (currentRect.width * (1 - newScale) / 2)));
+        const newTop = Math.ceil(sourceRect.top - (currentRect.top + (currentRect.height * (1 - newScale) / 2)));
+        // console.log({ sourceRect, currentRect, newTop, newLeft });
+        state.show = false;
+        const clearListener = addElementListener(currentImgElement, 'transitionend', () => {
+          clearListener();
+          if (!!props.option?.imageElement) {
+            props.option.imageElement.style.opacity = '';
+          }
+          $previewer.close(props.option.id);
+        });
+        await delay(0);
+        currentImgElement.style.transform = `translate3d(${newLeft}px,${newTop}px,0) scale(${newScale}) rotate(0)`;
+      },
+      /**
+       * 切换到上一张
+       * @author  韦胜健
+       * @date    2024/1/8 17:35
+       */
+      prev: () => {
+        let current = state.current - 1;
+        if (current < 0) {
+          current = props.option.urls.length - 1;
+        }
+        state.current = current;
+      },
+      /**
+       * 切换到下一张
+       * @author  韦胜健
+       * @date    2024/1/8 17:35
+       */
+      next: () => {
+        let current = state.current + 1;
+        if (current > props.option.urls.length - 1) {
+          current = 0;
+        }
+        state.current = current;
+      },
+    };
+
+    const handler = {
+      onDoubleClickImage: () => {
+        props.closable && methods.close();
+      },
+    };
+
+    watch(() => state.current, () => {
+      transformHandler.transformMethods.reset();
+      if (!!props.option.imageElement) {
+        if (props.option.imageElement.style.opacity != props.option.oldSourceImageOpacity) {
+          props.option.imageElement.style.opacity = props.option.oldSourceImageOpacity || "";
+        }
+      }
+    });
+
+    const transformHandler = (() => {
+      const transformState = reactive({
+        transformData: {
+          /*当前缩放的比例*/
+          scale: 1,
+          /*当前横向移动距离*/
+          left: 0,
+          /*当前纵向移动距离*/
+          top: 0,
+          /*当前旋转角度*/
+          rotate: 0,
+        },
+        /*保存开始缩放时当前image的初始大小*/
+        currentImageRect: { top: 0, left: 0, height: 0, width: 0 },
+        /*是否处于移动端缩小准备退出的状态*/
+        mobileClosing: false,
+        /*双指缩放状态*/
+        mobileScaling: null as null | {
+          startScale: number,/*双指拖拽开始时已经缩放的大小*/
+          msg?: any,/*调试信息*/
+        },
+        previousTouchstartTimestamp: 0,
+      });
+
+      const handler = {
+        /**
+         * 使用鼠标滚轮的时候设置缩放比例
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        onWheel: (e: WheelEvent) => {
+          if (props.option.disableZoomOnWheel) {
+            return;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+          transformMethods.setScale(Number((transformState.transformData.scale - e.deltaY / 100 * 0.05).toFixed(2)));
+        },
+        /**
+         * 拖拽的时候处理移动或者缩放
+         * @author  韦胜健
+         * @date    2024/1/5 14:21
+         */
+        touchstart: (e: TouchEvent | MouseEvent) => {
+
+          if ('touches' in e && e.touches.length == 1 && getDeviceInfo().deviceType === 'mobile') {
+            const currentTouchstartTimestamp = Date.now();
+            if (!!transformState.previousTouchstartTimestamp) {
+              if (currentTouchstartTimestamp - transformState.previousTouchstartTimestamp < 200) {
+                /*100ms内点击了两次，自动关闭*/
+                props.closable && methods.close();
+                return;
+              }
+            }
+            transformState.previousTouchstartTimestamp = currentTouchstartTimestamp;
+          }
+
+          /*标记当前是缩放还是移动*/
+          let handleType = 'move' as 'scale' | 'move';
+
+          /*拖拽副作用*/
+          const { effects: touchEffects } = createEffects();
+
+          /**
+           * 单指和双指会同时触发touchstart，这里除了双指缩放之外的其他情况要自动停止并且清理掉自身的副作用
+           * @author  韦胜健
+           * @date    2024/1/9 21:42
+           */
+          const autoClearIfDoubleTouching = (e: MouseEvent | TouchEvent) => {
+            if ('touches' in e && e.touches.length === 2) {
+              touchEffects.clear();
+              return true;
+            }
+            return false;
+          };
+
+          if ('touches' in e && e.touches.length > 1) {
+            /*如果是双指拖动，则为缩放，否则都是移动*/
+            handleType = 'scale';
+          }
+
+          if (handleType === 'move') {
+            /*只有缩放/旋转的情况下才能拖拽移动，否则拖拽时右Carousel处理横向切换图片*/
+            if (isTransforming.value) {
+              /*---------------------------------------（单指/鼠标）拖拽移动-------------------------------------------*/
+
+              /*拖拽初始状态*/
+              let touchState = {
+                startX: 'touches' in e ? e.touches[0].clientX : e.clientX,
+                startY: 'touches' in e ? e.touches[0].clientY : e.clientY,
+                startTop: transformState.transformData.top,
+                startLeft: transformState.transformData.left,
+              };
+              /*处理移动*/
+              const touchmove = (e: MouseEvent | TouchEvent) => {
+                if (autoClearIfDoubleTouching(e)) {return;}
+                e.preventDefault();
+                e.stopPropagation();
+                const moveX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+                const moveY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+                transformState.transformData.top = Number((touchState.startTop + (moveY - touchState.startY)).toFixed(2));
+                transformState.transformData.left = Number((touchState.startLeft + (moveX - touchState.startX)).toFixed(2));
+              };
+              touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+              touchEffects.push(addWindowListener('mousemove', touchmove, { passive: false }));
+              touchEffects.push(addWindowListener('mouseup', touchEffects.clear, { passive: false }));
+            } else {
+              if (getDeviceInfo().deviceType === 'mobile' && 'touches' in e && e.touches.length === 1) {
+
+                /*---------------------------------------单指拖拽关闭-------------------------------------------*/
+                if (props.closable) {
+                  /*移动端的情况下，如果纵向移动超过一定距离，则一边移动一边缩小，缩小到一定程度关闭预览*/
+                  let imageElement = (e.currentTarget as HTMLDivElement).querySelector('img') as HTMLImageElement;
+                  let mobileTouchState = {
+                    startX: e.touches[0].clientX,
+                    startY: e.touches[0].clientY,
+                    touching: null as null | { scale: number },
+                  };
+                  const touchmove = (e: TouchEvent) => {
+                    if (autoClearIfDoubleTouching(e)) {return;}
+                    e.stopPropagation();
+                    e.preventDefault();
+                    let durX = e.touches[0].clientX - mobileTouchState.startX;
+                    let durY = e.touches[0].clientY - mobileTouchState.startY;
+                    if (!mobileTouchState.touching) {
+                      if (durY > durX && durY > 10) {
+                        transformState.mobileClosing = true;
+                        mobileTouchState.touching = { scale: 1 };
+                        /*拖拽结束时的处理动作*/
+                        touchEffects.push(async () => {
+                          transformState.mobileClosing = false;
+
+                          if (mobileTouchState.touching!.scale < 0.9) {
+                            /*取消缩放，改为实际设置大小，是的关闭动画合理*/
+                            methods.close();
+                          } else {
+                            /*取消缩放，还原原来的状态*/
+                            imageElement.style.transition = "all ease 300ms";
+                            imageElement.style.transform = "translate3d(0,0,0) scale(1)";
+                            delay(300).then(() => {
+                              imageElement.style.transition = "";
+                              imageElement.style.transform = "";
+                            });
+                          }
+
+                          mobileTouchState.touching = null;
+                        });
+                      }
+                    }
+                    if (!mobileTouchState.touching) {
+                      return;
+                    }
+                    if (durY < 0) {durY = 0;}
+                    if (durY === 0) {
+                      /*移动距离为0，不做缩放移动*/
+                      imageElement.style.transform = '';
+                    } else {
+                      /*按照移动距离进行缩放移动*/
+                      const height = Math.ceil(document.body.clientHeight / 3);
+                      const scale = Number((1 - durY / height).toFixed(2));
+                      mobileTouchState.touching.scale = scale;
+                      imageElement.style.transform = `translate3d(0,${durY}px,0) scale(${scale})`;
+                    }
+                  };
+                  touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false }));
+                  touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+                }
+              }
+            }
+
+          } else {
+            /*---------------------------------------双指拖拽缩放-------------------------------------------*/
+
+            if (!('touches' in e)) {return;}
+            const startTouchesDistance = Math.floor(Math.sqrt(Math.pow((e.touches[1].clientX - e.touches[0].clientX), 2) + Math.pow((e.touches[1].clientY - e.touches[0].clientY), 2)));
+
+            transformState.mobileScaling = { startScale: transformState.transformData.scale };
+
+            const touchmove = (e: TouchEvent) => {
+              e.stopPropagation();
+              e.preventDefault();
+
+              const moveTouchesDistance = Math.floor(Math.sqrt(Math.pow((e.touches[1].clientX - e.touches[0].clientX), 2) + Math.pow((e.touches[1].clientY - e.touches[0].clientY), 2)));
+              const durationDistance = Math.floor(moveTouchesDistance - startTouchesDistance);
+              const durScale = Number((durationDistance / 300).toFixed(2));
+              let newScale = Number((durScale + transformState.mobileScaling!.startScale).toFixed(2));
+              if (newScale < 1) {
+                newScale = 1;
+              }
+              transformMethods.setScale(newScale);
+              transformState.mobileScaling!.msg = `newScale:${newScale}`;
+            };
+
+            touchEffects.push(() => {
+              transformState.mobileScaling = null;
+            });
+
+            touchEffects.push(addWindowListener('touchmove', touchmove, { passive: false, }));
+            touchEffects.push(addWindowListener('touchend', touchEffects.clear, { passive: false }));
+          }
+        },
+      };
+
+      const transformStyles = useStyles(style => {
+        let left = transformState.transformData.left;
+        let top = transformState.transformData.top;
+
+        if (transformState.transformData.scale != 1) {
+
+          /**
+           * 限制位置不能超过边界
+           * @author  韦胜健
+           * @date    2024/1/5 15:47
+           */
+
+          let { clientHeight, clientWidth } = refs.carousel!.refs.el!;
+
+          const currentWidth = Number((transformState.currentImageRect.width * transformState.transformData.scale).toFixed(0));
+          const currentHeight = Number((transformState.currentImageRect.height * transformState.transformData.scale).toFixed(0));
+
+          if (currentWidth > clientWidth) {
+            const overWidth = Number(((currentWidth - clientWidth) / 2).toFixed(2));
+            if (left < -overWidth) {
+              left = -overWidth;
+            }
+            if (left > overWidth) {
+              left = overWidth;
+            }
+          } else {
+            left = 0;
+          }
+
+          if (currentHeight > clientHeight) {
+            const overHeight = Number(((currentHeight - clientHeight) / 2).toFixed(2));
+            if (top < -overHeight) {
+              top = -overHeight;
+            }
+            if (top > overHeight) {
+              top = overHeight;
+            }
+          } else {
+            top = 0;
+          }
+        }
+
+        style.transform = `translate3d(${left}px,${top}px,0) scale(${transformState.transformData.scale}) rotate(${transformState.transformData.rotate}deg)`;
+      });
+
+      const isTransforming = computed(() => !!transformState.mobileClosing || !!transformState.mobileScaling || transformState.transformData.scale != 1 || transformState.transformData.top != 0 || transformState.transformData.left != 0 || transformState.transformData.rotate != 0);
+
+      const transformMethods = {
+        zoomIn: () => {
+          transformMethods.setScale(Number((transformState.transformData.scale + 0.25).toFixed(1)));
+        },
+        zoomOut: () => {
+          transformMethods.setScale(Number((transformState.transformData.scale - 0.25).toFixed(1)));
+        },
+        anticlockwise: () => {
+          transformState.transformData.rotate = Number((transformState.transformData.rotate - 45).toFixed(1));
+        },
+        clockwise: () => {
+          transformState.transformData.rotate = Number((transformState.transformData.rotate + 45).toFixed(1));
+        },
+        /**
+         * 设置缩放比例，当比例小于1时设置为1，并且重置所有变化
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        setScale: (val: number) => {
+          if (val < 1) {
+            val = 1;
+          }
+          if (val == transformState.transformData.scale) {
+            return;
+          }
+          if (transformState.transformData.scale === 1) {
+            /*保存图片初始的大小尺寸*/
+            transformState.currentImageRect = getRectAutoFormat(refs.el?.querySelector('img[data-active=true]') as HTMLImageElement);
+          }
+          if (val === 1) {
+            transformMethods.reset();
+          } else {
+            transformState.transformData.scale = val;
+          }
+        },
+        /**
+         * 重置所有变化
+         * @author  韦胜健
+         * @date    2024/1/5 14:20
+         */
+        reset: () => {
+          transformState.transformData = {
+            scale: 1,
+            left: 0,
+            top: 0,
+            rotate: 0,
+          };
+        },
+      };
+
+      return { transformState, handler, isTransforming, transformStyles, transformMethods };
+    })();
+
+    const carouselOptimizer = (() => {
+
+      /*原始索引映射到环列表，在环列表中距离当前显示的索引的距离*/
+      const index2distance = computed(() => {
+        return buildCycleIndexList({ length: props.option.urls.length, current: state.current }).index2distance;
+      });
+
+      const isShow = (sourceIndex: number) => Math.abs(index2distance.value[sourceIndex]) < 2;
+
+      return {
+        isShow
+      };
+    })();
+
+    const keyboardHandler = (() => {
+      let isHovering = false;
+      const onMousemove = () => isHovering = true;
+      const onMouseleave = () => isHovering = false;
+      const initialize = () => {
+        if (!props.option.globalKeyboardEvent) {
+          setupEffects.push(addElementListener(refs.el!, 'mousemove', onMousemove));
+          setupEffects.push(addElementListener(refs.el!, 'mouseleave', onMouseleave));
+        }
+        setupEffects.push(
+          addWindowListener('keydown', e => {
+            if (!props.option.globalKeyboardEvent) {
+              if (!isHovering) {return;}
+            }
+            if (e.keyCode === 27) {
+              if (props.option.button == false || (typeof props.option.button === "object" && props.option.button.close == false)) {
+                return;
+              }
+              methods.close();
+            } else if (e.keyCode === 37) {
+              methods.prev();
+            } else if (e.keyCode === 39) {
+              methods.next();
+            }
+          })
+        );
+      };
+      return {
+        initialize,
+      };
+    })();
+
+    onMounted(async () => {
+      state.aspectRatio = refs.el!.offsetWidth / refs.el!.offsetHeight;
+      await delay(23);
+      state.show = true;
+      setupEffects.push(addElementListener(refs.el!, 'wheel', transformHandler.handler.onWheel));
+      keyboardHandler.initialize();
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} onDoubleClick={handler.onDoubleClickImage}>
+        {state.aspectRatio != null && <>
+          {!!props.option.mask && <div className="image-previewer-component-mask" style={maskStyles.value}/>}
+          <Carousel
+            ref={onRef.carousel}
+            autoPlay={0}
+            v-model={state.current}
+            height={props.option.autoHeight ? undefined : `calc(100% - ${props.option.galleryHeight}px)`}
+            style={{ paddingBottom: `${props.option.separatorHeight}px` }}
+            disableSwiper={transformHandler.isTransforming.value}
+            largeSwitchButton
+            switchButton={props.option.swipeButton == false ? false : undefined}
+            nextSwitchButtonTip="下一张(右按键)"
+            prevSwitchButtonTip="上一张(左按键)"
+          >
+            {props.option.urls.map((item, index) => (
+              <CarouselItem
+                key={index}
+                val={index}
+                onMousedownInner={index === state.current ? transformHandler.handler.touchstart : undefined}
+                onTouchstartInner={index === state.current ? transformHandler.handler.touchstart : undefined}
+                loading={state.readyMap[item.url] !== true}
+              >
+                {carouselOptimizer.isShow(index) && (
+                  <ImagePreviewerCarouselImage
+                    direction={props.option.autoHeight ? 'horizontal' : undefined}
+                    clientRatio={state.aspectRatio!}
+                    data-active={String(index === state.current)}
+                    src={item.url}
+                    style={index === state.current && transformHandler.isTransforming.value ? transformHandler.transformStyles.value : undefined}
+                    onReady={() => {
+                      state.readyMap = {
+                        ...state.readyMap,
+                        [item.url]: true,
+                      };
+                      index === state.current && ImagePreviewerHooks.onImagePreviewerReady.exec({ option: props.option });
+                    }}
+                  />
+                )}
+              </CarouselItem>
+            ))}
+          </Carousel>
+          {props.option.gallery != false && (
+            <ImagePreviewerGallery
+              option={props.option}
+              v-model={state.current}
+              style={galleryStyles.value}
+            />
+          )}
+          {props.option.button !== false && (
+            <ImagePreviewerButtonBar
+              button={props.option.button}
+
+              onZoomIn={transformHandler.transformMethods.zoomIn}
+              onZoomOut={transformHandler.transformMethods.zoomOut}
+              onAnticlockwise={transformHandler.transformMethods.anticlockwise}
+              onClockwise={transformHandler.transformMethods.clockwise}
+              onReset={transformHandler.transformMethods.reset}
+              onClose={methods.close}
+            />
+          )}
+        </>}
+        {/*<div style={{ position: 'fixed', top: '0', left: '0', width: '100%' }}>{JSON.stringify(transformHandler.transformState.mobileScaling)}</div>*/}
+      </div>
+    );
+  },
+});