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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.31",
+  "version": "1.0.0-beta.33",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -19,7 +19,7 @@
   "peerDependencies": {
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.177",
+    "plain-design-composition": "^0.0.181",
     "react": "^18.0.1",
     "react-dom": "^18.0.1"
   },
@@ -68,7 +68,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.180",
+    "plain-design-composition": "^0.0.182",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/components/$previewer/ImagePreviewerFixedContainer.tsx

@@ -0,0 +1,107 @@
+import {designComponent, getComponentCls, iHTMLDivElement, nextIndex, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {getCenterRect, iImagePreviewerOption, ImagePreviewerHooks} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewer} from "../ImagePreviewer";
+import {getRectAutoFormat} from "../../utils/getRectAutoFormat";
+import {unit} from "plain-utils/string/unit";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addElementListener} from "plain-utils/dom/addElementListener";
+import {delay} from "plain-utils/utils/delay";
+import './image-previewer-fixed-container.scss';
+
+export const ImagePreviewerFixedContainer = designComponent({
+  name: 'image-previewer-fixed-container',
+  props: {
+    option: { type: Object as PropType<iImagePreviewerOption>, required: true }
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const state = reactive({
+      ready: false,
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls('image-previewer-fixed-container')
+    ]);
+
+    const styles = useStyles(style => {style.zIndex = nextIndex();});
+
+    const { effects: setupEffects } = createEffects();
+
+    onMounted(async () => {
+      const containerWidth = Math.floor(refs.el!.offsetWidth);
+      const containerHeight = Math.floor(refs.el!.offsetHeight - props.option.galleryHeight - props.option.separatorHeight);
+      const containerRatio = Number((containerWidth / containerHeight).toFixed(1));
+
+      const imageElement = props.option.imageElement;
+
+      if (!imageElement) {
+        state.ready = true;
+        return;
+      }
+      /**
+       * 如果原始imageElement存在，则创建一个影子图片元素展示过度动画
+       * @author  韦胜健
+       * @date    2024/1/5 11:22
+       */
+      const shadowImageElement = imageElement.cloneNode(true) as HTMLImageElement;
+      const imageElementRect = getRectAutoFormat(imageElement);
+      props.option.oldSourceImageOpacity = imageElement.style.opacity;
+      imageElement.style.opacity = "0";
+
+      shadowImageElement.style.position = 'fixed';
+      shadowImageElement.style.top = unit(imageElementRect.top)!;
+      shadowImageElement.style.left = unit(imageElementRect.left)!;
+      shadowImageElement.style.width = unit(imageElementRect.width)!;
+      shadowImageElement.style.height = unit(imageElementRect.height)!;
+      shadowImageElement.style.transition = 'all ease 300ms';
+      shadowImageElement.style.zIndex = '999999';
+      shadowImageElement.style.objectFit = window.getComputedStyle(imageElement).objectFit
+
+      /*开启动画时阻止页面滚动*/
+      setupEffects.push(
+        addElementListener(shadowImageElement, 'wheel', e => {
+          e.preventDefault();
+          e.stopPropagation();
+        })
+      );
+
+      const newRect = getCenterRect({ containerElement: { containerHeight, containerWidth, containerRatio }, imageElement });
+
+      document.body.appendChild(shadowImageElement);
+      setupEffects.push(() => {document.body.removeChild(shadowImageElement);});
+      await delay();
+      shadowImageElement.style.top = unit(newRect.top.toFixed(0))!;
+      shadowImageElement.style.left = unit(newRect.left.toFixed(0))!;
+      shadowImageElement.style.height = unit(newRect.height.toFixed(0))!;
+      shadowImageElement.style.width = unit(newRect.width.toFixed(0))!;
+      const clearListener = addElementListener(shadowImageElement, 'transitionend', () => {
+        state.ready = true;
+        const clearHook = ImagePreviewerHooks.onImagePreviewerReady.use(async (data) => {
+          if (data.option.id !== props.option.id) {
+            return;
+          }
+          await delay();
+          clearHook();
+          setupEffects.clear();
+        });
+        setupEffects.push(clearHook);
+      });
+      setupEffects.push(clearListener);
+    });
+
+    onBeforeUnmount(setupEffects.clear);
+
+    return () => (
+      <div className={classes.value} ref={onRef.el}>
+        {state.ready && (
+          <ImagePreviewer
+            option={props.option}
+            style={styles.value}
+          />
+        )}
+      </div>
+    );
+  },
+});

