@douyinfe/semi-foundation 2.77.1 → 2.78.0-beta.0

package/cropper/foundation.ts

@@ -60,6 +60,12 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number
+    };
     
     constructor(adapter: CropperAdapter<P, S>) {
         super({ ...adapter });
@@ -74,6 +80,8 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
         this.rangeX = null;
         this.rangeY = null;
         this.initial = false;
+        this.previewImg = null;
+        this.previewContainer = null;
     }
 
     init() {
@@ -88,6 +96,7 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
     destroy() {
         this.unBindMoveEvent();
         this.unBindResizeEvent();
+        this.removePreview();
     }
 
     getImgDataWhenResize = (ratio: number) => {
@@ -228,6 +237,80 @@ export default class CropperFoundation <P = Record<string, any>, S = Record<stri
             cropperBox: newCropperBoxState,
             loaded: true,
         } as any);
+
+        this.renderPreview();
+    }
+
+    renderPreview = () => {
+        const { preview, src } = this.getProps();
+        const previewNode = preview?.();
+        if (!previewNode) {
+            return;
+        }
+        const img = document.createElement('img');
+        this.previewImg = img;
+        this.previewContainer = previewNode;
+        img.src = src;
+        previewNode.appendChild(img);
+        this.previewContainer.style.overflow = 'hidden';
+        // 记录预览容器初始宽高
+        const { width: previewWidth, height: previewHeight } = previewNode.getBoundingClientRect();
+        this.previewContainerInitSize = {
+            width: previewWidth,
+            height: previewHeight,
+        };
+    }
+
+    updatePreview = (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number
+    }) => {
+        if (!this.previewImg) {
+            return;
+        }
+        const { cropperBox } = this.getStates();
+        let zoom = 1;
+        const { width: containerWidth, height: containerHeight } = this.previewContainerInitSize;
+        let previewWidth = containerWidth;
+        let previewHeight = containerHeight;
+        if (previewWidth < previewHeight) {
+            zoom = containerWidth / cropperBox.width;
+            let tempHeight = zoom * cropperBox.height;
+            if (tempHeight > containerHeight) {
+                zoom = containerHeight / cropperBox.height;
+                previewWidth = zoom * cropperBox.width;
+            } else {
+                previewHeight = tempHeight;
+            }
+        } else {
+            zoom = containerHeight / cropperBox.height;
+            let tempWidth = zoom * cropperBox.width;
+            if (tempWidth > containerWidth) {
+                zoom = containerWidth / cropperBox.width;
+                previewHeight = zoom * cropperBox.height;
+            } else {
+                previewWidth = tempWidth;
+            }
+        }
+        const { width, height, translateX, translateY, rotate } = props;
+        // Set the image style
+        this.previewImg.style.width = `${width * zoom}px`;
+        this.previewImg.style.height = `${height * zoom}px`;
+        this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+        this.previewImg.style.transformOrigin = 'center';
+        // set preview container size
+        this.previewContainer.style.width = `${previewWidth}px`;
+        this.previewContainer.style.height = `${previewHeight}px`;
+    }
+
+    removePreview = () => {
+        if (this.previewImg && this.previewContainer) {
+            this.previewContainer.removeChild(this.previewImg);
+            this.previewImg = null;
+        }
     }
 
     handleWheel = (e: any) => {

package/jsonViewer/foundation.ts

@@ -1,4 +1,3 @@
-
 import { JsonViewer, JsonViewerOptions, CustomRenderRule } from '@douyinfe/semi-json-viewer-core';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 
@@ -37,18 +36,35 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
 
     }
 
-    search(searchText: string) {
-        const state = this.getState('searchOptions');
-        const { caseSensitive, wholeWord, regex } = state;
-        this.jsonViewer?.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean) {
+        let options;
+        if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+            options = {
+                caseSensitive: caseSensitive ?? false,
+                wholeWord: wholeWord ?? false,
+                regex: regex ?? false
+            };
+        } else {
+            options = this.getState('searchOptions');
+        }
+        const { caseSensitive: cs, wholeWord: ww, regex: rx } = options;
+        this.jsonViewer?.getSearchWidget().search(searchText, cs, ww, rx);
     }
 
