` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| && - `` && |\n| && - `
` && |\n| && - ` ` && |\n| && - ` ` && |\n| && - ` ` && |\n| && - `` && |\n| &&
- `
` && |\n| &&
- `` && |\n| &&
- ` ![#]()
` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- ` ` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `
` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- `Loading
` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ![preview]()
` && |\n| &&
- `
` && |\n| &&
- ` or` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- `
`.
-
- ENDMETHOD.
-
-
- METHOD load_editor_js.
- result = `` && |\n| &&
- `loadJsEditor = function(base64_image, filename) {` && |\n| &&
- ` var summerHtmlImageMapCreator = (function() {` && |\n| &&
- ` 'use strict';` && |\n| &&
- ` ` && |\n| &&
- ` var utils = {` && |\n| &&
- ` getOffset : function(node) {` && |\n| &&
- ` var boxCoords = node.getBoundingClientRect();` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` x : Math.round(boxCoords.left + window.pageXOffset),` && |\n| &&
- ` y : Math.round(boxCoords.top + window.pageYOffset)` && |\n| &&
- ` };` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` getRightCoords : function(x, y) {` && |\n| &&
- ` return {` && |\n| &&
- ` x : x - app.getOffset('x'),` && |\n| &&
- ` y : y - app.getOffset('y')` && |\n| &&
- ` };` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` id : function (str) {` && |\n| &&
- ` return document.getElementById(str);` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` hide : function(node) {` && |\n| &&
- ` node.style.display = 'none';` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` show : function(node) {` && |\n| &&
- ` node.style.display = 'block';` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Escape < and > (for code output)` && |\n| &&
- ` *` && |\n| &&
- ` * @param str {string} - a string with < and >` && |\n| &&
- ` * @returns {string} - a string with escaped < and >` && |\n| &&
- ` */` && |\n| &&
- ` encode : function(str) {` && |\n| &&
- ` return str.replace(/</g, '<').replace(/>/g, '>');` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` foreach : function(arr, func) {` && |\n| &&
- ` for(var i = 0, count = arr.length; i < count; i++) {` && |\n| &&
- ` func(arr[i], i);` && |\n| &&
- ` }` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` foreachReverse : function(arr, func) {` && |\n| &&
- ` for(var i = arr.length - 1; i >= 0; i--) {` && |\n| &&
- ` func(arr[i], i);` && |\n| &&
- ` }` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` debug : (function() {` && |\n| &&
- ` var output = document.getElementById('debug');` && |\n| &&
- ` ` && |\n| &&
- ` return function() {` && |\n| &&
- ` output.innerHTML = [].join.call(arguments, ' ');` && |\n| &&
- ` };` && |\n| &&
- ` })(),` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * TODO: will use same method of app.js` && |\n| &&
- ` * @deprecated` && |\n| &&
- ` */` && |\n| &&
- ` stopEvent : function(e) {` && |\n| &&
- ` e.stopPropagation();` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` extend : function(obj, options) {` && |\n| &&
- ` var target = {};` && |\n| &&
- `` && |\n| &&
- ` for (var name in obj) {` && |\n| &&
- ` if(obj.hasOwnProperty(name)) {` && |\n| &&
- ` target[name] = options[name] ? options[name] : obj[name];` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return target;` && |\n| &&
- ` },` && |\n| &&
- ` ` && |\n| &&
- ` inherits : (function() {` && |\n| &&
- ` var F = function() {};` && |\n| &&
- ` ` && |\n| &&
- ` return function(Child, Parent) {` && |\n| &&
- ` F.prototype = Parent.prototype;` && |\n| &&
- ` Child.prototype = new F();` && |\n| &&
- ` Child.prototype.constructor = Child;` && |\n| &&
- ` };` && |\n| &&
- ` })()` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` var app = (function() {` && |\n| &&
- ` var domElements = {` && |\n| &&
- ` wrapper : utils.id('wrapper'),` && |\n| &&
- ` svg : utils.id('svg'),` && |\n| &&
- ` img : utils.id('img'),` && |\n| &&
- ` container : utils.id('image'),` && |\n| &&
- ` map : null` && |\n| &&
- ` },` && |\n| &&
- ` state = {` && |\n| &&
- ` offset : {` && |\n| &&
- ` x : 0,` && |\n| &&
- ` y : 0` && |\n| &&
- ` },` && |\n| &&
- ` appMode : null, // drawing || editing || preview` && |\n| &&
- ` currentType : null,` && |\n| &&
- ` editType : null,` && |\n| &&
- ` newArea : null,` && |\n| &&
- ` selectedArea : null,` && |\n| &&
- ` areas : [],` && |\n| &&
- ` events : [],` && |\n| &&
- ` isDraw : false,` && |\n| &&
- ` image : {` && |\n| &&
- ` src : null,` && |\n| &&
- ` filename : null,` && |\n| &&
- ` width: 0,` && |\n| &&
- ` height: 0` && |\n| &&
- ` }` && |\n| &&
- ` },` && |\n| &&
- ` KEYS = {` && |\n| &&
- ` F1 : 112,` && |\n| &&
- ` ESC : 27,` && |\n| &&
- ` TOP : 38,` && |\n| &&
- ` BOTTOM : 40,` && |\n| &&
- ` LEFT : 37,` && |\n| &&
- ` RIGHT : 39,` && |\n| &&
- ` DELETE : 46,` && |\n| &&
- ` I : 73,` && |\n| &&
- ` S : 83,` && |\n| &&
- ` C : 67` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` function recalcOffsetValues() {` && |\n| &&
- ` state.offset = utils.getOffset(domElements.container);` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` /* Get offset value */` && |\n| &&
- ` window.addEventListener('resize', recalcOffsetValues, false);` && |\n| &&
- `` && |\n| &&
- ` /* Disable selection */` && |\n| &&
- ` domElements.container.addEventListener('mousedown', function(e) { e.preventDefault(); }, false);` && |\n| &&
- `` && |\n| &&
- ` /* Disable image dragging */` && |\n| &&
- ` domElements.img.addEventListener('dragstart', function(e){` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }, false);` && |\n| &&
- `` && |\n| &&
- ` /* Display cursor coordinates info */` && |\n| &&
- ` var cursor_position_info = (function() {` && |\n| &&
- ` var coords_info = utils.id('coords');` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` set : function(coords) {` && |\n| &&
- ` coords_info.innerHTML = 'x: ' + coords.x + ', ' + 'y: ' + coords.y;` && |\n| &&
- ` },` && |\n| &&
- ` empty : function() {` && |\n| &&
- ` coords_info.innerHTML = '';` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- ` domElements.container.addEventListener('mousemove', function(e){` && |\n| &&
- ` cursor_position_info.set(utils.getRightCoords(e.pageX, e.pageY));` && |\n| &&
- ` }, false);` && |\n| &&
- `` && |\n| &&
- ` domElements.container.addEventListener('mouseleave', function(){` && |\n| &&
- ` cursor_position_info.empty();` && |\n| &&
- ` }, false);` && |\n| &&
- `` && |\n| &&
- ` /* Add mousedown event for svg */` && |\n| &&
- ` function onSvgMousedown(e) {` && |\n| &&
- ` if (state.appMode === 'editing') {` && |\n| &&
- ` if (e.target.parentNode.tagName === 'g') {` && |\n| &&
- ` info.unload();` && |\n| &&
- ` state.selectedArea = e.target.parentNode.obj;` && |\n| &&
- ` ` && |\n| &&
- ` app.deselectAll();` && |\n| &&
- ` state.selectedArea.select();` && |\n| &&
- ` state.selectedArea.editingStartPoint = {` && |\n| &&
- ` x : e.pageX,` && |\n| &&
- ` y : e.pageY` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` if (e.target.classList.contains('helper')) {` && |\n| &&
- ` var helper = e.target;` && |\n| &&
- ` state.editType = helper.action;` && |\n| &&
- ` ` && |\n| &&
- ` if (helper.n >= 0) { // if typeof selected_area == polygon` && |\n| &&
- ` state.selectedArea.selected_point = helper.n;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(app.domElements.container,` && |\n| &&
- ` 'mousemove',` && |\n| &&
- ` state.selectedArea.onProcessEditing.bind(state.selectedArea))` && |\n| &&
- ` .addEvent(app.domElements.container,` && |\n| &&
- ` 'mouseup',` && |\n| &&
- ` state.selectedArea.onStopEditing.bind(state.selectedArea));` && |\n| &&
- ` } else if (e.target.tagName === 'rect' || e.target.tagName === 'circle' || e.target.tagName === 'polygon') {` && |\n| &&
- ` state.editType = 'move';` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(app.domElements.container,` && |\n| &&
- ` 'mousemove',` && |\n| &&
- ` state.selectedArea.onProcessEditing.bind(state.selectedArea))` && |\n| &&
- ` .addEvent(app.domElements.container,` && |\n| &&
- ` 'mouseup',` && |\n| &&
- ` state.selectedArea.onStopEditing.bind(state.selectedArea));` && |\n| &&
- ` }` && |\n| &&
- ` } else {` && |\n| &&
- ` app.deselectAll();` && |\n| &&
- ` info.unload();` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n|.
- result = result && ` domElements.container.addEventListener('mousedown', onSvgMousedown, false);` && |\n| &&
- ` ` && |\n| &&
- ` /* Add click event for svg */` && |\n| &&
- ` function onSvgClick(e) {` && |\n| &&
- ` if (state.appMode === 'drawing' && !state.isDraw && state.currentType) {` && |\n| &&
- ` code.hide();` && |\n| &&
- ` app.setIsDraw(true);` && |\n| &&
- ` ` && |\n| &&
- ` state.newArea = Area.CONSTRUCTORS[state.currentType].createAndStartDrawing(` && |\n| &&
- ` utils.getRightCoords(e.pageX, e.pageY)` && |\n| &&
- ` );` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` domElements.container.addEventListener('click', onSvgClick, false);` && |\n| &&
- ` ` && |\n| &&
- ` /* Add dblclick event for svg */` && |\n| &&
- ` function onAreaDblClick(e) {` && |\n| &&
- ` if (state.appMode === 'editing') {` && |\n| &&
- ` if (e.target.tagName === 'rect' || e.target.tagName === 'circle' || e.target.tagName === 'polygon') {` && |\n| &&
- ` state.selectedArea = e.target.parentNode.obj;` && |\n| &&
- ` info.load(state.selectedArea, e.pageX, e.pageY);` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` domElements.container.addEventListener('dblclick', onAreaDblClick, false);` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` /* Add keydown event for document */` && |\n| &&
- ` function onDocumentKeyDown(e) {` && |\n| &&
- ` var ctrlDown = e.ctrlKey || e.metaKey; // PC || Mac` && |\n| &&
- ` ` && |\n| &&
- ` switch (e.keyCode) {` && |\n| &&
- ` case KEYS.F1:` && |\n| &&
- ` help.show();` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.ESC:` && |\n| &&
- ` help.hide();` && |\n| &&
- ` if (state.isDraw) {` && |\n| &&
- ` state.isDraw = false;` && |\n| &&
- ` state.newArea.remove();` && |\n| &&
- ` state.areas.pop();` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` } else if (state.appMode === 'editing') {` && |\n| &&
- ` state.selectedArea.redraw();` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.TOP:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` state.selectedArea.move(0, -1);` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.BOTTOM:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` state.selectedArea.move(0, 1);` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.LEFT: ` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` state.selectedArea.move(-1, 0);` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.RIGHT:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` state.selectedArea.move(1, 0);` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.DELETE:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` app.removeObject(state.selectedArea);` && |\n| &&
- ` state.selectedArea = null;` && |\n| &&
- ` info.unload();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.I:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea) {` && |\n| &&
- ` var coordsForAttributesForm = state.selectedArea.getCoordsForDisplayingInfo();` && |\n| &&
- ` ` && |\n| &&
- ` info.load(` && |\n| &&
- ` state.selectedArea, ` && |\n| &&
- ` coordsForAttributesForm.x + app.getOffset('x'), ` && |\n| &&
- ` coordsForAttributesForm.y + app.getOffset('y')` && |\n| &&
- ` );` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.S:` && |\n| &&
- ` if (ctrlDown) {` && |\n| &&
- ` app.saveInLocalStorage();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case KEYS.C:` && |\n| &&
- ` if (state.appMode === 'editing' && state.selectedArea && ctrlDown) {` && |\n| &&
- ` state.selectedArea = Area.copy(state.selectedArea);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` break;` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` document.addEventListener('keydown', onDocumentKeyDown, false);` && |\n| &&
- ` ` && |\n| &&
- ` // Will moved from the main module` && |\n| &&
- ` var areasIO = {` && |\n| &&
- ` toJSON : function() {` && |\n| &&
- ` var obj = {` && |\n| &&
- ` areas : [],` && |\n| &&
- ` img : state.image.src` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` utils.foreach(state.areas, function(x) {` && |\n| &&
- ` obj.areas.push(x.toJSON());` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` return JSON.stringify(obj);` && |\n| &&
- ` },` && |\n| &&
- ` fromJSON : function(str) {` && |\n| &&
- ` var obj = JSON.parse(str);` && |\n| &&
- ` ` && |\n| &&
- ` app.loadImage(obj.img);` && |\n| &&
- ` ` && |\n| &&
- ` utils.foreach(obj.areas, function(areaParams) {` && |\n| &&
- ` Area.fromJSON(areaParams);` && |\n| &&
- ` }); ` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` var localStorageWrapper = (function() {` && |\n| &&
- ` var KEY_NAME = 'AmihaiAtias';` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` save : function() {` && |\n| &&
- ` var result = areasIO.toJSON();` && |\n| &&
- ` window.localStorage.setItem(KEY_NAME, result);` && |\n| &&
- ` console.info('Editor ' + result + ' saved');` && |\n| &&
- ` ` && |\n| &&
- ` alert('Saved');` && |\n| &&
- ` },` && |\n| &&
- ` restore : function() {` && |\n| &&
- ` areasIO.fromJSON(window.localStorage.getItem(KEY_NAME));` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` domElements : domElements,` && |\n| &&
- ` saveInLocalStorage : localStorageWrapper.save,` && |\n| &&
- ` loadFromLocalStorage : localStorageWrapper.restore,` && |\n| &&
- ` hide : function() {` && |\n| &&
- ` utils.hide(domElements.container);` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` show : function() {` && |\n| &&
- ` utils.show(domElements.container);` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` recalcOffsetValues: function() {` && |\n| &&
- ` recalcOffsetValues();` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` setDimensions : function(width, height) {` && |\n| &&
- ` domElements.svg.setAttribute('width', width);` && |\n| &&
- ` domElements.svg.setAttribute('height', height);` && |\n| &&
- ` domElements.container.style.width = width + 'px';` && |\n| &&
- ` domElements.container.style.height = height + 'px';` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` loadImage : function(url) {` && |\n| &&
- ` //get_image.showLoadIndicator();` && |\n| &&
- ` domElements.img.src = url;` && |\n| &&
- ` state.image.src = url;` && |\n| &&
- ` ` && |\n| &&
- ` domElements.img.onload = function() {` && |\n| &&
- ` //get_image.hideLoadIndicator().hide();` && |\n| &&
- ` app.show()` && |\n| &&
- ` .setDimensions(domElements.img.width, domElements.img.height)` && |\n| &&
- ` .recalcOffsetValues();` && |\n| &&
- ` };` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` preview : (function() {` && |\n| &&
- ` domElements.img.setAttribute('usemap', '#map');` && |\n| &&
- ` domElements.map = document.createElement('map');` && |\n| &&
- ` domElements.map.setAttribute('name', 'map');` && |\n| &&
- ` domElements.container.appendChild(domElements.map);` && |\n| &&
- ` ` && |\n| &&
- ` return function() {` && |\n| &&
- ` info.unload();` && |\n| &&
- ` app.setShape(null);` && |\n| &&
- ` utils.hide(domElements.svg);` && |\n| &&
- ` domElements.map.innerHTML = app.getHTMLCode();` && |\n| &&
- ` code.print();` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` })(),` && |\n| &&
- ` hidePreview : function() {` && |\n| &&
- ` utils.show(domElements.svg);` && |\n| &&
- ` domElements.map.innerHTML = '';` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` addNodeToSvg : function(node) {` && |\n| &&
- ` domElements.svg.appendChild(node);` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` removeNodeFromSvg : function(node) {` && |\n| &&
- ` domElements.svg.removeChild(node);` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getOffset : function(arg) {` && |\n| &&
- ` switch(arg) {` && |\n| &&
- ` case 'x':` && |\n| &&
- ` case 'y':` && |\n| &&
- ` return state.offset[arg];` && |\n| &&
- ` }` && |\n| &&
- ` },` && |\n| &&
- ` clear : function(){` && |\n| &&
- ` //remove all areas` && |\n| &&
- ` state.areas.length = 0;` && |\n| &&
- ` while(domElements.svg.childNodes[0]) {` && |\n| &&
- ` domElements.svg.removeChild(domElements.svg.childNodes[0]);` && |\n| &&
- ` }` && |\n| &&
- ` code.hide();` && |\n| &&
- ` info.unload();` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` removeObject : function(obj) {` && |\n| &&
- ` utils.foreach(state.areas, function(x, i) {` && |\n| &&
- ` if(x === obj) {` && |\n| &&
- ` state.areas.splice(i, 1);` && |\n| &&
- ` }` && |\n| &&
- ` });` && |\n| &&
- ` obj.remove();` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` deselectAll : function() {` && |\n| &&
- ` utils.foreach(state.areas, function(x) {` && |\n| &&
- ` x.deselect();` && |\n| &&
- ` });` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getIsDraw : function() {` && |\n| &&
- ` return state.isDraw;` && |\n| &&
- ` },` && |\n| &&
- ` setIsDraw : function(arg) {` && |\n| &&
- ` state.isDraw = arg;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` setMode : function(arg) {` && |\n| &&
- ` state.appMode = arg;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getMode : function() {` && |\n| &&
- ` return state.appMode;` && |\n| &&
- ` },` && |\n| &&
- ` setShape : function(arg) {` && |\n| &&
- ` state.currentType = arg;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getShape : function() {` && |\n| &&
- ` return state.currentType;` && |\n| &&
- ` },` && |\n| &&
- ` addObject : function(object) {` && |\n| &&
- ` state.areas.push(object);` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getNewArea : function() {` && |\n| &&
- ` return state.newArea;` && |\n| &&
- ` },` && |\n| &&
- ` resetNewArea : function() {` && |\n| &&
- ` state.newArea = null;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getSelectedArea : function() {` && |\n| &&
- ` return state.selectedArea;` && |\n| &&
- ` },` && |\n| &&
- ` setSelectedArea : function(obj) {` && |\n| &&
- ` state.selectedArea = obj;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getEditType : function() {` && |\n| &&
- ` return state.editType;` && |\n| &&
- ` },` && |\n| &&
- ` setFilename : function(str) {` && |\n| &&
- ` state.image.filename = str;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` setEditClass : function() {` && |\n| &&
- ` domElements.container.classList.remove('draw');` && |\n| &&
- ` domElements.container.classList.add('edit');` && |\n| &&
- `` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` setDrawClass : function() {` && |\n| &&
- ` domElements.container.classList.remove('edit');` && |\n| &&
- ` domElements.container.classList.add('draw');` && |\n| &&
- `` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` setDefaultClass : function() {` && |\n| &&
- ` domElements.container.classList.remove('edit');` && |\n| &&
- ` domElements.container.classList.remove('draw');` && |\n| &&
- `` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` addEvent : function(target, eventType, func) {` && |\n| &&
- ` state.events.push(new AppEvent(target, eventType, func));` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` removeAllEvents : function() {` && |\n| &&
- ` utils.foreach(state.events, function(x) {` && |\n| &&
- ` x.remove();` && |\n| &&
- ` });` && |\n| &&
- ` state.events.length = 0;` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` getHTMLCode : function(arg) {` && |\n| &&
- ` var html_code = '';` && |\n| &&
- ` if (arg) {` && |\n| &&
- ` if (!state.areas.length) {` && |\n| &&
- ` return '0 objects';` && |\n| &&
- ` }` && |\n| &&
- ` html_code += utils.encode('<img src="' + state.image.filename + '" alt="" usemap="#map" />') +` && |\n| &&
- ` '<br />' + utils.encode('<map name="map">') + '<br />';` && |\n| &&
- ` utils.foreachReverse(state.areas, function(x) {` && |\n| &&
- ` html_code += ' ' + utils.encode(x.toHTMLMapElementString()) + '<br />';` && |\n| &&
- ` });` && |\n| &&
- ` html_code += utils.encode('</map>');` && |\n| &&
- ` } else {` && |\n| &&
- ` utils.foreachReverse(state.areas, function(x) {` && |\n| &&
- ` html_code += x.toHTMLMapElementString();` && |\n| &&
- ` });` && |\n| &&
- ` }` && |\n| &&
- ` return html_code;` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * The constructor for dom events (for simple deleting of event)` && |\n| &&
- ` * ` && |\n| &&
- ` * @constructor` && |\n| &&
- ` * @param {DOMElement} target - DOM-element` && |\n| &&
- ` * @param {String} eventType - e.g. 'click' or 'mousemove'` && |\n| &&
- ` * @param {Function} func - handler for this event` && |\n| &&
- ` */` && |\n| &&
- ` function AppEvent(target, eventType, func) {` && |\n| &&
- ` this.target = target;` && |\n| &&
- ` this.eventType = eventType;` && |\n| &&
- ` this.func = func;` && |\n| &&
- ` ` && |\n| &&
- ` target.addEventListener(eventType, func, false);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Remove this event listener from target` && |\n| &&
- ` */` && |\n| &&
- ` AppEvent.prototype.remove = function() {` && |\n| &&
- ` this.target.removeEventListener(this.eventType, this.func, false);` && |\n| &&
- ` };` && |\n| &&
- `` && |\n|.
- result = result &&
- ` function Helper(node, x, y, action) {` && |\n| &&
- ` this._el = document.createElementNS(Area.SVG_NS, 'rect');` && |\n| &&
- ` ` && |\n| &&
- ` this._el.classList.add(Helper.CLASS_NAME);` && |\n| &&
- ` this._el.setAttribute('height', Helper.SIZE);` && |\n| &&
- ` this._el.setAttribute('width', Helper.SIZE);` && |\n| &&
- ` this._el.setAttribute('x', x + Helper.OFFSET);` && |\n| &&
- ` this._el.setAttribute('y', y + Helper.OFFSET);` && |\n| &&
- ` ` && |\n| &&
- ` node.appendChild(this._el);` && |\n| &&
- ` ` && |\n| &&
- ` this._el.action = action; // TODO: move 'action' from dom el to data-attr` && |\n| &&
- ` this._el.classList.add(Helper.ACTIONS_TO_CURSORS[action]);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` Helper.SIZE = 5;` && |\n| &&
- ` Helper.OFFSET = -Math.ceil(Helper.SIZE / 2);` && |\n| &&
- ` Helper.CLASS_NAME = 'helper';` && |\n| &&
- ` Helper.ACTIONS_TO_CURSORS = {` && |\n| &&
- ` 'move' : 'move',` && |\n| &&
- ` 'editLeft' : 'e-resize',` && |\n| &&
- ` 'editRight' : 'w-resize',` && |\n| &&
- ` 'editTop' : 'n-resize',` && |\n| &&
- ` 'editBottom' : 's-resize',` && |\n| &&
- ` 'editTopLeft' : 'nw-resize',` && |\n| &&
- ` 'editTopRight' : 'ne-resize',` && |\n| &&
- ` 'editBottomLeft' : 'sw-resize',` && |\n| &&
- ` 'editBottomRight' : 'se-resize',` && |\n| &&
- ` 'movePoint' : 'pointer'` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Helper.prototype.setCoords = function(x, y) {` && |\n| &&
- ` this._el.setAttribute('x', x + Helper.OFFSET);` && |\n| &&
- ` this._el.setAttribute('y', y + Helper.OFFSET);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Helper.prototype.setId = function(id) {` && |\n| &&
- ` // TODO: move n-field from DOM-element to data-attribute` && |\n| &&
- ` this._el.n = id;` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` function Area(type, coords, attributes) {` && |\n| &&
- ` if (this.constructor === Area) {` && |\n| &&
- ` throw new Error('This is abstract class');` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this._type = type;` && |\n| &&
- ` ` && |\n| &&
- ` this._attributes = {` && |\n| &&
- ` href : '',` && |\n| &&
- ` alt : '',` && |\n| &&
- ` title : '' ` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` if (attributes) {` && |\n| &&
- ` this.setInfoAttributes(attributes);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this._coords = coords;` && |\n| &&
- ` ` && |\n| &&
- ` // the g-element, it contains this area and helpers elements` && |\n| &&
- ` this._groupEl = document.createElementNS(Area.SVG_NS, 'g');` && |\n| &&
- ` app.addNodeToSvg(this._groupEl);` && |\n| &&
- ` ` && |\n| &&
- ` // TODO: remove this field from DOM-element` && |\n| &&
- ` // Link to parent object` && |\n| &&
- ` this._groupEl.obj = this;` && |\n| &&
- ` ` && |\n| &&
- ` // svg-dom-element of area` && |\n| &&
- ` this._el = null; ` && |\n| &&
- ` ` && |\n| &&
- ` // Object with all helpers of area` && |\n| &&
- ` this._helpers = {};` && |\n| &&
- ` ` && |\n| &&
- ` // Add this new area to list of all areas ` && |\n| &&
- ` app.addObject(this);` && |\n| &&
- ` }` && |\n| &&
- ` Area.SVG_NS = 'http://www.w3.org/2000/svg'; // TODO: move to main editor constructor` && |\n| &&
- ` Area.CLASS_NAMES = {` && |\n| &&
- ` SELECTED : 'selected',` && |\n| &&
- ` WITH_HREF : 'with_href'` && |\n| &&
- ` };` && |\n| &&
- ` Area.CONSTRUCTORS = {` && |\n| &&
- ` rectangle : Rectangle,` && |\n| &&
- ` circle : Circle,` && |\n| &&
- ` polygon : Polygon` && |\n| &&
- ` };` && |\n| &&
- ` Area.REGEXP = {` && |\n| &&
- ` AREA : /<area(?=.*? shape="(rect|circle|poly)")(?=.*? coords="([\d ,]+?)")[\s\S]*?>/gmi,` && |\n| &&
- ` HREF : / href="([\S\s]+?)"/,` && |\n| &&
- ` ALT : / alt="([\S\s]+?)"/,` && |\n| &&
- ` TITLE : / title="([\S\s]+?)"/,` && |\n| &&
- ` DELIMETER : / ?, ?/` && |\n| &&
- ` };` && |\n| &&
- ` Area.HTML_NAMES_TO_AREA_NAMES = {` && |\n| &&
- ` rect : 'rectangle',` && |\n| &&
- ` circle : 'circle',` && |\n| &&
- ` poly : 'polygon'` && |\n| &&
- ` };` && |\n| &&
- ` Area.ATTRIBUTES_NAMES = ['HREF', 'ALT', 'TITLE'];` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * This method should be implemented for child-classes ` && |\n| &&
- ` * ` && |\n| &&
- ` * @throws {AbstractMethodCall}` && |\n| &&
- ` */` && |\n| &&
- ` Area.prototype.ABSTRACT_METHOD = function() {` && |\n| &&
- ` throw new Error('This is abstract method');` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * All these methods are abstract ` && |\n| &&
- ` * ` && |\n| &&
- ` * @throws {AbstractMethodCall}` && |\n| &&
- ` */` && |\n| &&
- ` Area.prototype.setSVGCoords =` && |\n| &&
- ` Area.prototype.setCoords = ` && |\n| &&
- ` Area.prototype.dynamicDraw = ` && |\n| &&
- ` Area.prototype.onProcessDrawing = ` && |\n| &&
- ` Area.prototype.onStopDrawing = ` && |\n| &&
- ` Area.prototype.edit = ` && |\n| &&
- ` Area.prototype.dynamicEdit = ` && |\n| &&
- ` Area.prototype.onProcessEditing = ` && |\n| &&
- ` Area.prototype.onStopEditing = ` && |\n| &&
- ` Area.prototype.toString = ` && |\n| &&
- ` Area.prototype.toHTMLMapElementString =` && |\n| &&
- ` Area.prototype.getCoordsForDisplayingInfo = ` && |\n| &&
- ` Area.prototype.ABSTRACT_METHOD;` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.redraw = function(coords) {` && |\n| &&
- ` this.setSVGCoords(coords ? coords : this._coords);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Remove this area from DOM-tree` && |\n| &&
- ` */` && |\n| &&
- ` Area.prototype.remove = function() {` && |\n| &&
- ` app.removeNodeFromSvg(this._groupEl);` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` /**` && |\n| &&
- ` * Move this area by dx, dy ` && |\n| &&
- ` * ` && |\n| &&
- ` * @returns {Area} - this area` && |\n| &&
- ` */` && |\n| &&
- ` Area.prototype.move = function(dx, dy) {` && |\n| &&
- ` this.setCoords(this.edit('move', dx, dy)).redraw();` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.select = function() {` && |\n| &&
- ` this._el.classList.add(Area.CLASS_NAMES.SELECTED);` && |\n| &&
- ` console.info(this.toString() + ' is selected now');` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.deselect = function() {` && |\n| &&
- ` this._el.classList.remove(Area.CLASS_NAMES.SELECTED);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.setStyleOfElementWithHref = function() {` && |\n| &&
- ` this._el.classList.add(Area.CLASS_NAMES.WITH_HREF);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.unsetStyleOfElementWithHref = function() {` && |\n| &&
- ` this._el.classList.remove(Area.CLASS_NAMES.WITH_HREF);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.setInfoAttributes = function(attributes) {` && |\n| &&
- ` this._attributes.href = attributes.href;` && |\n| &&
- ` this._attributes.alt = attributes.alt;` && |\n| &&
- ` this._attributes.title = attributes.title;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Area.prototype.toJSON = function() {` && |\n| &&
- ` return {` && |\n| &&
- ` type : this._type,` && |\n| &&
- ` coords : this._coords,` && |\n| &&
- ` attributes : this._attributes` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Returns new area object created with params from json-object` && |\n| &&
- ` * ` && |\n| &&
- ` * @static` && |\n| &&
- ` * @param params {Object} - params of area, incl. type, coords and attributes` && |\n| &&
- ` * @returns {Rectangle|Circle|Polygon}` && |\n| &&
- ` */` && |\n| &&
- ` Area.fromJSON = function(params) {` && |\n| &&
- ` var AreaConstructor = Area.CONSTRUCTORS[params.type];` && |\n| &&
- ` ` && |\n| &&
- ` if (!AreaConstructor) {` && |\n| &&
- ` throw new Error('This area type is not valid');` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` if (!AreaConstructor.testCoords(params.coords)) {` && |\n| &&
- ` throw new Error('This coords is not valid for ' + params.type);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` app.setIsDraw(true);` && |\n| &&
- ` ` && |\n| &&
- ` var area = new AreaConstructor(params.coords, params.attributes);` && |\n| &&
- ` ` && |\n| &&
- ` app.setIsDraw(false)` && |\n| &&
- ` .resetNewArea();` && |\n| &&
- ` ` && |\n| &&
- ` return area;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Area.createAreasFromHTMLOfMap = function(htmlStr) {` && |\n| &&
- ` if (!htmlStr) {` && |\n| &&
- ` return false;` && |\n| &&
- ` } ` && |\n| &&
- `` && |\n| &&
- ` while (true) {` && |\n| &&
- ` var findedResult = Area.REGEXP.AREA.exec(htmlStr); // <area shape="$1" coords="$2" ... />` && |\n| &&
- ` if (!findedResult) {` && |\n| &&
- ` break;` && |\n| &&
- ` } ` && |\n| &&
- `` && |\n| &&
- ` var htmlAreaFinded = findedResult[0], // <area shape="..." coords="..." ... />` && |\n| &&
- ` type = findedResult[1], // $1` && |\n| &&
- ` coords = findedResult[2].split(Area.REGEXP.DELIMETER), // $2` && |\n| &&
- ` attributes = {}; ` && |\n| &&
- ` ` && |\n| &&
- ` Area.ATTRIBUTES_NAMES.forEach(function(item, i) {` && |\n| &&
- ` var result = Area.REGEXP[item].exec(htmlAreaFinded);` && |\n| &&
- `` && |\n| &&
- ` if (result) {` && |\n| &&
- ` attributes[name] = result[1];` && |\n| &&
- ` } ` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` coords = coords.map(function(item) {` && |\n| &&
- ` return Number(item);` && |\n| &&
- ` });` && |\n| &&
- `` && |\n| &&
- ` type = Area.HTML_NAMES_TO_AREA_NAMES[type];` && |\n| &&
- `` && |\n| &&
- ` Area.fromJSON({` && |\n| &&
- ` type : type,` && |\n| &&
- ` coords : Area.CONSTRUCTORS[type].getCoordsFromHTMLArray(coords),` && |\n| &&
- ` attributes : attributes` && |\n| &&
- ` });` && |\n| &&
- `` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return Boolean(htmlAreaFinded);` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` /**` && |\n| &&
- ` * Returns copy of original area, selected and moved by (10,10) from it` && |\n| &&
- ` * ` && |\n| &&
- ` * @param originalArea {Area}` && |\n| &&
- ` * @returns {Area} - a copy of original area` && |\n| &&
- ` */` && |\n| &&
- ` Area.copy = function(originalArea) {` && |\n| &&
- ` return Area.fromJSON(originalArea.toJSON()).move(10, 10).select();` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` function Rectangle(coords, attributes) {` && |\n| &&
- ` Area.call(this, 'rectangle', coords, attributes);` && |\n| &&
- ` ` && |\n| &&
- ` this._coords = {` && |\n| &&
- ` x : coords.x || 0, ` && |\n| &&
- ` y : coords.y || 0,` && |\n| &&
- ` width : coords.width || 0, ` && |\n| &&
- ` height : coords.height || 0` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` this._el = document.createElementNS(Area.SVG_NS, 'rect');` && |\n| &&
- ` this._groupEl.appendChild(this._el);` && |\n| &&
- ` ` && |\n| &&
- ` var x = coords.x - this._coords.width / 2,` && |\n| &&
- ` y = coords.y - this._coords.height / 2;` && |\n| &&
- ` ` && |\n| &&
- ` this._helpers = {` && |\n| &&
- ` center : new Helper(this._groupEl, x, y, 'move'),` && |\n| &&
- ` top : new Helper(this._groupEl, x, y, 'editTop'),` && |\n| &&
- ` bottom : new Helper(this._groupEl, x, y, 'editBottom'),` && |\n| &&
- ` left : new Helper(this._groupEl, x, y, 'editLeft'),` && |\n| &&
- ` right : new Helper(this._groupEl, x, y, 'editRight'),` && |\n| &&
- ` topLeft : new Helper(this._groupEl, x, y, 'editTopLeft'),` && |\n| &&
- ` topRight : new Helper(this._groupEl, x, y, 'editTopRight'),` && |\n| &&
- ` bottomLeft : new Helper(this._groupEl, x, y, 'editBottomLeft'),` && |\n| &&
- ` bottomRight : new Helper(this._groupEl, x, y, 'editBottomRight')` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw();` && |\n| &&
- ` }` && |\n| &&
- ` utils.inherits(Rectangle, Area);` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.setSVGCoords = function(coords) {` && |\n| &&
- ` this._el.setAttribute('x', coords.x);` && |\n| &&
- ` this._el.setAttribute('y', coords.y);` && |\n| &&
- ` this._el.setAttribute('width', coords.width);` && |\n| &&
- ` this._el.setAttribute('height', coords.height);` && |\n| &&
- ` ` && |\n| &&
- ` var top = coords.y,` && |\n| &&
- ` center_y = coords.y + coords.height / 2,` && |\n| &&
- ` bottom = coords.y + coords.height,` && |\n| &&
- ` left = coords.x,` && |\n| &&
- ` center_x = coords.x + coords.width / 2,` && |\n| &&
- ` right = coords.x + coords.width;` && |\n| &&
- ` ` && |\n| &&
- ` this._helpers.center.setCoords(center_x, center_y);` && |\n| &&
- ` this._helpers.top.setCoords(center_x, top);` && |\n| &&
- ` this._helpers.bottom.setCoords(center_x, bottom);` && |\n| &&
- ` this._helpers.left.setCoords(left, center_y);` && |\n| &&
- ` this._helpers.right.setCoords(right, center_y);` && |\n| &&
- ` this._helpers.topLeft.setCoords(left, top);` && |\n| &&
- ` this._helpers.topRight.setCoords(right, top);` && |\n| &&
- ` this._helpers.bottomLeft.setCoords(left, bottom);` && |\n| &&
- ` this._helpers.bottomRight.setCoords(right, bottom);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.setCoords = function(coords) {` && |\n| &&
- ` this._coords.x = coords.x;` && |\n| &&
- ` this._coords.y = coords.y;` && |\n| &&
- ` this._coords.width = coords.width;` && |\n| &&
- ` this._coords.height = coords.height;` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.dynamicDraw = function(x, y, isSquare) {` && |\n| &&
- ` var newCoords = {` && |\n| &&
- ` x : this._coords.x,` && |\n| &&
- ` y : this._coords.y,` && |\n| &&
- ` width : x - this._coords.x,` && |\n| &&
- ` height: y - this._coords.y` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` if (isSquare) {` && |\n| &&
- ` newCoords = Rectangle.getSquareCoords(newCoords);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` newCoords = Rectangle.getNormalizedCoords(newCoords);` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw(newCoords);` && |\n| &&
- ` ` && |\n| &&
- ` return newCoords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.onProcessDrawing = function(e) {` && |\n| &&
- ` var coords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- ` ` && |\n| &&
- ` this.dynamicDraw(coords.x, coords.y, e.shiftKey);` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.onStopDrawing = function(e) {` && |\n| &&
- ` var coords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- ` ` && |\n| &&
- ` this.setCoords(this.dynamicDraw(coords.x, coords.y, e.shiftKey)).deselect();` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents()` && |\n| &&
- ` .setIsDraw(false)` && |\n| &&
- ` .resetNewArea();` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.edit = function(editingType, dx, dy) {` && |\n| &&
- ` var tempParams = Object.create(this._coords);` && |\n| &&
- ` ` && |\n| &&
- ` switch (editingType) {` && |\n| &&
- ` case 'move':` && |\n| &&
- ` tempParams.x += dx;` && |\n| &&
- ` tempParams.y += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editLeft':` && |\n| &&
- ` tempParams.x += dx; ` && |\n| &&
- ` tempParams.width -= dx;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editRight':` && |\n| &&
- ` tempParams.width += dx;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editTop':` && |\n| &&
- ` tempParams.y += dy;` && |\n| &&
- ` tempParams.height -= dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editBottom':` && |\n| &&
- ` tempParams.height += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editTopLeft':` && |\n| &&
- ` tempParams.x += dx;` && |\n| &&
- ` tempParams.y += dy;` && |\n| &&
- ` tempParams.width -= dx;` && |\n| &&
- ` tempParams.height -= dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editTopRight':` && |\n| &&
- ` tempParams.y += dy;` && |\n| &&
- ` tempParams.width += dx;` && |\n| &&
- ` tempParams.height -= dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editBottomLeft':` && |\n| &&
- ` tempParams.x += dx;` && |\n| &&
- ` tempParams.width -= dx;` && |\n| &&
- ` tempParams.height += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editBottomRight':` && |\n| &&
- ` tempParams.width += dx;` && |\n| &&
- ` tempParams.height += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` }` && |\n| &&
- `` && |\n|.
- result = result &&
- ` return tempParams;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.dynamicEdit = function(coords, saveProportions) {` && |\n| &&
- ` coords = Rectangle.getNormalizedCoords(coords);` && |\n| &&
- ` ` && |\n| &&
- ` if (saveProportions) {` && |\n| &&
- ` coords = Rectangle.getSavedProportionsCoords(coords);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw(coords);` && |\n| &&
- ` ` && |\n| &&
- ` return coords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.onProcessEditing = function(e) {` && |\n| &&
- ` return this.dynamicEdit(` && |\n| &&
- ` this.edit(` && |\n| &&
- ` app.getEditType(),` && |\n| &&
- ` e.pageX - this.editingStartPoint.x,` && |\n| &&
- ` e.pageY - this.editingStartPoint.y` && |\n| &&
- ` ),` && |\n| &&
- ` e.shiftKey` && |\n| &&
- ` );` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.onStopEditing = function(e) {` && |\n| &&
- ` this.setCoords(this.onProcessEditing(e));` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Rectangle.prototype.toString = function() {` && |\n| &&
- ` return 'Rectangle {x: '+ this._coords.x + ` && |\n| &&
- ` ', y: ' + this._coords.y + ` && |\n| &&
- ` ', width: ' + this._coords.width + ` && |\n| &&
- ` ', height: ' + this._coords.height + '}';` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.prototype.toHTMLMapElementString = function() {` && |\n| &&
- ` var x2 = this._coords.x + this._coords.width,` && |\n| &&
- ` y2 = this._coords.y + this._coords.height;` && |\n| &&
- ` ` && |\n| &&
- ` return '<area shape="rect" coords="' // TODO: use template engine` && |\n| &&
- ` + this._coords.x + ', '` && |\n| &&
- ` + this._coords.y + ', '` && |\n| &&
- ` + x2 + ', '` && |\n| &&
- ` + y2` && |\n| &&
- ` + '"'` && |\n| &&
- ` + (this._attributes.href ? ' href="' + this._attributes.href + '"' : '')` && |\n| &&
- ` + (this._attributes.alt ? ' alt="' + this._attributes.alt + '"' : '')` && |\n| &&
- ` + (this._attributes.title ? ' title="' + this._attributes.title + '"' : '')` && |\n| &&
- ` + ' />';` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Rectangle.prototype.getCoordsForDisplayingInfo = function() {` && |\n| &&
- ` return {` && |\n| &&
- ` x : this._coords.x,` && |\n| &&
- ` y : this._coords.y` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.testCoords = function(coords) {` && |\n| &&
- ` return coords.x && coords.y && coords.width && coords.height;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.testHTMLCoords = function(coords) {` && |\n| &&
- ` return coords.length === 4;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Rectangle.getCoordsFromHTMLArray = function(htmlCoordsArray) {` && |\n| &&
- ` if (!Rectangle.testHTMLCoords(htmlCoordsArray)) { ` && |\n| &&
- ` throw new Error('This html-coordinates is not valid for rectangle');` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return {` && |\n| &&
- ` x : htmlCoordsArray[0],` && |\n| &&
- ` y : htmlCoordsArray[1],` && |\n| &&
- ` width : htmlCoordsArray[2] - htmlCoordsArray[0],` && |\n| &&
- ` height : htmlCoordsArray[3] - htmlCoordsArray[1]` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Rectangle.getNormalizedCoords = function(coords) {` && |\n| &&
- ` if (coords.width < 0) {` && |\n| &&
- ` coords.x += coords.width;` && |\n| &&
- ` coords.width = Math.abs(coords.width);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` if (coords.height < 0) {` && |\n| &&
- ` coords.y += coords.height;` && |\n| &&
- ` coords.height = Math.abs(coords.height);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return coords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.getSquareCoords = function(coords) {` && |\n| &&
- ` var width = Math.abs(coords.width),` && |\n| &&
- ` height = Math.abs(coords.height);` && |\n| &&
- ` ` && |\n| &&
- ` if (width > height) {` && |\n| &&
- ` coords.width = coords.width > 0 ? height : -height;` && |\n| &&
- ` } else {` && |\n| &&
- ` coords.height = coords.height > 0 ? width : -width;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return coords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.getSavedProportionsCoords = function(coords, originalCoords) {` && |\n| &&
- ` var originalProportions = coords.width / coords.height,` && |\n| &&
- ` currentProportions = originalCoords.width / originalCoords.height;` && |\n| &&
- ` ` && |\n| &&
- ` if (currentProportions > originalProportions) {` && |\n| &&
- ` coords.width = Math.round(coords.height * originalProportions);` && |\n| &&
- ` } else {` && |\n| &&
- ` coords.height = Math.round(coords.width / originalProportions);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return coords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Rectangle.createAndStartDrawing = function(firstPointCoords) {` && |\n| &&
- ` var newArea = new Rectangle({` && |\n| &&
- ` x : firstPointCoords.x,` && |\n| &&
- ` y : firstPointCoords.y,` && |\n| &&
- ` width: 0,` && |\n| &&
- ` height: 0` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(app.domElements.container, 'mousemove', newArea.onProcessDrawing.bind(newArea))` && |\n| &&
- ` .addEvent(app.domElements.container, 'click', newArea.onStopDrawing.bind(newArea));` && |\n| &&
- ` ` && |\n| &&
- ` return newArea;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- `` && |\n| &&
- ` function Circle(coords, attributes) {` && |\n| &&
- ` Area.call(this, 'circle', coords, attributes);` && |\n| &&
- ` ` && |\n| &&
- ` this._coords = {` && |\n| &&
- ` cx : coords.cx || 0,` && |\n| &&
- ` cy : coords.cy || 0,` && |\n| &&
- ` radius : coords.radius || 0 ` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` this._el = document.createElementNS(Area.SVG_NS, 'circle');` && |\n| &&
- ` this._groupEl.appendChild(this._el);` && |\n| &&
- ` ` && |\n| &&
- ` this.helpers = {` && |\n| &&
- ` center : new Helper(this._groupEl, coords.cx, coords.cy, 'move'),` && |\n| &&
- ` top : new Helper(this._groupEl, coords.cx, coords.cy, 'editTop'),` && |\n| &&
- ` bottom : new Helper(this._groupEl, coords.cx, coords.cy, 'editBottom'),` && |\n| &&
- ` left : new Helper(this._groupEl, coords.cx, coords.cy, 'editLeft'),` && |\n| &&
- ` right : new Helper(this._groupEl, coords.cx, coords.cy, 'editRight')` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw();` && |\n| &&
- ` }` && |\n| &&
- ` utils.inherits(Circle, Area);` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.setSVGCoords = function(coords) {` && |\n| &&
- ` this._el.setAttribute('cx', coords.cx);` && |\n| &&
- ` this._el.setAttribute('cy', coords.cy);` && |\n| &&
- ` this._el.setAttribute('r', coords.radius);` && |\n| &&
- ` ` && |\n| &&
- ` this.helpers.center.setCoords(coords.cx, coords.cy);` && |\n| &&
- ` this.helpers.top.setCoords(coords.cx, coords.cy - coords.radius);` && |\n| &&
- ` this.helpers.right.setCoords(coords.cx + coords.radius, coords.cy);` && |\n| &&
- ` this.helpers.bottom.setCoords(coords.cx, coords.cy + coords.radius);` && |\n| &&
- ` this.helpers.left.setCoords(coords.cx - coords.radius, coords.cy);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.setCoords = function(coords) {` && |\n| &&
- ` this._coords.cx = coords.cx;` && |\n| &&
- ` this._coords.cy = coords.cy;` && |\n| &&
- ` this._coords.radius = coords.radius;` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.dynamicDraw = function(x, y) {` && |\n| &&
- ` var radius = Math.round(` && |\n| &&
- ` Math.sqrt(` && |\n| &&
- ` Math.pow(this._coords.cx - x, 2) +` && |\n| &&
- ` Math.pow(this._coords.cy - y, 2)` && |\n| &&
- ` )` && |\n| &&
- ` ),` && |\n| &&
- ` newCoords = {` && |\n| &&
- ` cx : this._coords.cx,` && |\n| &&
- ` cy : this._coords.cy,` && |\n| &&
- ` radius : radius` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` this.redraw(newCoords);` && |\n| &&
- ` ` && |\n| &&
- ` return newCoords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.onProcessDrawing = function(e) {` && |\n| &&
- ` var coords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- ` ` && |\n| &&
- ` this.dynamicDraw(coords.x, coords.y);` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.onStopDrawing = function(e) {` && |\n| &&
- ` var coords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- ` ` && |\n| &&
- ` this.setCoords(this.dynamicDraw(coords.x, coords.y)).deselect();` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents()` && |\n| &&
- ` .setIsDraw(false)` && |\n| &&
- ` .resetNewArea();` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.edit = function(editingType, dx, dy) {` && |\n| &&
- ` var tempParams = Object.create(this._coords);` && |\n| &&
- ` ` && |\n| &&
- ` switch (editingType) {` && |\n| &&
- ` case 'move':` && |\n| &&
- ` tempParams.cx += dx;` && |\n| &&
- ` tempParams.cy += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editTop':` && |\n| &&
- ` tempParams.radius -= dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editBottom':` && |\n| &&
- ` tempParams.radius += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editLeft':` && |\n| &&
- ` tempParams.radius -= dx;` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'editRight':` && |\n| &&
- ` tempParams.radius += dx;` && |\n| &&
- ` break;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return tempParams;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.dynamicEdit = function(tempCoords) {` && |\n| &&
- ` if (tempCoords.radius < 0) {` && |\n| &&
- ` tempCoords.radius = Math.abs(tempCoords.radius);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this.setSVGCoords(tempCoords);` && |\n| &&
- ` ` && |\n| &&
- ` return tempCoords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.onProcessEditing = function(e) {` && |\n| &&
- ` var editType = app.getEditType();` && |\n| &&
- ` ` && |\n| &&
- ` return this.dynamicEdit(` && |\n| &&
- ` this.edit(editType, e.pageX - this.editingStartPoint.x, e.pageY - this.editingStartPoint.y)` && |\n| &&
- ` );` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.onStopEditing = function(e) {` && |\n| &&
- ` var editType = app.getEditType();` && |\n| &&
- ` ` && |\n| &&
- ` this.setCoords(this.onProcessEditing(e));` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Returns string-representation of circle` && |\n| &&
- ` * ` && |\n| &&
- ` * @returns {string}` && |\n| &&
- ` */` && |\n| &&
- ` Circle.prototype.toString = function() {` && |\n| &&
- ` return 'Circle {cx: '+ this._coords.cx +` && |\n| &&
- ` ', cy: ' + this._coords.cy +` && |\n| &&
- ` ', radius: ' + this._coords.radius + '}';` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` Circle.prototype.toHTMLMapElementString = function() {` && |\n| &&
- ` return '<area shape="circle" coords="'` && |\n| &&
- ` + this._coords.cx + ', '` && |\n| &&
- ` + this._coords.cy + ', '` && |\n| &&
- ` + this._coords.radius` && |\n| &&
- ` + '"'` && |\n| &&
- ` + (this._attributes.href ? ' href="' + this._attributes.href + '"' : '')` && |\n| &&
- ` + (this._attributes.alt ? ' alt="' + this._attributes.alt + '"' : '')` && |\n| &&
- ` + (this._attributes.title ? ' title="' + this._attributes.title + '"' : '')` && |\n| &&
- ` + ' />';` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` /**` && |\n| &&
- ` * Returns coords for area attributes form` && |\n| &&
- ` * ` && |\n| &&
- ` * @returns {Object} - coordinates of point` && |\n| &&
- ` */` && |\n| &&
- ` Circle.prototype.getCoordsForDisplayingInfo = function() {` && |\n| &&
- ` return {` && |\n| &&
- ` x : this._coords.cx,` && |\n| &&
- ` y : this._coords.cy` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.testCoords = function(coords) {` && |\n| &&
- ` return coords.cx && coords.cy && coords.radius;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Circle.testHTMLCoords = function(coords) {` && |\n| &&
- ` return coords.length === 3;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Circle.getCoordsFromHTMLArray = function(htmlCoordsArray) {` && |\n| &&
- ` if (!Circle.testHTMLCoords(htmlCoordsArray)) { ` && |\n| &&
- ` throw new Error('This html-coordinates is not valid for circle');` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return {` && |\n| &&
- ` cx : htmlCoordsArray[0],` && |\n| &&
- ` cy : htmlCoordsArray[1],` && |\n| &&
- ` radius : htmlCoordsArray[2]` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Circle.createAndStartDrawing = function(firstPointCoords) {` && |\n| &&
- ` var newArea = new Circle({` && |\n| &&
- ` cx : firstPointCoords.x,` && |\n| &&
- ` cy : firstPointCoords.y,` && |\n| &&
- ` radius : 0` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(app.domElements.container, 'mousemove', newArea.onProcessDrawing.bind(newArea))` && |\n| &&
- ` .addEvent(app.domElements.container, 'click', newArea.onStopDrawing.bind(newArea));` && |\n| &&
- ` ` && |\n| &&
- ` return newArea;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` function Polygon(coords, attributes) {` && |\n| &&
- ` Area.call(this, 'polygon', coords, attributes);` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * @namespace` && |\n| &&
- ` * @property {Array} points - Array with coordinates of polygon points` && |\n| &&
- ` */` && |\n| &&
- ` this._coords = {` && |\n| &&
- ` points : coords.points || [{x: 0, y: 0}],` && |\n| &&
- ` isOpened : coords.isOpened || false` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` this._el = document.createElementNS(` && |\n| &&
- ` Area.SVG_NS, ` && |\n| &&
- ` this._coords.isOpened ? 'polyline' : 'polygon'` && |\n| &&
- ` );` && |\n| &&
- ` this._groupEl.appendChild(this._el);` && |\n| &&
- `` && |\n| &&
- ` this._helpers = { ` && |\n| &&
- ` points : []` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` for (var i = 0, c = this._coords.points.length; i < c; i++) {` && |\n| &&
- ` this._helpers.points.push(` && |\n| &&
- ` (new Helper(` && |\n| &&
- ` this._groupEl, ` && |\n| &&
- ` this._coords.points[i].x, ` && |\n| &&
- ` this._coords.points[i].y, ` && |\n| &&
- ` 'movePoint')` && |\n| &&
- ` ).setId(i)` && |\n| &&
- ` );` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this._selectedPoint = -1;` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw();` && |\n| &&
- ` }` && |\n| &&
- ` utils.inherits(Polygon, Area);` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.close = function() {` && |\n| &&
- ` var polyline = this._el;` && |\n| &&
- ` this._el = document.createElementNS(Area.SVG_NS, 'polygon');` && |\n| &&
- ` this._groupEl.replaceChild(this._el, polyline);` && |\n| &&
- `` && |\n| &&
- ` this._coords.isOpened = false;` && |\n| &&
- ` this.redraw().deselect();` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n|.
-
- result = result &&
- ` Polygon.prototype.setSVGCoords = function(coords) {` && |\n| &&
- ` var polygonPointsAttrValue = coords.points.reduce(function(previousValue, currentItem) {` && |\n| &&
- ` return previousValue + currentItem.x + ' ' + currentItem.y + ' ';` && |\n| &&
- ` }, '');` && |\n| &&
- ` ` && |\n| &&
- ` this._el.setAttribute('points', polygonPointsAttrValue);` && |\n| &&
- ` utils.foreach(this._helpers.points, function(helper, i) {` && |\n| &&
- ` helper.setCoords(coords.points[i].x, coords.points[i].y);` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.setCoords = function(coords) {` && |\n| &&
- ` this._coords.points = coords.points;` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.addPoint = function(x, y) {` && |\n| &&
- ` if (!this._coords.isOpened) {` && |\n| &&
- ` throw new Error('This polygon is closed!');` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` var helper = new Helper(this._groupEl, x, y, 'movePoint');` && |\n| &&
- ` helper.setId(this._helpers.points.length);` && |\n| &&
- `` && |\n| &&
- ` this._helpers.points.push(helper);` && |\n| &&
- ` this._coords.points.push({` && |\n| &&
- ` x : x, ` && |\n| &&
- ` y : y` && |\n| &&
- ` });` && |\n| &&
- ` this.redraw();` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.dynamicDraw = function(x, y, isRightAngle) {` && |\n| &&
- ` var temp_coords = {` && |\n| &&
- ` points: [].concat(this._coords.points)` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` if (isRightAngle) {` && |\n| &&
- ` var rightPointCoords = Polygon.getRightAngleLineLastPointCoords(` && |\n| &&
- ` this._coords, {x: x, y: y}` && |\n| &&
- ` );` && |\n| &&
- ` x = rightPointCoords.x;` && |\n| &&
- ` y = rightPointCoords.y;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` temp_coords.points.push({x : x, y : y});` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw(temp_coords);` && |\n| &&
- ` ` && |\n| &&
- ` return temp_coords;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.onProcessDrawing = function(e) {` && |\n| &&
- ` var coords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- ` ` && |\n| &&
- ` this.dynamicDraw(coords.x, coords.y, e.shiftKey);` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.onAddPointDrawing = function(e) {` && |\n| &&
- ` var newPointCoords = utils.getRightCoords(e.pageX, e.pageY);` && |\n| &&
- `` && |\n| &&
- ` if (e.shiftKey) {` && |\n| &&
- ` newPointCoords = Polygon.getRightAngleLineLastPointCoords(this._coords, newPointCoords);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` this.addPoint(newPointCoords.x, newPointCoords.y);` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.onStopDrawing = function(e) {` && |\n| &&
- ` if (e.type == 'click' || (e.type == 'keydown' && e.keyCode == 13)) {` && |\n| &&
- ` if (Polygon.testCoords(this._coords)) {` && |\n| &&
- ` this.close();` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents()` && |\n| &&
- ` .setIsDraw(false)` && |\n| &&
- ` .resetNewArea();` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` e.stopPropagation();` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Polygon.prototype.edit = function(editingType, dx, dy) {` && |\n| &&
- ` var tempParams = Object.create(this._coords);` && |\n| &&
- ` ` && |\n| &&
- ` switch (editingType) {` && |\n| &&
- ` case 'move':` && |\n| &&
- ` for (var i = 0, c = tempParams.points.length; i < c; i++) {` && |\n| &&
- ` tempParams.points[i].x += dx;` && |\n| &&
- ` tempParams.points[i].y += dy;` && |\n| &&
- ` }` && |\n| &&
- ` break;` && |\n| &&
- ` ` && |\n| &&
- ` case 'movePoint':` && |\n| &&
- ` tempParams.points[this.selected_point].x += dx;` && |\n| &&
- ` tempParams.points[this.selected_point].y += dy;` && |\n| &&
- ` break;` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return tempParams;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.onProcessEditing = function(e) {` && |\n| &&
- ` var editType = app.getEditType();` && |\n| &&
- ` ` && |\n| &&
- ` this.redraw(` && |\n| &&
- ` this.edit(` && |\n| &&
- ` editType, ` && |\n| &&
- ` e.pageX - this.editingStartPoint.x, ` && |\n| &&
- ` e.pageY - this.editingStartPoint.y` && |\n| &&
- ` )` && |\n| &&
- ` );` && |\n| &&
- `` && |\n| &&
- ` this.editingStartPoint.x = e.pageX;` && |\n| &&
- ` this.editingStartPoint.y = e.pageY;` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.onStopEditing = function(e) {` && |\n| &&
- ` var editType = app.getEditType();` && |\n| &&
- ` ` && |\n| &&
- ` this.setCoords(` && |\n| &&
- ` this.edit(` && |\n| &&
- ` editType, ` && |\n| &&
- ` e.pageX - this.editingStartPoint.x, ` && |\n| &&
- ` e.pageY - this.editingStartPoint.y` && |\n| &&
- ` )` && |\n| &&
- ` ).redraw();` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` /**` && |\n| &&
- ` * Returns string-representation of polygon` && |\n| &&
- ` * ` && |\n| &&
- ` * @returns {string}` && |\n| &&
- ` */` && |\n| &&
- ` Polygon.prototype.toString = function() {` && |\n| &&
- ` return 'Polygon {points: ['+ ` && |\n| &&
- ` this._coords.points.map(function(item) {` && |\n| &&
- ` return '[' + item.x + ', ' + item.y + ']'` && |\n| &&
- ` }).join(', ') + ']}';` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.prototype.toHTMLMapElementString = function() {` && |\n| &&
- ` var str = this._coords.points.map(function(item) {` && |\n| &&
- ` return item.x + ', ' + item.y;` && |\n| &&
- ` }).join(', ');` && |\n| &&
- ` ` && |\n| &&
- ` return '<area shape="poly" coords="'` && |\n| &&
- ` + str` && |\n| &&
- ` + '"'` && |\n| &&
- ` + (this._attributes.href ? ' href="' + this._attributes.href + '"' : '')` && |\n| &&
- ` + (this._attributes.alt ? ' alt="' + this._attributes.alt + '"' : '')` && |\n| &&
- ` + (this._attributes.title ? ' title="' + this._attributes.title + '"' : '')` && |\n| &&
- ` + ' />';` && |\n| &&
- ` };` && |\n|.
- result = result && |\n| &&
- ` Polygon.prototype.getCoordsForDisplayingInfo = function() {` && |\n| &&
- ` return {` && |\n| &&
- ` x : this._coords.points[0].x,` && |\n| &&
- ` y : this._coords.points[0].y` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.testCoords = function(coords) {` && |\n| &&
- ` return coords.points.length >= 3;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Polygon.testHTMLCoords = function(coords) {` && |\n| &&
- ` return coords.length >= 6 && coords.length % 2 === 0;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Polygon.getCoordsFromHTMLArray = function(htmlCoordsArray) {` && |\n| &&
- ` if (!Polygon.testHTMLCoords(htmlCoordsArray)) { ` && |\n| &&
- ` throw new Error('This html-coordinates is not valid for polygon');` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` var points = [];` && |\n| &&
- ` for (var i = 0, c = htmlCoordsArray.length/2; i < c; i++) {` && |\n| &&
- ` points.push({` && |\n| &&
- ` x : htmlCoordsArray[2*i],` && |\n| &&
- ` y : htmlCoordsArray[2*i + 1]` && |\n| &&
- ` });` && |\n| &&
- ` }` && |\n| &&
- `` && |\n| &&
- ` return {` && |\n| &&
- ` points : points` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` Polygon.getRightAngleLineLastPointCoords = function(originalCoords, newPointCoords) {` && |\n| &&
- ` var TANGENS = {` && |\n| &&
- ` DEG_22 : 0.414,` && |\n| &&
- ` DEG_67 : 2.414` && |\n| &&
- ` },` && |\n| &&
- ` lastPointIndex = originalCoords.points.length - 1,` && |\n| &&
- ` lastPoint = originalCoords.points[lastPointIndex],` && |\n| &&
- ` dx = newPointCoords.x - lastPoint.x,` && |\n| &&
- ` dy = -(newPointCoords.y - lastPoint.y),` && |\n| &&
- ` tan = dy / dx,` && |\n| &&
- ` x = newPointCoords.x,` && |\n| &&
- ` y = newPointCoords.y;` && |\n| &&
- ` ` && |\n| &&
- ` if (dx > 0 && dy > 0) {` && |\n| &&
- ` if (tan > TANGENS.DEG_67) {` && |\n| &&
- ` x = lastPoint.x;` && |\n| &&
- ` } else if (tan < TANGENS.DEG_22) {` && |\n| &&
- ` y = lastPoint.y;` && |\n| &&
- ` } else {` && |\n| &&
- ` Math.abs(dx) > Math.abs(dy) ? ` && |\n| &&
- ` (x = lastPoint.x + dy) : (y = lastPoint.y - dx);` && |\n| &&
- ` }` && |\n| &&
- ` } else if (dx < 0 && dy > 0) {` && |\n| &&
- ` if (tan < -TANGENS.DEG_67) {` && |\n| &&
- ` x = lastPoint.x;` && |\n| &&
- ` } else if (tan > -TANGENS.DEG_22) {` && |\n| &&
- ` y = lastPoint.y;` && |\n| &&
- ` } else {` && |\n| &&
- ` Math.abs(dx) > Math.abs(dy) ?` && |\n| &&
- ` (x = lastPoint.x - dy) : (y = lastPoint.y + dx);` && |\n| &&
- ` }` && |\n| &&
- ` } else if (dx < 0 && dy < 0) {` && |\n| &&
- ` if (tan > TANGENS.DEG_67) {` && |\n| &&
- ` x = lastPoint.x;` && |\n| &&
- ` } else if (tan < TANGENS.DEG_22) {` && |\n| &&
- ` y = lastPoint.y;` && |\n| &&
- ` } else {` && |\n| &&
- ` Math.abs(dx) > Math.abs(dy) ? ` && |\n| &&
- ` (x = lastPoint.x + dy) : (y = lastPoint.y - dx);` && |\n| &&
- ` }` && |\n| &&
- ` } else if (dx > 0 && dy < 0) {` && |\n| &&
- ` if (tan < -TANGENS.DEG_67) {` && |\n| &&
- ` x = lastPoint.x;` && |\n| &&
- ` } else if (tan > -TANGENS.DEG_22) {` && |\n| &&
- ` y = lastPoint.y;` && |\n| &&
- ` } else {` && |\n| &&
- ` Math.abs(dx) > Math.abs(dy) ? ` && |\n| &&
- ` (x = lastPoint.x - dy) : (y = lastPoint.y + dx);` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` x : x,` && |\n| &&
- ` y : y` && |\n| &&
- ` };` && |\n| &&
- ` };` && |\n| &&
- ` ` && |\n| &&
- ` Polygon.createAndStartDrawing = function(firstPointCoords) {` && |\n| &&
- ` var newArea = new Polygon({` && |\n| &&
- ` points : [firstPointCoords],` && |\n| &&
- ` isOpened : true` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(app.domElements.container, 'mousemove', newArea.onProcessDrawing.bind(newArea))` && |\n| &&
- ` .addEvent(app.domElements.container, 'click', newArea.onAddPointDrawing.bind(newArea))` && |\n| &&
- ` .addEvent(document, 'keydown', newArea.onStopDrawing.bind(newArea))` && |\n| &&
- ` .addEvent(newArea._helpers.points[0]._el, 'click', newArea.onStopDrawing.bind(newArea));` && |\n| &&
- ` ` && |\n| &&
- ` return newArea;` && |\n| &&
- ` };` && |\n| &&
- `` && |\n| &&
- ` /* TODO: this modules will use app.js */` && |\n| &&
- ` /* Help block */` && |\n| &&
- ` var help = (function() {` && |\n| &&
- ` var block = utils.id('help'),` && |\n| &&
- ` overlay = utils.id('overlay'),` && |\n| &&
- ` close_button = block.querySelector('.close_button');` && |\n| &&
- ` ` && |\n| &&
- ` function hide() {` && |\n| &&
- ` utils.hide(block);` && |\n| &&
- ` utils.hide(overlay);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function show() {` && |\n| &&
- ` utils.show(block);` && |\n| &&
- ` utils.show(overlay);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` overlay.addEventListener('click', hide, false);` && |\n| &&
- ` ` && |\n| &&
- ` close_button.addEventListener('click', hide, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` show : show,` && |\n| &&
- ` hide : hide` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- `` && |\n| &&
- ` /* For html code of created map */` && |\n| &&
- ` var code = (function(){` && |\n| &&
- ` var block = utils.id('code'),` && |\n| &&
- ` content = utils.id('code_content'),` && |\n| &&
- ` close_button = block.querySelector('.close_button');` && |\n| &&
- ` ` && |\n| &&
- ` close_button.addEventListener('click', function(e) {` && |\n| &&
- ` utils.hide(block);` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` print: function() {` && |\n| &&
- ` content.innerHTML = app.getHTMLCode(true);` && |\n| &&
- ` utils.show(block);` && |\n| &&
- ` },` && |\n| &&
- ` hide: function() {` && |\n| &&
- ` utils.hide(block);` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- `` && |\n| &&
- ` /* Edit selected area info */` && |\n| &&
- ` var info = (function() {` && |\n| &&
- ` var form = utils.id('edit_details'),` && |\n| &&
- ` header = form.querySelector('h5'),` && |\n| &&
- ` href_attr = utils.id('href_attr'),` && |\n| &&
- ` alt_attr = utils.id('alt_attr'),` && |\n| &&
- ` title_attr = utils.id('title_attr'),` && |\n| &&
- ` save_button = utils.id('save_details'),` && |\n| &&
- ` close_button = form.querySelector('.close_button'),` && |\n| &&
- ` sections = form.querySelectorAll('p'),` && |\n| &&
- ` obj,` && |\n| &&
- ` x,` && |\n| &&
- ` y,` && |\n| &&
- ` temp_x,` && |\n| &&
- ` temp_y;` && |\n| &&
- ` ` && |\n| &&
- ` function changedReset() {` && |\n| &&
- ` form.classList.remove('changed');` && |\n| &&
- ` utils.foreach(sections, function(x) {` && |\n| &&
- ` x.classList.remove('changed');` && |\n| &&
- ` });` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function save(e) {` && |\n| &&
- ` obj.setInfoAttributes({` && |\n| &&
- ` href : href_attr.value,` && |\n| &&
- ` alt : alt_attr.value,` && |\n| &&
- ` title : title_attr.value,` && |\n| &&
- ` });` && |\n| &&
- ` ` && |\n| &&
- ` obj[obj.href ? 'setStyleOfElementWithHref' : 'unsetStyleOfElementWithHref']();` && |\n| &&
- ` ` && |\n| &&
- ` changedReset();` && |\n| &&
- ` unload();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function unload() {` && |\n| &&
- ` obj = null;` && |\n| &&
- ` changedReset();` && |\n| &&
- ` utils.hide(form);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function setCoords(x, y) {` && |\n| &&
- ` form.style.left = (x + 5) + 'px';` && |\n| &&
- ` form.style.top = (y + 5) + 'px';` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function moveEditBlock(e) {` && |\n| &&
- ` setCoords(x + e.pageX - temp_x, y + e.pageY - temp_y);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function stopMoveEditBlock(e) {` && |\n| &&
- ` x = x + e.pageX - temp_x;` && |\n| &&
- ` y = y + e.pageY - temp_y;` && |\n| &&
- ` setCoords(x, y);` && |\n| &&
- ` ` && |\n| &&
- ` app.removeAllEvents();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function change() {` && |\n| &&
- ` form.classList.add('changed');` && |\n| &&
- ` this.parentNode.classList.add('changed');` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` save_button.addEventListener('click', save, false);` && |\n| &&
- ` ` && |\n| &&
- ` href_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);` && |\n| &&
- ` alt_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);` && |\n| &&
- ` title_attr.addEventListener('keydown', function(e) { e.stopPropagation(); }, false);` && |\n| &&
- ` ` && |\n| &&
- ` href_attr.addEventListener('change', change, false);` && |\n| &&
- ` alt_attr.addEventListener('change', change, false);` && |\n| &&
- ` title_attr.addEventListener('change', change, false);` && |\n| &&
- ` ` && |\n| &&
- ` close_button.addEventListener('click', unload, false);` && |\n| &&
- ` ` && |\n| &&
- ` header.addEventListener('mousedown', function(e) {` && |\n| &&
- ` temp_x = e.pageX,` && |\n| &&
- ` temp_y = e.pageY;` && |\n| &&
- ` ` && |\n| &&
- ` app.addEvent(document, 'mousemove', moveEditBlock);` && |\n| &&
- ` app.addEvent(header, 'mouseup', stopMoveEditBlock);` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` load : function(object, new_x, new_y) {` && |\n| &&
- ` obj = object;` && |\n| &&
- ` href_attr.value = object.href ? object.href : '';` && |\n| &&
- ` alt_attr.value = object.alt ? object.alt : '';` && |\n| &&
- ` title_attr.value = object.title ? object.title : '';` && |\n| &&
- ` utils.show(form);` && |\n| &&
- ` if (new_x && new_y) {` && |\n| &&
- ` x = new_x;` && |\n| &&
- ` y = new_y;` && |\n| &&
- ` setCoords(x, y);` && |\n| &&
- ` }` && |\n| &&
- ` },` && |\n| &&
- ` unload : unload` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` /* Load areas from html code */` && |\n| &&
- ` var from_html_form = (function() {` && |\n| &&
- ` var form = utils.id('from_html_wrapper'),` && |\n| &&
- ` code_input = utils.id('code_input'),` && |\n| &&
- ` load_button = utils.id('load_code_button'),` && |\n| &&
- ` close_button = form.querySelector('.close_button');` && |\n| &&
- ` ` && |\n| &&
- ` function load(e) {` && |\n| &&
- ` if (Area.createAreasFromHTMLOfMap(code_input.value)) {` && |\n| &&
- ` hide();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function hide() {` && |\n| &&
- ` utils.hide(form);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` load_button.addEventListener('click', load, false);` && |\n| &&
- ` ` && |\n| &&
- ` close_button.addEventListener('click', hide, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` show : function() {` && |\n| &&
- ` code_input.value = '';` && |\n| &&
- ` utils.show(form);` && |\n| &&
- ` },` && |\n| &&
- ` hide : hide` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- `` && |\n| &&
- `` && |\n| &&
- ` /* Get image form */` && |\n| &&
- ` var get_image = (function() {` && |\n| &&
- ` var block = utils.id('get_image_wrapper'),` && |\n| &&
- ` close_button = block.querySelector('.close_button'),` && |\n| &&
- ` loading_indicator = utils.id('loading'),` && |\n| &&
- ` button = utils.id('button'),` && |\n| &&
- ` filename = null,` && |\n| &&
- ` last_changed = null;` && |\n| &&
- ` ` && |\n| &&
- ` // Drag'n'drop - the first way to loading an image` && |\n| &&
- ` var drag_n_drop = (function() {` && |\n| &&
- ` var dropzone = utils.id('dropzone'),` && |\n| &&
- ` dropzone_clear_button = dropzone.querySelector('.clear_button'),` && |\n| &&
- ` sm_img = utils.id('sm_img');` && |\n| &&
- ` ` && |\n| &&
- ` function testFile(type) {` && |\n| &&
- ` switch (type) {` && |\n| &&
- ` case 'image/jpeg':` && |\n| &&
- ` case 'image/jpg':` && |\n| &&
- ` case 'image/bmp':` && |\n| &&
- ` case 'image/gif':` && |\n| &&
- ` case 'image/png':` && |\n| &&
- ` return true;` && |\n| &&
- ` }` && |\n| &&
- ` return false;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` dropzone.addEventListener('dragover', function(e){` && |\n| &&
- ` utils.stopEvent(e);` && |\n| &&
- ` }, false);` && |\n| &&
- ` ` && |\n| &&
- ` dropzone.addEventListener('dragleave', function(e){` && |\n| &&
- ` utils.stopEvent(e);` && |\n| &&
- ` }, false);` && |\n| &&
- ` ` && |\n| &&
- ` dropzone.addEventListener('drop', function(e){` && |\n| &&
- ` utils.stopEvent(e);` && |\n| &&
- ` ` && |\n| &&
- ` var reader = new FileReader(),` && |\n| &&
- ` file = e.dataTransfer.files[0];` && |\n| &&
- ` ` && |\n| &&
- ` if (testFile(file.type)) {` && |\n| &&
- ` dropzone.classList.remove('error');` && |\n| &&
- ` ` && |\n| &&
- ` reader.readAsDataURL(file);` && |\n| &&
- ` ` && |\n| &&
- ` reader.onload = function(e) {` && |\n| &&
- ` sm_img.src = e.target.result;` && |\n| &&
- ` sm_img.style.display = 'inline-block';` && |\n| &&
- ` filename = file.name;` && |\n| &&
- ` utils.show(dropzone_clear_button);` && |\n| &&
- ` last_changed = drag_n_drop;` && |\n| &&
- ` };` && |\n| &&
- ` } else {` && |\n| &&
- ` clearDropzone();` && |\n| &&
- ` dropzone.classList.add('error');` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` }, false);` && |\n| &&
- ` ` && |\n| &&
- ` function clearDropzone() {` && |\n| &&
- ` sm_img.src = '';` && |\n| &&
- ` ` && |\n| &&
- ` utils.hide(sm_img)` && |\n| &&
- ` .hide(dropzone_clear_button);` && |\n| &&
- ` ` && |\n| &&
- ` dropzone.classList.remove('error');` && |\n| &&
- ` ` && |\n| &&
- ` last_changed = url_input;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` dropzone_clear_button.addEventListener('click', clearDropzone, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` clear : clearDropzone,` && |\n| &&
- ` init : function() {` && |\n| &&
- ` dropzone.draggable = true;` && |\n| &&
- ` this.clear();` && |\n| &&
- ` utils.hide(sm_img)` && |\n| &&
- ` .hide(dropzone_clear_button);` && |\n| &&
- ` },` && |\n| &&
- ` test : function() {` && |\n| &&
- ` return Boolean(sm_img.src);` && |\n| &&
- ` },` && |\n| &&
- ` getImage : function() {` && |\n| &&
- ` return sm_img.src;` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- ` /* Set a url - the second way to loading an image */` && |\n| &&
- ` var url_input = (function() {` && |\n| &&
- ` var url = utils.id('url'),` && |\n| &&
- ` url_clear_button = url.parentNode.querySelector('.clear_button');` && |\n| &&
- ` ` && |\n| &&
- ` function testUrl(str) {` && |\n| &&
- ` var url_str = str.trim(),` && |\n| &&
- ` temp_array = url_str.split('.'),` && |\n| &&
- ` ext;` && |\n| &&
- ` ` && |\n| &&
- ` if(temp_array.length > 1) {` && |\n| &&
- ` ext = temp_array[temp_array.length-1].toLowerCase();` && |\n| &&
- ` switch (ext) {` && |\n| &&
- ` case 'jpg':` && |\n| &&
- ` case 'jpeg':` && |\n| &&
- ` case 'bmp':` && |\n| &&
- ` case 'gif':` && |\n| &&
- ` case 'png':` && |\n| &&
- ` return true;` && |\n| &&
- ` }` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` return false;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onUrlChange() {` && |\n| &&
- ` setTimeout(function(){` && |\n| &&
- ` if(url.value.length) {` && |\n| &&
- ` utils.show(url_clear_button);` && |\n| &&
- ` last_changed = url_input;` && |\n| &&
- ` } else {` && |\n| &&
- ` utils.hide(url_clear_button);` && |\n| &&
- ` last_changed = drag_n_drop;` && |\n| &&
- ` }` && |\n| &&
- ` }, 0);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` url.addEventListener('keypress', onUrlChange, false);` && |\n| &&
- ` url.addEventListener('change', onUrlChange, false);` && |\n| &&
- ` url.addEventListener('paste', onUrlChange, false);` && |\n| &&
- ` ` && |\n| &&
- ` function clearUrl() {` && |\n| &&
- ` url.value = '';` && |\n| &&
- ` utils.hide(url_clear_button);` && |\n| &&
- ` url.classList.remove('error');` && |\n| &&
- ` last_changed = url_input;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` url_clear_button.addEventListener('click', clearUrl, false);` && |\n| &&
- ` ` && |\n| &&
- ` return {` && |\n| &&
- ` clear : clearUrl,` && |\n| &&
- ` init : function() {` && |\n| &&
- ` this.clear();` && |\n| &&
- ` utils.hide(url_clear_button);` && |\n| &&
- ` },` && |\n| &&
- ` test : function() {` && |\n| &&
- ` if(testUrl(url.value)) {` && |\n| &&
- ` url.classList.remove('error');` && |\n| &&
- ` return true;` && |\n| &&
- ` } else {` && |\n| &&
- ` url.classList.add('error');` && |\n| &&
- ` }` && |\n| &&
- ` return false;` && |\n| &&
- ` },` && |\n| &&
- ` getImage : function() {` && |\n| &&
- ` var tmp_arr = url.value.split('/');` && |\n| &&
- ` filename = tmp_arr[tmp_arr.length - 1];` && |\n| &&
- ` ` && |\n| &&
- ` return url.value.trim();` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n|.
-
- result = result &&
- ` })();` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` /* Block init */` && |\n| &&
- ` function init() {` && |\n| &&
- ` utils.hide(loading_indicator);` && |\n| &&
- ` drag_n_drop.init();` && |\n| &&
- ` url_input.init();` && |\n| &&
- ` var b64_image = base64_image` && |\n| &&
- ` app.loadImage(b64_image).setFilename(filename);` && |\n| &&
- ` }` && |\n| &&
- ` init();` && |\n| &&
- ` ` && |\n| &&
- ` /* Block clear */` && |\n| &&
- ` function clear() {` && |\n| &&
- ` drag_n_drop.clear();` && |\n| &&
- ` url_input.clear();` && |\n| &&
- ` last_changed = null;` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` /* Selected image loading */` && |\n| &&
- ` function onButtonClick(e) {` && |\n| &&
- ` if (last_changed === url_input && url_input.test()) {` && |\n| &&
- ` app.loadImage(url_input.getImage()).setFilename(filename);` && |\n| &&
- ` } else if (last_changed === drag_n_drop && drag_n_drop.test()) {` && |\n| &&
- ` app.loadImage(drag_n_drop.getImage()).setFilename(filename);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` button.addEventListener('click', onButtonClick, false);` && |\n| &&
- ` ` && |\n| &&
- ` close_button.addEventListener('click', hide, false);` && |\n| &&
- ` ` && |\n| &&
- ` function show() {` && |\n| &&
- ` clear();` && |\n| &&
- ` utils.show(block);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function hide() {` && |\n| &&
- ` utils.hide(block);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` /* Returned object */` && |\n| &&
- ` return {` && |\n| &&
- ` show : function() {` && |\n| &&
- ` app.hide();` && |\n| &&
- ` show();` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` hide : function() {` && |\n| &&
- ` app.show();` && |\n| &&
- ` hide();` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` showLoadIndicator : function() {` && |\n| &&
- ` utils.show(loading_indicator);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` },` && |\n| &&
- ` hideLoadIndicator : function() {` && |\n| &&
- ` utils.hide(loading_indicator);` && |\n| &&
- ` ` && |\n| &&
- ` return this;` && |\n| &&
- ` }` && |\n| &&
- ` };` && |\n| &&
- ` })();` && |\n| &&
- ` // get_image.show();` && |\n| &&
- ` ` && |\n| &&
- `` && |\n| &&
- ` /* Buttons and actions */` && |\n| &&
- ` var buttons = (function() {` && |\n| &&
- ` var all = utils.id('nav').getElementsByTagName('li'),` && |\n| &&
- ` save = utils.id('save'),` && |\n| &&
- ` load = utils.id('load'),` && |\n| &&
- ` rectangle = utils.id('rectangle'),` && |\n| &&
- ` circle = utils.id('circle'),` && |\n| &&
- ` polygon = utils.id('polygon'),` && |\n| &&
- ` edit = utils.id('edit'),` && |\n| &&
- ` clear = utils.id('clear'),` && |\n| &&
- ` from_html = utils.id('from_html'),` && |\n| &&
- ` to_html = utils.id('to_html'),` && |\n| &&
- ` preview = utils.id('preview'),` && |\n| &&
- ` new_image = utils.id('new_image'),` && |\n| &&
- ` show_help = utils.id('show_help');` && |\n| &&
- ` ` && |\n| &&
- ` function deselectAll() {` && |\n| &&
- ` utils.foreach(all, function(x) {` && |\n| &&
- ` x.classList.remove(Area.CLASS_NAMES.SELECTED);` && |\n| &&
- ` });` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function selectOne(button) {` && |\n| &&
- ` deselectAll();` && |\n| &&
- ` button.classList.add(Area.CLASS_NAMES.SELECTED);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onSaveButtonClick(e) {` && |\n| &&
- ` // Save in localStorage` && |\n| &&
- ` app.saveInLocalStorage();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onLoadButtonClick(e) {` && |\n| &&
- ` // Load from localStorage` && |\n| &&
- ` app.clear()` && |\n| &&
- ` .loadFromLocalStorage();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onShapeButtonClick(e) {` && |\n| &&
- ` // shape = rect || circle || polygon` && |\n| &&
- ` app.setMode('drawing')` && |\n| &&
- ` .setDrawClass()` && |\n| &&
- ` .setShape(this.id)` && |\n| &&
- ` .deselectAll()` && |\n| &&
- ` .hidePreview();` && |\n| &&
- ` info.unload();` && |\n| &&
- ` selectOne(this);` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onClearButtonClick(e) {` && |\n| &&
- ` // Clear all` && |\n| &&
- ` if (confirm('Clear all?')) {` && |\n| &&
- ` app.setMode(null)` && |\n| &&
- ` .setDefaultClass()` && |\n| &&
- ` .setShape(null)` && |\n| &&
- ` .clear()` && |\n| &&
- ` .hidePreview();` && |\n| &&
- ` deselectAll();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onFromHtmlButtonClick(e) {` && |\n| &&
- ` // Load areas from html` && |\n| &&
- ` from_html_form.show();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onToHtmlButtonClick(e) {` && |\n| &&
- ` // Generate html code only` && |\n| &&
- ` info.unload();` && |\n| &&
- ` code.print();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onPreviewButtonClick(e) {` && |\n| &&
- ` if (app.getMode() === 'preview') {` && |\n| &&
- ` app.setMode(null)` && |\n| &&
- ` .hidePreview();` && |\n| &&
- ` deselectAll();` && |\n| &&
- ` } else {` && |\n| &&
- ` app.deselectAll()` && |\n| &&
- ` .setMode('preview')` && |\n| &&
- ` .setDefaultClass()` && |\n| &&
- ` .preview();` && |\n| &&
- ` selectOne(this);` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onEditButtonClick(e) {` && |\n| &&
- ` if (app.getMode() === 'editing') {` && |\n| &&
- ` app.setMode(null)` && |\n| &&
- ` .setDefaultClass()` && |\n| &&
- ` .deselectAll();` && |\n| &&
- ` deselectAll();` && |\n| &&
- ` utils.show(domElements.svg);` && |\n| &&
- ` } else {` && |\n| &&
- ` app.setShape(null)` && |\n| &&
- ` .setMode('editing')` && |\n| &&
- ` .setEditClass();` && |\n| &&
- ` selectOne(this);` && |\n| &&
- ` }` && |\n| &&
- ` app.hidePreview();` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onNewImageButtonClick(e) {` && |\n| &&
- ` // New image - clear all and back to loading image screen` && |\n| &&
- ` if(confirm('Discard all changes?')) {` && |\n| &&
- ` app.setMode(null)` && |\n| &&
- ` .setDefaultClass()` && |\n| &&
- ` .setShape(null)` && |\n| &&
- ` .setIsDraw(false)` && |\n| &&
- ` .clear()` && |\n| &&
- ` .hide()` && |\n| &&
- ` .hidePreview();` && |\n| &&
- ` deselectAll();` && |\n| &&
- ` get_image.show();` && |\n| &&
- ` } ` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` function onShowHelpButtonClick(e) {` && |\n| &&
- ` help.show();` && |\n| &&
- ` ` && |\n| &&
- ` e.preventDefault();` && |\n| &&
- ` }` && |\n| &&
- ` ` && |\n| &&
- ` save.addEventListener('click', onSaveButtonClick, false);` && |\n| &&
- ` load.addEventListener('click', onLoadButtonClick, false);` && |\n| &&
- ` rectangle.addEventListener('click', onShapeButtonClick, false);` && |\n| &&
- ` circle.addEventListener('click', onShapeButtonClick, false);` && |\n| &&
- ` polygon.addEventListener('click', onShapeButtonClick, false);` && |\n| &&
- ` clear.addEventListener('click', onClearButtonClick, false);` && |\n| &&
- ` from_html.addEventListener('click', onFromHtmlButtonClick, false);` && |\n| &&
- ` to_html.addEventListener('click', onToHtmlButtonClick, false);` && |\n| &&
- ` preview.addEventListener('click', onPreviewButtonClick, false);` && |\n| &&
- ` edit.addEventListener('click', onEditButtonClick, false);` && |\n| &&
- ` new_image.addEventListener('click', onNewImageButtonClick, false);` && |\n| &&
- ` show_help.addEventListener('click', onShowHelpButtonClick, false);` && |\n| &&
- ` })();` && |\n| &&
- `` && |\n| &&
- ` })();` && |\n| &&
- `}`.
- ENDMETHOD.
-
-
- METHOD set_js_config.
-
- IF is_config IS NOT INITIAL.
- DATA(json_config) = ``.
-* json_config = /ui2/cl_json=>serialize(
-* data = is_config
-* compress = abap_true
-* pretty_name = 'X'
-* ).
-
- TRY.
- DATA(li_ajson) = CAST z2ui5_if_ajson( z2ui5_cl_ajson=>create_empty( ) ).
- li_ajson->set( iv_path = `/` iv_val = is_config ).
- li_ajson = li_ajson->filter( NEW z2ui5_cl_cc_imagemapster( ) ).
-* li_ajson = li_ajson->filter( z2ui5_cl_ajson_filter_lib=>create_empty_filter( ) ).
- li_ajson = li_ajson->map( z2ui5_cl_ajson_mapping=>create_to_camel_case( ) ).
-* li_ajson = li_ajson->map( z2ui5_cl_ajson_mapping=>create_lower_case( ) ).
- json_config = li_ajson->stringify( ).
- CATCH cx_root.
- ENDTRY.
- ENDIF.
-
- FIND 'renderHighlight' IN json_config.
- IF sy-subrc = 0.
- REPLACE 'renderHighlight' IN json_config WITH 'render_highlight'.
- ENDIF.
-
- FIND 'renderSelect' IN json_config.
- IF sy-subrc = 0.
- REPLACE 'renderSelect' IN json_config WITH 'render_select'.
- ENDIF.
-
- imagemapster_config = `` &&
- ` var resizeTime = 100;` &&
- ` var resizeDelay = 100; ` &&
- `` &&
- `$("img[usemap]").mapster(` &&
- json_config &&
- `);` &&
- `` &&
- ` function resize(maxWidth, maxHeight) {` &&
- ` var image = $("img"),` &&
- ` imgWidth = image.width(),` &&
- ` imgHeight = image.height(),` &&
- ` newWidth = 0,` &&
- ` newHeight = 0;` &&
- `` &&
- ` if (imgWidth / maxWidth > imgHeight / maxHeight) {` &&
- ` newWidth = maxWidth;` &&
- ` } else {` &&
- ` newHeight = maxHeight;` &&
- ` }` &&
- ` image.mapster("resize", newWidth, newHeight, resizeTime);` &&
- ` }` &&
- `` &&
- ` function onWindowResize(w = 0, h = 0) {` &&
- `` &&
- ` var curWidth = $(window).width(),` &&
- ` curHeight = $(window).height(),` &&
- ` checking = false;` &&
- ` if (checking) {` &&
- ` return;` &&
- ` }` &&
- ` checking = true;` &&
- ` window.setTimeout(function () {` &&
- ` var newWidth = $(window).width(),` &&
- ` newHeight = $(window).height();` &&
- ` if (newWidth === curWidth &&` &&
- ` newHeight === curHeight) {` &&
- ` resize(newWidth-w, newHeight-h);` &&
- ` }` &&
- ` checking = false;` &&
- ` }, resizeDelay);` &&
- ` }`.
-
- IF auto_resize = abap_true.
-
- imagemapster_config = imagemapster_config &&
- `` &&
- ` $(window).bind("resize", onWindowResize);`.
- ENDIF.
-
- ENDMETHOD.
-
-
- METHOD z2ui5_if_ajson_filter~keep_node.
-
- rv_keep = abap_true.
-
- CASE iv_visit.
-
- WHEN z2ui5_if_ajson_filter=>visit_type-open.
-
- IF is_node-children = 0.
- rv_keep = abap_false.
- ENDIF.
-
- WHEN z2ui5_if_ajson_filter=>visit_type-value.
-
- CASE is_node-type.
- WHEN z2ui5_if_ajson_types=>node_type-boolean.
- IF is_node-name = `is_selectable`
- OR is_node-name = `is_deselectable`
- OR is_node-name = `is_mask`
- OR is_node-name = `selected`
- OR is_node-name = `show_tool_tip:`
- OR is_node-name = `static_state`
- OR is_node-name = `fade`
- OR is_node-name = `scale_map:`
- OR is_node-name = `no_href_is_mask:`
- OR is_node-name = `sort_list`
- OR is_node-name = `single_select`
- OR is_node-name = `click_navigate`
- OR is_node-name = `highlight`.
- RETURN.
- ENDIF.
- IF is_node-value = `false`.
- rv_keep = abap_false.
- ENDIF.
- WHEN z2ui5_if_ajson_types=>node_type-number.
- IF is_node-value = `0` OR is_node-value = `0.00`.
- rv_keep = abap_false.
- ENDIF.
- WHEN z2ui5_if_ajson_types=>node_type-string.
- IF is_node-value = ``.
- rv_keep = abap_false.
- ENDIF.
- ENDCASE.
-
- WHEN z2ui5_if_ajson_filter=>visit_type-close.
-
- IF is_node-children = 0.
- rv_keep = abap_false.
- ENDIF.
-
- ENDCASE.
-
- ENDMETHOD.
-ENDCLASS.
diff --git a/src/01/05/z2ui5_cl_cc_imagemapster.clas.xml b/src/01/05/z2ui5_cl_cc_imagemapster.clas.xml
deleted file mode 100644
index 31d34d17..00000000
--- a/src/01/05/z2ui5_cl_cc_imagemapster.clas.xml
+++ /dev/null
@@ -1,16 +0,0 @@
-
-` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- ` ` && |\n| &&
- `
` && |\n| &&
- `Main
` && |\n| && - `F5 — reload the page and display the form for loading image again
` && |\n| && - `S — save map params in localStorage
` && |\n| && - `Drawing mode (rectangle / circle / polygon)
` && |\n| && - `ENTER — stop polygon drawing (or click on first helper)
` && |\n| && - `ESC — cancel drawing of a new area
` && |\n| && - `SHIFT — square drawing in case of a rectangle and right angle drawing in case of a polygon
` && |\n| && - `Editing mode
` && |\n| && - `DELETE — remove a selected area
` && |\n| && - `ESC — cancel editing of a selected area
` && |\n| && - `SHIFT — edit and save proportions for rectangle
` && |\n| && - `I — edit attributes of a selected area (or dblclick on an area)
` && |\n| && - `CTRL + C — a copy of the selected area
` && |\n| && - `↑ — move a selected area up
` && |\n| && - `↓ — move a selected area down
` && |\n| && - `← — move a selected area to the left
` && |\n| && - `→ — move a selected area to the right
` && |\n| && - `