1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * @language=zh
  9  * <iframe src='../../../examples/DOMElement.html?noHeader' width = '330' height = '250' scrolling='no'></iframe>
 10  * <br/>
 11  * 使用示例:
 12  * <pre>
 13  * var domView = new Hilo.DOMElement({
 14  *     element: Hilo.createElement('div', {
 15  *         style: {
 16  *             backgroundColor: '#004eff',
 17  *             position: 'absolute'
 18  *         }
 19  *     }),
 20  *     width: 100,
 21  *     height: 100,
 22  *     x: 50,
 23  *     y: 70
 24  * }).addTo(stage);
 25  * </pre>
 26  * @name DOMElement
 27  * @class DOMElement是dom元素的包装。
 28  * @augments View
 29  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。特殊属性有:
 30  * <ul>
 31  * <li><b>element</b> - 要包装的dom元素。必需。</li>
 32  * </ul>
 33  * @module hilo/view/DOMElement
 34  * @requires hilo/core/Hilo
 35  * @requires hilo/core/Class
 36  * @requires hilo/view/View
 37  * @requires hilo/view/Drawable
 38  */
 39 var DOMElement = Class.create(/** @lends DOMElement.prototype */{
 40     Extends: View,
 41     constructor: function(properties){
 42         properties = properties || {};
 43         this.id = this.id || properties.id || Hilo.getUid("DOMElement");
 44         DOMElement.superclass.constructor.call(this, properties);
 45 
 46         this.drawable = new Drawable();
 47         var elem = this.drawable.domElement = properties.element || Hilo.createElement('div');
 48         elem.id = this.id;
 49 
 50         if(this.pointerEnabled){
 51             elem.style.pointerEvents = 'visible';
 52         }
 53     },
 54 
 55     /**
 56      * @language=zh
 57      * 覆盖渲染方法。
 58      * @private
 59      */
 60     _render: function(renderer, delta){
 61         if(!this.onUpdate || this.onUpdate(delta) !== false){
 62             renderer.transform(this);
 63             if(this.visible && this.alpha > 0){
 64                 this.render(renderer, delta);
 65             }
 66         }
 67     },
 68 
 69     /**
 70      * @language=zh
 71      * 覆盖渲染方法。
 72      * @private
 73      */
 74     render: function(renderer, delta){
 75         if(renderer.renderType !== 'dom'){
 76             var canvas = renderer.canvas;
 77             var elem = this.drawable.domElement, depth = this.depth,
 78                 nextElement = canvas.nextSibling, nextDepth;
 79             if(elem.parentNode) return;
 80 
 81             //draw dom element just after stage canvas
 82             while(nextElement && nextElement.nodeType != 3){
 83                 nextDepth = parseInt(nextElement.style.zIndex) || 0;
 84                 if(nextDepth <= 0 || nextDepth > depth){
 85                     break;
 86                 }
 87                 nextElement = nextElement.nextSibling;
 88             }
 89             canvas.parentNode.insertBefore(this.drawable.domElement, nextElement);
 90         }else{
 91             renderer.draw(this);
 92         }
 93     }
 94 });