@kep-platform/basic-component 0.0.36 → 0.0.38

package/dist/ViewPort/ViewPort.d.ts

@@ -1,10 +1,13 @@
 import { Transform } from '@dnd-kit/utilities';
 import React, { HtmlHTMLAttributes, ReactNode } from 'react';
+import { WindowStore } from '../Window';
+import { WindowProps } from '../Window/Window';
+import { WindowControllerType } from '../Window/WindowController';
 type ViewPortProps = {
     children?: ReactNode;
-    ratio?: number;
-    width?: number;
-    height?: number;
+    viewPortStore: ViewPortStore;
+    onScale?: (left: number, top: number, scale: number, ratio: number) => void;
+    onScroll?: (left: number, top: number, scale: number, ratio: number) => void;
 } & HtmlHTMLAttributes<HTMLDivElement>;
 export declare class ViewPortStore {
     transform: {
@@ -19,8 +22,12 @@ export declare class ViewPortStore {
     width: number;
     height: number;
     ratio: number;
-    constructor(ratio?: number);
+    isMoving: boolean;
+    maxZIndex: number;
+    constructor(width?: number, height?: number, ratio?: number);
     increaseScale(): void;
+    setScale(scale: number): void;
+    focus(left: number, top: number): void;
     decreaseScale(): void;
     move(transform: Transform): void;
     endMove(): void;
@@ -34,26 +41,68 @@ export declare class ViewPortStore {
             min: number;
         };
     };
-    get formatedTransform(): {
+    formatedTransform(left: number, top: number): {
         left: number;
         top: number;
     };
-    get minScale(): number;
-    get maxScale(): number;
     get formatedScale(): number;
     get contentStyle(): {
-        left: string;
-        top: string;
         transform: string;
         width: string;
         height: string;
         transformOrigin: string;
+        backgroundColor: string;
+        transition: string;
     };
     get containerStyle(): {
         width: string;
         height: string;
         overflow: string;
     };
+    get info(): string;
+}
+declare function ViewPort(props: ViewPortProps): React.JSX.Element;
+declare namespace ViewPort {
+    var Window: React.FunctionComponent<WindowProps & {
+        viewPortStore: ViewPortStore;
+        window: ViewPortWindowStore;
+    }>;
+}
+export default ViewPort;
+export declare class ViewPortWindowStore extends WindowStore {
+    scale: number;
+    get style(): {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        zIndex: number;
+        transform: 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;
+        width: string;
+        height: string;
+        zIndex: number;
+        transform: string;
+        transformOrigin: string;
+        transition: string;
+    };
+    calculateTransform(transform: Transform): {
+        x: number;
+        y: number;
+    };
+    controll(transform: Transform, type: WindowControllerType): void;
+    constructor(id: string, onClosedHandler?: (id: string) => void);
 }
-export default function ViewPort(props: ViewPortProps): React.JSX.Element;
-export {};

package/dist/ViewPort/ViewPort.js

@@ -1,10 +1,15 @@
+var _excluded = ["children", "viewPortStore"],
+  _excluded2 = ["viewPortStore", "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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 _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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -13,22 +18,23 @@ 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 { DndContext, useDraggable } from '@dnd-kit/core';
-import { makeAutoObservable, runInAction } from 'mobx';
+import { makeAutoObservable, makeObservable, observable, override, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
+import { WindowStore } from "../Window";
+import { default as Window } from "../Window/Window";
 import { GlobalStyles } from "../__styles";
 var Container = styled.div.withConfig({
   displayName: "Container",
   componentId: "basic-component-347b__sc-1qpmpop-0"
-})(["position:relative;border:1px solid #eee;"]);
+})(["position:relative;border:1px solid #eee;box-shadow:0 0 7px 0 inset #fefefe;"]);
 var Content = styled.div.withConfig({
   displayName: "Content",
   componentId: "basic-component-347b__sc-1qpmpop-1"
 })(["position:absolute;"]);
 export var ViewPortStore = /*#__PURE__*/function () {
-  //缩放比例
-  function ViewPortStore(ratio) {
+  function ViewPortStore(width, height, ratio) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
       left: 0,
@@ -39,10 +45,15 @@ export var ViewPortStore = /*#__PURE__*/function () {
       y: 0
     });
     _defineProperty(this, "scale", 1);
-    _defineProperty(this, "width", 800);
-    _defineProperty(this, "height", 800);
+    _defineProperty(this, "width", 600);
+    _defineProperty(this, "height", 600);
     _defineProperty(this, "ratio", 5);
+    //缩放比例
+    _defineProperty(this, "isMoving", false);
+    _defineProperty(this, "maxZIndex", 1);
     if (ratio) this.ratio = ratio;
+    if (width) this.width = width;
+    if (height) this.height = height;
     makeAutoObservable(this);
   }
   _createClass(ViewPortStore, [{
@@ -50,16 +61,30 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function increaseScale() {
       if (this.scale < 1) this.scale += 0.03125;else this.scale = 1;
     }
+  }, {
+    key: "setScale",
+    value: function setScale(scale) {
+      this.scale = scale;
+    }
+  }, {
+    key: "focus",
+    value: function focus(left, top) {
+      this.scale = 0.8;
+      this.transform = {
+        left: (1 - this.ratio) * left,
+        top: (1 - this.ratio) * top
+      };
+    }
   }, {
     key: "decreaseScale",
     value: function decreaseScale() {
-      if (this.scale > this.minScale) this.scale -= 0.03125;
+      if (this.scale > parseFloat((1 / this.ratio).toFixed(1))) this.scale -= 0.03125;
     }
   }, {
     key: "move",
     value: function move(transform) {
-      this.transform.left = transform.x - this.offset.x + this.transform.left;
-      this.transform.top = transform.y - this.offset.y + this.transform.top;
+      this.isMoving = true;
+      this.transform = this.formatedTransform(transform.x - this.offset.x + this.transform.left, transform.y - this.offset.y + this.transform.top);
       this.offset.x = transform.x;
       this.offset.y = transform.y;
     }
@@ -68,6 +93,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function endMove() {
       this.offset.x = 0;
       this.offset.y = 0;
+      this.isMoving = false;
     }
   }, {
     key: "transformLimit",
@@ -85,37 +111,28 @@ export var ViewPortStore = /*#__PURE__*/function () {
     }
   }, {
     key: "formatedTransform",
-    get: function get() {
+    value: function formatedTransform(left, top) {
       return {
-        left: Math.max(this.transformLimit.left.min, Math.min(this.transform.left, this.transformLimit.left.max)),
-        top: Math.max(this.transformLimit.top.min, Math.min(this.transform.top, this.transformLimit.top.max))
+        left: Math.max(this.transformLimit.left.min, Math.min(left, this.transformLimit.left.max)),
+        top: Math.max(this.transformLimit.top.min, Math.min(top, this.transformLimit.top.max))
       };
     }
-  }, {
-    key: "minScale",
-    get: function get() {
-      return parseFloat((1 / this.ratio).toFixed(1));
-    }
-  }, {
-    key: "maxScale",
-    get: function get() {
-      return 1;
-    }
   }, {
     key: "formatedScale",
     get: function get() {
-      return Math.min(this.maxScale, Math.max(this.minScale, this.scale));
+      return Math.min(1, Math.max(1 / this.ratio, this.scale));
     }
   }, {
     key: "contentStyle",
     get: function get() {
+      var transform = this.formatedTransform(this.transform.left, this.transform.top);
       return {
-        left: this.formatedTransform.left + 'px',
-        top: this.formatedTransform.top + 'px',
-        transform: "scale(".concat(this.formatedScale, ")"),
+        transform: "translate(".concat(transform.left, "px,").concat(transform.top, "px) scale(").concat(this.formatedScale, ")"),
         width: this.width * this.ratio + 'px',
         height: this.height * this.ratio + 'px',
-        transformOrigin: 'left top'
+        transformOrigin: "0 0",
+        backgroundColor: 'pink',
+        transition: this.isMoving ? 'none' : 'all 0.5s'
       };
     }
   }, {
@@ -127,12 +144,19 @@ export var ViewPortStore = /*#__PURE__*/function () {
         overflow: 'hidden'
       };
     }
+  }, {
+    key: "info",
+    get: function get() {
+      return JSON.stringify(this.formatedTransform(this.transform.left, this.transform.top), null, 4);
+    }
   }]);
   return ViewPortStore;
 }();
 var ViewPortEntity = observer(function (props) {
   var children = props.children,
-    viewPortStore = props.viewPortStore;
+    viewPortStore = props.viewPortStore,
+    onScroll = props.onScroll,
+    onScale = props.onScale;
   var _useDraggable = useDraggable({
       id: 'ViewPortEntity'
     }),
@@ -145,6 +169,7 @@ var ViewPortEntity = observer(function (props) {
   useEffect(function () {
     if (transform) {
       viewPortStore.move(transform);
+      onScroll === null || onScroll === void 0 || onScroll(viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio);
     } else {
       viewPortStore.endMove();
     }
@@ -159,6 +184,7 @@ var ViewPortEntity = observer(function (props) {
       } else {
         viewPortStore.decreaseScale();
       }
+      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, {
       passive: false
@@ -169,7 +195,18 @@ var ViewPortEntity = observer(function (props) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(Container, {
-    style: viewPortStore.containerStyle
+    style: viewPortStore.containerStyle,
+    onDoubleClick: function onDoubleClick(e) {
+      var container = e.target;
+      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.formatedScale > 0.5) {
+        viewPortStore.setScale(1 / viewPortStore.ratio);
+      } else viewPortStore.focus(offsetLeft, offsetTop);
+    }
   }, /*#__PURE__*/React.createElement(Content, _extends({
     ref: function ref(dom) {
       _ref.current = dom;
@@ -178,28 +215,154 @@ var ViewPortEntity = observer(function (props) {
     }
   }, attributes, listeners, {
     style: viewPortStore.contentStyle
-  }), viewPortStore.ratio, children));
+  }), children));
 });
 export default function ViewPort(props) {
   var children = props.children,
-    ratio = props.ratio,
-    width = props.width,
-    height = props.height;
-  var _useState = useState(function () {
-      return new ViewPortStore(ratio);
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    viewPortStore = _useState2[0];
-  useEffect(function () {
-    runInAction(function () {
-      if (ratio) viewPortStore.ratio = ratio;
-      if (width) viewPortStore.width = width;
-      if (height) viewPortStore.height = height;
-    });
-  }, [ratio, width, height]);
+    viewPortStore = props.viewPortStore,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
-  }), /*#__PURE__*/React.createElement(ViewPortEntity, {
+  }), /*#__PURE__*/React.createElement(ViewPortEntity, _extends({
     viewPortStore: viewPortStore
-  }, children));
-}
+  }, rest), children));
+}
+export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
+  _inherits(ViewPortWindowStore, _WindowStore);
+  var _super = _createSuper(ViewPortWindowStore);
+  function ViewPortWindowStore(id, onClosedHandler) {
+    var _this;
+    _classCallCheck(this, ViewPortWindowStore);
+    _this = _super.call(this, id, onClosedHandler);
+    _defineProperty(_assertThisInitialized(_this), "scale", 1);
+    makeObservable(_assertThisInitialized(_this), {
+      style: override,
+      scale: observable,
+      controll: override
+    });
+    return _this;
+  }
+  _createClass(ViewPortWindowStore, [{
+    key: "style",
+    get: function get() {
+      if (this.isClosed) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.isMinimize && this.minimizePos) {
+        return {
+          left: this.minimizePos.left + 'px',
+          top: this.minimizePos.top + 'px',
+          width: 0,
+          height: 0,
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s 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',
+          zIndex: this.zIndex,
+          transform: "scale(".concat(1 / this.scale, ") "),
+          transformOrigin: 'left top',
+          transition: 'width height 0.5s ease-out'
+        };
+      }
+      if (this.isMoving || this.isResizing) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'none',
+          transition: 'none'
+        };
+      }
+      return {
+        left: this.left + 'px',
+        top: this.top + 'px',
+        width: this.width + 'px',
+        height: this.height + 'px',
+        zIndex: this.zIndex,
+        transform: 'none',
+        transition: 'all 0.5s ease-out'
+      };
+    }
+  }, {
+    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
+      };
+    }
+  }, {
+    key: "controll",
+    value: function controll(transform, type) {
+      var offsetTransform = this.calculateTransform(transform);
+      if (type === 'move') {
+        this.isMoving = true;
+        this.isResizing = false;
+      } else {
+        this.isMoving = false;
+        this.isResizing = true;
+      }
+      if (type.includes('left')) {
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.width = Math.round(this.width - offsetTransform.x);
+      }
+      if (type.includes('right')) {
+        this.width = Math.round(this.width + offsetTransform.x);
+      }
+      if (type.includes('top')) {
+        this.top = Math.round(this.top + offsetTransform.y);
+        this.height = Math.round(this.height - offsetTransform.y);
+      }
+      if (type.includes('bottom')) {
+        this.height = Math.round(this.height + offsetTransform.y);
+      }
+      if (type.includes('move')) {
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.top = Math.round(this.top + offsetTransform.y);
+      }
+      this.transform = transform;
+    }
+  }]);
+  return ViewPortWindowStore;
+}(WindowStore);
+ViewPort.Window = observer(function ViewPortWindow(props) {
+  var viewPortStore = props.viewPortStore,
+    window = props.window,
+    rest = _objectWithoutProperties(props, _excluded2);
+  useEffect(function () {
+    runInAction(function () {
+      var transform = viewPortStore.formatedTransform(viewPortStore.transform.left, viewPortStore.transform.top);
+      window.fullscreenPos.left = -transform.left;
+      window.fullscreenPos.top = -transform.top;
+      window.fullscreenPos.width = viewPortStore.width;
+      window.fullscreenPos.height = viewPortStore.height;
+      window.scale = viewPortStore.formatedScale;
+    });
+  }, [viewPortStore.transform.left, viewPortStore.transform.top, viewPortStore.scale, viewPortStore.ratio, viewPortStore.width, viewPortStore.height]);
+  return /*#__PURE__*/React.createElement(Window, _extends({
+    window: window
+  }, rest, {
+    onFocusHandler: function onFocusHandler() {
+      viewPortStore.maxZIndex++;
+      window.zIndex = viewPortStore.maxZIndex;
+    }
+  }));
+});