-    prevSearch() {
-        this.jsonViewer?.getSearchWidget().navigateResults(-1);
+    prevSearch(step?: number) {
+        if (step === undefined) {
+            this.jsonViewer?.getSearchWidget().navigateResults(-1);
+        } else {
+            this.jsonViewer?.getSearchWidget().navigateResults(-step);
+        }
     }
 
-    nextSearch() {
-        this.jsonViewer?.getSearchWidget().navigateResults(1);
+    nextSearch(step?: number) {
+        if (step === undefined) {
+            this.jsonViewer?.getSearchWidget().navigateResults(1);
+        } else {
+            this.jsonViewer?.getSearchWidget().navigateResults(step);
+        }
     }
 
     replace(replaceText: string) {
@@ -72,6 +88,10 @@ class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     showSearchBar() {
         this._adapter.showSearchBar();
     }
+
+    getSearchResults() {
+        return this.jsonViewer?.getSearchWidget().searchResults;
+    }
 }
 
 export default JsonViewerFoundation;

package/lib/cjs/cropper/foundation.d.ts

@@ -51,6 +51,12 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number;
+    };
     constructor(adapter: CropperAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -72,6 +78,15 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     };
     handleResize: () => void;
     handleImageLoad: (e: any) => void;
+    renderPreview: () => void;
+    updatePreview: (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number;
+    }) => void;
+    removePreview: () => void;
     handleWheel: (e: any) => void;
     getMoveParamByDir(dir: string): {
         paramX: number;

package/lib/cjs/cropper/foundation.js

@@ -156,6 +156,87 @@ class CropperFoundation extends _foundation.default {
         cropperBox: newCropperBoxState,
         loaded: true
       });
+      this.renderPreview();
+    };
+    this.renderPreview = () => {
+      const {
+        preview,
+        src
+      } = this.getProps();
+      const previewNode = preview === null || preview === void 0 ? void 0 : preview();
+      if (!previewNode) {
+        return;
+      }
+      const img = document.createElement('img');
+      this.previewImg = img;
+      this.previewContainer = previewNode;
+      img.src = src;
+      previewNode.appendChild(img);
+      this.previewContainer.style.overflow = 'hidden';
+      // 记录预览容器初始宽高
+      const {
+        width: previewWidth,
+        height: previewHeight
+      } = previewNode.getBoundingClientRect();
+      this.previewContainerInitSize = {
+        width: previewWidth,
+        height: previewHeight
+      };
+    };
+    this.updatePreview = props => {
+      if (!this.previewImg) {
+        return;
+      }
+      const {
+        cropperBox
+      } = this.getStates();
+      let zoom = 1;
+      const {
+        width: containerWidth,
+        height: containerHeight
+      } = this.previewContainerInitSize;
+      let previewWidth = containerWidth;
+      let previewHeight = containerHeight;
+      if (previewWidth < previewHeight) {
+        zoom = containerWidth / cropperBox.width;
+        let tempHeight = zoom * cropperBox.height;
+        if (tempHeight > containerHeight) {
+          zoom = containerHeight / cropperBox.height;
+          previewWidth = zoom * cropperBox.width;
+        } else {
+          previewHeight = tempHeight;
+        }
+      } else {
+        zoom = containerHeight / cropperBox.height;
+        let tempWidth = zoom * cropperBox.width;
+        if (tempWidth > containerWidth) {
+          zoom = containerWidth / cropperBox.width;
+          previewHeight = zoom * cropperBox.height;
+        } else {
+          previewWidth = tempWidth;
+        }
+      }
+      const {
+        width,
+        height,
+        translateX,
+        translateY,
+        rotate
+      } = props;
+      // Set the image style
+      this.previewImg.style.width = `${width * zoom}px`;
+      this.previewImg.style.height = `${height * zoom}px`;
+      this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+      this.previewImg.style.transformOrigin = 'center';
+      // set preview container size
+      this.previewContainer.style.width = `${previewWidth}px`;
+      this.previewContainer.style.height = `${previewHeight}px`;
+    };
+    this.removePreview = () => {
+      if (this.previewImg && this.previewContainer) {
+        this.previewContainer.removeChild(this.previewImg);
+        this.previewImg = null;
+      }
     };
     this.handleWheel = e => {
       // 防止双手缩放导致页面被放大
@@ -729,6 +810,8 @@ class CropperFoundation extends _foundation.default {
     this.rangeX = null;
     this.rangeY = null;
     this.initial = false;
+    this.previewImg = null;
+    this.previewContainer = null;
   }
   init() {
     // 获取容器的宽高
@@ -741,6 +824,7 @@ class CropperFoundation extends _foundation.default {
   destroy() {
     this.unBindMoveEvent();
     this.unBindResizeEvent();
+    this.removePreview();
   }
   getMoveParamByDir(dir) {
     let paramX = 0,

package/lib/cjs/jsonViewer/foundation.d.ts

@@ -14,12 +14,13 @@ declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     constructor(adapter: JsonViewerAdapter);
     jsonViewer: JsonViewer | null;
     init(): void;
-    search(searchText: string): void;
-    prevSearch(): void;
-    nextSearch(): void;
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean): void;
+    prevSearch(step?: number): void;
+    nextSearch(step?: number): void;
     replace(replaceText: string): void;
     replaceAll(replaceText: string): void;
     setSearchOptions(key: string): void;
     showSearchBar(): void;
+    getSearchResults(): import("@douyinfe/semi-json-viewer-core/src/common/model").FindMatch[];
 }
 export default JsonViewerFoundation;

package/lib/cjs/jsonViewer/foundation.js

@@ -28,23 +28,40 @@ class JsonViewerFoundation extends _foundation.default {
       }
     });
   }
