@kep-platform/basic-component 0.0.46 → 0.0.48

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,12 +1,10 @@
-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 { useDebounce } from '@kep-platform/hooks';
+import { useDraggable } from '@dnd-kit/core';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useCallback, useEffect, useRef } from 'react';
@@ -15,16 +13,16 @@ 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,
     onScale = props.onScale,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
-      id: 'ViewPortEntity',
-      disabled: viewPortStore.isTransition
+      id: 'ViewPortEntity'
     }),
     setNodeRef = _useDraggable.setNodeRef,
     attributes = _useDraggable.attributes,
@@ -75,7 +73,7 @@ var ViewPortEntity = observer(function (props) {
       (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.removeEventListener('wheel', scaleHandler);
     };
   }, []);
-  var debounceDoubleClick = useDebounce(function (e) {
+  var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
     //在transition期间禁止操作
     if (viewPortStore.isTransition) {
       return;
@@ -93,14 +91,13 @@ var ViewPortEntity = observer(function (props) {
     if (viewPortStore.scale === 1) {
       viewPortStore.unfocus();
     } else viewPortStore.focus(offsetLeft, offsetTop);
-  }, 100);
-  var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
-    debounceDoubleClick(e);
   };
-  var onContainerTransitionEnd = useCallback(function () {
-    runInAction(function () {
-      viewPortStore.isTransition = false;
-    });
+  var onContentTransitionEnd = useCallback(function (e) {
+    if (e.target === contentRef.current) {
+      runInAction(function () {
+        viewPortStore.isTransition = false;
+      });
+    }
   }, []);
   var onContentPointerDownHandler = useCallback(function (e) {
     if (viewPortStore.isTransition) return;
@@ -119,9 +116,10 @@ var ViewPortEntity = observer(function (props) {
   return /*#__PURE__*/React.createElement(Container, _extends({
     style: viewPortStore.containerStyle,
     onDoubleClick: onContainerDoubleClickHandler,
-    onTransitionEnd: onContainerTransitionEnd,
     ref: containerRef
-  }, rest), rippleManagerStore.rippleInfo, /*#__PURE__*/React.createElement(Content, _extends({
+  }, rest), /*#__PURE__*/React.createElement(Overlay, {
+    style: viewPortStore.overlayStyle
+  }), /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
       contentRef.current = dom;
       setNodeRef(contentRef.current);
@@ -130,15 +128,10 @@ var ViewPortEntity = observer(function (props) {
   }, 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

@@ -20,17 +20,22 @@ export declare class ViewPortStore {
     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;
@@ -45,6 +50,4 @@ export declare class ViewPortStore {
         height: number;
         scale: number;
     };
-    get containerStyle(): CSSProperties;
-    get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -5,7 +5,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 { makeAutoObservable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 export var ViewPortStore = /*#__PURE__*/function () {
   //在动画执行期间，禁止任何鼠标操作
   function ViewPortStore(width, height, ratio) {
@@ -29,7 +29,32 @@ export var ViewPortStore = /*#__PURE__*/function () {
     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",
@@ -131,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',
@@ -142,6 +168,31 @@ 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() {
@@ -160,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

@@ -36,6 +36,7 @@ export declare class ViewPortWindowStore extends WindowStore {
     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/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,7 +67,7 @@ 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, {
@@ -74,5 +75,5 @@ export default observer(function Test() {
       key: windowStore.id,
       title: 'xixi'
     }, /*#__PURE__*/React.createElement("br", null));
-  })));
+  }))));
 });

package/dist/Window/Window.js

@@ -59,6 +59,7 @@ var Window = observer(function (props) {
     style: window.style,
     isMinimize: !!window.isMinimize,
     onTransitionEnd: function onTransitionEnd(e) {
+      e.stopPropagation();
       if (e.target === e.currentTarget) {
         runInAction(function () {
           window.isTransition = false;

package/dist/Window/WindowController.js

@@ -15,8 +15,7 @@ export default observer(function WindowController(props) {
     children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
-      id: "".concat(window.id, "/").concat(type),
-      disabled: window.disabled
+      id: "".concat(window.id, "/").concat(type)
     }),
     attributes = _useDraggable.attributes,
     transform = _useDraggable.transform,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.46",
+    "version": "0.0.48",
     "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.46",
+        "@kep-platform/hooks": "^0.0.48",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0"
     },
@@ -87,5 +87,5 @@
     "authors": [
         "less-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "a68fe348236a6319c9232ac8d12e9cd567c1fe91"
+    "gitHead": "80d718030dd9b5362bbd7bdfc648b26e57dd3a74"
 }