feat: 修改盒模型

Gitjinfeiyang · Nov 13, 2020 · ecedb5e · ecedb5e
1 parent c3f33d9
commit ecedb5e
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 26 deletions.
diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js
diff --git a/dist/easy-canvas.min.js.map b/dist/easy-canvas.min.js.map
diff --git a/example/basic.html b/example/basic.html
@@ -74,7 +74,7 @@
       canvas.width = w * dpr
       canvas.height = h * dpr
       ctx.scale(dpr, dpr)
-      layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h })
+      layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: true })
 
       const node = easyCanvas.createElement((h) => {
         let list = []

diff --git a/example/draw.js b/example/draw.js
@@ -161,7 +161,7 @@ function drawButton(h, text = 'text', options = {}) {
         display: 'inline-block',
         paddingLeft: 10,
         paddingRight: 10,
-        lineHeight: 16,
+        lineHeight: 20,
         verticalAlign: 'middle',
       },
       on: {
@@ -242,7 +242,7 @@ function drawInlineBlock(h) {
           paddingLeft: 10,
           paddingRight: 10,
           display: 'inline-block',
-          lineHeight: 16
+          lineHeight: 20
         },
       },
       [
@@ -515,7 +515,7 @@ function drawTicket(h) {
       ]),
       h('view', {
         styles: {
-          width: 100,
+          width: 60,
           textAlign: 'right'
         }
       }, [
@@ -540,7 +540,7 @@ function drawTicket(h) {
         left: -10,
         top: '50%',
         width: 20,
-        height: 10,
+        height: 20,
         backgroundColor: '#eac4a3',
         borderRadius: 10
       }
@@ -552,7 +552,7 @@ function drawTicket(h) {
         right: -10,
         top: '50%',
         width: 20,
-        height: 10,
+        height: 20,
         backgroundColor: '#d0916a',
         borderRadius: 10
       }

diff --git a/lib/element.js b/lib/element.js
@@ -1,6 +1,6 @@
 import STYLES from './constants'
 import pxUtil from './px'
-import { isExact, walk, isOuter, parseOuter, walkParent, isEndNode, isAuto, findRelativeTo, needReflow,floor } from './utils'
+import { isExact, walk, isOuter, parseOuter, walkParent, isEndNode, isAuto, findRelativeTo, needReflow, floor } from './utils'
 import Line from './line'
 import FlexBox from './flex-box'
 import TreeNode from './tree-node'
@@ -36,8 +36,8 @@ export default class Element extends TreeNode {
   initEvent() {
     if (this.options.on) {
       Object.keys(this.options.on).forEach(eventName => {
-        if(this.getLayer().eventManager.EVENTS.includes(eventName)){
-          this.getLayer().eventManager.addEventListener(eventName,this.options.on[eventName], this)
+        if (this.getLayer().eventManager.EVENTS.includes(eventName)) {
+          this.getLayer().eventManager.addEventListener(eventName, this.options.on[eventName], this)
         }
       })
     }
@@ -77,26 +77,30 @@ export default class Element extends TreeNode {
     const parentHeight = this._getContainerLayout().contentHeight
 
     if (isAuto(renderStyles.width)) {
-      renderStyles.width = 0
+      renderStyles.paddingWidth = 0
     } else if (isOuter(renderStyles.width)) {
-      renderStyles.width = parseOuter(renderStyles.width) * parentWidth
+      renderStyles.paddingWidth = parseOuter(renderStyles.width) * parentWidth - renderStyles.marginLeft - renderStyles.marginRight
+    } else {
+      renderStyles.paddingWidth = renderStyles.width
     }
 
     if (isAuto(renderStyles.height)) {
-      renderStyles.height = 0
+      renderStyles.paddingHeight = 0
     } else if (isOuter(renderStyles.height)) {
-      renderStyles.height = parseOuter(renderStyles.height) * parentHeight
+      renderStyles.paddingHeight = parseOuter(renderStyles.height) * parentHeight - renderStyles.marginTop - renderStyles.marginBottom
+    } else {
+      renderStyles.paddingHeight = renderStyles.height
     }
 
-    if (!renderStyles.width) renderStyles.width = 0
-    if (!renderStyles.height) renderStyles.height = 0
-
-    renderStyles.width = floor(renderStyles.width)
-    renderStyles.height = floor(renderStyles.height)
+    if (!renderStyles.paddingWidth) renderStyles.paddingWidth = 0
+    if (!renderStyles.paddingHeight) renderStyles.paddingHeight = 0
 
     // 初始化contentWidth
-    renderStyles.contentWidth = renderStyles.width - renderStyles.paddingLeft - renderStyles.paddingRight - renderStyles.marginLeft - renderStyles.marginRight - this._getTotalBorderWidth(renderStyles)
-    renderStyles.contentHeight = renderStyles.height - renderStyles.paddingTop - renderStyles.paddingBottom - renderStyles.marginTop - renderStyles.marginBottom - this._getTotalBorderHeight(renderStyles)
+    renderStyles.contentWidth = renderStyles.paddingWidth - renderStyles.paddingLeft - renderStyles.paddingRight
+    renderStyles.contentHeight = renderStyles.paddingHeight - renderStyles.paddingTop - renderStyles.paddingBottom
+
+    renderStyles.width = renderStyles.paddingWidth + renderStyles.marginLeft + renderStyles.marginRight + this._getTotalBorderWidth(renderStyles)
+    renderStyles.height = renderStyles.paddingHeight + renderStyles.marginTop + renderStyles.marginBottom + this._getTotalBorderHeight(renderStyles)
 
     this.renderStyles = renderStyles
 
@@ -239,12 +243,16 @@ export default class Element extends TreeNode {
   _refreshLayoutWithContent() {
     this.renderStyles.height = floor(this.renderStyles.contentHeight + this.renderStyles.paddingTop + this.renderStyles.paddingBottom + this.renderStyles.marginTop + this.renderStyles.marginBottom + this._getTotalBorderHeight())
     this.renderStyles.width = floor(this.renderStyles.contentWidth + this.renderStyles.paddingLeft + this.renderStyles.paddingRight + this.renderStyles.marginLeft + this.renderStyles.marginRight + this._getTotalBorderWidth())
+    this.renderStyles.paddingWidth = floor(this.renderStyles.contentWidth + this.renderStyles.paddingLeft + this.renderStyles.paddingRight)
+    this.renderStyles.paddingHeight = floor(this.renderStyles.contentHeight + this.renderStyles.paddingTop + this.renderStyles.paddingBottom)
   }
 
   // 父元素根据子元素撑开content后，再计算width
   _refreshContentWithLayout() {
     this.renderStyles.contentHeight = this.renderStyles.height - this.renderStyles.paddingTop - this.renderStyles.paddingBottom - this.renderStyles.marginTop - this.renderStyles.marginBottom - this._getTotalBorderHeight()
     this.renderStyles.contentWidth = this.renderStyles.width - this.renderStyles.paddingLeft - this.renderStyles.paddingRight - this.renderStyles.marginLeft - this.renderStyles.marginRight - this._getTotalBorderWidth()
+    this.renderStyles.paddingWidth = floor(this.renderStyles.contentWidth + this.renderStyles.paddingLeft + this.renderStyles.paddingRight)
+    this.renderStyles.paddingHeight = floor(this.renderStyles.contentHeight + this.renderStyles.paddingTop + this.renderStyles.paddingBottom)
   }
 
   _getTotalBorderWidth(renderStyles = this.renderStyles) {
@@ -420,7 +428,7 @@ export default class Element extends TreeNode {
       Object.keys(styles).forEach(key => {
         this.options.styles[key] = styles[key]
       })
-      this.getLayer().reflowElement(this,this)
+      this.getLayer().reflowElement(this, this)
       // console.warn('实验性功能')
     } else {
       this.getRender().requestRepaint()

diff --git a/lib/flex-box.js b/lib/flex-box.js
@@ -49,9 +49,9 @@ export default class FlexBox extends Line {
 
   add(el) {
     if (isExact(el.styles[this.key.width])) {
-      this.exactValue += el.styles[this.key.width]
-    }else if (isExact(el.styles.flex)) {
-      this.flexTotal += el.styles.flex
+      this.exactValue += el.renderStyles[this.key.width]
+    } else if (isExact(el.styles.flex)) {
+      this.flexTotal += el.renderStyles.flex
     }
 
     this.elements.push(el)