-  search(searchText) {
+  search(searchText, caseSensitive, wholeWord, regex) {
     var _a;
-    const state = this.getState('searchOptions');
+    let options;
+    if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+      options = {
+        caseSensitive: caseSensitive !== null && caseSensitive !== void 0 ? caseSensitive : false,
+        wholeWord: wholeWord !== null && wholeWord !== void 0 ? wholeWord : false,
+        regex: regex !== null && regex !== void 0 ? regex : false
+      };
+    } else {
+      options = this.getState('searchOptions');
+    }
     const {
-      caseSensitive,
-      wholeWord,
-      regex
-    } = state;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+      caseSensitive: cs,
+      wholeWord: ww,
+      regex: rx
+    } = options;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, cs, ww, rx);
   }
-  prevSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+  prevSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(-step);
+    }
   }
-  nextSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+  nextSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(step);
+    }
   }
   replace(replaceText) {
     var _a;
@@ -66,5 +83,9 @@ class JsonViewerFoundation extends _foundation.default {
   showSearchBar() {
     this._adapter.showSearchBar();
   }
+  getSearchResults() {
+    var _a;
+    return (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().searchResults;
+  }
 }
 var _default = exports.default = JsonViewerFoundation;

package/lib/es/cropper/foundation.d.ts

@@ -51,6 +51,12 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     rangeX: [number, number];
     rangeY: [number, number];
     initial: boolean;
+    previewImg: HTMLImageElement;
+    previewContainer: HTMLElement;
+    previewContainerInitSize: {
+        width: number;
+        height: number;
+    };
     constructor(adapter: CropperAdapter<P, S>);
     init(): void;
     destroy(): void;
@@ -72,6 +78,15 @@ export default class CropperFoundation<P = Record<string, any>, S = Record<strin
     };
     handleResize: () => void;
     handleImageLoad: (e: any) => void;
+    renderPreview: () => void;
+    updatePreview: (props: {
+        width: number;
+        height: number;
+        translateX: number;
+        translateY: number;
+        rotate: number;
+    }) => void;
+    removePreview: () => void;
     handleWheel: (e: any) => void;
     getMoveParamByDir(dir: string): {
         paramX: number;

package/lib/es/cropper/foundation.js

@@ -149,6 +149,87 @@ export default class CropperFoundation extends BaseFoundation {
         cropperBox: newCropperBoxState,
         loaded: true
       });
+      this.renderPreview();
+    };
+    this.renderPreview = () => {
+      const {
+        preview,
+        src
+      } = this.getProps();
+      const previewNode = preview === null || preview === void 0 ? void 0 : preview();
+      if (!previewNode) {
+        return;
+      }
+      const img = document.createElement('img');
+      this.previewImg = img;
+      this.previewContainer = previewNode;
+      img.src = src;
+      previewNode.appendChild(img);
+      this.previewContainer.style.overflow = 'hidden';
+      // 记录预览容器初始宽高
+      const {
+        width: previewWidth,
+        height: previewHeight
+      } = previewNode.getBoundingClientRect();
+      this.previewContainerInitSize = {
+        width: previewWidth,
+        height: previewHeight
+      };
+    };
+    this.updatePreview = props => {
+      if (!this.previewImg) {
+        return;
+      }
+      const {
+        cropperBox
+      } = this.getStates();
+      let zoom = 1;
+      const {
+        width: containerWidth,
+        height: containerHeight
+      } = this.previewContainerInitSize;
+      let previewWidth = containerWidth;
+      let previewHeight = containerHeight;
+      if (previewWidth < previewHeight) {
+        zoom = containerWidth / cropperBox.width;
+        let tempHeight = zoom * cropperBox.height;
+        if (tempHeight > containerHeight) {
+          zoom = containerHeight / cropperBox.height;
+          previewWidth = zoom * cropperBox.width;
+        } else {
+          previewHeight = tempHeight;
+        }
+      } else {
+        zoom = containerHeight / cropperBox.height;
+        let tempWidth = zoom * cropperBox.width;
+        if (tempWidth > containerWidth) {
+          zoom = containerWidth / cropperBox.width;
+          previewHeight = zoom * cropperBox.height;
+        } else {
+          previewWidth = tempWidth;
+        }
+      }
+      const {
+        width,
+        height,
+        translateX,
+        translateY,
+        rotate
+      } = props;
+      // Set the image style
+      this.previewImg.style.width = `${width * zoom}px`;
+      this.previewImg.style.height = `${height * zoom}px`;
+      this.previewImg.style.transform = `translate(${translateX * zoom}px, ${translateY * zoom}px) rotate(${rotate}deg)`;
+      this.previewImg.style.transformOrigin = 'center';
+      // set preview container size
+      this.previewContainer.style.width = `${previewWidth}px`;
+      this.previewContainer.style.height = `${previewHeight}px`;
+    };
+    this.removePreview = () => {
+      if (this.previewImg && this.previewContainer) {
+        this.previewContainer.removeChild(this.previewImg);
+        this.previewImg = null;
+      }
     };
     this.handleWheel = e => {
       // 防止双手缩放导致页面被放大
@@ -722,6 +803,8 @@ export default class CropperFoundation extends BaseFoundation {
     this.rangeX = null;
     this.rangeY = null;
     this.initial = false;
+    this.previewImg = null;
+    this.previewContainer = null;
   }
   init() {
     // 获取容器的宽高
@@ -734,6 +817,7 @@ export default class CropperFoundation extends BaseFoundation {
   destroy() {
     this.unBindMoveEvent();
     this.unBindResizeEvent();
+    this.removePreview();
   }
   getMoveParamByDir(dir) {
     let paramX = 0,

package/lib/es/jsonViewer/foundation.d.ts

@@ -14,12 +14,13 @@ declare class JsonViewerFoundation extends BaseFoundation<JsonViewerAdapter> {
     constructor(adapter: JsonViewerAdapter);
     jsonViewer: JsonViewer | null;
     init(): void;
-    search(searchText: string): void;
-    prevSearch(): void;
-    nextSearch(): void;
+    search(searchText: string, caseSensitive?: boolean, wholeWord?: boolean, regex?: boolean): void;
+    prevSearch(step?: number): void;
+    nextSearch(step?: number): void;
     replace(replaceText: string): void;
     replaceAll(replaceText: string): void;
     setSearchOptions(key: string): void;
     showSearchBar(): void;
+    getSearchResults(): import("@douyinfe/semi-json-viewer-core/src/common/model").FindMatch[];
 }
 export default JsonViewerFoundation;

package/lib/es/jsonViewer/foundation.js

@@ -21,23 +21,40 @@ class JsonViewerFoundation extends BaseFoundation {
       }
     });
   }
-  search(searchText) {
+  search(searchText, caseSensitive, wholeWord, regex) {
     var _a;
-    const state = this.getState('searchOptions');
+    let options;
+    if (caseSensitive !== undefined || wholeWord !== undefined || regex !== undefined) {
+      options = {
+        caseSensitive: caseSensitive !== null && caseSensitive !== void 0 ? caseSensitive : false,
+        wholeWord: wholeWord !== null && wholeWord !== void 0 ? wholeWord : false,
+        regex: regex !== null && regex !== void 0 ? regex : false
+      };
+    } else {
+      options = this.getState('searchOptions');
+    }
     const {
-      caseSensitive,
-      wholeWord,
-      regex
-    } = state;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, caseSensitive, wholeWord, regex);
+      caseSensitive: cs,
+      wholeWord: ww,
+      regex: rx
+    } = options;
+    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().search(searchText, cs, ww, rx);
   }
