plain-design 1.0.0-beta.11 → 1.0.0-beta.110

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

@@ -0,0 +1,140 @@
+import {computed, designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
+import Tooltip from "../Tooltip";
+import {iImagePreviewerOption} from "./image-previewer.utils";
+
+export const ImagePreviewerButtonBar = designComponent({
+  name: 'image-previewer-button-bar',
+  props: {
+    button: { type: [Boolean, Object] as PropType<iImagePreviewerOption['button']> }
+  },
+  emits: {
+    onZoomIn: () => true,
+    onZoomOut: () => true,
+    onAnticlockwise: () => true,
+    onClockwise: () => true,
+    onReset: () => true,
+    onClose: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const classes = useClasses(() => [
+      'image-previewer-button-bar'
+    ]);
+
+    const buttonAvailable = computed((): Exclude<iImagePreviewerOption['button'], boolean | undefined> => {
+      if (props.button == null || props.button == true) {
+        return {
+          zoomIn: true,
+          zoomOut: true,
+          clockwise: true,
+          anticlockwise: true,
+          reset: true,
+          close: true,
+        };
+      }
+      if (props.button === false) {
+        return {
+          zoomIn: false,
+          zoomOut: false,
+          clockwise: false,
+          anticlockwise: false,
+          reset: false,
+          close: false,
+        };
+      }
+      return {
+        zoomIn: props.button.zoomIn != false,
+        zoomOut: props.button.zoomOut != false,
+        clockwise: props.button.clockwise != false,
+        anticlockwise: props.button.anticlockwise != false,
+        reset: props.button.reset != false,
+        close: props.button.close != false,
+      };
+    });
+
+    const buttons = [
+      buttonAvailable.value.zoomIn && {
+        tip: '放大(滚轮上滑)', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-zoom-in" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M32.6066 32.6066C35.3211 29.8921 37 26.1421 37 22C37 13.7157 30.2843 7 22 7C13.7157 7 7 13.7157 7 22C7 30.2843 13.7157 37 22 37C26.1421 37 29.8921 35.3211 32.6066 32.6066ZM32.6066 32.6066L41.5 41.5M29 22H15M22 29V15"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onZoomIn();
+        }
+      },
+      buttonAvailable.value.zoomOut && {
+        tip: '缩小(滚轮下滑)', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-zoom-out" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M32.6066 32.6066C35.3211 29.8921 37 26.1421 37 22C37 13.7157 30.2843 7 22 7C13.7157 7 7 13.7157 7 22C7 30.2843 13.7157 37 22 37C26.1421 37 29.8921 35.3211 32.6066 32.6066ZM32.6066 32.6066L41.5 41.5M29 22H15"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onZoomOut();
+        }
+      },
+      buttonAvailable.value.anticlockwise && {
+        tip: '逆时针旋转', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-rotate-left" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M10 22C10 21.4477 10.4477 21 11 21H31C31.5523 21 32 21.4477 32 22V38C32 38.5523 31.5523 39 31 39H11C10.4477 39 10 38.5523 10 38V22Z"></path>
+            <path d="M23 11H34C37.3137 11 40 13.6863 40 17V23"></path>
+            <path d="M22.5 12.8933L19.5873 11L22.5 9.10672L22.5 12.8933Z"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onAnticlockwise();
+        }
+      },
+      buttonAvailable.value.clockwise && {
+        tip: '顺时针旋转', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-rotate-right" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M38 22C38 21.4477 37.5523 21 37 21H17C16.4477 21 16 21.4477 16 22V38C16 38.5523 16.4477 39 17 39H37C37.5523 39 38 38.5523 38 38V22Z"></path>
+            <path d="M25 11H14C10.6863 11 8 13.6863 8 17V23"></path>
+            <path d="M25.5 12.8933L28.4127 11L25.5 9.10672L25.5 12.8933Z"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onClockwise();
+        }
+      },
+      buttonAvailable.value.reset && {
+        tip: '重置', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-sync" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M33.1927 11.9799L34.607 10.5657L36.0212 9.15145H33.1927V11.9799Z" fill="currentColor" stroke="none" strokeWidth="none"></path>
+            <path d="M14.8115 36.018L13.3973 37.4322L11.9831 38.8464H14.8115V36.018Z" fill="currentColor" stroke="none" strokeWidth="none"></path>
+            <path d="M34.607 10.5657L36.0212 9.15145H33.1927V11.9799L34.607 10.5657ZM34.607 10.5657L36.0212 11.9799C42.6601 18.6188 42.6601 29.3826 36.0212 36.0215C33.4881 38.5545 30.3546 40.1211 27.0788 40.7212M13.3973 37.4322L11.9831 38.8464H14.8115V36.018L13.3973 37.4322ZM13.3973 37.4322L11.9831 36.018C5.34418 29.379 5.34418 18.6152 11.9831 11.9763C14.5161 9.44329 17.6497 7.87672 20.9255 7.27661"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onReset();
+        }
+      },
+      buttonAvailable.value.close && {
+        tip: '关闭(ESC按键/双击图片)', icon: () => (
+          <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none" className="pi-close" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" style={{ verticalAlign: "baseline" }}>
+            <path d="M9.85742 9.85791L23.9996 24M23.9996 24L38.1417 38.1422M23.9996 24L38.1417 9.85791M23.9996 24L9.85742 38.1422"></path>
+          </svg>
+        ), handler: (e: iMouseEvent) => {
+          e.stopPropagation();
+          emit.onClose();
+        }
+      },
+    ].filter(Boolean);
+
+    const onDoubleClickStopPropagation = (e: iMouseEvent) => {e.stopPropagation();};
+
+    return () => (
+      buttons.length && (
+        <div className={classes.value}>
+          {buttons.map((btn) => (
+            !!btn && typeof btn != "boolean" && !!btn.icon() && <Tooltip key={btn.tip} message={btn.tip} placement="bottom">
+              <div onClick={btn.handler} onDoubleClick={onDoubleClickStopPropagation} className="image-previewer-button">
+                {btn.icon()}
+              </div>
+            </Tooltip>
+          ))}
+        </div>
+      )
+    );
+  },
+});

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

