1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * <iframe src='../../../examples/DOMElement.html?noHeader' width = '330' height = '250' scrolling='no'></iframe>
  9  * <br/>
 10  * demo:
 11  * <pre>
 12  * var domView = new Hilo.DOMElement({
 13  *     element: Hilo.createElement('div', {
 14  *         style: {
 15  *             backgroundColor: '#004eff',
 16  *             position: 'absolute'
 17  *         }
 18  *     }),
 19  *     width: 100,
 20  *     height: 100,
 21  *     x: 50,
 22  *     y: 70
 23  * }).addTo(stage);
 24  * </pre>
 25  * @name DOMElement
 26  * @class DOMElement is a wrapper of dom element.（The DOMElement's parent must be stage）
 27  * @augments View
 28  * @param {Object} properties create Objects properties. Contains all writable properties in this class. Special properties include:
 29  * <ul>
 30  * <li><b>element</b> - dom element to wrap, required! </li>
 31  * </ul>
 32  * @module hilo/view/DOMElement
 33  * @requires hilo/core/Hilo
 34  * @requires hilo/core/Class
 35  * @requires hilo/view/View
 36  * @requires hilo/view/Drawable
 37  */
 38 var DOMElement = Class.create(/** @lends DOMElement.prototype */{
 39     Extends: View,
 40     constructor: function(properties){
 41         properties = properties || {};
 42         this.id = this.id || properties.id || Hilo.getUid("DOMElement");
 43         DOMElement.superclass.constructor.call(this, properties);
 44 
 45         this.drawable = new Drawable();
 46         var elem = this.drawable.domElement = properties.element || Hilo.createElement('div');
 47         elem.id = this.id;
 48 
 49         if(this.pointerEnabled && !elem.style.pointerEvents){
 50             elem.style.pointerEvents = 'visible';
 51         }
 52     },
 53 
 54     /**
 55      * Overwrite render method.
 56      * @private
 57      */
 58     _render: function(renderer, delta){
 59         if(!this.onUpdate || this.onUpdate(delta) !== false){
 60             renderer.transform(this);
 61             if(this.visible && this.alpha > 0){
 62                 this.render(renderer, delta);
 63             }
 64         }
 65     },
 66 
 67     /**
 68      * Overwrite render method.
 69      * @private
 70      */
 71     render: function(renderer, delta){
 72         if(renderer.renderType !== 'dom'){
 73             var canvas = renderer.canvas;
 74             var stage = this.parent;
 75             var domElementContainer = renderer._domElementContainer;
 76             if(!renderer._domElementContainer){
 77                 domElementContainer = renderer._domElementContainer = Hilo.createElement('div', {
 78                     style:{
 79                         'position':'absolute',
 80                         'transform':'scale3d(' + stage.scaleX + ',' + stage.scaleY + ', 1)',
 81                         'transformOrigin':'0 0',
 82                         'zIndex':'1'
 83                     }
 84                 });
 85                 canvas.parentNode.insertBefore(renderer._domElementContainer, canvas.nextSibling);
 86             }
 87 
 88             var elem = this.drawable.domElement, depth = this.depth,
 89                 nextElement = domElementContainer.childNodes[0], nextDepth;
 90             if(elem.parentNode) return;
 91 
 92             //draw dom element just after stage canvas
 93             while(nextElement && nextElement.nodeType != 3){
 94                 nextDepth = parseInt(nextElement.style.zIndex) || 0;
 95                 if(nextDepth <= 0 || nextDepth > depth){
 96                     break;
 97                 }
 98                 nextElement = nextElement.nextSibling;
 99             }
100             domElementContainer.insertBefore(this.drawable.domElement, nextElement);
101         }else{
102             renderer.draw(this);
103         }
104     }
105 });