@kep-platform/basic-component 0.0.45 → 0.0.46

package/dist/ViewPort/ViewPort.js

@@ -6,8 +6,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { 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";
@@ -21,18 +23,23 @@ var ViewPortEntity = observer(function (props) {
     onScale = props.onScale,
     rest = _objectWithoutProperties(props, _excluded);
   var _useDraggable = useDraggable({
-      id: 'ViewPortEntity'
+      id: 'ViewPortEntity',
+      disabled: viewPortStore.isTransition
     }),
     setNodeRef = _useDraggable.setNodeRef,
     attributes = _useDraggable.attributes,
     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 +56,7 @@ var ViewPortEntity = observer(function (props) {
     }
   }, [transform]);
   useEffect(function () {
-    var _ref$current;
+    var _contentRef$current;
     function scaleHandler(e) {
       e.stopPropagation();
       e.preventDefault();
@@ -60,35 +67,69 @@ 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 debounceDoubleClick = useDebounce(function (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);
+  }, 100);
+  var onContainerDoubleClickHandler = function onContainerDoubleClickHandler(e) {
+    debounceDoubleClick(e);
+  };
+  var onContainerTransitionEnd = useCallback(function () {
+    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);
-    }
+    onDoubleClick: onContainerDoubleClickHandler,
+    onTransitionEnd: onContainerTransitionEnd,
+    ref: containerRef
   }, rest), rippleManagerStore.rippleInfo, /*#__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,
     style: viewPortStore.contentStyle
   }), children));
 });

package/dist/ViewPort/ViewPortStore.d.ts

@@ -15,6 +15,7 @@ export declare class ViewPortStore {
     ratio: number;
     isMoving: boolean;
     maxZIndex: number;
+    isTransition: boolean;
     constructor(width?: number, height?: number, ratio?: number);
     get scaleStep(): number;
     increaseScale(): void;

package/dist/ViewPort/ViewPortStore.js

@@ -7,6 +7,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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';
 export var ViewPortStore = /*#__PURE__*/function () {
+  //在动画执行期间，禁止任何鼠标操作
   function ViewPortStore(width, height, ratio) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
@@ -24,6 +25,7 @@ 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;
@@ -39,12 +41,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 +101,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",
@@ -141,6 +147,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
     get: function get() {
       return this.posInViewPort(0, 0, this.width, this.height);
     }
+
     /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
   }, {
     key: "posInViewPort",

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -34,6 +34,7 @@ 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 & {
     window: ViewPortWindowStore;

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/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,31 @@ 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) {
+      if (e.target === e.currentTarget) {
+        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 +107,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 +127,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

@@ -5,17 +5,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 { 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
+      disabled: window.disabled
     }),
     attributes = _useDraggable.attributes,
     transform = _useDraggable.transform,
@@ -33,4 +34,4 @@ export default function WindowController(props) {
     ref: setNodeRef,
     role: "div"
   }), 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.46",
     "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.46",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0"
     },
@@ -87,5 +87,5 @@
     "authors": [
         "less-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "e566f226b3c776cf2356e6300d903d326925d1e2"
+    "gitHead": "a68fe348236a6319c9232ac8d12e9cd567c1fe91"
 }