@@ -0,0 +1,54 @@
+import {designComponent, iHTMLImageElement, iMouseEvent, PropType, reactive, useRefs, useStyles} from "@peryl/react-compose";
+import {delay} from "@peryl/utils/delay";
+
+/**
+ * img自动判断自己是应该宽度沾满还是高度沾满
+ * @author  韦胜健
+ * @date    2024/1/5 15:47
+ */
+export const ImagePreviewerCarouselImage = designComponent({
+  props: {
+    src: { type: String, required: true },
+    direction: { type: String as PropType<'horizontal' | 'vertical'> },
+    clientRatio: { type: Number, required: true },
+  },
+  inheritPropsType: iHTMLImageElement,
+  emits: {
+    onReady: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ img: iHTMLImageElement });
+
+    const state = reactive({
+      direction: props.direction as null | undefined | 'horizontal' | 'vertical'
+    });
+
+    const styles = useStyles(style => {
+      if (!state.direction) {style.opacity = "0";}
+    });
+
+    const onLoad = async () => {
+      if (!state.direction) {
+        const { height, width } = refs.img!;
+        const imageRatio = width / height;
+        state.direction = imageRatio > props.clientRatio ? 'horizontal' : 'vertical';
+        await delay();
+      }
+      emit.onReady();
+    };
+
+    const onError = async () => {emit.onReady();};
+
+    /**
+     * 阻止点击冒泡，避免触发image previewer的双击关闭动作
+     * @author  韦胜健
+     * @date    2024/1/8 10:05
+     */
+    const preventDefaultDraggier = (e: iMouseEvent) => {e.preventDefault();};
+
+    return () => (
+      <img data-ignore="true" ref={onRef.img} style={styles.value} src={props.src} data-direction={state.direction} onLoad={onLoad} onError={onError} onDragStart={preventDefaultDraggier}/>
+    );
+  },
+});

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

