@kep-platform/basic-component 1.0.23 → 1.0.24

package/dist/ViewPort/ViewPort.d.ts

@@ -4,7 +4,6 @@ import { ViewPortWindowProps } from './ViewPortWindow';
 type ViewPortProps = {
     children: ReactNode;
     viewPortStore: ViewPortStore;
-    onScroll?: (left: number, top: number) => void;
 } & HtmlHTMLAttributes<HTMLDivElement>;
 declare const ViewPort: React.FunctionComponent<ViewPortProps> & {
     Window: FunctionComponent<ViewPortWindowProps>;

package/dist/ViewPort/ViewPort.js

@@ -1,13 +1,12 @@
-var _excluded = ["children", "viewPortStore", "onScroll"];
+var _excluded = ["children", "viewPortStore"];
 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 { useDraggable } from '@dnd-kit/core';
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { ViewPortWindow } from "./ViewPortWindow";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: relative;\n\tborder: 1px solid #eee;\n\tbox-shadow: 0 0 7px 0 inset #fefefe;\n"])));
@@ -16,27 +15,9 @@ var Overlay = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplate
 var ViewPortComponent = observer(function (props) {
   var children = props.children,
     viewPortStore = props.viewPortStore,
-    onScroll = props.onScroll,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useDraggable = useDraggable({
-      id: 'ViewPortEntity'
-    }),
-    setNodeRef = _useDraggable.setNodeRef,
-    attributes = _useDraggable.attributes,
-    listeners = _useDraggable.listeners,
-    setActivatorNodeRef = _useDraggable.setActivatorNodeRef,
-    transform = _useDraggable.transform;
   var contentRef = useRef(null);
   var containerRef = useRef(null);
-  var pointerDownTimer = useRef();
-  useEffect(function () {
-    if (transform) {
-      viewPortStore.move(transform);
-      onScroll === null || onScroll === void 0 || onScroll(viewPortStore.transform.left, viewPortStore.transform.top);
-    } else {
-      viewPortStore.endMove();
-    }
-  }, [transform]);
   useEffect(function () {
     var _contentRef$current, _contentRef$current2;
     function onContentTransitionEnd(e) {
@@ -68,13 +49,15 @@ var ViewPortComponent = observer(function (props) {
       var r = el.getBoundingClientRect();
       var left = r.left + (window.scrollX || window.pageXOffset || 0);
       var top = r.top + (window.scrollY || window.pageYOffset || 0);
-      viewPortStore.setContainerRect({
-        left: left,
-        top: top,
-        right: left + r.width,
-        bottom: top + r.height,
-        width: r.width,
-        height: r.height
+      runInAction(function () {
+        viewPortStore.setContainerRect({
+          left: left,
+          top: top,
+          right: left + r.width,
+          bottom: top + r.height,
+          width: r.width,
+          height: r.height
+        });
       });
     }
     measure();
@@ -103,41 +86,15 @@ var ViewPortComponent = observer(function (props) {
       if (ro && typeof ro.disconnect === 'function') ro.disconnect();
     };
   }, []);
-  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,
     ref: containerRef
   }, rest), /*#__PURE__*/React.createElement(Overlay, {
     style: viewPortStore.overlayStyle
-  }), /*#__PURE__*/React.createElement(Content, _extends({
-    ref: function ref(dom) {
-      contentRef.current = dom;
-      setNodeRef(contentRef.current);
-      setActivatorNodeRef(contentRef.current);
-    }
-  }, attributes, {
-    onPointerDown: onContentPointerDownHandler,
-    onPointerUp: onContentPointerUpHandler,
-    onDoubleClick: function onDoubleClick(e) {
-      var target = e.target;
-      var rect = target.getBoundingClientRect();
-      viewPortStore.focus(e.clientX - rect.left, e.clientY - rect.top);
-    },
+  }), /*#__PURE__*/React.createElement(Content, {
+    ref: contentRef,
     style: viewPortStore.contentStyle
-  }), children));
+  }, children));
 });
 var ViewPort = ViewPortComponent;
 ViewPort.Window = ViewPortWindow;

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 { computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 export var ViewPortStore = /*#__PURE__*/function () {
   function ViewPortStore(width, height) {
     _classCallCheck(this, ViewPortStore);
@@ -44,6 +44,12 @@ export var ViewPortStore = /*#__PURE__*/function () {
       maxZIndex: observable,
       isTransition: observable,
       animationEasing: observable,
+      setTransform: action,
+      focus: action,
+      unfocus: action,
+      move: action,
+      endMove: action,
+      setContainerRect: action,
       viewPortRect: computed.struct,
       overlayStyle: computed.struct
     });

package/dist/ViewPort/ViewPortWindow.js

@@ -16,7 +16,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 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 { action, makeObservable, observable, override } from 'mobx';
+import { action, makeObservable, observable, override, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { WindowStore } from "../Window";
@@ -254,7 +254,9 @@ export var ViewPortWindow = observer(function ViewPortWindow(props) {
     rest = _objectWithoutProperties(props, _excluded);
   useEffect(function () {
     if (!window.disableDefaultCenterDisplay) {
-      window.centerDisplay();
+      runInAction(function () {
+        window.centerDisplay();
+      });
     }
   }, []);
   return /*#__PURE__*/React.createElement(Window, _extends({

package/dist/ViewPort/test.js

@@ -49,8 +49,11 @@ var WindowManager = /*#__PURE__*/function () {
   }, {
     key: "closeWindowHanlder",
     value: function closeWindowHanlder(id) {
-      this.windows = this.windows.filter(function (window) {
-        return window.id !== id;
+      var _this = this;
+      runInAction(function () {
+        _this.windows = _this.windows.filter(function (window) {
+          return window.id !== id;
+        });
       });
     }
   }, {

package/dist/Window/Window.js

@@ -120,7 +120,9 @@ var WindowComponent = observer(function (props) {
     onPointerDown: function onPointerDown(e) {
       if (window.disabled) return;
       e.stopPropagation();
-      window.focus();
+      runInAction(function () {
+        window.focus();
+      });
       onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
     }
   }, /*#__PURE__*/React.createElement(WindowControllerLeft, {
@@ -158,11 +160,13 @@ var WindowComponent = observer(function (props) {
     onDoubleClick: function onDoubleClick(e) {
       e.stopPropagation();
       e.preventDefault();
-      if (window.fullscreen) {
-        window.fullscreenExitWindow();
-      } else {
-        window.fullscreenWindow(onFullscreenHandler);
-      }
+      runInAction(function () {
+        if (window.fullscreen) {
+          window.fullscreenExitWindow();
+        } else {
+          window.fullscreenWindow(onFullscreenHandler);
+        }
+      });
     }
   }, /*#__PURE__*/React.createElement("h5", null, title), /*#__PURE__*/React.createElement(WindowHeaderOptions, {
     onPointerDown: function onPointerDown(e) {
@@ -201,18 +205,22 @@ var WindowComponent = observer(function (props) {
     icon: /*#__PURE__*/React.createElement(MinusOutlined, null),
     onClick: function onClick() {
       if (window.disabled) return;
-      window.minimizeWindow();
+      runInAction(function () {
+        window.minimizeWindow();
+      });
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
     "aria-label": window.fullscreen ? '退出全屏' : '进入全屏',
     icon: window.fullscreen ? /*#__PURE__*/React.createElement(CompressOutlined, null) : /*#__PURE__*/React.createElement(BorderOutlined, null),
     onClick: function onClick() {
       if (window.disabled) return;
-      if (window.fullscreen) {
-        window.fullscreenExitWindow();
-      } else {
-        window.fullscreenWindow(onFullscreenHandler);
-      }
+      runInAction(function () {
+        if (window.fullscreen) {
+          window.fullscreenExitWindow();
+        } else {
+          window.fullscreenWindow(onFullscreenHandler);
+        }
+      });
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
     "aria-label": "\u5173\u95ED\u7A97\u53E3",
@@ -220,7 +228,9 @@ var WindowComponent = observer(function (props) {
     danger: true,
     onClick: function onClick() {
       if (window.disabled) return;
-      window.closeWindow();
+      runInAction(function () {
+        window.closeWindow();
+      });
     }
   })))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
 });

package/dist/Window/WindowController.js

@@ -5,6 +5,7 @@ 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 { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
@@ -24,9 +25,13 @@ export default observer(function WindowController(props) {
     isDragging = _useDraggable.isDragging;
   useEffect(function () {
     if (transform && isDragging) {
-      window.control(transform, type);
+      runInAction(function () {
+        window.control(transform, type);
+      });
     } else {
-      window.endControl();
+      runInAction(function () {
+        window.endControl();
+      });
     }
   }, [transform, isDragging, type]);
   return /*#__PURE__*/React.createElement(WindowControllerContainer, _extends({}, rest, attributes, listeners, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kep-platform/basic-component",
-	"version": "1.0.23",
+	"version": "1.0.24",
 	"description": "A react library developed with dumi",
 	"license": "MIT",
 	"module": "dist/index.js",
@@ -87,5 +87,5 @@
 	"authors": [
 		"less-step-jss 1599925910@qq.com"
 	],
-	"gitHead": "1405b843c379237db0900f5ed07a4c3dfc7a05f3"
+	"gitHead": "cdab8a4027ccc1615c1dd67e8701ce44e3a728e5"
 }