@leafer/layout 1.0.0-beta.9 → 1.0.0-rc.10

package/package.json

@@ -1,28 +1,31 @@
 {
   "name": "@leafer/layout",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-rc.10",
   "description": "@leafer/layout",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
   "main": "src/index.ts",
+  "types": "types/index.d.ts",
   "files": [
-    "src"
+    "src",
+    "types",
+    "dist"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/leaferjs/leafer.git"
   },
-  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/layout",
+  "homepage": "https://github.com/leaferjs/leafer/tree/main/packages/display-module/layout",
   "bugs": "https://github.com/leaferjs/leafer/issues",
   "keywords": [
     "leafer",
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-beta.9",
-    "@leafer/platform": "1.0.0-beta.9"
+    "@leafer/math": "1.0.0-rc.10",
+    "@leafer/platform": "1.0.0-rc.10"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-beta.9"
+    "@leafer/interface": "1.0.0-rc.10"
   }
 }

package/src/LeafLayout.ts

@@ -1,21 +1,25 @@
-import { ILeaf, ILeafLayout, ILayoutLocationType, ILayoutBoundsType, IBoundsData, IMatrixData, IMatrixDecompositionData } from '@leafer/interface'
-import { BoundsHelper, MatrixHelper } from '@leafer/math'
+import { ILeaf, ILeafLayout, ILocationType, IBoundsType, IBoundsData, IMatrixData, ILayoutBoundsData, IPointData } from '@leafer/interface'
+import { Bounds, BoundsHelper, Matrix, MatrixHelper, PointHelper } from '@leafer/math'
 import { Platform } from '@leafer/platform'
 
 
