@kep-platform/basic-component 0.0.45 → 0.0.47

package/dist/Draggable/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<object>;
+export default _default;

package/dist/Draggable/index.js

@@ -0,0 +1,181 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { observable, runInAction, toJS } from 'mobx';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import React, { useContext, useEffect, useRef } from 'react';
+var posStore = observable({
+  left: 0,
+  top: 0,
+  setPos: function setPos(offsetLeft, offsetTop) {
+    this.left += offsetLeft;
+    this.top += offsetTop;
+  }
+});
+var DropContext = /*#__PURE__*/React.createContext(observable({
+  registedDrop: {},
+  registDrop: function registDrop(id, dropStore) {
+    this.registedDrop[id] = dropStore;
+  }
+}));
+function useDrag(props) {
+  var dragNodeRef = useRef(null);
+  var dropProviderStore = useContext(DropContext);
+  var onMove = props.onMove,
+    _props$stepX = props.stepX,
+    stepX = _props$stepX === void 0 ? 1 : _props$stepX,
+    _props$stepY = props.stepY,
+    stepY = _props$stepY === void 0 ? 1 : _props$stepY,
+    id = props.id;
+  var dragStore = useLocalObservable(function () {
+    return {
+      dragging: false,
+      lastPos: {
+        left: 0,
+        top: 0
+      },
+      offset: {
+        left: 0,
+        top: 0
+      },
+      id: id,
+      startMove: function startMove(left, top) {
+        this.lastPos.left = left;
+        this.lastPos.top = top;
+        this.dragging = true;
+      },
+      move: function move(left, top) {
+        this.offset.left = left - this.lastPos.left; //处理每次的偏移量
+        this.offset.top = top - this.lastPos.top; //处理每次的偏移量
+        this.lastPos.left = left;
+        this.lastPos.top = top;
+      },
+      endMove: function endMove() {
+        this.dragging = false;
+        this.offset.left = 0;
+        this.offset.top = 0;
+      }
+    };
+  });
+  useEffect(function () {
+    dropProviderStore.registDrop(dragStore.id, dragStore);
+  }, []);
+  function onDragStart(e) {
+    var event = e;
+    runInAction(function () {
+      event.dataTransfer.setDragImage(new Image(), 0, 0);
+      dragStore.startMove(e.clientX, e.clientY);
+    });
+  }
+  function onDragEnd() {
+    runInAction(function () {
+      dragStore.endMove();
+    });
+  }
+  function onDrag(e) {
+    var event = e;
+    var mouseMoveX = event.clientX - dragStore.lastPos.left;
+    var mouseMoveY = event.clientY - dragStore.lastPos.top;
+    var shouldMove = false;
+    var movePosX = dragStore.lastPos.left;
+    var movePosY = dragStore.lastPos.top;
+    if (Math.abs(mouseMoveX) > stepX) {
+      shouldMove = true;
+      var moveStepX = Math.floor(mouseMoveX / stepX) * stepX;
+      movePosX = movePosX + moveStepX;
+    }
+    if (Math.abs(mouseMoveY) > stepY) {
+      shouldMove = true;
+      var moveStepY = Math.floor(mouseMoveY / stepY) * stepY;
+      movePosY = movePosY + moveStepY;
+    }
+    if (!shouldMove) {
+      return;
+    }
+    runInAction(function () {
+      dragStore.move(movePosX, movePosY);
+      onMove === null || onMove === void 0 || onMove(toJS(dragStore));
+    });
+  }
+  return {
+    listeners: {
+      onDragStart: onDragStart,
+      onDrag: onDrag,
+      onDragEnd: onDragEnd
+    },
+    attributes: {
+      draggable: true,
+      'drag-id': id
+    },
+    dragNodeRef: dragNodeRef
+  };
+}
+function DndProvider(props) {
+  var dropProviderStore = useLocalObservable(function () {
+    return {
+      registedDrop: {},
+      registDrop: function registDrop(id, dropStore) {
+        this.registedDrop[id] = dropStore;
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(DropContext.Provider, {
+    value: dropProviderStore
+  }, props.children);
+}
+function useDrop() {
+  var dropNodeRef = useRef(null);
+  var dropStore = useLocalObservable(function () {
+    return {
+      isOver: false,
+      setIsOver: function setIsOver(over) {
+        this.isOver = over;
+      },
+      id: 'dropContext'
+    };
+  });
+  var dropProviderStore = useContext(DropContext);
+  useEffect(function () {
+    dropProviderStore.registDrop(dropStore.id, dropStore);
+  }, []);
+  return {
+    isOver: dropStore.isOver,
+    dropNodeRef: dropNodeRef
+  };
+}
+export default observer(function CustomDraggable() {
+  var _useDrag = useDrag({
+      onMove: function onMove(v) {
+        posStore.left += v.offset.left;
+        posStore.top += v.offset.top;
+      },
+      id: 'div1s'
+    }),
+    listeners = _useDrag.listeners,
+    attributes = _useDrag.attributes,
+    dragNodeRef = _useDrag.dragNodeRef;
+  var _useDrop = useDrop(),
+    isOver = _useDrop.isOver,
+    dropNodeRef = _useDrop.dropNodeRef;
+  return /*#__PURE__*/React.createElement(DndProvider, null, /*#__PURE__*/React.createElement("div", {
+    onDragOver: function onDragOver(e) {
+      e.preventDefault();
+    },
+    ref: dropNodeRef,
+    style: {
+      width: '1000px',
+      height: '1000px',
+      position: 'relative',
+      backgroundColor: isOver ? 'yellow' : 'blue'
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({}, listeners, attributes, {
+    style: {
+      position: 'absolute',
+      left: posStore.left,
+      top: posStore.top,
+      backgroundColor: 'pink',
+      width: '200px',
+      height: '200px',
+      cursor: 'grab'
+    },
+    ref: dragNodeRef
+  }), "CustomDraggable")));
+});

package/dist/Draggable/test.js

@@ -1,13 +1,5 @@
-import { DndContext } from '@dnd-kit/core';
 import React from 'react';
-import Draggable from "./Draggable";
-import Droppable from "./Droppable";
+import CustomDraggable from '.';
 export default (function () {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
-    onDragStart: function onDragStart() {}
-  }, /*#__PURE__*/React.createElement(DndContext, {
-    onDragEnd: function onDragEnd() {}
-  }, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456")), /*#__PURE__*/React.createElement(DndContext, {
-    onDragEnd: function onDragEnd() {}
-  }, /*#__PURE__*/React.createElement(Draggable, null, "123"), /*#__PURE__*/React.createElement(Droppable, null, "456"))));
+  return /*#__PURE__*/React.createElement(CustomDraggable, null);
 });

package/dist/ViewPort/ViewPort.d.ts

@@ -1,15 +1,13 @@
-import React, { HtmlHTMLAttributes, ReactNode } from 'react';
+import React, { FunctionComponent, HtmlHTMLAttributes, ReactNode } from 'react';
 import { ViewPortStore } from './ViewPortStore';
+import { ViewPortWindowProps } from './ViewPortWindow';
 type ViewPortProps = {
-    children?: ReactNode;
+    children: ReactNode;
     viewPortStore: ViewPortStore;
     onScale?: (left: number, top: number, scale: number, ratio: number) => void;
     onScroll?: (left: number, top: number, scale: number, ratio: number) => void;
 } & HtmlHTMLAttributes<HTMLDivElement>;
-declare function ViewPort(props: ViewPortProps): React.JSX.Element;
-declare namespace ViewPort {
-    var Window: React.FunctionComponent<import("../Window/Window").WindowProps & {
-        window: import("./ViewPortWindow").ViewPortWindowStore;
-    }>;
-}
+declare const ViewPort: React.FunctionComponent<ViewPortProps> & {
+    Window: FunctionComponent<ViewPortWindowProps>;
+};
 export default ViewPort;

package/dist/ViewPort/ViewPort.js

@@ -1,20 +1,21 @@
-var _excluded = ["children", "viewPortStore", "onScroll", "onScale"],
-  _excluded2 = ["children", "viewPortStore"];
-var _templateObject, _templateObject2;
+var _excluded = ["children", "viewPortStore", "onScroll", "onScale"];
+var _templateObject, _templateObject2, _templateObject3;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { DndContext, useDraggable } from '@dnd-kit/core';
+import { useDraggable } from '@dnd-kit/core';
+import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { RippleManagerStore } from "./Ripple";
 import { ViewPortWindow } from "./ViewPortWindow";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    border: 1px solid #eee;\n    box-shadow: 0 0 7px 0 inset #fefefe;\n"])));
 var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n"])));
+var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
 var rippleManagerStore = new RippleManagerStore();
-var ViewPortEntity = observer(function (props) {
+var ViewPortComponent = observer(function (props) {
   var children = props.children,
     viewPortStore = props.viewPortStore,
     onScroll = props.onScroll,
@@ -28,11 +29,15 @@ var ViewPortEntity = observer(function (props) {
     listeners = _useDraggable.listeners,
     setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
     transform = _useDraggable.transform;
-  var _ref = useRef(null);
+  var contentRef = useRef(null);
+  var containerRef = useRef(null);
+  var pointerDownTimer = useRef();
   var createRipple = function createRipple(event) {
+    var _containerRef$current;
     event.preventDefault();
     event.stopPropagation();
-    var rect = event.currentTarget.getBoundingClientRect();
+    var rect = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
+    if (!rect) return;
     var left = event.clientX - rect.left;
     var top = event.clientY - rect.top;
     rippleManagerStore.addRipple(left, top);
@@ -49,7 +54,7 @@ var ViewPortEntity = observer(function (props) {
     }
   }, [transform]);
   useEffect(function () {
-    var _ref$current;
+    var _contentRef$current;
     function scaleHandler(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -60,44 +65,73 @@ var ViewPortEntity = observer(function (props) {
       }
       onScale === null || onScale === void 0 || onScale(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
     }
-    (_ref$current = _ref.current) === null || _ref$current === void 0 || _ref$current.addEventListener('wheel', scaleHandler, {
+    (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.addEventListener('wheel', scaleHandler, {
       passive: false
     });
     return function () {
-      var _ref$current2;
-      (_ref$current2 = _ref.current) === null || _ref$current2 === void 0 || _ref$current2.removeEventListener('wheel', scaleHandler);
+      var _contentRef$current2;
+      (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
     };
   }, []);
+  var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
+    //在transition期间禁止操作
+    if (viewPortStore.isTransition) {
+      return;
+    }
+    //双击的时候取消pointerDown的触发事件
+    if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
+    pointerDownTimer.current = null;
+    createRipple(e);
+    var container = containerRef.current;
+    var _container$getBoundin = container.getBoundingClientRect(),
+      left = _container$getBoundin.left,
+      top = _container$getBoundin.top;
+    var offsetLeft = e.clientX - left;
+    var offsetTop = e.clientY - top;
+    if (viewPortStore.scale === 1) {
+      viewPortStore.unfocus();
+    } else viewPortStore.focus(offsetLeft, offsetTop);
+  };
+  var onContentTransitionEnd = useCallback(function (e) {
+    if (e.target === contentRef.current) {
+      runInAction(function () {
+        viewPortStore.isTransition = false;
+      });
+    }
+  }, []);
+  var onContentPointerDownHandler = useCallback(function (e) {
+    if (viewPortStore.isTransition) return;
+    //鼠标点击的时候，先清除定时器，然后再异步触发pointerDown操作，这样保证doubleClick的优先级高于pointerDown
+    if (pointerDownTimer.current) clearTimeout(pointerDownTimer.current);
+    pointerDownTimer.current = setTimeout(function () {
+      var _onPointerDown, _ref;
+      listeners === null || listeners === void 0 || (_onPointerDown = (_ref = listeners).onPointerDown) === null || _onPointerDown === void 0 || _onPointerDown.call(_ref, e);
+    }, 0);
+  }, [listeners]);
+  var onContentPointerUpHandler = useCallback(function (e) {
+    var _onPointerUp, _ref2;
+    if (viewPortStore.isTransition) return;
+    listeners === null || listeners === void 0 || (_onPointerUp = (_ref2 = listeners).onPointerUp) === null || _onPointerUp === void 0 || _onPointerUp.call(_ref2, e);
+  }, [listeners]);
   return /*#__PURE__*/React.createElement(Container, _extends({
     style: viewPortStore.containerStyle,
-    onPointerDown: createRipple,
-    onDoubleClick: function onDoubleClick(e) {
-      var container = e.currentTarget;
-      var _container$getBoundin = container.getBoundingClientRect(),
-        left = _container$getBoundin.left,
-        top = _container$getBoundin.top;
-      var offsetLeft = e.clientX - left;
-      var offsetTop = e.clientY - top;
-      if (viewPortStore.scale === 1) {
-        viewPortStore.unfocus();
-      } else viewPortStore.focus(offsetLeft, offsetTop);
-    }
-  }, rest), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
+    onDoubleClick: onContainerDoubleClickHandler,
+    ref: containerRef
+  }, rest), /*#__PURE__*/React.createElement(Overlay, {
+    style: viewPortStore.overlayStyle
+  }), /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
-      _ref.current = dom;
-      setNodeRef(_ref.current);
-      setActivatorNodeRef(_ref.current);
+      contentRef.current = dom;
+      setNodeRef(contentRef.current);
+      setActivatorNodeRef(contentRef.current);
     }
-  }, attributes, listeners, {
+  }, attributes, {
+    onPointerDown: onContentPointerDownHandler,
+    onPointerUp: onContentPointerUpHandler,
+    onTransitionEnd: onContentTransitionEnd,
     style: viewPortStore.contentStyle
   }), children));
 });
-export default function ViewPort(props) {
-  var children = props.children,
-    viewPortStore = props.viewPortStore,
-    rest = _objectWithoutProperties(props, _excluded2);
-  return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
-    viewPortStore: viewPortStore
-  }, rest), children));
-}
-ViewPort.Window = ViewPortWindow;
+var ViewPort = ViewPortComponent;
+ViewPort.Window = ViewPortWindow;
+export default ViewPort;

