@kep-platform/basic-component 0.0.42 → 0.0.44

package/dist/ViewPort/ViewPort.d.ts

@@ -9,7 +9,6 @@ type ViewPortProps = {
 declare function ViewPort(props: ViewPortProps): React.JSX.Element;
 declare namespace ViewPort {
     var Window: React.FunctionComponent<import("../Window/Window").WindowProps & {
-        viewPortStore: ViewPortStore;
         window: import("./ViewPortWindow").ViewPortWindowStore;
     }>;
 }

package/dist/ViewPort/ViewPortStore.d.ts

@@ -30,6 +30,20 @@ export declare class ViewPortStore {
     move(transform: Transform): void;
     endMove(): void;
     get contentStyle(): CSSProperties;
+    get viewPortRect(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        scale: number;
+    };
+    posInViewPort(left: number, top: number, width: number, height: number): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        scale: number;
+    };
     get containerStyle(): CSSProperties;
     get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -131,11 +131,28 @@ export var ViewPortStore = /*#__PURE__*/function () {
         width: this.width * this.ratio + 'px',
         height: this.height * this.ratio + 'px',
         transformOrigin: 'left top',
-        transition: this.isMoving ? 'none' : 'all 0.5s',
+        transition: this.isMoving ? 'none' : 'all 1s ease-in-out',
         background: '#188fff67',
         cursor: this.isMoving ? 'grab' : 'default'
       };
     }
+  }, {
+    key: "viewPortRect",
+    get: function get() {
+      return this.posInViewPort(0, 0, this.width, this.height);
+    }
+    /* 这个函数比较重要，因为你想要让content中的元素在视窗相对位置显示，这个函数会帮你计算偏移量和缩放量，直接得出你的元素应该在content中的偏移量 */
+  }, {
+    key: "posInViewPort",
+    value: function posInViewPort(left, top, width, height) {
+      return {
+        left: (-this.transform.left + this.offsetLeft + left) / this.scale,
+        top: (-this.transform.top + this.offsetTop + top) / this.scale,
+        width: width / this.scale,
+        height: height / this.scale,
+        scale: this.scale
+      };
+    }
   }, {
     key: "containerStyle",
     get: function get() {

package/dist/ViewPort/ViewPortWindow.d.ts

@@ -5,7 +5,7 @@ import { WindowProps } from '../Window/Window';
 import { WindowControllerType } from '../Window/WindowController';
 import { ViewPortStore } from './ViewPortStore';
 export declare class ViewPortWindowStore extends WindowStore {
-    scale: number;
+    viewPortStore: ViewPortStore;
     get style(): {
         left: string;
         top: string;
@@ -13,17 +13,8 @@ export declare class ViewPortWindowStore extends WindowStore {
         height: string;
         zIndex: number;
         transform: string;
+        transformOrigin: string;
         transition: string;
-        transformOrigin?: undefined;
-    } | {
-        left: string;
-        top: string;
-        width: number;
-        height: number;
-        zIndex: number;
-        transform: string;
-        transition: string;
-        transformOrigin?: undefined;
     } | {
         left: string;
         top: string;
@@ -31,17 +22,19 @@ export declare class ViewPortWindowStore extends WindowStore {
         height: string;
         zIndex: number;
         transform: string;
-        transformOrigin: string;
         transition: string;
+        transformOrigin?: undefined;
     };
+    focus(): void;
     calculateTransform(transform: Transform): {
         x: number;
         y: number;
     };
     controll(transform: Transform, type: WindowControllerType): void;
-    constructor(id: string, onClosedHandler?: (id: string) => void);
+    centerDisplay(): void;
+    fullscreenWindow(func?: () => void): void;
+    constructor(id: string, viewPort: ViewPortStore, onClosedHandler?: (id: string) => void);
 }
 export declare const ViewPortWindow: React.FunctionComponent<WindowProps & {
-    viewPortStore: ViewPortStore;
     window: ViewPortWindowStore;
 }>;

package/dist/ViewPort/ViewPortWindow.js

@@ -1,4 +1,4 @@
-var _excluded = ["viewPortStore", "window"];
+var _excluded = ["window"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
@@ -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 { makeObservable, observable, override, runInAction } from 'mobx';
+import { action, makeObservable, override } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import { WindowStore } from "../Window";
@@ -24,15 +24,17 @@ import { default as Window } from "../Window/Window";
 export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
   _inherits(ViewPortWindowStore, _WindowStore);
   var _super = _createSuper(ViewPortWindowStore);
-  function ViewPortWindowStore(id, onClosedHandler) {
+  function ViewPortWindowStore(id, viewPort, onClosedHandler) {
     var _this;
     _classCallCheck(this, ViewPortWindowStore);
     _this = _super.call(this, id, onClosedHandler);
-    _defineProperty(_assertThisInitialized(_this), "scale", 1);
+    _defineProperty(_assertThisInitialized(_this), "viewPortStore", void 0);
+    _this.viewPortStore = viewPort;
     makeObservable(_assertThisInitialized(_this), {
       style: override,
-      scale: observable,
-      controll: override
+      controll: override,
+      focus: override,
+      centerDisplay: action
     });
     return _this;
   }
@@ -47,6 +49,7 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
           height: this.height + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
+          transformOrigin: 'center center',
           transition: 'all 0.5s ease-out'
         };
       }
@@ -54,21 +57,22 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         return {
           left: this.minimizePos.left + 'px',
           top: this.minimizePos.top + 'px',
-          width: 0,
-          height: 0,
+          width: this.width + 'px',
+          height: this.height + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
+          transformOrigin: 'left top',
+          transition: "all ".concat(0.5 + this.viewPortStore.scale, "s ease-out")
         };
       }
       if (this.fullscreen) {
         return {
-          left: this.fullscreenPos.left / this.scale + 'px',
-          top: this.fullscreenPos.top / this.scale + 'px',
-          width: this.fullscreenPos.width + 'px',
-          height: this.fullscreenPos.height + 'px',
+          left: this.fullscreenPos.left + 'px',
+          top: this.fullscreenPos.top + 'px',
+          width: this.fullscreenPos.width * this.viewPortStore.scale + 'px',
+          height: this.fullscreenPos.height * this.viewPortStore.scale + 'px',
           zIndex: this.zIndex,
-          transform: "scale(".concat(1 / this.scale, ") "),
+          transform: "scale(".concat(1 / this.viewPortStore.scale, ")"),
           transformOrigin: 'left top',
           transition: 'width height 0.5s ease-out'
         };
@@ -94,13 +98,18 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         transition: 'all 0.5s ease-out'
       };
     }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.zIndex = ++this.viewPortStore.maxZIndex;
+    }
   }, {
     key: "calculateTransform",
     value: function calculateTransform(transform) {
       var _this$transform, _this$transform2;
       return {
-        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.scale,
-        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.scale
+        x: (transform.x - (((_this$transform = this.transform) === null || _this$transform === void 0 ? void 0 : _this$transform.x) || 0)) / this.viewPortStore.scale,
+        y: (transform.y - (((_this$transform2 = this.transform) === null || _this$transform2 === void 0 ? void 0 : _this$transform2.y) || 0)) / this.viewPortStore.scale
       };
     }
   }, {
@@ -134,32 +143,32 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
       }
       this.transform = transform;
     }
