@douyinfe/semi-foundation 2.67.3-alpha.0 → 2.68.0

package/lib/cjs/resizable/single/index.js

@@ -0,0 +1,574 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizableHandlerFoundation = exports.ResizableFoundation = void 0;
+var _foundation = _interopRequireDefault(require("../../base/foundation"));
+var _singleConstants = require("../singleConstants");
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class ResizableHandlerFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.onMouseDown = e => {
+      this.getProp('onResizeStart')(e, this.getProp('direction'));
+    };
+  }
+  init() {
+    this._adapter.registerEvent();
+  }
+  destroy() {
+    this._adapter.unregisterEvent();
+  }
+}
+exports.ResizableHandlerFoundation = ResizableHandlerFoundation;
+class ResizableFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.lockAspectRatio = 1;
+    this.resizable = null;
+    this.parentLeft = 0;
+    this.parentTop = 0;
+    this.boundaryLeft = 0;
+    this.boundaryRight = 0;
+    this.boundaryTop = 0;
+    this.boundaryBottom = 0;
+    this.targetLeft = 0;
+    this.targetTop = 0;
+    this.onResizeStart = (e, direction) => {
+      this.resizable = this._adapter.getResizable();
+      if (!this.resizable || !this.window) {
+        return;
+      }
+      const {
+        clientX,
+        clientY
+      } = e;
+      const props = this.getProps();
+      const states = this.getStates();
+      // Call onResizeStart callback if defined
+      if (props.onResizeStart) {
+        const shouldContinue = props.onResizeStart(e, direction);
+        if (shouldContinue === false) {
+          return;
+        }
+      }
+      // Update state with new size if defined
+      const {
+        size
+      } = props;
+      if (size) {
+        const {
+          height,
+          width
+        } = size;
+        const {
+          height: currentHeight,
+          width: currentWidth
+        } = states;
+        if (height !== undefined && height !== currentHeight) {
+          this.setState({
+            height
+          });
+        }
+        if (width !== undefined && width !== currentWidth) {
+          this.setState({
+            width
+          });
+        }
+      }
+      // Handle aspect ratio locking
+      this.lockAspectRatio = typeof props.lockAspectRatio === 'number' ? props.lockAspectRatio : this.size.width / this.size.height;
+      // Determine flexBasis if applicable
+      let flexBasis;
+      const computedStyle = this.window.getComputedStyle(this.resizable);
+      if (computedStyle.flexBasis !== 'auto') {
+        const parent = this.parent;
+        if (parent) {
+          const parentStyle = this.window.getComputedStyle(parent);
+          this.flexDirection = parentStyle.flexDirection.startsWith('row') ? 'row' : 'column';
+          flexBasis = computedStyle.flexBasis;
+        }
+      }
+      // Set bounding rectangle and register events
+      this.setBoundary();
+      this.registerEvents();
+      // Update state with initial resize values
+      const state = {
+        original: {
+          x: clientX,
+          y: clientY,
+          width: this.size.width,
+          height: this.size.height
+        },
+        isResizing: true,
+        backgroundStyle: Object.assign(Object.assign({}, states.backgroundStyle), {
+          cursor: this.window.getComputedStyle(e.target).cursor || 'auto'
+        }),
+        direction,
+        flexBasis
+      };
+      this.setState(state);
+    };
+    this.onMouseMove = event => {
+      var _a, _b;
+      const states = this.getStates();
+      const props = this.getProps();
+      if (!states.isResizing || !this.resizable || !this.window) {
+        return;
+      }
+      const {
+        clientX,
+        clientY
+      } = event;
+      const {
+        direction,
+        original,
+        width,
+        height
+      } = states;
+      const parentSize = this.getParentSize();
+      let {
+        maxWidth,
+        maxHeight,
+        minWidth,
+        minHeight
+      } = props;
+      // Calculate max and min dimensions
+      const maxBounds = (0, _utils.calculateNewMax)(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight);
+      maxWidth = maxBounds.maxWidth;
+      maxHeight = maxBounds.maxHeight;
+      minWidth = maxBounds.minWidth;
+      minHeight = maxBounds.minHeight;
+      // Calculate new size based on direction
+      let {
+        newWidth,
+        newHeight
+      } = this.calDirectionSize(clientX, clientY);
+      // Apply boundary constraints
+      const boundaryMax = this.calBoundaryMax(maxWidth, maxHeight);
+      newWidth = (0, _utils.getNumberSize)(newWidth, parentSize.width, this.window.innerWidth, this.window.innerHeight);
+      newHeight = (0, _utils.getNumberSize)(newHeight, parentSize.height, this.window.innerWidth, this.window.innerHeight);
+      // Apply snapping
+      if (props.snap) {
+        if (props.snap.x) {
+          newWidth = (0, _utils.findNextSnap)(newWidth, props.snap.x, props.snapGap);
+        }
+        if (props.snap.y) {
+          newHeight = (0, _utils.findNextSnap)(newHeight, props.snap.y, props.snapGap);
+        }
+      }
+      // Adjust size based on aspect ratio
+      const sizeFromAspectRatio = this.calAspectRatioSize(newWidth, newHeight, {
+        width: boundaryMax.maxWidth,
+        height: boundaryMax.maxHeight
+      }, {
+        width: minWidth,
+        height: minHeight
+      });
+      newWidth = sizeFromAspectRatio.newWidth;
+      newHeight = sizeFromAspectRatio.newHeight;
+      // Apply grid snapping if defined
+      if (props.grid) {
+        const [gridW, gridH] = Array.isArray(props.grid) ? props.grid : [props.grid, props.grid];
+        const gap = props.snapGap || 0;
+        const newGridWidth = (0, _utils.snap)(newWidth, gridW);
+        const newGridHeight = (0, _utils.snap)(newHeight, gridH);
+        newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth;
+        newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight;
+      }
+      // Convert width and height to CSS units if needed
+      const convertToCssUnit = (size, originalSize, unit) => {
+        if (unit.endsWith('%')) {
+          return `${size / originalSize * 100}%`;
+        } else if (unit.endsWith('vw')) {
+          return `${size / this.window.innerWidth * 100}vw`;
+        } else if (unit.endsWith('vh')) {
+          return `${size / this.window.innerHeight * 100}vh`;
+        }
+        return size;
+      };
+      if (typeof width === 'string') {
+        newWidth = convertToCssUnit(newWidth, parentSize.width, width || '');
+      }
+      if (typeof height === 'string') {
+        newHeight = convertToCssUnit(newHeight, parentSize.height, height || '');
+      }
+      // Create new state
+      const newState = {
+        width: this.getCssPropertySize(newWidth, 'width'),
+        height: this.getCssPropertySize(newHeight, 'height')
+      };
+      if (this.flexDirection === 'row') {
+        newState.flexBasis = newState.width;
+      } else if (this.flexDirection === 'column') {
+        newState.flexBasis = newState.height;
+      }
+      // Check for changes
+      const widthChanged = states.width !== newState.width;
+      const heightChanged = states.height !== newState.height;
+      const flexBaseChanged = states.flexBasis !== newState.flexBasis;
+      const hasChanges = widthChanged || heightChanged || flexBaseChanged;
+      if (hasChanges) {
+        this.setState(newState);
+        // Call onChange callback if defined
+        if (props.onChange) {
+          let newSize = {
+            width: newState.width,
+            height: newState.height
+          };
+          props.onChange(newSize, event, direction);
+        }
+        const size = props.size;
+        if (size) {
+          this.setState({
+            width: (_a = size.width) !== null && _a !== void 0 ? _a : 'auto',
+            height: (_b = size.height) !== null && _b !== void 0 ? _b : 'auto'
+          });
+        }
+      }
+    };
+    this.onMouseUp = event => {
+      var _a, _b;
+      const {
+        isResizing,
+        direction,
+        original
+      } = this.getStates();
+      if (!isResizing || !this.resizable) {
+        return;
+      }
+      const {
+        width: currentWidth,
+        height: currentHeight
+      } = this.size;
+      const delta = {
+        width: currentWidth - original.width,
+        height: currentHeight - original.height
+      };
+      const {
+        onResizeEnd,
+        size
+      } = this.getProps();
+      // Call onResizeEnd callback if defined
+      if (onResizeEnd) {
+        onResizeEnd(this.size, event, direction);
+      }
+      // Update state with new size if provided
+      if (size) {
+        this.setState({
+          width: (_a = size.width) !== null && _a !== void 0 ? _a : 'auto',
+          height: (_b = size.height) !== null && _b !== void 0 ? _b : 'auto'
+        });
+      }
+      // Unregister events and update state
+      this.unregisterEvents();
+      this.setState({
+        isResizing: false,
+        backgroundStyle: Object.assign(Object.assign({}, this.getStates().backgroundStyle), {
+          cursor: 'auto'
+        })
+      });
+    };
+  }
+  init() {
+    if (!this.resizable || !this.window) {
+      return;
+    }
+    const flexBasis = this.window.getComputedStyle(this.resizable).flexBasis;
+    this.setState({
+      width: this.propSize.width,
+      height: this.propSize.height,
+      flexBasis: flexBasis !== 'auto' ? flexBasis : undefined
+    });
+    this.onResizeStart = this.onResizeStart.bind(this);
+    this.onMouseMove = this.onMouseMove.bind(this);
+    this.onMouseUp = this.onMouseUp.bind(this);
+  }
+  get parent() {
+    if (!this.resizable) {
+      return null;
+    }
+    return this.resizable.parentNode;
+  }
+  get window() {
+    if (!this.resizable) {
+      return null;
+    }
+    if (!this.resizable.ownerDocument) {
+      return null;
+    }
+    return this.resizable.ownerDocument.defaultView;
+  }
+  get propSize() {
+    const porps = this.getProps();
+    return porps.size || porps.defaultSize || _singleConstants.DEFAULT_SIZE;
+  }
+  get size() {
+    let width = 0;
+    let height = 0;
+    if (this.resizable && this.window) {
+      width = this.resizable.offsetWidth;
+      height = this.resizable.offsetHeight;
+    }
+    return {
+      width,
+      height
+    };
+  }
+  get sizeStyle() {
+    const size = this.getProp('size');
+    const getSize = property => {
+      var _a;
+      const value = this.getStates()[property];
+      if (typeof value === 'undefined' || value === 'auto') {
+        return 'auto';
+      }
+      const propSizeValue = (_a = this.propSize) === null || _a === void 0 ? void 0 : _a[property];
+      if (propSizeValue === null || propSizeValue === void 0 ? void 0 : propSizeValue.toString().endsWith('%')) {
+        if (value.toString().endsWith('%')) {
+          return value.toString();
+        }
+        const parentSize = this.getParentSize();
+        const numberValue = Number(value.toString().replace('px', ''));
+        const percentValue = numberValue / parentSize[property] * 100;
+        return `${percentValue}%`;
+      }
+      return (0, _utils.getStringSize)(value);
+    };
+    const isResizing = this.getStates().isResizing;
+    const width = size && typeof size.width !== 'undefined' && !isResizing ? (0, _utils.getStringSize)(size.width) : getSize('width');
+    const height = size && typeof size.height !== 'undefined' && !isResizing ? (0, _utils.getStringSize)(size.height) : getSize('height');
+    return {
+      width,
+      height
+    };
+  }
+  getParentSize() {
+    const appendPseudo = () => {
+      if (!this.resizable || !this.window) {
+        return null;
+      }
+      const parent = this.parent;
+      if (!parent) {
+        return null;
+      }
+      const pseudoEle = this.window.document.createElement('div');
+      pseudoEle.style.width = '100%';
+      pseudoEle.style.height = '100%';
+      pseudoEle.style.position = 'absolute';
+      pseudoEle.style.transform = 'scale(0, 0)';
+      pseudoEle.style.left = '0';
+      pseudoEle.style.flex = '0 0 100%';
+      parent.appendChild(pseudoEle);
+      return pseudoEle;
+    };
+    const removePseudo = pseudo => {
+      const parent = this.parent;
+      if (!parent) {
+        return;
+      }
+      parent.removeChild(pseudo);
+    };
+    if (!this.parent) {
+      if (!this.window) {
+        return {
+          width: 0,
+          height: 0
+        };
+      }
+      return {
+        width: this.window.innerWidth,
+        height: this.window.innerHeight
+      };
+    }
+    const pseudoElement = appendPseudo();
+    if (!pseudoElement) {
+      return {
+        width: 0,
+        height: 0
+      };
+    }
+    let flexWrapChanged = false;
+    const originalFlexWrap = this.parent.style.flexWrap;
+    if (originalFlexWrap !== 'wrap') {
+      flexWrapChanged = true;
+      this.parent.style.flexWrap = 'wrap';
+    }
+    pseudoElement.style.position = 'relative';
+    pseudoElement.style.minWidth = '100%';
+    pseudoElement.style.minHeight = '100%';
+    const size = {
+      width: pseudoElement.offsetWidth,
+      height: pseudoElement.offsetHeight
+    };
+    if (flexWrapChanged) {
+      this.parent.style.flexWrap = originalFlexWrap;
+    }
+    removePseudo(pseudoElement);
+    return size;
+  }
+  registerEvents() {
+    this._adapter.registerEvent();
+  }
+  unregisterEvents() {
+    this._adapter.unregisterEvent();
+  }
+  getCssPropertySize(newSize, property) {
+    var _a;
+    const propSizeValue = (_a = this.propSize) === null || _a === void 0 ? void 0 : _a[property];
+    const state = this.getStates();
+    const isAutoSize = state[property] === 'auto' && state.original[property] === newSize && (typeof propSizeValue === 'undefined' || propSizeValue === 'auto');
+    return isAutoSize ? 'auto' : newSize;
+  }
+  calBoundaryMax(maxWidth, maxHeight) {
+    const {
+      boundsByDirection
+    } = this.getProps();
+    const {
+      direction
+    } = this.getStates();
+    const isWidthConstrained = boundsByDirection && (0, _utils.has)('left', direction);
+    const isHeightConstrained = boundsByDirection && (0, _utils.has)('top', direction);
+    let maxWidthConstraint;
+    let maxHeightConstraint;
+    const props = this.getProps();
+    if (props.boundElement === 'parent') {
+      const parentElement = this.parent;
+      if (parentElement) {
+        maxWidthConstraint = isWidthConstrained ? this.boundaryRight - this.parentLeft : parentElement.offsetWidth + (this.parentLeft - this.boundaryLeft);
+        maxHeightConstraint = isHeightConstrained ? this.boundaryBottom - this.parentTop : parentElement.offsetHeight + (this.parentTop - this.boundaryTop);
+      }
+    } else if (props.boundElement === 'window' && this.window) {
+      maxWidthConstraint = isWidthConstrained ? this.boundaryRight : this.window.innerWidth - this.boundaryLeft;
+      maxHeightConstraint = isHeightConstrained ? this.boundaryBottom : this.window.innerHeight - this.boundaryTop;
+    } else if (props.boundElement) {
+      const boundary = props.boundElement;
+      maxWidthConstraint = isWidthConstrained ? this.boundaryRight - this.targetLeft : boundary.offsetWidth + (this.targetLeft - this.boundaryLeft);
+      maxHeightConstraint = isHeightConstrained ? this.boundaryBottom - this.targetTop : boundary.offsetHeight + (this.targetTop - this.boundaryTop);
+    }
+    if (maxWidthConstraint && Number.isFinite(maxWidthConstraint)) {
+      maxWidth = maxWidth && maxWidth < maxWidthConstraint ? maxWidth : maxWidthConstraint;
+    }
+    if (maxHeightConstraint && Number.isFinite(maxHeightConstraint)) {
+      maxHeight = maxHeight && maxHeight < maxHeightConstraint ? maxHeight : maxHeightConstraint;
+    }
+    return {
+      maxWidth,
+      maxHeight
+    };
+  }
+  calDirectionSize(clientX, clientY) {
+    const props = this.getProps();
+    const scale = props.scale || 1;
+    let aspectRatio = props.ratio;
+    const [resizeRatioX, resizeRatioY] = Array.isArray(aspectRatio) ? aspectRatio : [aspectRatio, aspectRatio];
+    const {
+      direction,
+      original
+    } = this.getStates();
+    const {
+      lockAspectRatio,
+      lockAspectRatioExtraHeight = 0,
+      lockAspectRatioExtraWidth = 0
+    } = props;
+    let newWidth = original.width;
+    let newHeight = original.height;
+    const calculateNewWidth = deltaX => original.width + deltaX * resizeRatioX / scale;
+    const calculateNewHeight = deltaY => original.height + deltaY * resizeRatioY / scale;
+    if ((0, _utils.has)('top', direction)) {
+      newHeight = calculateNewHeight(original.y - clientY);
+      if (lockAspectRatio) {
+        newWidth = (newHeight - lockAspectRatioExtraHeight) * this.lockAspectRatio + lockAspectRatioExtraWidth;
+      }
+    }
+    if ((0, _utils.has)('bottom', direction)) {
+      newHeight = calculateNewHeight(clientY - original.y);
+      if (lockAspectRatio) {
+        newWidth = (newHeight - lockAspectRatioExtraHeight) * this.lockAspectRatio + lockAspectRatioExtraWidth;
+      }
+    }
+    if ((0, _utils.has)('right', direction)) {
+      newWidth = calculateNewWidth(clientX - original.x);
+      if (lockAspectRatio) {
+        newHeight = (newWidth - lockAspectRatioExtraWidth) / this.lockAspectRatio + lockAspectRatioExtraHeight;
+      }
+    }
+    if ((0, _utils.has)('left', direction)) {
+      newWidth = calculateNewWidth(original.x - clientX);
+      if (lockAspectRatio) {
+        newHeight = (newWidth - lockAspectRatioExtraWidth) / this.lockAspectRatio + lockAspectRatioExtraHeight;
+      }
+    }
+    return {
+      newWidth,
+      newHeight
+    };
+  }
+  calAspectRatioSize(newWidth, newHeight, max, min) {
+    const {
+      lockAspectRatio,
+      lockAspectRatioExtraHeight = 0,
+      lockAspectRatioExtraWidth = 0
+    } = this.getProps();
+    const minWidth = typeof min.width === 'undefined' ? 10 : min.width;
+    const maxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width;
+    const minHeight = typeof min.height === 'undefined' ? 10 : min.height;
+    const maxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height;
+    if (lockAspectRatio) {
+      const adjustedMinWidth = (minHeight - lockAspectRatioExtraHeight) * this.lockAspectRatio + lockAspectRatioExtraWidth;
+      const adjustedMaxWidth = (maxHeight - lockAspectRatioExtraHeight) * this.lockAspectRatio + lockAspectRatioExtraWidth;
+      const adjustedMinHeight = (minWidth - lockAspectRatioExtraWidth) / this.lockAspectRatio + lockAspectRatioExtraHeight;
+      const adjustedMaxHeight = (maxWidth - lockAspectRatioExtraWidth) / this.lockAspectRatio + lockAspectRatioExtraHeight;
+      const lockedMinWidth = Math.max(minWidth, adjustedMinWidth);
+      const lockedMaxWidth = Math.min(maxWidth, adjustedMaxWidth);
+      const lockedMinHeight = Math.max(minHeight, adjustedMinHeight);
+      const lockedMaxHeight = Math.min(maxHeight, adjustedMaxHeight);
+      newWidth = (0, _utils.clamp)(newWidth, lockedMinWidth, lockedMaxWidth);
+      newHeight = (0, _utils.clamp)(newHeight, lockedMinHeight, lockedMaxHeight);
+    } else {
+      newWidth = (0, _utils.clamp)(newWidth, minWidth, maxWidth);
+      newHeight = (0, _utils.clamp)(newHeight, minHeight, maxHeight);
+    }
+    return {
+      newWidth,
+      newHeight
+    };
+  }
+  setBoundary() {
+    const props = this.getProps();
+    // Set parent boundary
+    if (props.boundElement === 'parent') {
+      const parentElement = this.parent;
+      if (parentElement) {
+        const parentRect = parentElement.getBoundingClientRect();
+        this.parentLeft = parentRect.left;
+        this.parentTop = parentRect.top;
+      }
+    }
+    // Set target (HTML element) boundary
+    if (props.boundElement && typeof props.boundElement !== 'string') {
+      const targetRect = props.boundElement.getBoundingClientRect();
+      this.targetLeft = targetRect.left;
+      this.targetTop = targetRect.top;
+    }
+    // Set resizable boundary
+    if (this.resizable) {
+      const {
+        left,
+        top,
+        right,
+        bottom
+      } = this.resizable.getBoundingClientRect();
+      this.boundaryLeft = left;
+      this.boundaryRight = right;
+      this.boundaryTop = top;
+      this.boundaryBottom = bottom;
+    }
+  }
+  destroy() {
+    this.unregisterEvents();
+  }
+}
+exports.ResizableFoundation = ResizableFoundation;

