      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 });