@@ -0,0 +1,202 @@
+import {computed, designComponent, iHTMLDivElement, iMouseEvent, onBeforeUnmount, PropType, reactive, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
+import {notNull} from "@peryl/utils/notNull";
+import {delay} from "@peryl/utils/delay";
+import {Icon} from "../Icon";
+import {iImagePreviewerOption} from "./image-previewer.utils";
+import {PreviewerLoading} from "./PreviewerLoading";
+import {VirtualList} from "../VirtualList";
+import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
+
+/**
+ * 画廊组件
+ * @author  韦胜健
+ * @date    2024/1/8 10:13
+ */
+export const ImagePreviewerGallery = designComponent({
+  name: 'image-gallery',
+  props: {
+    modelValue: { type: Number },
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true }
+  },
+  inheritPropsType: iHTMLDivElement,
+  emits: {
+    onUpdateModelValue: (val?: number) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ virtual: VirtualList });
+
+    const model = useModel(() => notNull(props.modelValue, 0), emit.onUpdateModelValue, { onChange: () => {handler.adjustScrollLeft();} });
+
+    const state = reactive({
+      /*是否显示滚动按钮*/
+      showScroller: false,
+
+      readyMap: {} as Record<string, boolean | undefined>,
+    });
+
+    const classes = useClasses(() => [
+      'image-previewer-component-gallery',
+      {
+        'image-previewer-component-gallery-show-scroller': state.showScroller
+      }
+    ]);
+
+    const utils = {
+      getScrollInfo: () => {
+        const { offsetWidth, scrollWidth, scrollLeft } = refs.virtual!.refs.scroll!.refs.wrapper!;
+        return { wrapperWidth: offsetWidth, scrollWidth, scrollLeft };
+      },
+      scrollLeft: (left: number, duration: number) => {
+        refs.virtual!.refs.scroll?.methods.scrollLeft(left, duration);
+      },
+    };
+
+    const handler = {
+
+      /**
+       * 根据选中的元素位置自动调整滚动距离，使得选中的元素居中展示
+       * @author  韦胜健
+       * @date    2024/1/5 17:53
+       */
+      adjustScrollLeft: async (duration = 300) => {
+        await delay();
+        const { wrapperWidth } = utils.getScrollInfo();
+        let scrollLeft = itemRect.value.width * model.value - Math.ceil(itemRect.value.width / 2) - Math.ceil(wrapperWidth / 2);
+        if (scrollLeft < 0) {scrollLeft = 0;}
+        utils.scrollLeft(scrollLeft, duration);
+      },
+      /**
+       * 图片加载完毕时，自动判断是否需要显示滚动按钮
+       * @author  韦胜健
+       * @date    2024/1/5 17:53
+       */
+      onImageLoad: async (thumbUrl: string) => {
+        state.readyMap = { ...state.readyMap, [thumbUrl]: true };
+        await delay();
+        const { wrapperWidth, scrollWidth } = utils.getScrollInfo();
+        const showScroller = scrollWidth > wrapperWidth;
+        if (state.showScroller != showScroller) {
+          state.showScroller = showScroller;
+          await handler.adjustScrollLeft(0);
+        }
+      },
+      /**
+       * 点击gallery item的时候更新绑定值，并且调整滚动位置
+       * @author  韦胜健
+       * @date    2024/1/5 17:54
+       */
+      onClickGalleryItem: async (index: number) => {
+        model.value = index;
+      },
+      /**
+       * 滚动到上一页
+       * @author  韦胜健
+       * @date    2024/1/5 17:54
+       */
+      scrollPrev: (e: iMouseEvent) => {
+        e.stopPropagation();
+        const { wrapperWidth, scrollLeft } = utils.getScrollInfo();
+        utils.scrollLeft(Math.ceil(scrollLeft - wrapperWidth / 2), 300);
+      },
+      /**
+       * 滚动到下一页
+       * @author  韦胜健
+       * @date    2024/1/5 17:54
+       */
+      scrollNext: (e: iMouseEvent) => {
+        e.stopPropagation();
+        const { wrapperWidth, scrollLeft } = utils.getScrollInfo();
+        utils.scrollLeft(Math.ceil(scrollLeft + wrapperWidth / 2), 300);
+      },
+      /**
+       * 双击滚动按钮的时候阻止事件冒泡，避免影响导致关闭预览
+       * @author  韦胜健
+       * @date    2024/1/5 17:54
+       */
+      onDoubleClickGallery: (e: iMouseEvent) => {
+        e.stopPropagation();
+      },
+      /**
+       * 拖拽图片的时候阻止默认行为，避免下载图片
+       * @author  韦胜健
+       * @date    2024/1/5 17:55
+       */
+      preventDragImage: (e: iMouseEvent) => {
+        e.preventDefault();
+      },
+      ...(() => {
+        let clickIndex: number | null = null;
+        let clickClientX: number | null = null;
+        const onMousedownItem = (e: iMouseEvent, index: number) => {
+          clickIndex = index;
+          clickClientX = e.clientX;
+        };
+        const onMouseupItem = (e: iMouseEvent, index: number) => {
+          if (index !== clickIndex || clickIndex == null || clickClientX == null) {return;}
+          if (Math.abs(e.clientX - clickClientX) > 10) {
+            /*距离过长，为拖拽而不是点击*/
+            return;
+          }
+          handler.onClickGalleryItem(index);
+        };
+
+        return { onMousedownItem, onMouseupItem };
+      })()
+    };
+
+    const itemRect = computed(() => {
+      const height = props.option.galleryHeight;
+      const width = Math.ceil(1920 / 1080 * height);
+      return { height, width };
+    });
+
+    const itemStyles = useStyles(style => {
+      style.height = itemRect.value.height + 'px';
+      style.width = itemRect.value.width + 'px';
+    });
+
+    onBeforeUnmount(useDragHorizontalScroll(() => refs.virtual?.refs.scroll?.refs.wrapper));
+
+    return () => (
+      <div className={classes.value} onDoubleClick={handler.onDoubleClickGallery}>
+        {state.showScroller && (
+          <div className="image-previewer-component-gallery-scroller">
+            <div className="image-previewer-component-gallery-scroller-prev" onClick={handler.scrollPrev}>
+              <Icon icon="pi-left"/>
+            </div>
+            <div className="image-previewer-component-gallery-scroller-next" onClick={handler.scrollNext}>
+              <Icon icon="pi-right"/>
+            </div>
+          </div>
+        )}
+        <div className="image-previewer-component-gallery-container">
+          <VirtualList
+            ref={onRef.virtual}
+            data={props.option.urls}
+            horizontal
+            size={itemRect.value.width}
+            v-slots={{
+              default: ({ index, vIndex, item, vid }) => (
+                <div
+                  data-vid={vid}
+                  data-idx={index}
+                  key={vIndex}
+                  style={itemStyles.value}
+                  className="image-previewer-component-gallery-item"
+                  onMouseDown={(e) => handler.onMousedownItem(e, index)}
+                  onMouseUp={(e) => handler.onMouseupItem(e, index)}
+                  data-active={String(model.value == index)}
+                >
+                  <img data-ignore="true" src={item.thumbUrl} onMouseDown={handler.preventDragImage} onLoad={() => handler.onImageLoad(item.thumbUrl)} onError={() => handler.onImageLoad(item.thumbUrl)}/>
+                  {/*{<PreviewerLoading/>}*/}
+                  {state.readyMap[item.thumbUrl] !== true && <PreviewerLoading/>}
+                </div>
+              ),
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,26 @@
+import {designComponent} from "@peryl/react-compose";
+import './previewer-loading.scss';
+
+export const PreviewerLoading = designComponent({
+  name: 'previewer-loading',
+  setup() {
+    return () => (
+      <div className="previewer-loading">
+        <div className="plain-loading-tag">
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+          <div className="plain-loading-inner"></div>
+        </div>
+      </div>
+    );
+  },
+});

package/src/packages/components/ImagePreviewer/image-previewer.scss

@@ -0,0 +1,244 @@
+.image-previewer-component {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+  user-select: none;
+
+  .image-previewer-component-mask {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 1;
+    transition: opacity 300ms linear;
+    content: '';
+  }
+
+  @include comp(carousel) {
+    position: relative;
+    z-index: 2;
+    box-sizing: border-box;
+
+    .carousel-item-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .carousel-indicator, .carousel-switch-button-prev, .carousel-switch-button-next, img {
+      pointer-events: auto;
+    }
+    .carousel-indicator {
+      transition: none;
+      bottom: -12px;
+    }
+  }
+
+  img {
+    display: inline-block;
+    object-fit: contain;
+
+    &[data-direction=horizontal] {
+      width: 100%;
+    }
+
+    &[data-direction=vertical] {
+      height: 100%;
+    }
+  }
+
+  &.image-previewer-component-waiting {
+    .image-previewer-component-mask, .image-previewer-component-gallery {
+      opacity: 0;
+    }
+  }
+
+  .image-previewer-component-gallery {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    transition: opacity 300ms linear;
+    user-select: none;
+
+    .image-previewer-component-gallery-container {
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+
+    .image-previewer-component-gallery-item {
+      display: inline-block;
+      height: 100%;
+      padding: 2px 1px;
+      cursor: pointer;
+      box-sizing: border-box;
+      position: relative;
+      background-color: #DDDDDD;
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: center;
+        position: relative;
+        z-index: 2;
+      }
+
+      &[data-active=true] {
+        &:before {
+          position: absolute;
+          inset: 0 -1px;
+          content: '';
+          background-color: gold;
+          z-index: 1;
+        }
+      }
+
+      &:first-child {
+        padding-left: 2px;
+
+        &[data-active=true] {
+          &:before {
+            top: 0;
+            left: 0;
+            right: -1px;
+            bottom: 0;
+          }
+        }
+      }
+
+      &:last-child {
+        padding-right: 2px;
+
+        &[data-active=true] {
+          &:before {
+            top: 0;
+            right: 0;
+            left: -1px;
+            bottom: 0;
+          }
+        }
+      }
+    }
+
+    .image-previewer-component-gallery-scroller {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      z-index: 3;
+
+      .image-previewer-component-gallery-scroller-prev, .image-previewer-component-gallery-scroller-next {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        color: white;
+        font-size: 20px;
+        pointer-events: auto;
+        cursor: pointer;
+        position: relative;
+
+        &:before {
+          position: absolute;
+          inset: 0;
+          content: '';
+          opacity: 0.5;
+          transition: opacity 300ms ease;
+          z-index: 1;
+        }
+
+        @include comp(icon) {
+          position: relative;
+          z-index: 2;
+        }
+      }
+
+      .image-previewer-component-gallery-scroller-prev {
+        &:before {
+          background: linear-gradient(to right, black, transparent);
+        }
+
+        &:hover {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+
+      .image-previewer-component-gallery-scroller-next {
+        &:before {
+          background: linear-gradient(to left, black, transparent);
+        }
+
+        &:hover {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &.image-previewer-component-gallery-show-scroller {
+      justify-content: flex-start;
+    }
+
+    &:not(.image-previewer-component-gallery-show-scroller) {
+      .scroll-wrapper {
+        text-align: center;
+      }
+    }
+
+    .previewer-loading {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 16px;
+      z-index: 3;
+      background-color: black;
+    }
+  }
+
+  .image-previewer-button-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    padding: 16px;
+
+    .image-previewer-button {
+      pointer-events: auto;
+      color: white;
+      height: 50px;
+      width: 50px;
+      font-size: 28px;
+      background-color: rgba(black, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color ease 300ms;
+
+      & + .image-previewer-button {
+        margin-left: 1px;
+      }
+
+      &:hover {
+        background-color: rgba(black, 0.3);
+      }
+    }
+  }
+}