@leafer/layout 1.0.0-alpha.21 → 1.0.0-alpha.30

package/package.json

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

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 { toWorld } = BoundsHelper
+const { toOuterOf } = BoundsHelper
 
 export class LeafLayout implements ILeafLayout {
 
@@ -12,38 +13,37 @@ 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 strokeBoundsChanged: boolean
     public renderBoundsChanged: boolean
 
     public localBoxBoundsChanged: boolean
@@ -59,109 +59,136 @@ export class LeafLayout implements ILeafLayout {
     // keep state
     public affectScaleOrRotation: boolean
     public affectRotation: boolean
-    public eventBoundsSpreadWidth: number
+    public strokeBoundsSpreadWidth: number
     public renderBoundsSpreadWidth: number
     public renderShapeBoundsSpreadWidth: 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.boxBoundsChange()
     }
 
 
-    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 getMatrixDecompositionData(locationType: ILayoutLocationType): IMatrixDecompositionData {
+        this.checkUpdate()
+        return MatrixHelper.decompose(locationType === 'world' ? this.leaf.__world : this.leaf.__local)
     }
 
-    public getBounds(type: ILayoutLocationType, boundsType: ILayoutBoundsType): IBoundsData {
+    public getBounds(type: ILayoutBoundsType, locationType: ILayoutLocationType): IBoundsData {
 
-        this.update()
+        this.checkUpdate()
 
-        if (type === 'world') {
+        if (locationType === 'world') {
 
-            switch (boundsType) {
+            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)
-        toWorld(this.boxBounds, this.leaf.__world, this._worldBoxBounds)
+        toOuterOf(this.boxBounds, this.leaf.__world, this._worldBoxBounds)
         return this._worldBoxBounds
     }
 
-    protected getWorldEventBounds(): IBoundsData {
-        this._worldEventBounds || (this._worldEventBounds = {} as IBoundsData)
-        toWorld(this.eventBounds, this.leaf.__world, this._worldEventBounds)
-        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
+    public strokeBoundsSpreadCancel(): void {
+        const same = this.renderBounds === this.strokeBounds
+        this.strokeBounds = this.boxBounds
+        this.localStrokeBounds = this.leaf.__local
         if (same) this.renderBoundsSpreadCancel()
     }
     public renderBoundsSpreadCancel(): void {
-        this.renderBounds = this.eventBounds
-        this.relativeRenderBounds = this.relativeEventBounds
+        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 }
+    public strokeBoundsSpread(): void {
+        const { x, y, width, height } = this.strokeBounds
+        this.strokeBounds = { x, y, width, height }
+        this.localStrokeBounds = { x, y, width, height }
         if (!this.renderBoundsSpreadWidth) this.renderBoundsSpreadCancel()
     }
     public renderBoundsSpread(): 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 }
     }
 
 
@@ -178,10 +205,11 @@ export class LeafLayout implements ILeafLayout {
         this.boundsChanged = true
     }
 
-    public eventBoundsChange(): void {
-        this.eventBoundsChanged = true
-        this.eventBoundsSpreadWidth || (this.eventBoundsSpreadWidth = 1)
+    public strokeBoundsChange(): void {
+        this.strokeBoundsChanged = true
+        this.strokeBoundsSpreadWidth || (this.strokeBoundsSpreadWidth = 1)
         this.boundsChanged = true
+        this.hitCanvasChanged = true
     }
 
     public renderBoundsChange(): void {