package/src/packages/components/$previewer/image-previewer-fixed-container.scss

@@ -0,0 +1,18 @@
+@include comp(image-previewer-fixed-container) {
+  position: fixed;
+  inset: 0;
+
+  @include comp(carousel) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  .image-previewer-component-gallery {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

package/src/packages/components/$previewer/index.tsx

@@ -0,0 +1,52 @@
+import {reactive} from "plain-design-composition";
+import {createImagePreviewerOption, iImagePreviewerOption, iImagePreviewerParamOption} from "../ImagePreviewer/image-previewer.utils";
+import {ImagePreviewerFixedContainer} from "./ImagePreviewerFixedContainer";
+import {getDeviceInfo} from "../../utils/getDeviceInfo";
+
+/**
+ * 图片预览服务
+ * @author  韦胜健
+ * @date    2024/1/8 10:04
+ */
+export const $previewer = (() => {
+
+  const state = reactive({
+    /*有service option不同，image previewer同时只能显示一个*/
+    option: null as null | iImagePreviewerOption,
+  });
+
+  /**
+   * 大图查看图片
+   * @author  韦胜健
+   * @date    2024/1/5 11:22
+   */
+  const preview = async (param: iImagePreviewerParamOption, imageElement?: HTMLImageElement) => {
+
+    const isMobile = getDeviceInfo().deviceType === 'mobile';
+
+    state.option = createImagePreviewerOption(param, imageElement, {
+      autoHeight: false,
+      mask: true,
+      globalKeyboardEvent: true,
+      button: true,
+      ...isMobile ? {
+        gallery: false,
+        button: false,
+        swipeButton: false,
+        galleryHeight: 0,
+      } : {},
+    });
+  };
+
+  const close = (optionOrId: string | iImagePreviewerOption) => {
+    const optionId = typeof optionOrId === "string" ? optionOrId : optionOrId.id;
+    if (!!state.option && state.option.id === optionId) {state.option = null;}
+  };
+
+  const render = () => !!state.option && <ImagePreviewerFixedContainer option={state.option}/>;
+
+  return { preview, render, close };
+
+})();
+
+export default $previewer;

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -2,6 +2,7 @@ import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Por
 import {defer, DFD} from 'plain-utils/utils/defer';
 import {createCounter} from "plain-utils/utils/createCounter";
 import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+import {$previewer} from "../../$previewer";
 
 /**
  * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
@@ -104,6 +105,7 @@ export function useApplicationService() {
       render: () => (
         <Portal to="body">
           <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {$previewer.render()}
             {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
               return (
                 <RenderComponent

package/src/packages/components/Carousel/carousel.scss

@@ -0,0 +1,391 @@
+@include comp(carousel) {
+
+  @include comp(carousel-item) {
+    //transition: transform 10000ms ease;
+    transition: transform 300ms ease;
+    display: flex;
+    .carousel-item-inner {
+      flex: 1;
+    }
+    .previewer-loading {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 36px;
+    }
+  }
+
+  &.carousel-horizontal {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      align-items: stretch;
+      overflow: visible;
+      transition: transform ease 300ms;
+      position: relative;
+      z-index: 1;
+    }
+
+    @include comp(carousel-item) {
+      flex-shrink: 0;
+      flex-grow: 0;
+      width: 100%;
+      position: relative;
+
+      .carousel-item-inner {
+        transition: linear transform 300ms;
+      }
+    }
+
+    &.carousel-card {
+      overflow: visible;
+
+      .carousel-active {
+        z-index: 2;
+      }
+
+      .carousel-prev {
+        .carousel-item-inner {
+          transform: translateX(12%) scale(0.75);
+          transform-origin: right center;
+        }
+      }
+
+      .carousel-next {
+        .carousel-item-inner {
+          transform: translateX(-12%) scale(0.75);
+          transform-origin: left center;
+        }
+      }
+    }
+
+    .carousel-indicator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 16px;
+      z-index: 2;
+      opacity: 1;
+      transition: all linear 99s;
+
+      & > div {
+        pointer-events: auto;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &.carousel-indicator-style-line {
+        & > div {
+          height: 16px;
+          width: 20px;
+          transition: all ease 300ms;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            width: 100%;
+            height: 2px;
+            content: '';
+            transform: skew(30deg);
+          }
+
+          & + div {
+            margin-left: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            width: 30px;
+
+            &:before {
+              background-color: #CECECE;
+              height: 4px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-dot {
+        & > div {
+          height: 16px;
+          width: 16px;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            transition: all ease 300ms;
+            border-radius: 5px;
+            height: 5px;
+            width: 5px;
+            content: '';
+          }
+
+          & + div {
+            margin-left: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            &:before {
+              background-color: #CECECE;
+              border-radius: 10px;
+              height: 10px;
+              width: 10px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-text {
+        left: auto;
+        background-color: rgba(black, 0.15);
+        color: white;
+        border-radius: 100px;
+        padding: 0;
+        min-width: 44px;
+        height: 28px;
+        text-align: center;
+        margin-right: 16px;
+        margin-bottom: 16px;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+
+    .carousel-switch-button {
+      pointer-events: none;
+      opacity: 1;
+      transition: all linear 99s;
+      z-index: 3;
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+
+      .carousel-switch-button-prev,
+      .carousel-switch-button-next {
+        height: 32px;
+        width: 32px;
+        border-radius: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #f1f1f1;
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+
+    &.carousel-touching {
+      .carousel-switch-button, .carousel-indicator {
+        opacity: 0.99;
+      }
+    }
+  }
+
+  &.carousel-vertical {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .carousel-container {
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+
+      overflow: visible;
+      transition: transform ease 300ms;
+
+      @include comp(carousel-item) {
+        flex-shrink: 0;
+        flex-grow: 0;
+        height: 100%;
+        width: 100%;
+        position: relative;
+        z-index: 1;
+
+        .carousel-item-inner {
+          height: 100%;
+          transition: linear transform 300ms;
+        }
+      }
+    }
+
+    .carousel-indicator {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      padding: 8px;
+      z-index: 2;
+
+      & > div {
+        pointer-events: auto;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &.carousel-indicator-style-line {
+        & > div {
+          height: 20px;
+          width: 16px;
+          transition: all ease 300ms;
+
+          &:before {
+            background-color: rgba(#CECECE, 0.75);
+            height: 100%;
+            width: 2px;
+            content: '';
+            transform: skewY(30deg);
+            transition: all ease 300ms;
+          }
+
+          & + div {
+            margin-top: 16px;
+          }
+
+          &.carousel-indicator-item-active {
+            &:before {
+              background-color: white;
+              width: 4px;
+              height: 30px;
+            }
+          }
+        }
+      }
+
+      &.carousel-indicator-style-dot {
+        & > div {
+          height: 4px;
+          width: 4px;
+          background-color: rgba(white, 0.45);
+          transition: all ease 300ms;
+          border-radius: 4px;
+
+          & + div {
+            margin-top: 8px;
+          }
+
+          &.carousel-indicator-item-active {
+            background-color: white;
+            height: 4px;
+            width: 4px;
+          }
+        }
+      }
+    }
+
+    .carousel-switch-button {
+      pointer-events: none;
+      opacity: 1;
+      transition: all linear 99s;
+      z-index: 3;
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+      padding: 4px;
+
+      .carousel-switch-button-prev,
+      .carousel-switch-button-next {
+        height: 24px;
+        width: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #f1f1f1;
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+      }
+    }
+  }
+
+  &:not(.carousel-disable-swiper) {
+    @include comp(carousel-item) {
+      user-select: none;
+    }
+  }
+
+  .carousel-cover {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 4;
+
+    & > * {
+      pointer-events: auto;
+    }
+  }
+
+  &.carousel-full-height {
+    height: 100%;
+  }
+
+  &.carousel-full-height,
+  &.carousel-fixed-height {
+    .carousel-container {
+      height: 100%;
+    }
+
+    @include comp(carousel-item) {
+      height: 100%;
+      .carousel-item-inner {
+        height: 100%;
+      }
+    }
+  }
+
+  &.carousel-large-switch-button {
+    .carousel-switch-button {
+      .carousel-switch-button-prev, .carousel-switch-button-next {
+        font-size: 28px;
+        height: auto !important;
+        width: auto !important;
+        padding: 20px 5px;
+        border-radius: 0;
+        background-color: rgba(black, 0.1);
+
+        &:hover {
+          background-color: rgba(black, 0.2);
+        }
+      }
+    }
+  }
+}