package/dist/ViewPort/test.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export default function Test(): React.JSX.Element;
+declare const _default: React.FunctionComponent<object>;
+export default _default;

package/dist/ViewPort/test.js

@@ -1,24 +1,18 @@
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 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 React, { useEffect, useState } from 'react';
-import { Window, WindowStore } from "../Window";
-import ViewPort from "./ViewPort";
+import { makeAutoObservable, runInAction } from 'mobx';
+import { observer, useLocalObservable } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+import ViewPort, { ViewPortStore, ViewPortWindowStore } from "./ViewPort";
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
-    _defineProperty(this, "windows", [new WindowStore('jss', this.closeWindowHanlder.bind(this)), new WindowStore('jx', this.closeWindowHanlder.bind(this)), new WindowStore('jiangxin', this.closeWindowHanlder.bind(this)), new WindowStore('xixi', this.closeWindowHanlder.bind(this))]);
+    _defineProperty(this, "windows", [new ViewPortWindowStore('jss', this.closeWindowHanlder.bind(this)), new ViewPortWindowStore('jss12', this.closeWindowHanlder.bind(this))]);
     makeAutoObservable(this);
   }
   _createClass(WindowManager, [{
@@ -39,19 +33,16 @@ var WindowManager = /*#__PURE__*/function () {
   return WindowManager;
 }();
 var windowManager = new WindowManager();
-export default function Test() {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    height = _useState4[0],
-    setHeight = _useState4[1];
+export default observer(function Test() {
+  var viewPortStore = useLocalObservable(function () {
+    return new ViewPortStore(600, 600, 5);
+  });
   useEffect(function () {
     function setWidthHeight() {
-      setWidth(document.body.offsetWidth);
-      setHeight(document.body.offsetHeight);
+      runInAction(function () {
+        viewPortStore.width = 800;
+        viewPortStore.height = 800;
+      });
     }
     window.addEventListener('resize', setWidthHeight);
     setWidthHeight();
@@ -60,14 +51,13 @@ export default function Test() {
     };
   }, []);
   return /*#__PURE__*/React.createElement(ViewPort, {
-    ratio: 5,
-    width: width,
-    height: height
+    viewPortStore: viewPortStore
   }, windowManager.windows.map(function (windowStore) {
-    return /*#__PURE__*/React.createElement(Window, {
+    return /*#__PURE__*/React.createElement(ViewPort.Window, {
       window: windowStore,
       key: windowStore.id,
-      title: 'xixi'
-    }, "123");
+      title: 'xixi',
+      viewPortStore: viewPortStore
+    }, /*#__PURE__*/React.createElement("br", null));
   }));
-}
+});

package/dist/Window/Window.d.ts

@@ -4,10 +4,8 @@ export type WindowProps = {
     window: WindowStore;
     children: ReactNode;
     title: ReactNode;
-    minimizePos?: {
-        left: number;
-        top: number;
-    };
+    onFullscreenHandler?: () => void;
+    onFocusHandler?: () => void;
 };
 declare const Window: ((props: WindowProps) => React.JSX.Element) & {
     displayName: string;

package/dist/Window/Window.js

@@ -1,6 +1,6 @@
 import { CloseCircleOutlined, FullscreenExitOutlined, FullscreenOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { Space } from "../Space";
 import WindowController from "./WindowController";
@@ -75,11 +75,21 @@ var Window = observer(function (props) {
   var window = props.window,
     title = props.title,
     children = props.children,
-    _props$minimizePos = props.minimizePos,
-    minimizePos = _props$minimizePos === void 0 ? {
-      left: 0,
-      top: 0
-    } : _props$minimizePos;
+    onFullscreenHandler = props.onFullscreenHandler,
+    onFocusHandler = props.onFocusHandler;
+  var windowContainerRef = useRef(null);
+  useEffect(function () {
+    var _windowContainerRef$c;
+    function stopWheel(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    (_windowContainerRef$c = windowContainerRef.current) === null || _windowContainerRef$c === void 0 || _windowContainerRef$c.addEventListener('wheel', stopWheel);
+    return function () {
+      var _windowContainerRef$c2;
+      (_windowContainerRef$c2 = windowContainerRef.current) === null || _windowContainerRef$c2 === void 0 || _windowContainerRef$c2.removeEventListener('wheel', stopWheel);
+    };
+  }, []);
   /* style 的原因是因为性能问题 */
   return /*#__PURE__*/React.createElement(WindowContainer, {
     style: window.style,
@@ -92,7 +102,9 @@ var Window = observer(function (props) {
     },
     onPointerDown: function onPointerDown(e) {
       e.stopPropagation();
-    }
+      onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
+    },
+    ref: windowContainerRef
   }, /*#__PURE__*/React.createElement(WindowControllerLeft, {
     window: window,
     type: "left"
@@ -121,7 +133,16 @@ var Window = observer(function (props) {
     window: window,
     type: "move"
   }, /*#__PURE__*/React.createElement(WindowHeader, {
-    isDragging: window.isMoving
+    isDragging: window.isMoving,
+    onDoubleClick: function onDoubleClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (window.fullscreen) {
+        window.fullscreenExitWindow();
+      } else {
+        window.fullscreenWindow(onFullscreenHandler);
+      }
+    }
   }, /*#__PURE__*/React.createElement("h5", null, title), /*#__PURE__*/React.createElement(WindowHeaderOptions, {
     onPointerDown: function onPointerDown(e) {
       e.stopPropagation();
@@ -130,7 +151,7 @@ var Window = observer(function (props) {
     color: "var(--kep-platform-orange-4)",
     icon: /*#__PURE__*/React.createElement(FullscreenOutlined, null),
     onClick: function onClick() {
-      return window.fullscreenWindow();
+      window.fullscreenWindow(onFullscreenHandler);
     }
   }) : /*#__PURE__*/React.createElement(WindowOption, {
     color: "var(--kep-platform-orange-4)",
@@ -142,7 +163,7 @@ var Window = observer(function (props) {
     color: "var(--kep-platform-green-3)",
     icon: /*#__PURE__*/React.createElement(MinusCircleOutlined, null),
     onClick: function onClick() {
-      window.minimizeWindow(minimizePos);
+      window.minimizeWindow();
     }
   }), /*#__PURE__*/React.createElement(WindowOption, {
     onClick: function onClick() {

package/dist/Window/WindowStore.d.ts

@@ -1,10 +1,10 @@
 import { Transform } from '@dnd-kit/utilities';
 import { WindowControllerType } from './WindowController';
 export default class WindowStore {
-    width: string;
-    height: string;
-    left: string;
-    top: string;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
     zIndex: number;
     fullscreen: boolean;
     id: string;
@@ -17,12 +17,18 @@ export default class WindowStore {
     minimizePos: {
         left: number;
         top: number;
-    } | null;
+    };
+    fullscreenPos: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
     isMinimize: boolean;
     isClosed: boolean;
     onClosedHandler: ((id: string) => void) | undefined;
     constructor(id: string, onClosedHandler?: (id: string) => void);
-    fullscreenWindow(): void;
+    fullscreenWindow(func?: () => void): void;
     fullscreenExitWindow(): void;
     resetState(): void;
     calculateTransform(transform: Transform): {
@@ -31,19 +37,25 @@ export default class WindowStore {
     };
     controll(transform: Transform, type: WindowControllerType): void;
     endControll(): void;
-    minimizeWindow(minimize: {
-        left: number;
-        top: number;
-    }): void;
+    minimizeWindow(): void;
     normalizeWindow(): void;
     closeWindow(): void;
     get style(): {
-        left: string | number;
-        top: string | number;
-        width: string | number;
-        height: string | number;
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+        zIndex: number;
+        transform: string;
+        transition: string;
+    } | {
+        left: string;
+        top: string;
+        width: number;
+        height: number;
         zIndex: number;
         transform: string;
         transition: string;
     };
+    get info(): string;
 }

package/dist/Window/WindowStore.js

@@ -9,17 +9,26 @@ import { action, computed, makeObservable, observable } from 'mobx';
 var WindowStore = /*#__PURE__*/function () {
   function WindowStore(id, onClosedHandler) {
     _classCallCheck(this, WindowStore);
-    _defineProperty(this, "width", '400px');
-    _defineProperty(this, "height", '400px');
-    _defineProperty(this, "left", '0px');
-    _defineProperty(this, "top", '0px');
+    _defineProperty(this, "width", 400);
+    _defineProperty(this, "height", 400);
+    _defineProperty(this, "left", 0);
+    _defineProperty(this, "top", 0);
     _defineProperty(this, "zIndex", 1);
     _defineProperty(this, "fullscreen", false);
     _defineProperty(this, "id", '');
     _defineProperty(this, "transform", null);
     _defineProperty(this, "isMoving", false);
     _defineProperty(this, "isResizing", false);
-    _defineProperty(this, "minimizePos", null);
+    _defineProperty(this, "minimizePos", {
+      left: 0,
+      top: 0
+    });
+    _defineProperty(this, "fullscreenPos", {
+      left: 0,
+      top: 0,
+      width: 1000,
+      height: 1000
+    });
     _defineProperty(this, "isMinimize", false);
     _defineProperty(this, "isClosed", false);
     _defineProperty(this, "onClosedHandler", void 0);
@@ -41,19 +50,22 @@ var WindowStore = /*#__PURE__*/function () {
       style: computed.struct,
       isMinimize: observable,
       minimizePos: observable.struct,
+      fullscreenPos: observable.struct,
       minimizeWindow: action,
       normalizeWindow: action,
       closeWindow: action,
-      resetState: action
+      resetState: action,
+      info: computed
     });
     this.id = id;
     this.onClosedHandler = onClosedHandler;
   }
   _createClass(WindowStore, [{
     key: "fullscreenWindow",
-    value: function fullscreenWindow() {
+    value: function fullscreenWindow(func) {
       this.resetState();
       this.fullscreen = true;
+      func === null || func === void 0 || func();
     }
   }, {
     key: "fullscreenExitWindow",
@@ -87,22 +99,22 @@ var WindowStore = /*#__PURE__*/function () {
         this.isResizing = true;
       }
       if (type.includes('left')) {
-        this.left = Math.round(parseFloat(this.left) + offsetTransform.x) + 'px';
-        this.width = Math.round(parseFloat(this.width) - offsetTransform.x) + 'px';
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.width = Math.round(this.width - offsetTransform.x);
       }
       if (type.includes('right')) {
-        this.width = Math.round(parseFloat(this.width) + offsetTransform.x) + 'px';
+        this.width = Math.round(this.width + offsetTransform.x);
       }
       if (type.includes('top')) {
-        this.top = Math.round(parseFloat(this.top) + offsetTransform.y) + 'px';
-        this.height = Math.round(parseFloat(this.height) - offsetTransform.y) + 'px';
+        this.top = Math.round(this.top + offsetTransform.y);
+        this.height = Math.round(this.height - offsetTransform.y);
       }
       if (type.includes('bottom')) {
-        this.height = Math.round(parseFloat(this.height) + offsetTransform.y) + 'px';
+        this.height = Math.round(this.height + offsetTransform.y);
       }
       if (type.includes('move')) {
-        this.left = Math.round(parseFloat(this.left) + offsetTransform.x) + 'px';
-        this.top = Math.round(parseFloat(this.top) + offsetTransform.y) + 'px';
+        this.left = Math.round(this.left + offsetTransform.x);
+        this.top = Math.round(this.top + offsetTransform.y);
       }
       this.transform = transform;
     }
@@ -115,8 +127,7 @@ var WindowStore = /*#__PURE__*/function () {
     }
   }, {
     key: "minimizeWindow",
-    value: function minimizeWindow(minimize) {
-      this.minimizePos = minimize;
+    value: function minimizeWindow() {
       this.isMinimize = true;
       this.fullscreen = false;
       this.resetState();
@@ -124,7 +135,6 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "normalizeWindow",
     value: function normalizeWindow() {
-      this.minimizePos = null;
       this.isMinimize = false;
       this.fullscreen = false;
       this.resetState();
@@ -138,16 +148,64 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "style",
     get: function get() {
-      var renderStyle = {
-        left: this.isClosed ? this.left : this.isMinimize && this.minimizePos ? this.minimizePos.left : this.fullscreen ? 0 : this.left,
-        top: this.isClosed ? this.top : this.isMinimize && this.minimizePos ? this.minimizePos.top : this.fullscreen ? 0 : this.top,
-        width: this.isClosed ? this.width : this.isMinimize ? 0 : this.fullscreen ? '100%' : this.width,
-        height: this.isClosed ? this.height : this.isMinimize ? 0 : this.fullscreen ? '100%' : this.height,
+      if (this.isClosed) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.isMinimize && this.minimizePos) {
+        return {
+          left: this.minimizePos.left + 'px',
+          top: this.minimizePos.top + 'px',
+          width: 0,
+          height: 0,
+          zIndex: this.zIndex,
+          transform: 'scale(0)',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.fullscreen) {
+        return {
+          left: this.fullscreenPos.left + 'px',
+          top: this.fullscreenPos.top + 'px',
+          width: this.fullscreenPos.width + 'px',
+          height: this.fullscreenPos.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'none',
+          transition: 'all 0.5s ease-out'
+        };
+      }
+      if (this.isMoving || this.isResizing) {
+        return {
+          left: this.left + 'px',
+          top: this.top + 'px',
+          width: this.width + 'px',
+          height: this.height + 'px',
+          zIndex: this.zIndex,
+          transform: 'none',
+          transition: 'none'
+        };
+      }
+      return {
+        left: this.left + 'px',
+        top: this.top + 'px',
+        width: this.width + 'px',
+        height: this.height + 'px',
         zIndex: this.zIndex,
-        transform: this.isMinimize || this.isClosed ? 'scale(0)' : 'none',
-        transition: this.isMoving || this.isResizing ? 'none' : 'all 0.5s ease-out'
+        transform: 'none',
+        transition: 'all 0.5s ease-out'
       };
-      return renderStyle;
+    }
+  }, {
+    key: "info",
+    get: function get() {
+      return JSON.stringify(this.fullscreenPos, null, 4);
     }
   }]);
   return WindowStore;

package/dist/Window/test.js

@@ -7,11 +7,9 @@ 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 { DndContext } from '@dnd-kit/core';
 import { makeAutoObservable } from 'mobx';
-import { observer } from 'mobx-react-lite';
+import { observer, useLocalObservable } from 'mobx-react-lite';
 import React from 'react';
-import { Button } from "../Button";
-import { Space } from "../Space";
-import { ViewPort } from "../ViewPort";
+import { ViewPort, ViewPortStore } from "../ViewPort";
 import { GlobalStyles } from "../__styles";
 import Window from "./Window";
 import { WindowStore } from "./index";
@@ -40,23 +38,18 @@ var WindowManager = /*#__PURE__*/function () {
 }();
 var windowManager = new WindowManager();
 export default observer(function Test() {
+  var viewPortStore = useLocalObservable(function () {
+    return new ViewPortStore();
+  });
   return /*#__PURE__*/React.createElement(DndContext, null, /*#__PURE__*/React.createElement(GlobalStyles, {
     $css: []
-  }), /*#__PURE__*/React.createElement(ViewPort, null, /*#__PURE__*/React.createElement(Space, null, windowManager.report, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      windowManager.windows.forEach(function (window) {
-        window.normalizeWindow();
-      });
-    }
-  }, "\u5C55\u5F00")), windowManager.windows.map(function (windowStore) {
+  }), /*#__PURE__*/React.createElement(ViewPort, {
+    viewPortStore: viewPortStore
+  }, windowManager.windows.map(function (windowStore) {
     return /*#__PURE__*/React.createElement(Window, {
       window: windowStore,
       key: windowStore.id,
       title: 'xixi'
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: function onClick() {
-        alert('jss好帅');
-      }
-    }, "123"));
+    }, "123");
   })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.36",
+    "version": "0.0.38",
     "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.36",
+        "@kep-platform/hooks": "^0.0.38",
         "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": "7186f791c3f0e372fa7421eebedfa338bba9cd59"
+    "gitHead": "8e28a8926ce994e43661454098fac1f15d7e9ead"
 }