-const { toOuterOf } = BoundsHelper
+const tempMatrix = new Matrix()
+const { toOuterOf, getPoints, copy } = BoundsHelper
 
 export class LeafLayout implements ILeafLayout {
 
     public leaf: ILeaf
 
-    public useZoomProxy: boolean
+    public proxyZoom: boolean
 
-    // local
+    // inner
 
     public boxBounds: IBoundsData
-    public strokeBounds: IBoundsData
-    public renderBounds: IBoundsData
+    public get strokeBounds(): IBoundsData { return this._strokeBounds || this.boxBounds }
+    public get renderBounds(): IBoundsData { return this._renderBounds || this.boxBounds }
+
+    public _strokeBounds: IBoundsData
+    public _renderBounds: IBoundsData
 
     // auto layout
     public marginBounds: IBoundsData
@@ -23,8 +27,11 @@ export class LeafLayout implements ILeafLayout {
 
     // local
 
-    public localStrokeBounds: IBoundsData
-    public localRenderBounds: IBoundsData
+    public get localStrokeBounds(): IBoundsData { return this._localStrokeBounds || this }
+    public get localRenderBounds(): IBoundsData { return this._localRenderBounds || this }
+
+    protected _localStrokeBounds?: IBoundsData
+    protected _localRenderBounds?: IBoundsData
 
     // world temp
     protected _worldContentBounds: IBoundsData
@@ -33,9 +40,11 @@ export class LeafLayout implements ILeafLayout {
 
     // state
 
+    public resized: boolean
+    public waitAutoLayout: boolean
+
     // matrix changed
     public matrixChanged: boolean
-    public positionChanged: boolean
     public scaleChanged: boolean
     public rotationChanged: boolean
 
@@ -59,95 +68,184 @@ export class LeafLayout implements ILeafLayout {
     // keep state
     public affectScaleOrRotation: boolean
     public affectRotation: boolean
+    public affectChildrenSort?: boolean
 
     public strokeSpread: number
     public renderSpread: number
     public strokeBoxSpread: number
     public renderShapeSpread: number
 
+    // temp local
+    public get a() { return 1 }
+    public get b() { return 0 }
+    public get c() { return 0 }
+    public get d() { return 1 }
+    public get e() { return this.leaf.__.x }
+    public get f() { return this.leaf.__.y }
+    public get x() { return this.e + this.boxBounds.x }
+    public get y() { return this.f + this.boxBounds.y }
+    public get width() { return this.boxBounds.width }
+    public get height() { return this.boxBounds.height }
+
 
     constructor(leaf: ILeaf) {
         this.leaf = leaf
-        this.renderBounds = this.strokeBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 }
-        this.localRenderBounds = this.localStrokeBounds = leaf.__local
+        this.boxBounds = { x: 0, y: 0, width: 0, height: 0 }
+        if (this.leaf.__local) this._localRenderBounds = this._localStrokeBounds = this.leaf.__local
         this.boxChange()
-        this.positionChange()
+        this.matrixChange()
     }
 
+    public createLocal(): void {
+        const local = this.leaf.__local = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, x: 0, y: 0, width: 0, height: 0 }
+        if (!this._localStrokeBounds) this._localStrokeBounds = local
+        if (!this._localRenderBounds) this._localRenderBounds = local
+    }
 
-    public checkUpdate(force?: boolean): void {
+    public update(): void {
         const { leafer } = this.leaf
         if (leafer) {
             if (leafer.ready) {
-                if ((Platform.realtimeLayout || force) && leafer.watcher.changed) leafer.layouter.layout()
+                if (leafer.watcher.changed) leafer.layouter.layout()
             } else {
                 leafer.start()
             }
         } else {
             let root = this.leaf
-            while (root.parent) { root = root.parent }
+            while (root.parent && !root.parent.leafer) { root = root.parent }
             Platform.layout(root)
         }
     }
 
-    public getTransform(locationType: ILayoutLocationType): IMatrixData {
-        this.checkUpdate()
-        return locationType === 'world' ? this.leaf.__world : this.leaf.__local
+    public getTransform(relative: ILocationType | ILeaf = 'world'): IMatrixData {
+        this.update()
+        switch (relative) {
+            case 'world':
+                return this.leaf.__world
+            case 'local':
+                return this.leaf.__localMatrix
+            case 'inner':
+                return MatrixHelper.defaultMatrix
+            default:
+                return new Matrix(this.leaf.__world).divideParent(relative.__world)
+        }
     }
 
-    public decomposeTransform(locationType: ILayoutLocationType): IMatrixDecompositionData {
-        this.checkUpdate()
-        return MatrixHelper.decompose(locationType === 'world' ? this.leaf.__world : this.leaf.__local)
+    public getBounds(type?: IBoundsType, relative: ILocationType | ILeaf = 'world'): IBoundsData {
+        this.update()
+        switch (relative) {
+            case 'world':
+                return this.getWorldBounds(type)
+            case 'local':
+                return this.getLocalBounds(type)
+            case 'inner':
+                return this.getInnerBounds(type)
+            default:
+                return new Bounds(this.getInnerBounds(type)).toOuterOf(this.getTransform(relative))
+        }
     }
 
-    public getBounds(type: ILayoutBoundsType, locationType: ILayoutLocationType): IBoundsData {
+    public getInnerBounds(type: IBoundsType = 'box'): IBoundsData {
+        switch (type) {
+            case 'render':
+                return this.renderBounds
+            case 'content':
+                if (this.contentBounds) return this.contentBounds
+            case 'margin':
+            case 'box':
+                return this.boxBounds
+            case 'stroke':
+                return this.strokeBounds
+        }
+    }
 
-        this.checkUpdate()
+    public getLocalBounds(type: IBoundsType = 'box'): IBoundsData {
+        switch (type) {
+            case 'render':
+                return this.localRenderBounds
+            case 'stroke':
+                return this.localStrokeBounds
+            case 'margin':
+            case 'content':
+            case 'box':
+                return this.leaf.__localBoxBounds
+        }
+    }
 
-        if (locationType === 'world') {
+    public getWorldBounds(type: IBoundsType = 'box'): IBoundsData {
+        switch (type) {
+            case 'render':
+                return this.leaf.__world
+            case 'content':
+                if (this.contentBounds) return this.getWorldContentBounds()
+            case 'margin':
+            case 'box':
+                return this.getWorldBoxBounds()
+            case 'margin':
+            case 'stroke':
+                return this.getWorldStrokeBounds()
+        }
+    }
 
-            switch (type) {
-                case 'render':
-                    return this.leaf.__world
-                case 'content':
-                    if (this.contentBounds) return this.getWorldContentBounds()
-                case 'margin':
-                case 'box':
-                    return this.getWorldBoxBounds()
-                case 'margin':
-                case 'stroke':
-                    return this.getWorldStrokeBounds()
-            }
+    public getLayoutBounds(type?: IBoundsType, relative: ILocationType | ILeaf = 'world', unscale?: boolean): ILayoutBoundsData {
+        const { leaf } = this
+        let point: IPointData, matrix: IMatrixData, bounds: IBoundsData = this.getInnerBounds(type)
+
+        switch (relative) {
+            case 'world':
+                point = leaf.getWorldPoint(bounds)
+                matrix = leaf.__world
+                break
+            case 'local':
+                point = leaf.getLocalPointByInner(bounds)
+                matrix = leaf.__localMatrix
+                break
+            case 'inner':
+                point = bounds
+                matrix = MatrixHelper.defaultMatrix
+                break
+            default:
+                point = leaf.getWorldPoint(bounds, relative)
+                matrix = tempMatrix.set(leaf.__world).divideParent(relative.__world)
+        }
 
-        } else if (locationType === 'inner') {
-
-            switch (type) {
-                case 'render':
-                    return this.renderBounds
-                case 'content':
-                    if (this.contentBounds) return this.contentBounds
-                case 'margin':
-                case 'box':
-                    return this.boxBounds
-                case 'stroke':
-                    return this.strokeBounds
+        const layoutBounds = MatrixHelper.getLayout(matrix) as ILayoutBoundsData
+        copy(layoutBounds, bounds)
+        PointHelper.copy(layoutBounds, point)
+
+        if (unscale) {
+            const { scaleX, scaleY } = layoutBounds
+            const uScaleX = Math.abs(scaleX)
+            const uScaleY = Math.abs(scaleY)
+            if (uScaleX !== 1 || uScaleY !== 1) {
+                layoutBounds.scaleX /= uScaleX
+                layoutBounds.scaleY /= uScaleY
+                layoutBounds.width *= uScaleX
+                layoutBounds.height *= uScaleY
             }
+        }
 
-        } else {
-
-            switch (type) {
-                case 'render':
-                    return this.localRenderBounds
-                case 'margin':
-                case 'content':
-                case 'box':
-                    return this.leaf.__local
-                case 'stroke':
-                    return this.localStrokeBounds
-            }
+        return layoutBounds
+    }
 
+    public getLayoutPoints(type?: IBoundsType, relative: ILocationType | ILeaf = 'world'): IPointData[] {
+        const { leaf } = this
+        const points = getPoints(this.getInnerBounds(type))
+        let relativeLeaf: ILeaf
+        switch (relative) {
+            case 'world':
+                relativeLeaf = null
+                break
+            case 'local':
+                relativeLeaf = leaf.parent
+                break
+            case 'inner':
+                break
+            default:
+                relativeLeaf = relative
         }
-
+        if (relativeLeaf !== undefined) points.forEach(point => leaf.innerToWorld(point, null, false, relativeLeaf))
+        return points
     }
 
     protected getWorldContentBounds(): IBoundsData {
@@ -172,25 +270,25 @@ export class LeafLayout implements ILeafLayout {
 
     public spreadStrokeCancel(): void {
         const same = this.renderBounds === this.strokeBounds
-        this.strokeBounds = this.boxBounds
-        this.localStrokeBounds = this.leaf.__local
+        this._strokeBounds = this.boxBounds
+        this._localStrokeBounds = this.leaf.__localBoxBounds
         if (same) this.spreadRenderCancel()
     }
     public spreadRenderCancel(): void {
-        this.renderBounds = this.strokeBounds
-        this.localRenderBounds = this.localStrokeBounds
+        this._renderBounds = this._strokeBounds
+        this._localRenderBounds = this._localStrokeBounds
     }
 
     public spreadStroke(): void {
         const { x, y, width, height } = this.strokeBounds
-        this.strokeBounds = { x, y, width, height }
-        this.localStrokeBounds = { x, y, width, height }
+        this._strokeBounds = { x, y, width, height }
+        this._localStrokeBounds = { x, y, width, height }
         if (!this.renderSpread) this.spreadRenderCancel()
     }
     public spreadRender(): void {
         const { x, y, width, height } = this.renderBounds
-        this.renderBounds = { x, y, width, height }
-        this.localRenderBounds = { x, y, width, height }
+        this._renderBounds = { x, y, width, height }
+        this._localRenderBounds = { x, y, width, height }
     }
 
 
@@ -223,12 +321,6 @@ export class LeafLayout implements ILeafLayout {
 
     // matrix
 
-    public positionChange(): void {
-        this.positionChanged = true
-        this.matrixChanged = true
-        this.localBoxChanged || this.localBoxChange()
-    }
-
     public scaleChange(): void {
         this.scaleChanged = true
         this._scaleOrRotationChange()
@@ -242,6 +334,11 @@ export class LeafLayout implements ILeafLayout {
 
     protected _scaleOrRotationChange() {
         this.affectScaleOrRotation = true
+        this.matrixChange()
+        if (!this.leaf.__local) this.createLocal()
+    }
+
+    public matrixChange(): void {
         this.matrixChanged = true
         this.localBoxChanged || this.localBoxChange()
     }
@@ -258,8 +355,13 @@ export class LeafLayout implements ILeafLayout {
         this.surfaceChanged || this.surfaceChange()
     }
 
-    public destroy(): void {
-        this.leaf = null
+    public childrenSortChange(): void {
+        if (!this.childrenSortChanged) {
+            this.childrenSortChanged = true
+            this.leaf.forceUpdate('surface')
+        }
     }
 
+    public destroy(): void { }
+
 }

package/types/index.d.ts

@@ -0,0 +1,82 @@
+import { ILeafLayout, ILeaf, IBoundsData, ILocationType, IMatrixData, IBoundsType, ILayoutBoundsData, IPointData } from '@leafer/interface';
+
+declare class LeafLayout implements ILeafLayout {
+    leaf: ILeaf;
+    proxyZoom: boolean;
+    boxBounds: IBoundsData;
+    get strokeBounds(): IBoundsData;
+    get renderBounds(): IBoundsData;
+    _strokeBounds: IBoundsData;
+    _renderBounds: IBoundsData;
+    marginBounds: IBoundsData;
+    contentBounds: IBoundsData;
+    get localStrokeBounds(): IBoundsData;
+    get localRenderBounds(): IBoundsData;
+    protected _localStrokeBounds?: IBoundsData;
+    protected _localRenderBounds?: IBoundsData;
+    protected _worldContentBounds: IBoundsData;
+    protected _worldBoxBounds: IBoundsData;
+    protected _worldStrokeBounds: IBoundsData;
+    resized: boolean;
+    waitAutoLayout: boolean;
+    matrixChanged: boolean;
+    scaleChanged: boolean;
+    rotationChanged: boolean;
+    boundsChanged: boolean;
+    boxChanged: boolean;
+    strokeChanged: boolean;
+    renderChanged: boolean;
+    localBoxChanged: boolean;
+    surfaceChanged: boolean;
+    opacityChanged: boolean;
+    hitCanvasChanged: boolean;
+    childrenSortChanged?: boolean;
+    affectScaleOrRotation: boolean;
+    affectRotation: boolean;
+    affectChildrenSort?: boolean;
+    strokeSpread: number;
+    renderSpread: number;
+    strokeBoxSpread: number;
+    renderShapeSpread: number;
+    get a(): number;
+    get b(): number;
+    get c(): number;
+    get d(): number;
+    get e(): number;
+    get f(): number;
+    get x(): number;
+    get y(): number;
+    get width(): number;
+    get height(): number;
+    constructor(leaf: ILeaf);
+    createLocal(): void;
+    update(): void;
+    getTransform(relative?: ILocationType | ILeaf): IMatrixData;
+    getBounds(type?: IBoundsType, relative?: ILocationType | ILeaf): IBoundsData;
+    getInnerBounds(type?: IBoundsType): IBoundsData;
+    getLocalBounds(type?: IBoundsType): IBoundsData;
+    getWorldBounds(type?: IBoundsType): IBoundsData;
+    getLayoutBounds(type?: IBoundsType, relative?: ILocationType | ILeaf, unscale?: boolean): ILayoutBoundsData;
+    getLayoutPoints(type?: IBoundsType, relative?: ILocationType | ILeaf): IPointData[];
+    protected getWorldContentBounds(): IBoundsData;
+    protected getWorldBoxBounds(): IBoundsData;
+    protected getWorldStrokeBounds(): IBoundsData;
+    spreadStrokeCancel(): void;
+    spreadRenderCancel(): void;
+    spreadStroke(): void;
+    spreadRender(): void;
+    boxChange(): void;
+    localBoxChange(): void;
+    strokeChange(): void;
+    renderChange(): void;
+    scaleChange(): void;
+    rotationChange(): void;
+    protected _scaleOrRotationChange(): void;
+    matrixChange(): void;
+    surfaceChange(): void;
+    opacityChange(): void;
+    childrenSortChange(): void;
+    destroy(): void;
+}
+
+export { LeafLayout };