@leafer/layout 1.0.0-alpha.9 → 1.0.0-beta

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer/layout",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-beta",
   "description": "@leafer/layout",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -19,9 +19,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/math": "1.0.0-alpha.9"
+    "@leafer/math": "1.0.0-beta",
+    "@leafer/platform": "1.0.0-beta"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-alpha.9"
+    "@leafer/interface": "1.0.0-beta"
   }
 }

package/src/LeafLayout.ts

@@ -1,8 +1,9 @@
-import { ILeaf, ILeafLayout, ILayoutLocationType, ILayoutBoundsType, IBoundsData, IMatrixData, } from '@leafer/interface'
-import { BoundsHelper } from '@leafer/math'
+import { ILeaf, ILeafLayout, ILayoutLocationType, ILayoutBoundsType, IBoundsData, IMatrixData, IMatrixDecompositionData } from '@leafer/interface'
+import { BoundsHelper, MatrixHelper } from '@leafer/math'
+import { Platform } from '@leafer/platform'
 
 
-const { setByBoundsTimesMatrix } = BoundsHelper
+const { toOuterOf } = BoundsHelper
 
 export class LeafLayout implements ILeafLayout {
 
@@ -12,41 +13,40 @@ export class LeafLayout implements ILeafLayout {
 
     // local
 
-    public boxBounds: IBoundsData    //  | content + padding |
-    public eventBounds: IBoundsData  //  | boxBounds + border |  
-    public renderBounds: IBoundsData //  | eventBounds + shadow |
+    public boxBounds: IBoundsData
+    public strokeBounds: IBoundsData
+    public renderBounds: IBoundsData
 
     // auto layout
-    public marginBounds: IBoundsData //  | eventBounds + margin |
-    public contentBounds: IBoundsData // | content |  
+    public marginBounds: IBoundsData
+    public contentBounds: IBoundsData
 
-    // relative
+    // local
 
-    //relativeBoxBounds: IBoundsData = leaf.__relative
-    public relativeEventBounds: IBoundsData
-    public relativeRenderBounds: IBoundsData
+    public localStrokeBounds: IBoundsData
+    public localRenderBounds: IBoundsData
 
     // world temp
+    protected _worldContentBounds: IBoundsData
     protected _worldBoxBounds: IBoundsData
-    protected _worldEventBounds: IBoundsData
-    // worldRenderBounds: IBoundsData = leaf.__world
+    protected _worldStrokeBounds: IBoundsData
 
     // state
 
     // matrix changed
-    public matrixChanged: boolean // include positionChanged scaleChanged skewChanged
-    public positionChanged: boolean // x, y
-    public scaleChanged: boolean // scaleX scaleY
-    public rotationChanged: boolean // rotaiton, skewX scaleY
+    public matrixChanged: boolean
+    public positionChanged: boolean
+    public scaleChanged: boolean
+    public rotationChanged: boolean
 
     // bounds
     public boundsChanged: boolean
 
-    public boxBoundsChanged: boolean
-    public eventBoundsChanged: boolean
-    public renderBoundsChanged: boolean
+    public boxChanged: boolean
+    public strokeChanged: boolean
+    public renderChanged: boolean
 
-    public localBoxBoundsChanged: boolean
+    public localBoxChanged: boolean
 
     // face
     public surfaceChanged: boolean
@@ -59,133 +59,164 @@ export class LeafLayout implements ILeafLayout {
     // keep state
     public affectScaleOrRotation: boolean
     public affectRotation: boolean
-    public eventBoundsSpreadWidth: number
-    public renderBoundsSpreadWidth: number
-    public renderShapeBoundsSpreadWidth: number
+
+    public strokeSpread: number
+    public renderSpread: number
+    public strokeBoxSpread: number
+    public renderShapeSpread: number
 
 
     constructor(leaf: ILeaf) {
         this.leaf = leaf
-        this.renderBounds = this.eventBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 }
-        this.relativeRenderBounds = this.relativeEventBounds = leaf.__relative
+        this.renderBounds = this.strokeBounds = this.boxBounds = { x: 0, y: 0, width: 0, height: 0 }
+        this.localRenderBounds = this.localStrokeBounds = leaf.__local
+        this.boxChange()
     }
 
 
-    public update(): void {
+    public checkUpdate(): void {
         const { leafer } = this.leaf
-        if (leafer && leafer.watcher.changed) {
-            if (!leafer.running) leafer.start()
-            leafer.layouter.layout()
+        if (leafer) {
+            if (leafer.ready) {
+                if (leafer.watcher.changed) leafer.layouter.layout()
+            } else {
+                leafer.start()
+                leafer.layouter.layout()
+            }
+        } else {
+            let root = this.leaf
+            while (root.parent) { root = root.parent }
+            Platform.layout(root)
         }
     }
 
-    public getTransform(type: ILayoutLocationType): IMatrixData {
-        this.update()
-        return type === 'world' ? this.leaf.__world : this.leaf.__relative
+    public getTransform(locationType: ILayoutLocationType): IMatrixData {
+        this.checkUpdate()
+        return locationType === 'world' ? this.leaf.__world : this.leaf.__local
     }
 
-    public getBounds(type: ILayoutLocationType, boundsType: ILayoutBoundsType): IBoundsData {
+    public decomposeTransform(locationType: ILayoutLocationType): IMatrixDecompositionData {
+        this.checkUpdate()
+        return MatrixHelper.decompose(locationType === 'world' ? this.leaf.__world : this.leaf.__local)
+    }
 
-        this.update()
+    public getBounds(type: ILayoutBoundsType, locationType: ILayoutLocationType): IBoundsData {
 
-        if (type === 'world') {
+        this.checkUpdate()
 
-            switch (boundsType) {
+        if (locationType === 'world') {
+
+            switch (type) {
                 case 'render':
                     return this.leaf.__world
+                case 'content':
+                    if (this.contentBounds) return this.getWorldContentBounds()
+                case 'margin':
                 case 'box':
                     return this.getWorldBoxBounds()
-                case 'event':
-                    return this.getWorldEventBounds()
+                case 'margin':
+                case 'stroke':
+                    return this.getWorldStrokeBounds()
             }
 
-        } else if (type === 'local') {
+        } else if (locationType === 'inner') {
 
-            switch (boundsType) {
+            switch (type) {
                 case 'render':
                     return this.renderBounds
+                case 'content':
+                    if (this.contentBounds) return this.contentBounds
+                case 'margin':
                 case 'box':
                     return this.boxBounds
-                case 'event':
-                    return this.eventBounds
+                case 'stroke':
+                    return this.strokeBounds
             }
 
         } else {
 
-            switch (boundsType) {
+            switch (type) {
                 case 'render':
-                    return this.relativeRenderBounds
+                    return this.localRenderBounds
+                case 'margin':
+                case 'content':
                 case 'box':
-                    return this.leaf.__relative
-                case 'event':
-                    return this.relativeEventBounds
+                    return this.leaf.__local
+                case 'stroke':
+                    return this.localStrokeBounds
             }
 
         }
-        return this.leaf.__world
+
     }
 
+    protected getWorldContentBounds(): IBoundsData {
+        this._worldContentBounds || (this._worldContentBounds = {} as IBoundsData)
+        toOuterOf(this.contentBounds, this.leaf.__world, this._worldContentBounds)
+        return this._worldContentBounds
+    }
 
     protected getWorldBoxBounds(): IBoundsData {
         this._worldBoxBounds || (this._worldBoxBounds = {} as IBoundsData)
-        setByBoundsTimesMatrix(this._worldBoxBounds, this.boxBounds, this.leaf.__world)
+        toOuterOf(this.boxBounds, this.leaf.__world, this._worldBoxBounds)
         return this._worldBoxBounds
     }
 
-    protected getWorldEventBounds(): IBoundsData {
-        this._worldEventBounds || (this._worldEventBounds = {} as IBoundsData)
-        setByBoundsTimesMatrix(this._worldEventBounds, this.eventBounds, this.leaf.__world)
-        return this._worldEventBounds
+    protected getWorldStrokeBounds(): IBoundsData {
+        this._worldStrokeBounds || (this._worldStrokeBounds = {} as IBoundsData)
+        toOuterOf(this.strokeBounds, this.leaf.__world, this._worldStrokeBounds)
+        return this._worldStrokeBounds
     }
 
     // 独立 / 引用 boxBounds
 
-    public eventBoundsSpreadCancel(): void {
-        const same = this.renderBounds === this.eventBounds
-        this.eventBounds = this.boxBounds
-        this.relativeEventBounds = this.leaf.__relative
-        if (same) this.renderBoundsSpreadCancel()
+    public spreadStrokeCancel(): void {
+        const same = this.renderBounds === this.strokeBounds
+        this.strokeBounds = this.boxBounds
+        this.localStrokeBounds = this.leaf.__local
+        if (same) this.spreadRenderCancel()
     }
-    public renderBoundsSpreadCancel(): void {
-        this.renderBounds = this.eventBounds
-        this.relativeRenderBounds = this.relativeEventBounds
+    public spreadRenderCancel(): void {
+        this.renderBounds = this.strokeBounds
+        this.localRenderBounds = this.localStrokeBounds
     }
 
-    public eventBoundsSpread(): void {
-        const { x, y, width, height } = this.eventBounds
-        this.eventBounds = { x, y, width, height }
-        this.relativeEventBounds = { x, y, width, height }
-        if (!this.renderBoundsSpreadWidth) this.renderBoundsSpreadCancel()
+    public spreadStroke(): void {
+        const { x, y, width, height } = this.strokeBounds
+        this.strokeBounds = { x, y, width, height }
+        this.localStrokeBounds = { x, y, width, height }
+        if (!this.renderSpread) this.spreadRenderCancel()
     }
-    public renderBoundsSpread(): void {
+    public spreadRender(): void {
         const { x, y, width, height } = this.renderBounds
         this.renderBounds = { x, y, width, height }
-        this.relativeRenderBounds = { x, y, width, height }
+        this.localRenderBounds = { x, y, width, height }
     }
 
 
     // bounds
 
-    public boxBoundsChange(): void {
-        this.boxBoundsChanged = true
-        this.localBoxBoundsChanged || this.localBoxBoundsChange()
+    public boxChange(): void {
+        this.boxChanged = true
+        this.localBoxChanged || this.localBoxChange()
         this.hitCanvasChanged = true
     }
 
-    public localBoxBoundsChange(): void {
-        this.localBoxBoundsChanged = true
+    public localBoxChange(): void {
+        this.localBoxChanged = true
         this.boundsChanged = true
     }
 
-    public eventBoundsChange(): void {
-        this.eventBoundsChanged = true
-        this.eventBoundsSpreadWidth || (this.eventBoundsSpreadWidth = 1)
+    public strokeChange(): void {
+        this.strokeChanged = true
+        this.strokeSpread || (this.strokeSpread = 1)
         this.boundsChanged = true
+        this.hitCanvasChanged = true
     }
 
-    public renderBoundsChange(): void {
-        this.renderBoundsChanged = true
-        this.renderBoundsSpreadWidth || (this.renderBoundsSpreadWidth = 1)
+    public renderChange(): void {
+        this.renderChanged = true
+        this.renderSpread || (this.renderSpread = 1)
         this.boundsChanged = true
     }
 
@@ -195,7 +226,7 @@ export class LeafLayout implements ILeafLayout {
     public positionChange(): void {
         this.positionChanged = true
         this.matrixChanged = true
-        this.localBoxBoundsChanged || this.localBoxBoundsChange()
+        this.localBoxChanged || this.localBoxChange()
     }
 
     public scaleChange(): void {
@@ -212,7 +243,7 @@ export class LeafLayout implements ILeafLayout {
     protected _scaleOrRotationChange() {
         this.affectScaleOrRotation = true
         this.matrixChanged = true
-        this.localBoxBoundsChanged || this.localBoxBoundsChange()
+        this.localBoxChanged || this.localBoxChange()
     }
 
 
@@ -228,7 +259,7 @@ export class LeafLayout implements ILeafLayout {
     }
 
     public destroy(): void {
-        this.leaf = undefined
+        this.leaf = null
     }
 
 }