package/dist/ViewPort/ViewPortStore.d.ts

@@ -15,21 +15,27 @@ export declare class ViewPortStore {
     ratio: number;
     isMoving: boolean;
     maxZIndex: number;
+    isTransition: boolean;
     constructor(width?: number, height?: number, ratio?: number);
     get scaleStep(): number;
     increaseScale(): void;
     decreaseScale(): void;
-    private validScale;
-    private setScale;
-    private setTransform;
+    validScale(scale: number): number;
+    setScale(scale: number): void;
+    setTransform(left: number, top: number): void;
     get offsetLeft(): number;
     get offsetTop(): number;
-    private formatedTransform;
+    formatedTransform(left: number, top: number): {
+        left: number;
+        top: number;
+    };
     focus(left: number, top: number): void;
     unfocus(): void;
     move(transform: Transform): void;
     endMove(): void;
     get contentStyle(): CSSProperties;
+    get containerStyle(): CSSProperties;
+    get overlayStyle(): CSSProperties;
     get viewPortRect(): {
         left: number;
         top: number;
@@ -44,6 +50,4 @@ export declare class ViewPortStore {
         height: number;
         scale: number;
     };
-    get containerStyle(): CSSProperties;
-    get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -5,8 +5,9 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { makeAutoObservable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 export var ViewPortStore = /*#__PURE__*/function () {
+  //在动画执行期间，禁止任何鼠标操作
   function ViewPortStore(width, height, ratio) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
@@ -24,10 +25,36 @@ export var ViewPortStore = /*#__PURE__*/function () {
     //缩放比例
     _defineProperty(this, "isMoving", false);
     _defineProperty(this, "maxZIndex", 1);
+    _defineProperty(this, "isTransition", false);
     if (ratio) this.ratio = ratio;
     if (width) this.width = width;
     if (height) this.height = height;
-    makeAutoObservable(this);
+    makeObservable(this, {
+      transform: observable.struct,
+      offset: observable.struct,
+      scale: observable,
+      width: observable,
+      height: observable,
+      ratio: observable,
+      isMoving: observable,
+      maxZIndex: observable,
+      isTransition: observable,
+      scaleStep: computed,
+      increaseScale: action,
+      decreaseScale: action,
+      setScale: action,
+      setTransform: action,
+      offsetLeft: computed,
+      offsetTop: computed,
+      focus: action,
+      unfocus: action,
+      move: action,
+      endMove: action,
+      containerStyle: computed.struct,
+      contentStyle: computed.struct,
+      viewPortRect: computed.struct,
+      overlayStyle: computed.struct
+    });
   }
   _createClass(ViewPortStore, [{
     key: "scaleStep",
@@ -39,12 +66,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function increaseScale() {
       this.setScale(this.scale + this.scaleStep);
       this.setTransform(this.transform.left, this.transform.top);
+      this.isTransition = true;
     }
   }, {
     key: "decreaseScale",
     value: function decreaseScale() {
       this.setScale(this.scale - this.scaleStep);
       this.setTransform(this.transform.left, this.transform.top);
+      this.isTransition = true;
     }
   }, {
     key: "validScale",
@@ -97,12 +126,14 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function focus(left, top) {
       this.setScale(1);
       this.setTransform((1 - this.ratio) * left + this.offsetLeft, (1 - this.ratio) * top + this.offsetTop);
+      this.isTransition = true;
     }
   }, {
     key: "unfocus",
     value: function unfocus() {
       this.setScale(1 / this.ratio);
       this.setTransform(0, 0);
+      this.isTransition = true;
     }
   }, {
     key: "move",
@@ -125,9 +156,10 @@ export var ViewPortStore = /*#__PURE__*/function () {
     key: "contentStyle",
     get: function get() {
       return {
-        left: -this.offsetLeft,
-        top: -this.offsetTop,
-        transform: " translate(".concat(this.transform.left, "px,").concat(this.transform.top, "px) scale(").concat(this.scale, ")"),
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        transform: " translate(".concat(this.transform.left - this.offsetLeft, "px,").concat(this.transform.top - this.offsetTop, "px) scale(").concat(this.scale, ")"),
         width: this.width * this.ratio + 'px',
         height: this.height * this.ratio + 'px',
         transformOrigin: 'left top',
@@ -136,11 +168,37 @@ export var ViewPortStore = /*#__PURE__*/function () {
         cursor: this.isMoving ? 'grab' : 'default'
       };
     }
+  }, {
+    key: "containerStyle",
+    get: function get() {
+      return {
+        width: this.width + 'px',
+        height: this.height + 'px',
+        overflow: 'hidden'
+      };
+    }
+  }, {
+    key: "overlayStyle",
+    get: function get() {
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: this.width,
+        height: this.height,
+        pointerEvents: this.isTransition ? 'all' : 'none',
+        userSelect: 'none',
+        display: this.isTransition ? 'block' : 'none',
+        backgroundColor: 'transparent',
+        zIndex: 9999
+      };
+    }
   }, {
     key: "viewPortRect",
     get: function get() {
       return this.posInViewPort(0, 0, this.width, this.height);
     }
+
     /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
   }, {
     key: "posInViewPort",
@@ -153,20 +211,6 @@ export var ViewPortStore = /*#__PURE__*/function () {
         scale: this.scale
       };
     }
-  }, {
-    key: "containerStyle",
-    get: function get() {
-      return {
-        width: this.width + 'px',
-        height: this.height + 'px',
-        overflow: 'hidden'
-      };
-    }
-  }, {
-    key: "info",
-    get: function get() {
-      return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
-    }
   }]);
   return ViewPortStore;
 }();

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -34,7 +34,9 @@ export declare class ViewPortWindowStore extends WindowStore {
     centerDisplay(): void;
     fullscreenWindow(func?: () => void): void;
     constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
+    get disabled(): boolean;
 }
-export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
+export type ViewPortWindowProps = WindowProps & {
     window: ViewPortWindowStore;
-}>;
+};
+export declare const ViewPortWindow: React.FunctionComponent<ViewPortWindowProps>;

package/dist/ViewPort/ViewPortWindow.js

@@ -34,7 +34,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       style: override,
       controll: override,
       focus: override,
-      centerDisplay: action
+      centerDisplay: action,
+      disabled: override
     });
     return _this;
   }
