feat: 修复操作element

Gitjinfeiyang · Sep 5, 2020 · 7aa996b · 7aa996b
1 parent 6eb5220
commit 7aa996b
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 87 deletions.
diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js
diff --git a/example/change-element.html b/example/change-element.html
@@ -88,15 +88,15 @@
                             }
                         }
                     }, 'Delete'),
-                    Dialog(h, {
-                        on: {
-                            click() {
-                                toggleDialog()
-                            }
-                        },
-                        title: '提示',
-                        content: 'easy-canvas实现了在canvas中创建文档流，并且可以很轻松的支持组件化开发，并且没有第三方依赖，只要支持标准的canvas就可以使用，在实现基本功能的基础上添加了事件、scroll-view等支持。基础版支持小程序、web。'
-                    })
+                    // Dialog(h, {
+                    //     on: {
+                    //         click() {
+                    //             toggleDialog()
+                    //         }
+                    //     },
+                    //     title: '提示',
+                    //     content: 'easy-canvas实现了在canvas中创建文档流，并且可以很轻松的支持组件化开发，并且没有第三方依赖，只要支持标准的canvas就可以使用，在实现基本功能的基础上添加了事件、scroll-view等支持。基础版支持小程序、web。'
+                    // })
 
                 ])
             })

diff --git a/example/draw.js b/example/draw.js
@@ -433,7 +433,7 @@ function Dialog(h, options) {
   return h('view', {
     attrs: { className: 'dialog' }, styles: {
       position: 'absolute', top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, backgroundColor: 'rgba(0,0,0,0.5)',
-      display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-start'
+      display: 'flex', alignItems: 'center', justifyContent: 'center'
     }
   }, [
     h('view', {

diff --git a/lib/element.js b/lib/element.js
@@ -493,21 +493,15 @@ export default class Element {
   appendChild(element) {
     if (!element instanceof Element) throw Error('Unknown Element type')
     this.children.push(element)
-    this._connectChildren()
-    this.getLayer().initNode(element)
-    this.getLayer().flow()
-    this.getLayer().repaint()
+    this.getLayer().mountNode(this.root)
     return element
   }
 
   //
   prependChild(element) {
     if (!element instanceof Element) throw Error('Unknown Element type')
     this.children.unshift(element)
-    this._connectChildren()
-    this.getLayer().initNode(element)
-    this.getLayer().flow()
-    this.getLayer().repaint()
+    this.getLayer().mountNode(this.root)
     return element
   }
 
@@ -525,8 +519,7 @@ export default class Element {
     }
     this.children.splice(index, 1)
     element.removeEvent()
-    this.getLayer().reflow()
-    this.getLayer().repaint()
+    this.getLayer().mountNode(this.root)
   }
 
   append(element) {
@@ -540,10 +533,7 @@ export default class Element {
       }
     })
     this.parent.children = children
-    this.parent._connectChildren()
-    this.getLayer().initNode(element)
-    this.getLayer().flow()
-    this.getLayer().repaint()
+    this.getLayer().mountNode(this.root)
   }
 
   prepend(element) {
@@ -557,10 +547,7 @@ export default class Element {
       }
     }
     this.parent.children = children
-    this.parent._connectChildren()
-    this.getLayer().initNode(element)
-    this.getLayer().flow()
-    this.getLayer().repaint()
+    this.getLayer().mountNode(this.root)
   }
 
 }
diff --git a/lib/layer.js b/lib/layer.js
@@ -1,5 +1,5 @@
 import EventManager from './event-manager'
-import { walk } from './utils'
+import { walk, breadthFirstSearch, breadthFirstSearchRight } from './utils'
 export default class Layer {
   constructor(ctx, options) {
     this.ctx = ctx
@@ -127,60 +127,3 @@ export default class Layer {
 }
 
 
-function breadthFirstSearch(node, reverse = false) {
-
-  var nodes = [];
-
-  if (node != null) {
-
-    var queue = [];
-
-    queue.unshift(node);
-
-    while (queue.length != 0) {
-
-      var item = queue.shift();
-
-      nodes.push(item._generateRender());
-
-      var children = item._getChildren();
-
-      for (var i = 0; i < children.length; i++)
-        queue.push(children[i]._generateRender());
-
-    }
-
-  }
-
-  return nodes;
-
-}
-
-function breadthFirstSearchRight(node) {
-
-  var nodes = [];
-
-  if (node != null) {
-
-    var queue = [];
-
-    queue.unshift(node);
-
-    while (queue.length != 0) {
-
-      var item = queue.shift();
-
-      nodes.push(item._generateRender());
-
-      var children = item._getChildren();
-
-      for (var i = children.length - 1; i >= 0; i--)
-        queue.push(children[i]._generateRender());
-
-    }
-
-  }
-
-  return nodes;
-
-}
diff --git a/lib/utils.js b/lib/utils.js
@@ -75,3 +75,61 @@ export function isWX() {
 export function isEndNode(el) {
   return el.parent && !el.next && !el.hasChildren()
 }
+
+export function breadthFirstSearch(node) {
+
+  var nodes = [];
+
+  if (node != null) {
+
+    var queue = [];
+
+    queue.unshift(node);
+
+    while (queue.length != 0) {
+
+      var item = queue.shift();
+
+      nodes.push(item._generateRender());
+
+      var children = item._getChildren();
+
+      for (var i = 0; i < children.length; i++)
+        queue.push(children[i]._generateRender());
+
+    }
+
+  }
+
+  return nodes;
+
+}
+
+export function breadthFirstSearchRight(node) {
+
+  var nodes = [];
+
+  if (node != null) {
+
+    var queue = [];
+
+    queue.unshift(node);
+
+    while (queue.length != 0) {
+
+      var item = queue.shift();
+
+      nodes.push(item._generateRender());
+
+      var children = item._getChildren();
+
+      for (var i = children.length - 1; i >= 0; i--)
+        queue.push(children[i]._generateRender());
+
+    }
+
+  }
+
+  return nodes;
+
+}