plain-design 1.0.0-beta.31 → 1.0.0-beta.32

package/src/packages/components/ImagePreviewer/image-previewer.utils.tsx

@@ -0,0 +1,135 @@
+import {PartialFields} from "../../utils/type";
+import {createCounter, createHooks} from "plain-design-composition";
+import {notNull} from "../../utils/notNull";
+
+export const ImagePreviewerConstants = {
+  /*画廊高度，默认70px*/
+  DEFAULT_GALLERY_HEIGHT: 70,
+  /*画廊与大图之间的距离，默认24px*/
+  DEFAULT_SEPARATOR_HEIGHT: 0,
+};
+
+export interface iImagePreviewerOptionPartialFields {
+  imageElement?: null | HTMLImageElement,                 // 点击的图片原始dom对象，如果有传这个属性对象的话会有一个显示放大动画
+  galleryHeight: number,                                  // 底部画廊的高度
+  separatorHeight: number,                                // 底部画廊距离图片显示区域的距离
+  autoHeight: boolean,                                    // 自动高度，默认是true。这样设置之后图片会撑满宽度，高度自动；关闭的时候会设置高度100%，图片宽度自动
+  mask: boolean,                                          // 显示背部遮罩
+  button?: boolean | {                                    // 顶部按钮栏控制，button为false则禁用所有按钮；为对象则单独禁用某个按钮
+    zoomIn?: boolean,                                     // 放大按钮
+    zoomOut?: boolean,                                    // 缩小按钮
+    clockwise?: boolean,                                  // 顺时针旋转按钮
+    anticlockwise?: boolean,                              // 逆时针旋转按钮
+    reset?: boolean,                                      // 重置按钮
+    close?: boolean,                                      // 关闭按钮
+  },
+  swipeButton?: boolean                                   // 左右切换按钮控制，swipeButton为false则禁用前后按钮
+  gallery?: boolean,                                      // 底部画廊控制，为false则禁用底部画廊
+  globalKeyboardEvent?: boolean                           // 监听全局的键盘事件，默认不监听全局键盘按键事件，而是等鼠标移入的时候才监听
+  maskColor?: string,                                     // 遮罩颜色
+  disableZoomOnWheel?: boolean,                           // 禁用滚轮缩放
+  /*---------------------------------------以下为不可配置属性-------------------------------------------*/
+  id: string,                                             // option唯一标识
+  oldSourceImageOpacity?: string                          // 原始的img对象的opacity属性值
+}
+
+export interface iImagePreviewerOption extends iImagePreviewerOptionPartialFields {
+  current: number;                                        // 当前显示的元素索引
+  urls: { url: string, thumbUrl: string }[];              // 所有展示的图片，url为大图地址，thumbUrl为底部画廊图片预览地址
+}
+
+export type iImagePreviewerParamOption = string | string[] | iImagePreviewerOption['urls'] | Omit<PartialFields<iImagePreviewerOption, keyof iImagePreviewerOptionPartialFields>, 'urls'> & { urls: string[] | iImagePreviewerOption['urls'] }
+
+export const ImagePreviewerHooks = {
+  /*PreviewerComponent挂载完毕事件*/
+  onImagePreviewerReady: createHooks<(data: { option: iImagePreviewerOption }) => void>()
+};
+
+const nextOptionId = createCounter('image_previewer');
+
+export function createImagePreviewerOption(
+  param: iImagePreviewerParamOption,
+  imageElement?: HTMLImageElement,
+  defaultParam?: Partial<iImagePreviewerOption>
+): iImagePreviewerOption {
+  if (typeof param === "string") {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: [{ url: param, thumbUrl: param }],
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (Array.isArray(param)) {
+    return {
+      id: nextOptionId(),
+      current: 0,
+      imageElement,
+      autoHeight: true,
+      mask: false,
+      urls: param.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+      galleryHeight: ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT,
+      separatorHeight: ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT,
+      ...defaultParam,
+    };
+  }
+  if (!!imageElement) {
+    param.imageElement = imageElement;
+  }
+  return {
+    autoHeight: true,
+    mask: false,
+    galleryHeight: notNull(param.galleryHeight, ImagePreviewerConstants.DEFAULT_GALLERY_HEIGHT),
+    separatorHeight: notNull(param.separatorHeight, ImagePreviewerConstants.DEFAULT_SEPARATOR_HEIGHT),
+    ...defaultParam,
+    ...param,
+    id: nextOptionId(),
+    urls: param.urls.map(p => typeof p === "string" ? { url: p, thumbUrl: p } : p),
+  };
+}
+
+/**
+ * 获取imageElement在containerElement容器中居中铺满的位置信息
+ * @author  韦胜健
+ * @date    2024/1/10 18:50
+ */
+export const getCenterRect = (
+  {
+    imageElement, containerElement
+  }: {
+    imageElement: HTMLDivElement,
+    containerElement: HTMLDivElement | { containerRatio: number, containerHeight: number, containerWidth: number },
+  }
+) => {
+  const imageRatio = Number((imageElement.offsetWidth / imageElement.offsetHeight).toFixed(2));
+  const { containerRatio, containerHeight, containerWidth } = 'tagName' in containerElement ? (() => {
+    const containerRatio = Number((containerElement.offsetWidth / containerElement.offsetHeight).toFixed(2));
+    return {
+      containerRatio,
+      containerHeight: containerElement.offsetHeight,
+      containerWidth: containerElement.offsetWidth,
+    };
+  })() : containerElement;
+
+
+  if (imageRatio > containerRatio) {
+    /*宽度更宽，固定宽度为屏幕宽度缩放*/
+    const left = 0;
+    const width = containerWidth;
+    const height = Number((imageElement.offsetHeight / imageElement.offsetWidth * width).toFixed(0));
+    const top = Number(((containerHeight - height) / 2).toFixed(0));
+    return { top, left, width, height };
+  } else {
+    /*高度更高，固定高度将宽度缩放*/
+    const top = 0;
+    const height = containerHeight;
+    const width = Number((imageElement.offsetWidth / imageElement.offsetHeight * height).toFixed(0));
+    const left = Number(((containerWidth - width) / 2).toFixed(0));
+    return { top, left, width, height };
+  }
+};

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

@@ -0,0 +1,5 @@
+import {ImagePreviewer} from "./ImagePreviewer";
+
+export default ImagePreviewer;
+
+export {ImagePreviewer};

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

@@ -0,0 +1,52 @@
+.previewer-loading {
+
+  $size: 1em;
+
+  height: $size;
+  width: $size;
+
+  .plain-loading-tag {
+    $centerRadius: (0.5*$size)/1.2;
+    $itemWidth: (0.35*$size)/1.2;
+    $itemHeight: (0.1*$size)/1.2;
+    $width: $centerRadius + $itemWidth * 2;
+    $height: $width;
+
+    width: $width;
+    height: $height;
+    position: relative;
+    display: block;
+
+    .plain-loading-inner {
+      background-color: currentColor;
+      display: inline-block;
+      width: $itemWidth;
+      height: $itemHeight;
+      margin-top: $itemHeight / 2 * -1;
+      margin-left: $centerRadius / 2;
+      top: 50%;
+      left: 50%;
+      position: absolute;
+      transform-origin: ($centerRadius / 2 * -1) ($itemHeight / 2);
+      @for $i from 1 through 12 {
+        &:nth-child(#{$i}) {
+          transform: rotate(($i - 1) * 30deg);
+          animation: plain-loading-tag 1s linear infinite #{-1 + $i / 12}s;
+        }
+      }
+      @keyframes plain-loading-tag {
+        0% {
+          opacity: 1;
+        }
+        @for $i from 1 through 11 {
+          #{$i / 12 * 100}% {
+            opacity: 1 - $i / 12;
+          }
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/Input/useMultipleInput.tsx

@@ -1,12 +1,12 @@
 import {AutoWidthInput} from "../AutoWidthInput";
 import {iInputCompositionData, inputScrollEnd} from "./input.utils";
 import Icon from "../Icon";
-import {iHTMLElement, useClasses, useModel, useRefs, watch} from "plain-design-composition";
+import {iHTMLElement, useClasses, useModel, useRefs} from "plain-design-composition";
 import {getKey, KEY} from "../KeyboardService";
 import {delay} from "plain-utils/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "plain-utils/utils/createEffects";
-import {ClientZoom} from "../..";
+import {useDragHorizontalScroll} from "../../uses/useDragHorizontalScroll";
 
 /**
  * 渲染多值输入框
@@ -121,80 +121,3 @@ export const useMultipleInput = createEffectiveHandler(({ hooks, props, model, r
 
   return effects.clear;
 });
-
-function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
-
-  const staticState = {
-    isDragging: false,
-    el: null as null | undefined | HTMLElement,
-    start: {
-      x: 0,
-      left: 0,
-      width: 0,
-    },
-    move: {
-      x: 0
-    }
-  };
-
-  const { effects } = createEffects();
-
-  const handler = {
-    mousedown: (e: MouseEvent) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.isDragging = false;
-      staticState.start = {
-        x: clientX,
-        left: staticState.el!.scrollLeft,
-        width: staticState.el!.scrollWidth,
-      };
-      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
-    },
-    mousemove: (e: MouseEvent) => {
-      const { clientX } = ClientZoom.getClientPosition(e);
-      staticState.move.x = clientX;
-      const durX = staticState.move.x - staticState.start.x;
-      if (!staticState.isDragging) {
-        if (Math.abs(durX) > 5) {
-          staticState.isDragging = true;
-        }
-      }
-      if (!staticState.isDragging) {
-        return;
-      }
-      staticState.el!.scrollLeft = staticState.start.left - durX;
-    },
-    mouseup: () => {
-      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
-      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
-    },
-    onWheel: (e: WheelEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const el = e.currentTarget as HTMLElement;
-      const delta = e.deltaX + e.deltaY;
-      el.scrollLeft += delta;
-    },
-  };
-
-  effects.push(watch(() => getEl(), el => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-    staticState.el = el;
-    if (!staticState.el) {return;}
-    staticState.el.addEventListener('mousedown', handler.mousedown);
-    staticState.el.addEventListener('wheel', handler.onWheel);
-  }));
-
-  effects.push(() => {
-    if (!!staticState.el) {
-      staticState.el.removeEventListener('mousedown', handler.mousedown);
-      staticState.el.removeEventListener('wheel', handler.onWheel);
-    }
-  });
-
-  return effects.clear;
-}

package/src/packages/components/Scroll/index.tsx

@@ -78,9 +78,9 @@ export const Scroll = designComponent({
       set isDragging(val: boolean) {
         this._isDragging = val;
         if (val) {
-          refs.host!.setAttribute('is-dragging', '');
+          refs.host?.setAttribute('is-dragging', '');
         } else {
-          refs.host!.removeAttribute('is-dragging');
+          refs.host?.removeAttribute('is-dragging');
         }
       },
     };
@@ -215,9 +215,9 @@ export const Scroll = designComponent({
        * @date    2020/12/15 10:16
        */
       disableListTransition: (() => {
-        const disabledQueueAnimation = debounce(() => refs.host!.removeAttribute('virtual-scrolling'), 300, true);
+        const disabledQueueAnimation = debounce(() => refs.host?.removeAttribute('virtual-scrolling'), 300, true);
         return () => {
-          refs.host!.setAttribute('virtual-scrolling', '');
+          refs.host?.setAttribute('virtual-scrolling', '');
           disabledQueueAnimation();
         };
       })(),
@@ -227,9 +227,9 @@ export const Scroll = designComponent({
        * @date    2022.10.28 21:34
        */
       disableInnerTransition: (() => {
-        const disabledQueueAnimation = debounce(() => refs.host!.removeAttribute('disable-all-transition'), 300, true);
+        const disabledQueueAnimation = debounce(() => refs.host?.removeAttribute('disable-all-transition'), 300, true);
         return () => {
-          refs.host!.setAttribute('disable-all-transition', '');
+          refs.host?.setAttribute('disable-all-transition', '');
           disabledQueueAnimation();
         };
       })()

package/src/packages/components/SortList/index.tsx

@@ -0,0 +1,191 @@
+import {computed, CSSProperties, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import './sort-list.scss';
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addWindowListener} from "plain-utils/dom/addWindowListener";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {iElementRect} from "../../utils/getRowEl";
+
+export const SortList = designComponent({
+  name: 'sort-list',
+  props: {
+    modelValue: { type: Array as PropType<any[]> },
+    col: { type: Number, default: 1 },
+    space: { type: Number, default: 0 },
+  },
+  emits: {
+    onUpdateModelValue: (val: any[]) => true,
+    onDragStart: (data: { item: any, index: number, e: iMouseEvent }) => true,
+  },
+  scopeSlots: {
+    default: (data: { item: any, index: number }) => true,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue || [], emit.onUpdateModelValue);
+
+    const isHorizontal = computed(() => props.col > 1);
+
+    const classes = useClasses(() => [
+      getComponentCls('sort-list'),
+    ]);
+
+    const draggier = (() => {
+
+      const draggierState = reactive({
+        isDragging: false,
+      });
+
+      const mousedown = (e: iMouseEvent, item: any, index: number) => {
+        emit.onDragStart({ item, index, e });
+
+        const { effects: draggierEffects } = createEffects();
+        const staticState = {
+          start: {
+            x: e.clientX,
+            y: e.clientY,
+            left: 0,
+            top: 0,
+          },
+          siblingRects: (() => {
+            const sortItemElements = Array.from(refs.el!.querySelectorAll('.sort-item')) as HTMLElement[];
+            return sortItemElements.map((el, index) => {
+              return {
+                index,
+                rects: getRectAutoFormat(el)
+              };
+            });
+          })(),
+          dropData: null as null | {
+            itemRect: { index: number, rects: Omit<iElementRect, 'right' | 'bottom'> },
+            pos: 'prev' | 'next'
+          }
+        };
+        const sourceElement = (e.currentTarget as HTMLElement);
+        const sourceRect = getRectAutoFormat(sourceElement);
+        staticState.start.left = sourceRect.left;
+        staticState.start.top = sourceRect.top;
+        let shadowElement: HTMLElement | null = null;
+        let indicator: HTMLDivElement | null = null;
+        const indicatorSize = 2;
+
+        draggierEffects.push(addWindowListener('mouseup', draggierEffects.clear));
+        draggierEffects.push(addWindowListener('mousemove', (e) => {
+          const durX = e.clientX - staticState.start.x;
+          const durY = e.clientY - staticState.start.y;
+
+          if (!draggierState.isDragging) {
+            if (Math.abs(durX) > 5 || Math.abs(durY) > 5) {
+              draggierState.isDragging = true;
+              draggierEffects.push(() => {draggierState.isDragging = false;});
+
+              shadowElement = sourceElement.cloneNode(true) as HTMLElement;
+              shadowElement.style.boxSizing = 'border-box';
+              shadowElement.style.position = 'fixed';
+              shadowElement.style.top = sourceRect.top + 'px';
+              shadowElement.style.left = sourceRect.left + 'px';
+              shadowElement.style.height = sourceRect.height + 'px';
+              shadowElement.style.width = sourceRect.width + 'px';
+              shadowElement.style.opacity = '0.5';
+              shadowElement.style.zIndex = '2';
+              refs.el!.appendChild(shadowElement);
+              draggierEffects.push(() => {refs.el!.removeChild(shadowElement!);});
+
+              sourceElement.style.opacity = "0";
+              draggierEffects.push(() => sourceElement.style.opacity = "");
+
+              indicator = document.createElement('div') as HTMLDivElement;
+              indicator.style.position = 'fixed';
+              indicator.style.zIndex = '3';
+              refs.el!.appendChild(indicator);
+              draggierEffects.push(() => {refs.el!.removeChild(indicator!);});
+
+              draggierEffects.push(() => {
+                if (!staticState.dropData) {return;}
+                if (staticState.dropData.itemRect.index === index) {return;}
+                let currentIndex = index;
+                let targetIndex = staticState.dropData.itemRect.index + (staticState.dropData.pos === 'prev' ? 0 : 1);
+                const newData = [...model.value];
+                const removeData = newData.splice(currentIndex, 1);
+                newData.splice(targetIndex > currentIndex ? targetIndex - 1 : targetIndex, 0, ...removeData);
+                model.value = newData;
+              });
+            }
+          }
+          if (!draggierState.isDragging || !shadowElement || !indicator) {
+            return;
+          }
+
+          shadowElement.style.top = `${Math.ceil(staticState.start.top + durY)}px`;
+          shadowElement.style.left = `${Math.ceil(staticState.start.left + durX)}px`;
+
+          const matchItemRect = staticState.siblingRects.find(i => {
+            return e.clientY > i.rects.top && e.clientY < i.rects.top + i.rects.height && e.clientX > i.rects.left && e.clientX < i.rects.left + i.rects.width;
+          });
+          if (!matchItemRect) {
+            staticState.dropData = null;
+            indicator.style.display = 'none';
+          } else {
+            staticState.dropData = {
+              itemRect: matchItemRect,
+              pos: (() => {
+                if (isHorizontal.value) {
+                  return e.clientX > matchItemRect.rects.left + matchItemRect.rects.width / 2 ? 'next' : 'prev';
+                } else {
+                  return e.clientY > matchItemRect.rects.top + matchItemRect.rects.height / 2 ? 'next' : 'prev';
+                }
+              })()
+            };
+            indicator.style.display = 'block';
+            indicator.style.backgroundColor = 'black';
+            if (isHorizontal.value) {
+              indicator.style.top = matchItemRect.rects.top + 'px';
+              indicator.style.height = matchItemRect.rects.height + 'px';
+              indicator.style.left = matchItemRect.rects.left + (staticState.dropData.pos === 'prev' ? (-indicatorSize / 2 - props.space / 2) : (matchItemRect.rects.width + props.space / 2 - indicatorSize / 2)) + 'px';
+              indicator.style.width = indicatorSize + 'px';
+            } else {
+              indicator.style.left = matchItemRect.rects.left + 'px';
+              indicator.style.width = matchItemRect.rects.width + 'px';
+              indicator.style.top = matchItemRect.rects.top + (staticState.dropData.pos === 'prev' ? (-indicatorSize / 2 - props.space / 2) : (matchItemRect.rects.height + props.space / 2 - indicatorSize / 2)) + 'px';
+              indicator.style.height = indicatorSize + 'px';
+            }
+          }
+        }));
+      };
+
+      return { mousedown };
+    })();
+
+    return () => (
+      <div
+        className={classes.value}
+        data-direction={isHorizontal.value ? 'horizontal' : 'vertical'}
+        ref={onRef.el}
+      >
+        {model.value.map((item, index) => {
+          const styles = {} as CSSProperties;
+          if (props.col !== 1) {
+            styles.width = `calc((100% - ${(props.col - 1) * props.space}px) / ${props.col})`;
+            if ((index + 1) % props.col !== 0) {
+              styles.marginRight = props.space + 'px';
+            }
+          } else {
+            styles.width = '100%';
+          }
+          styles.marginBottom = props.space + 'px';
+          return (
+            <div
+              className="sort-item"
+              style={styles}
+              key={index}
+              onMouseDown={e => draggier.mousedown(e, item, index)}
+            >
+              {scopeSlots.default({ item, index }, null)}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+});

package/src/packages/components/SortList/sort-list.scss

@@ -0,0 +1,11 @@
+@include comp(sort-list) {
+  user-select: none;
+  &[data-direction=horizontal] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &[data-direction=vertical] {
+    display: flex;
+    flex-direction: column;
+  }
+}