+  }, {
+    key: "centerDisplay",
+    value: function centerDisplay() {
+      this.focus();
+      var rect = this.viewPortStore.viewPortRect;
+      this.left = rect.left + Math.max(0, rect.width - this.width) / 2;
+      this.top = rect.top + Math.max(0, rect.height - this.height) / 2;
+    }
+  }, {
+    key: "fullscreenWindow",
+    value: function fullscreenWindow(func) {
+      this.resetState();
+      this.fullscreen = true;
+      func === null || func === void 0 || func();
+      this.fullscreenPos = this.viewPortStore.viewPortRect;
+    }
   }]);
   return ViewPortWindowStore;
 }(WindowStore);
 export var ViewPortWindow = observer(function ViewPortWindow(props) {
-  var viewPortStore = props.viewPortStore,
-    window = props.window,
+  var window = props.window,
     rest = _objectWithoutProperties(props, _excluded);
   useEffect(function () {
-    runInAction(function () {
-      window.fullscreenPos.left = -viewPortStore.transform.left + viewPortStore.offsetLeft;
-      window.fullscreenPos.top = -viewPortStore.transform.top + viewPortStore.offsetTop;
-      window.fullscreenPos.width = viewPortStore.width;
-      window.fullscreenPos.height = viewPortStore.height;
-      window.scale = viewPortStore.scale;
-    });
-  }, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
-  useEffect(function () {
-    window.left = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
-    window.top = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
+    window.centerDisplay();
   }, []);
   return /*#__PURE__*/React.createElement(Window, _extends({
     window: window
-  }, rest, {
-    onFocusHandler: function onFocusHandler() {
-      viewPortStore.maxZIndex++;
-      window.zIndex = viewPortStore.maxZIndex;
-    }
-  }));
+  }, rest));
 });

package/dist/ViewPort/test.js

@@ -6,20 +6,26 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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, runInAction } from 'mobx';
-import { observer, useLocalObservable } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { GlobalStyles } from '..';
+import { Button, GlobalStyles } from '..';
 import ViewPort from "./ViewPort";
 import { ViewPortStore } from "./ViewPortStore";
 import { ViewPortWindowStore } from "./ViewPortWindow";
