diff --git a/docs/components/Window.md b/docs/components/Window.md index 61df393..361f5bd 100644 --- a/docs/components/Window.md +++ b/docs/components/Window.md @@ -27,6 +27,7 @@ AppRegistry.registerComponent('Test', ); - [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 | () => {}) | diff --git a/src/backends/qt.ts b/src/backends/qt.ts index ba9b2da..66d9349 100644 --- a/src/backends/qt.ts +++ b/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)); } diff --git a/src/backends/wx.ts b/src/backends/wx.ts index a4e9aac..5ac782c 100644 --- a/src/backends/wx.ts +++ b/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); diff --git a/src/components/Window.ts b/src/components/Window.ts index 830009b..e3c047e 100644 --- a/src/components/Window.ts +++ b/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 diff --git a/src/components/YogaComponent.ts b/src/components/YogaComponent.ts index e0f7a46..ce07b3c 100644 --- a/src/components/YogaComponent.ts +++ b/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); }