@@ -159,6 +160,11 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       func === null || func === void 0 || func();
       this.fullscreenPos = this.viewPortStore.viewPortRect;
     }
+  }, {
+    key: "disabled",
+    get: function get() {
+      return this.viewPortStore.isTransition || this.isTransition;
+    }
   }]);
   return ViewPortWindowStore;
 }(WindowStore);

package/dist/ViewPort/test.js

@@ -7,6 +7,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { DndContext } from '@dnd-kit/core';
 import { makeAutoObservable, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
@@ -66,13 +67,15 @@ export default observer(function Test() {
     onClick: function onClick() {
       windowManager.createWindow();
     }
-  }, "\u65B0\u589E"), /*#__PURE__*/React.createElement(StyledViewPort, {
+  }, "\u65B0\u589E"), /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(StyledViewPort, {
     viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
-    return /*#__PURE__*/React.createElement(ViewPort.Window, {
+    return /*#__PURE__*/React.createElement(DndContext, {
+      key: windowStore.id
+    }, /*#__PURE__*/React.createElement(ViewPort.Window, {
       window: windowStore,
       key: windowStore.id,
       title: 'xixi'
-    }, /*#__PURE__*/React.createElement("br", null));
-  })));
+    }, /*#__PURE__*/React.createElement("br", null)));
+  }))));
 });