+var viewPortStore = new ViewPortStore(600, 600, 5);
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
-    _defineProperty(this, "windows", [new ViewPortWindowStore('jss', this.closeWindowHanlder.bind(this)), new ViewPortWindowStore('jss12', this.closeWindowHanlder.bind(this))]);
+    _defineProperty(this, "windows", [new ViewPortWindowStore('jss', viewPortStore, this.closeWindowHanlder.bind(this)), new ViewPortWindowStore('jss12', viewPortStore, this.closeWindowHanlder.bind(this))]);
     makeAutoObservable(this);
   }
   _createClass(WindowManager, [{
+    key: "createWindow",
+    value: function createWindow() {
+      this.windows.push(new ViewPortWindowStore('jss' + Math.random(), viewPortStore, this.closeWindowHanlder.bind(this)));
+    }
+  }, {
     key: "closeWindowHanlder",
     value: function closeWindowHanlder(id) {
       this.windows = this.windows.filter(function (window) {
@@ -42,14 +48,11 @@ var StyledViewPort = styled(ViewPort).withConfig({
   componentId: "basic-component-347b__sc-1b1xrkc-0"
 })(["border:1px solid #eee;"]);
 export default observer(function Test() {
-  var viewPortStore = useLocalObservable(function () {
-    return new ViewPortStore(600, 600, 2);
-  });
   useEffect(function () {
     function setWidthHeight() {
       runInAction(function () {
-        viewPortStore.width = 600;
-        viewPortStore.height = 600;
+        viewPortStore.width = 800;
+        viewPortStore.height = 800;
       });
     }
     window.addEventListener('resize', setWidthHeight);
@@ -60,14 +63,17 @@ export default observer(function Test() {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
-  }), /*#__PURE__*/React.createElement(StyledViewPort, {
+  }), /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      windowManager.createWindow();
+    }
+  }, "\u65B0\u589E"), /*#__PURE__*/React.createElement(StyledViewPort, {
     viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
     return /*#__PURE__*/React.createElement(ViewPort.Window, {
       window: windowStore,
       key: windowStore.id,
-      title: 'xixi',
-      viewPortStore: viewPortStore
+      title: 'xixi'
     }, /*#__PURE__*/React.createElement("br", null));
   })));
 });

package/dist/Window/Window.js

@@ -102,6 +102,7 @@ var Window = observer(function (props) {
     },
     onPointerDown: function onPointerDown(e) {
       e.stopPropagation();
+      window.focus();
       onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
     },
     ref: windowContainerRef

package/dist/Window/WindowStore.d.ts

@@ -40,6 +40,7 @@ export default class WindowStore {
     minimizeWindow(): void;
     normalizeWindow(): void;
     closeWindow(): void;
+    focus(): void;
     get style(): {
         left: string;
         top: string;
@@ -47,15 +48,17 @@ export default class WindowStore {
         height: string;
         zIndex: number;
         transform: string;
+        transformOrigin: string;
         transition: string;
     } | {
         left: string;
         top: string;
-        width: number;
-        height: number;
+        width: string;
+        height: string;
         zIndex: number;
         transform: string;
         transition: string;
+        transformOrigin?: undefined;
     };
     get info(): string;
 }

package/dist/Window/WindowStore.js

@@ -55,6 +55,7 @@ var WindowStore = /*#__PURE__*/function () {
       normalizeWindow: action,
       closeWindow: action,
       resetState: action,
+      focus: action,
       info: computed
     });
     this.id = id;
@@ -145,6 +146,11 @@ var WindowStore = /*#__PURE__*/function () {
       this.isClosed = true;
       this.resetState();
     }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.zIndex++;
+    }
   }, {
     key: "style",
     get: function get() {
@@ -156,18 +162,20 @@ var WindowStore = /*#__PURE__*/function () {
           height: this.height + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
+          transformOrigin: 'center center',
+          transition: 'all 1s ease-in-out'
         };
       }
       if (this.isMinimize && this.minimizePos) {
         return {
           left: this.minimizePos.left + 'px',
           top: this.minimizePos.top + 'px',
-          width: 0,
-          height: 0,
+          width: this.width + 'px',
+          height: this.width + 'px',
           zIndex: this.zIndex,
           transform: 'scale(0)',
-          transition: 'all 0.5s ease-out'
+          transformOrigin: 'left top',
+          transition: 'all 1s ease-in-out'
         };
       }
       if (this.fullscreen) {
@@ -178,7 +186,7 @@ var WindowStore = /*#__PURE__*/function () {
           height: this.fullscreenPos.height + 'px',
           zIndex: this.zIndex,
           transform: 'none',
-          transition: 'all 0.5s ease-out'
+          transition: 'all 1s ease-in-out'
         };
       }
       if (this.isMoving || this.isResizing) {
@@ -199,7 +207,7 @@ var WindowStore = /*#__PURE__*/function () {
         height: this.height + 'px',
         zIndex: this.zIndex,
         transform: 'none',
-        transition: 'all 0.5s ease-out'
+        transition: 'all 1s ease-in-out'
       };
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.42",
+    "version": "0.0.44",
     "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.42",
+        "@kep-platform/hooks": "^0.0.44",
         "color": "^4.2.3",
         "rc-pagination": "^4.1.0",
         "styled-components": "^6.1.11"
@@ -87,5 +87,5 @@
     "authors": [
         "lee-step-jss 1599925910@qq.com"
     ],
-    "gitHead": "345a676c9d5748fb2a93d5423e7517cbda956876"
+    "gitHead": "d7ee92047ae7296763e391b3f01553d4105500bb"
 }