1 /**
  2  * Copyright (C) 2012 KO GmbH <copyright@kogmbh.com>
  3  *
  4  * @licstart
  5  * This file is part of WebODF.
  6  *
  7  * WebODF is free software: you can redistribute it and/or modify it
  8  * under the terms of the GNU Affero General Public License (GNU AGPL)
  9  * as published by the Free Software Foundation, either version 3 of
 10  * the License, or (at your option) any later version.
 11  *
 12  * WebODF is distributed in the hope that it will be useful, but
 13  * WITHOUT ANY WARRANTY; without even the implied warranty of
 14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 15  * GNU Affero General Public License for more details.
 16  *
 17  * You should have received a copy of the GNU Affero General Public License
 18  * along with WebODF.  If not, see <http://www.gnu.org/licenses/>.
 19  * @licend
 20  *
 21  * @source: http://www.webodf.org/
 22  * @source: https://github.com/kogmbh/WebODF/
 23  */
 24 
 25 /*global runtime, gui, odf */
 26 
 27 /**
 28  * @class
 29  * @constructor
 30  * @param {!odf.OdfCanvas} odfCanvas
 31  */
 32 gui.ImageSelector = function ImageSelector(odfCanvas) {
 33     "use strict";
 34     var /**@const
 35            @type {!string}*/
 36         svgns = odf.Namespaces.svgns,
 37         /**@const
 38            @type {!string}*/
 39         imageSelectorId = "imageSelector",
 40         /**@const
 41            @type {!number}*/
 42         selectorBorderWidth = 1, // in px
 43         /**@const
 44            @type {!Array.<!string>}*/
 45         squareClassNames = [
 46             "topLeft", "topRight", "bottomRight", "bottomLeft", "topMiddle", "rightMiddle", "bottomMiddle", "leftMiddle"
 47         ],
 48         document = odfCanvas.getElement().ownerDocument,
 49         hasSelection = false;
 50 
 51     /**
 52      * @return {!Element}
 53      */
 54     function createSelectorElement() {
 55         var sizerElement = odfCanvas.getSizer(),
 56             selectorElement = /**@type{!HTMLElement}*/(document.createElement("div"));
 57 
 58         selectorElement.id = "imageSelector";
 59         selectorElement.style.borderWidth = selectorBorderWidth + "px";
 60         sizerElement.appendChild(selectorElement);
 61 
 62         /**
 63          * @param {string} className
 64          */
 65         function createDiv(className) {
 66             var squareElement = document.createElement("div");
 67             squareElement.className = className;
 68             selectorElement.appendChild(squareElement);
 69         }
 70         squareClassNames.forEach(createDiv);
 71 
 72         return selectorElement;
 73     }
 74 
 75     /**
 76      * @param {!Element} element
 77      * @param {!Element} referenceElement
 78      * @return {{left: !number, top: !number}}
 79      */
 80     function getPosition(element, referenceElement) {
 81         var rect = element.getBoundingClientRect(),
 82             refRect = referenceElement.getBoundingClientRect(),
 83             zoomLevel = odfCanvas.getZoomLevel();
 84 
 85         return {
 86             left: (rect.left - refRect.left) / zoomLevel - selectorBorderWidth,
 87             top: (rect.top - refRect.top) / zoomLevel - selectorBorderWidth
 88         };
 89     }
 90 
 91     /**
 92      * @param {!Element} frameElement
 93      * @return {undefined}
 94      */
 95     this.select = function (frameElement) {
 96         var selectorElement = document.getElementById(imageSelectorId),
 97             position;
 98 
 99         // selector element could be removed by the undo process so re-create it if needed
100         if (!selectorElement) {
101             selectorElement = createSelectorElement();
102         }
103 
104         hasSelection = true;
105         position = getPosition(frameElement, /** @type {!Element}*/(selectorElement.parentNode));
106         selectorElement.style.display = "block";
107         selectorElement.style.left = position.left + "px";
108         selectorElement.style.top = position.top + "px";
109         selectorElement.style.width = frameElement.getAttributeNS(svgns, "width");
110         selectorElement.style.height = frameElement.getAttributeNS(svgns, "height");
111     };
112 
113     /**
114      * Clears the image selection.
115      * @return {undefined}
116      */
117     this.clearSelection = function () {
118         var selectorElement;
119         if (hasSelection) {
120             selectorElement = document.getElementById(imageSelectorId);
121             if (selectorElement) {
122                 selectorElement.style.display = "none";
123             }
124         }
125         hasSelection = false;
126     };
127 
128     /**
129      * Check if the given node is the selector element or one of its child elements.
130      * @param {?Node} node
131      * @return {!boolean}
132      */
133     this.isSelectorElement = function (node) {
134         var selectorElement = document.getElementById(imageSelectorId);
135         if (!selectorElement) {
136             return false;
137         }
138         return node === selectorElement || node.parentNode === selectorElement;
139     };
140 };
141