package/dist/Window/Window.js

@@ -1,6 +1,7 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { CloseCircleOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
@@ -52,22 +53,33 @@ var Window = observer(function (props) {
       (_windowContainerRef$c2 = windowContainerRef.current) === null || _windowContainerRef$c2 === void 0 || _windowContainerRef$c2.removeEventListener('wheel', stopWheel);
     };
   }, []);
+
   /* style 的原因是因为性能问题 */
   return /*#__PURE__*/React.createElement(WindowContainer, {
     style: window.style,
     isMinimize: !!window.isMinimize,
     onTransitionEnd: function onTransitionEnd(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.target === e.currentTarget && e.propertyName === 'transform') {
+        runInAction(function () {
+          window.isTransition = false;
+        });
+      }
       if (e.target === e.currentTarget && window.isClosed && e.nativeEvent.propertyName === 'transform') {
         var _window$onClosedHandl;
         (_window$onClosedHandl = window.onClosedHandler) === null || _window$onClosedHandl === void 0 || _window$onClosedHandl.call(window, window.id);
       }
     },
+    onDoubleClick: function onDoubleClick(e) {
+      e.stopPropagation();
+    },
     onPointerDown: function onPointerDown(e) {
+      if (window.disabled) return;
       e.stopPropagation();
       window.focus();
       onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
-    },
-    ref: windowContainerRef
+    }
   }, /*#__PURE__*/React.createElement(WindowControllerLeft, {
     window: window,
     type: "left"
@@ -97,6 +109,9 @@ var Window = observer(function (props) {
     type: "move"
   }, /*#__PURE__*/React.createElement(WindowHeader, {
     isDragging: window.isMoving,
+    onPointerDown: function onPointerDown(e) {
+      if (window.disabled) e.stopPropagation();
+    },
     onDoubleClick: function onDoubleClick(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -114,22 +129,26 @@ var Window = observer(function (props) {
     color: "var(--kep-platform-orange-4)",
     icon: /*#__PURE__*/React.createElement(FullscreenOutlined, null),
     onClick: function onClick() {
+      if (window.disabled) return;
       window.fullscreenWindow(onFullscreenHandler);
     }
   }) : /*#__PURE__*/React.createElement(WindowOption, {
     color: "var(--kep-platform-orange-4)",
     icon: /*#__PURE__*/React.createElement(FullscreenExitOutlined, null),
     onClick: function onClick() {
+      if (window.disabled) return;
       window.fullscreenExitWindow();
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
     color: "var(--kep-platform-green-3)",
     icon: /*#__PURE__*/React.createElement(MinusCircleOutlined, null),
     onClick: function onClick() {
+      if (window.disabled) return;
       window.minimizeWindow();
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
     onClick: function onClick() {
+      if (window.disabled) return;
       window.closeWindow();
     },
     icon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),

package/dist/Window/WindowController.d.ts

@@ -6,5 +6,5 @@ type WindowControllerProps = {
     window: WindowStore;
     children?: ReactNode;
 };
-export default function WindowController(props: WindowControllerProps): React.JSX.Element;
-export {};
+declare const _default: React.FunctionComponent<WindowControllerProps>;
+export default _default;

package/dist/Window/WindowController.js

@@ -4,18 +4,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { useDraggable } from '@dnd-kit/core';
+import { DndContext, useDraggable } from '@dnd-kit/core';
+import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 var WindowControllerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:active,\n    &:focus {\n        outline: none;\n    }\n"])));
-export default function WindowController(props) {
+export default observer(function WindowController(props) {
   var type = props.type,
     window = props.window,
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
-      id: "".concat(window.id, "/").concat(type),
-      disabled: window.fullscreen
+      id: "".concat(window.id, "/").concat(type)
     }),
     attributes = _useDraggable.attributes,
     transform = _useDraggable.transform,
@@ -29,8 +29,8 @@ export default function WindowController(props) {
       window.endControll();
     }
   }, [transform, isDragging, type]);
-  return /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {
+  return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {
     ref: setNodeRef,
     role: "div"
-  }), children);
-}
+  }), children));
+});