-  prevSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+  prevSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(-1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(-step);
+    }
   }
-  nextSearch() {
-    var _a;
-    (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+  nextSearch(step) {
+    var _a, _b;
+    if (step === undefined) {
+      (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().navigateResults(1);
+    } else {
+      (_b = this.jsonViewer) === null || _b === void 0 ? void 0 : _b.getSearchWidget().navigateResults(step);
+    }
   }
   replace(replaceText) {
     var _a;
@@ -59,5 +76,9 @@ class JsonViewerFoundation extends BaseFoundation {
   showSearchBar() {
     this._adapter.showSearchBar();
   }
+  getSearchResults() {
+    var _a;
+    return (_a = this.jsonViewer) === null || _a === void 0 ? void 0 : _a.getSearchWidget().searchResults;
+  }
 }
 export default JsonViewerFoundation;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.77.1",
+    "version": "2.78.0-beta.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.77.1",
-        "@douyinfe/semi-json-viewer-core": "2.77.1",
+        "@douyinfe/semi-animation": "2.78.0-beta.0",
+        "@douyinfe/semi-json-viewer-core": "2.78.0-beta.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -29,7 +29,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "474fdbb6f246572c7bc26b64d099476abb7e6132",
+    "gitHead": "763dd181e5b8c00d69b15a0cec20b011532742ab",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",