package/lib/cjs/resizable/singleConstants.d.ts

@@ -0,0 +1,105 @@
+export declare const directions: readonly ["top", "right", "bottom", "left", "topRight", "bottomRight", "bottomLeft", "topLeft"];
+export declare const directionStyles: {
+    readonly top: {
+        readonly top: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly right: {
+        readonly left: any;
+        readonly right: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly bottom: {
+        readonly top: any;
+        readonly bottom: "-5px";
+        readonly width: "100%";
+        readonly height: "10px";
+        readonly left: "0px";
+        readonly cursor: "row-resize";
+    };
+    readonly left: {
+        readonly left: "-5px";
+        readonly width: "10px";
+        readonly height: "100%";
+        readonly top: "0px";
+        readonly cursor: "col-resize";
+    };
+    readonly topRight: {
+        readonly right: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "ne-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomRight: {
+        readonly right: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "se-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly bottomLeft: {
+        readonly left: "-10px";
+        readonly bottom: "-10px";
+        readonly cursor: "sw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+    readonly topLeft: {
+        readonly left: "-10px";
+        readonly top: "-10px";
+        readonly cursor: "nw-resize";
+        readonly width: "20px";
+        readonly height: "20px";
+        readonly position: "absolute";
+    };
+};
+export type Direction = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft';
+export interface HandleClassName {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    topRight?: string;
+    bottomRight?: string;
+    bottomLeft?: string;
+    topLeft?: string;
+}
+export type HandlerCallback = (e: MouseEvent, direction: Direction) => void;
+export interface Enable {
+    top?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+    left?: boolean;
+    topRight?: boolean;
+    bottomRight?: boolean;
+    bottomLeft?: boolean;
+    topLeft?: boolean;
+}
+export interface Size {
+    width?: string | number;
+    height?: string | number;
+}
+export interface NumberSize {
+    width: number;
+    height: number;
+}
+export interface NewSize {
+    newHeight: number | string;
+    newWidth: number | string;
+}
+export declare const DEFAULT_SIZE: {
+    width: string;
+    height: string;
+};
+export type ResizeCallback = (size: Size, event: MouseEvent, direction: Direction) => void;
+export type ResizeStartCallback = (e: MouseEvent, dir: Direction) => void | boolean;