package/dist/Window/WindowStore.d.ts

@@ -1,4 +1,5 @@
 import { Transform } from '@dnd-kit/utilities';
+import { CSSProperties } from 'react';
 import { WindowControllerType } from './WindowController';
 export default class WindowStore {
     width: number;
@@ -7,6 +8,7 @@ export default class WindowStore {
     top: number;
     zIndex: number;
     fullscreen: boolean;
+    isTransition: boolean;
     id: string;
     transform: {
         x: number;
@@ -31,6 +33,7 @@ export default class WindowStore {
     fullscreenWindow(func?: () => void): void;
     fullscreenExitWindow(): void;
     resetState(): void;
+    get disabled(): boolean;
     calculateTransform(transform: Transform): {
         x: number;
         y: number;
@@ -41,24 +44,6 @@ export default class WindowStore {
     normalizeWindow(): void;
     closeWindow(): void;
     focus(): void;
-    get style(): {
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-        zIndex: number;
-        transform: string;
-        transformOrigin: string;
-        transition: string;
-    } | {
-        left: string;
-        top: string;
-        width: string;
-        height: string;
-        zIndex: number;
-        transform: string;
-        transition: string;
-        transformOrigin?: undefined;
-    };
+    get style(): CSSProperties;
     get info(): string;
 }

package/dist/Window/WindowStore.js

@@ -15,6 +15,7 @@ var WindowStore = /*#__PURE__*/function () {
     _defineProperty(this, "top", 0);
     _defineProperty(this, "zIndex", 1);
     _defineProperty(this, "fullscreen", false);
+    _defineProperty(this, "isTransition", false);
     _defineProperty(this, "id", '');
     _defineProperty(this, "transform", null);
     _defineProperty(this, "isMoving", false);
@@ -41,6 +42,7 @@ var WindowStore = /*#__PURE__*/function () {
       fullscreen: observable,
       transform: observable.struct,
       isMoving: observable,
+      isTransition: observable,
       isResizing: observable,
       isClosed: observable,
       fullscreenExitWindow: action,
@@ -56,7 +58,8 @@ var WindowStore = /*#__PURE__*/function () {
       closeWindow: action,
       resetState: action,
       focus: action,
-      info: computed
+      info: computed,
+      disabled: computed
     });
     this.id = id;
     this.onClosedHandler = onClosedHandler;
@@ -66,12 +69,14 @@ var WindowStore = /*#__PURE__*/function () {
     value: function fullscreenWindow(func) {
       this.resetState();
       this.fullscreen = true;
+      this.isTransition = true;
       func === null || func === void 0 || func();
     }
   }, {
     key: "fullscreenExitWindow",
     value: function fullscreenExitWindow() {
       this.resetState();
+      this.isTransition = true;
       this.fullscreen = false;
     }
   }, {
@@ -79,6 +84,11 @@ var WindowStore = /*#__PURE__*/function () {
     value: function resetState() {
       this.transform = null;
     }
+  }, {
+    key: "disabled",
+    get: function get() {
+      return this.isTransition;
+    }
   }, {
     key: "calculateTransform",
     value: function calculateTransform(transform) {
@@ -131,6 +141,7 @@ var WindowStore = /*#__PURE__*/function () {
     value: function minimizeWindow() {
       this.isMinimize = true;
       this.fullscreen = false;
+      this.isTransition = true;
       this.resetState();
     }
   }, {
@@ -138,12 +149,14 @@ var WindowStore = /*#__PURE__*/function () {
     value: function normalizeWindow() {
       this.isMinimize = false;
       this.fullscreen = false;
+      this.isTransition = true;
       this.resetState();
     }
   }, {
     key: "closeWindow",
     value: function closeWindow() {
       this.isClosed = true;
+      this.isTransition = true;
       this.resetState();
     }
   }, {

package/dist/Window/test.js

@@ -1,3 +1,4 @@
+import { DndContext } from '@dnd-kit/core';
 import { observer, useLocalObservable } from 'mobx-react-lite';
 import React from 'react';
 import { GlobalStyles } from "../__styles";
@@ -7,7 +8,7 @@ export default observer(function Test() {
   var windowStore = useLocalObservable(function () {
     return new WindowStore('jss');
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
+  return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
   }), /*#__PURE__*/React.createElement("div", {
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.45",
+    "version": "0.0.47",
     "description": "A react library developed with dumi",
     "license": "MIT",
     "module": "dist/index.js",
@@ -47,7 +47,7 @@
     },
     "dependencies": {
         "@ant-design/icons": "^5.3.7",
-        "@kep-platform/hooks": "^0.0.45",
+        "@kep-platform/hooks": "^0.0.47",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0"
     },
@@ -87,5 +87,5 @@
     "authors": [
         "less-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "e566f226b3c776cf2356e6300d903d326925d1e2"
+    "gitHead": "4d341942ad974a956b2eee087f28518e33425173"
 }