@kep-platform/basic-component 0.0.37 → 0.0.38

package/dist/ViewPort/ViewPort.d.ts

@@ -2,6 +2,7 @@ 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;
     viewPortStore: ViewPortStore;
@@ -21,8 +22,12 @@ export declare class ViewPortStore {
     width: number;
     height: number;
     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;
@@ -42,18 +47,19 @@ export declare class ViewPortStore {
     };
     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 {
@@ -93,5 +99,10 @@ export declare class ViewPortWindowStore extends WindowStore {
         transformOrigin: string;
         transition: string;
     };
+    calculateTransform(transform: Transform): {
+        x: number;
+        y: number;
+    };
+    controll(transform: Transform, type: WindowControllerType): void;
     constructor(id: string, onClosedHandler?: (id: string) => void);
 }

package/dist/ViewPort/ViewPort.js

@@ -28,13 +28,12 @@ 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(width, height, ratio) {
     _classCallCheck(this, ViewPortStore);
     _defineProperty(this, "transform", {
@@ -46,9 +45,12 @@ 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;
@@ -59,6 +61,20 @@ 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() {
@@ -67,6 +83,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
   }, {
     key: "move",
     value: function move(transform) {
+      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;
@@ -76,6 +93,7 @@ export var ViewPortStore = /*#__PURE__*/function () {
     value: function endMove() {
       this.offset.x = 0;
       this.offset.y = 0;
+      this.isMoving = false;
     }
   }, {
     key: "transformLimit",
@@ -102,18 +120,19 @@ export var ViewPortStore = /*#__PURE__*/function () {
   }, {
     key: "formatedScale",
     get: function get() {
-      return Math.min(1, Math.max(parseFloat((1 / this.ratio).toFixed(1)), 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.transform.left + 'px',
-        top: this.transform.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'
       };
     }
   }, {
@@ -125,6 +144,11 @@ 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;
 }();
@@ -171,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;
@@ -202,7 +237,8 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
     _defineProperty(_assertThisInitialized(_this), "scale", 1);
     makeObservable(_assertThisInitialized(_this), {
       style: override,
-      scale: observable
+      scale: observable,
+      controll: override
     });
     return _this;
   }
@@ -264,6 +300,46 @@ export var ViewPortWindowStore = /*#__PURE__*/function (_WindowStore) {
         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);
@@ -273,14 +349,20 @@ ViewPort.Window = observer(function ViewPortWindow(props) {
     rest = _objectWithoutProperties(props, _excluded2);
   useEffect(function () {
     runInAction(function () {
-      window.fullscreenPos.left = -viewPortStore.transform.left;
-      window.fullscreenPos.top = -viewPortStore.transform.top;
+      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.scale;
+      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));
+  }, rest, {
+    onFocusHandler: function onFocusHandler() {
+      viewPortStore.maxZIndex++;
+      window.zIndex = viewPortStore.maxZIndex;
+    }
+  }));
 });

package/dist/ViewPort/test.js

@@ -12,7 +12,7 @@ import ViewPort, { ViewPortStore, ViewPortWindowStore } from "./ViewPort";
 var WindowManager = /*#__PURE__*/function () {
   function WindowManager() {
     _classCallCheck(this, WindowManager);
-    _defineProperty(this, "windows", [new ViewPortWindowStore('jss', 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, [{
@@ -35,7 +35,7 @@ var WindowManager = /*#__PURE__*/function () {
 var windowManager = new WindowManager();
 export default observer(function Test() {
   var viewPortStore = useLocalObservable(function () {
-    return new ViewPortStore(0, 0, 5);
+    return new ViewPortStore(600, 600, 5);
   });
   useEffect(function () {
     function setWidthHeight() {

package/dist/Window/Window.d.ts

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

package/dist/Window/Window.js

@@ -74,7 +74,9 @@ var WindowControllerRightBottom = styled(WindowController).withConfig({
 var Window = observer(function (props) {
   var window = props.window,
     title = props.title,
-    children = props.children;
+    children = props.children,
+    onFullscreenHandler = props.onFullscreenHandler,
+    onFocusHandler = props.onFocusHandler;
   var windowContainerRef = useRef(null);
   useEffect(function () {
     var _windowContainerRef$c;
@@ -100,6 +102,7 @@ var Window = observer(function (props) {
     },
     onPointerDown: function onPointerDown(e) {
       e.stopPropagation();
+      onFocusHandler === null || onFocusHandler === void 0 || onFocusHandler();
     },
     ref: windowContainerRef
   }, /*#__PURE__*/React.createElement(WindowControllerLeft, {
@@ -131,11 +134,13 @@ var Window = observer(function (props) {
     type: "move"
   }, /*#__PURE__*/React.createElement(WindowHeader, {
     isDragging: window.isMoving,
-    onDoubleClick: function onDoubleClick() {
+    onDoubleClick: function onDoubleClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
       if (window.fullscreen) {
         window.fullscreenExitWindow();
       } else {
-        window.fullscreenWindow();
+        window.fullscreenWindow(onFullscreenHandler);
       }
     }
   }, /*#__PURE__*/React.createElement("h5", null, title), /*#__PURE__*/React.createElement(WindowHeaderOptions, {
@@ -146,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)",
@@ -166,6 +171,6 @@ var Window = observer(function (props) {
     },
     icon: /*#__PURE__*/React.createElement(CloseCircleOutlined, null),
     color: "var(--kep-platform-red)"
-  }))))), /*#__PURE__*/React.createElement(WindowBody, null, window.info, children)));
+  }))))), /*#__PURE__*/React.createElement(WindowBody, null, children)));
 });
 export default Window;

package/dist/Window/WindowStore.d.ts

@@ -17,7 +17,7 @@ export default class WindowStore {
     minimizePos: {
         left: number;
         top: number;
-    } | null;
+    };
     fullscreenPos: {
         left: number;
         top: number;
@@ -28,7 +28,7 @@ export default class WindowStore {
     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): {

package/dist/Window/WindowStore.js

@@ -19,12 +19,15 @@ var WindowStore = /*#__PURE__*/function () {
     _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: 0,
-      height: 0
+      width: 1000,
+      height: 1000
     });
     _defineProperty(this, "isMinimize", false);
     _defineProperty(this, "isClosed", false);
@@ -59,9 +62,10 @@ var WindowStore = /*#__PURE__*/function () {
   }
   _createClass(WindowStore, [{
     key: "fullscreenWindow",
-    value: function fullscreenWindow() {
+    value: function fullscreenWindow(func) {
       this.resetState();
       this.fullscreen = true;
+      func === null || func === void 0 || func();
     }
   }, {
     key: "fullscreenExitWindow",
@@ -131,7 +135,6 @@ var WindowStore = /*#__PURE__*/function () {
   }, {
     key: "normalizeWindow",
     value: function normalizeWindow() {
-      this.minimizePos = null;
       this.isMinimize = false;
       this.fullscreen = false;
       this.resetState();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kep-platform/basic-component",
-    "version": "0.0.37",
+    "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.37",
+        "@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": "80925e92fb2de497863b5dd479f24a343e62ca38"
+    "gitHead": "8e28a8926ce994e43661454098fac1f15d7e9ead"
 }