Add onMove, fix #246

docs/components/Window.md

@@ -27,6 +27,7 @@ AppRegistry.registerComponent('Test', <Example />);
 
 - [style](#style)
 - [onResize](#onResize)
+- [onMove](#onMove)
 
 ## Reference
 
@@ -47,3 +48,12 @@ object: `{w, h}`
 | **Type**                         | **Required** | **Default** |
 | -------------------------------- | ------------ | ----------- |
 | function({h: number, w: number}) | No           | () => {})   |
+
+### onMove
+
+Called when the window is moved. An object is passed into the function, with the following
+object: `{x, y}`
+
+| **Type**                         | **Required** | **Default** |
+| -------------------------------- | ------------ | ----------- |
+| function({x: number, y: number}) | No           | () => {})   |

src/backends/qt.ts

@@ -40,6 +40,9 @@ export abstract class BaseElement {
   leaveEvent(func: () => void) {
     this.element.leaveEvent(func);
   }
+  moveEvent(func: (x: number, y: number) => void) {
+    this.element.moveEvent(func);
+  }
   setStyleSheet(obj: object) {
     this.element.setStyleSheet(convertStyleSheet(obj));
   }

src/backends/wx.ts

@@ -40,7 +40,7 @@ export abstract class BaseElement {
       obj.records.push({
         f: (...args: any[]) => (this as any).setParent(...args),
         a: [obj]
-      })
+      });
       return true;
     }
     return false;
@@ -56,6 +56,11 @@ export abstract class BaseElement {
     console.warn("MouseReleaseEvent noop");
     //this.element.mouseReleaseEvent(func);
   }
+  moveEvent(func: (x: number, y: number) => void) {
+    //noop
+    console.warn("MoveEvent noop");
+    //this.element.mouseReleaseEvent(func);
+  }
   setStyleSheet(obj: any) {
     if ("backgroundColor" in obj) {
       const color = Color(obj.backgroundColor);

src/components/Window.ts

@@ -6,6 +6,7 @@ import * as PropTypes from "prop-types";
 import convertStyleSheet from "../utils/convertStyleSheet";
 import { YogaComponent } from "./YogaComponent";
 import { getBackend } from "../backends/index";
+import * as yoga from "yoga-layout-prebuilt";
 
 declare global {
   namespace JSX {
@@ -18,6 +19,7 @@ declare global {
 export interface Props {
   style?: React.CSSProperties;
   onResize?: (size: { w: number; h: number }) => void;
+  onMove?: (pos: { x: number; y: number }) => void;
 }
 
 export default (p: Props) => {
@@ -41,7 +43,8 @@ export default (p: Props) => {
   const yogaProps = YogaComponent(element);
 
   const handlers = {
-    onResize: props.onResize
+    onResize: props.onResize,
+    onMove: props.onMove
   };
 
   element.resizeEvent((w: number, h: number) => {
@@ -51,6 +54,12 @@ export default (p: Props) => {
     }
   });
 
+  element.moveEvent((x: number, y: number) => {
+    if (handlers.onMove) {
+      handlers.onMove({ x, y });
+    }
+  });
+
   const percentToSize = (
     width: number | string | undefined,
     height: number | string | undefined

src/components/YogaComponent.ts

@@ -77,8 +77,14 @@ export const YogaComponent = (
       }
     }
     if (!shouldUpdate) return;
+
+    if (typeof element === "MainWindowElement") {
+      return;
+    }
+
     element.resize(layout.width, layout.height);
     element.move(layout.left, layout.top);
+
     if (postApplyYoga) {
       postApplyYoga(layout);
     }