@kep-platform/basic-component 0.0.42 → 0.0.43

package/dist/ViewPort/ViewPortStore.d.ts

@@ -30,6 +30,13 @@ 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;
+    };
     get containerStyle(): CSSProperties;
     get info(): string;
 }

package/dist/ViewPort/ViewPortStore.js

@@ -136,6 +136,18 @@ export var ViewPortStore = /*#__PURE__*/function () {
         cursor: this.isMoving ? 'grab' : 'default'
       };
     }
+    /* 计算得到实际显示区域的偏移量 */
+  }, {
+    key: "viewPortRect",
+    get: function get() {
+      return {
+        left: -this.transform.left + this.offsetLeft,
+        top: -this.transform.top + this.offsetTop,
+        width: this.width,
+        height: this.height,
+        scale: this.scale
+      };
+    }
   }, {
     key: "containerStyle",
     get: function get() {

package/dist/ViewPort/ViewPortWindow.js

@@ -143,16 +143,17 @@ export var ViewPortWindow = observer(function ViewPortWindow(props) {
     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;
+      var rect = viewPortStore.viewPortRect;
+      window.fullscreenPos = rect;
+      window.scale = rect.scale;
     });
-  }, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
+  }, [viewPortStore.viewPortRect]);
   useEffect(function () {
-    window.left = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
-    window.top = (viewPortStore.width * viewPortStore.ratio - viewPortStore.width) / 2;
+    var rect = viewPortStore.viewPortRect;
+    /* rect.width/rect.scale就是实际上显示区域内容区的宽度 */
+    window.left = rect.left + Math.max(0, rect.width / rect.scale - window.width) / 2;
+    window.top = rect.top + Math.max(0, rect.height / rect.scale - window.height) / 2;
+    window.zIndex = ++viewPortStore.maxZIndex;
   }, []);
   return /*#__PURE__*/React.createElement(Window, _extends({
     window: window

package/dist/ViewPort/test.js

@@ -9,7 +9,7 @@ import { makeAutoObservable, runInAction } from 'mobx';
 import { observer, useLocalObservable } 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";
@@ -20,6 +20,11 @@ var WindowManager = /*#__PURE__*/function () {
     makeAutoObservable(this);
   }
   _createClass(WindowManager, [{
+    key: "createWindow",
+    value: function createWindow() {
+      this.windows.push(new ViewPortWindowStore('jss' + Math.random(), this.closeWindowHanlder.bind(this)));
+    }
+  }, {
     key: "closeWindowHanlder",
     value: function closeWindowHanlder(id) {
       this.windows = this.windows.filter(function (window) {
@@ -60,7 +65,11 @@ 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, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.42",
+    "version": "0.0.43",
     "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.43",
         "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": "a23a9722867510175523db19c5a352c3fa9f5f21"
 }