diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 5dcfd91..5eb0fd3 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Cursor = function () { +function Cursor () { this.pos = { x: 0, y: 0 } this.translation = null this.operation = null diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index c724f3d..2b3de75 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -19,10 +19,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.manager = new Manager(this) this.renderer = new Renderer(this) this.tool = new Tool(this) - this.interface = new this.Interface() + this.interface = new Interface(this) + this.picker = new Picker(this) + this.cursor = new Cursor(this) - this.picker = new this.Picker() - this.cursor = new this.Cursor() host.appendChild(this.renderer.el) this.manager.install() diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index f58858b..1ac054c 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Interface = function () { +function Interface (dotgrid) { this.el = document.createElement('div') this.el.id = 'interface' @@ -51,10 +51,10 @@ DOTGRID.Interface = function () { ${name == 'depth' ? `` : ''} @@ -65,63 +65,63 @@ DOTGRID.Interface = function () { } } this.menu_el.innerHTML = html - this.menu_el.appendChild(DOTGRID.picker.el) + this.menu_el.appendChild(dotgrid.picker.el) } this.over = function (type, name) { - DOTGRID.cursor.operation = {} - DOTGRID.cursor.operation[type] = name + dotgrid.cursor.operation = {} + dotgrid.cursor.operation[type] = name this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.out = function (type, name) { - DOTGRID.cursor.operation = '' - DOTGRID.renderer.update(true) + dotgrid.cursor.operation = '' + dotgrid.renderer.update(true) } this.up = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.down = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } - DOTGRID.tool[type](name) + dotgrid.tool[type](name) this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.prev_operation = null this.update = function (force = false, id) { - if (this.prev_operation == DOTGRID.cursor.operation && force == false) { return } + if (this.prev_operation == dotgrid.cursor.operation && force == false) { return } let multi_vertices = null - let segments = DOTGRID.tool.layer() - const sum_segments = DOTGRID.tool.length() + let segments = dotgrid.tool.layer() + const sum_segments = dotgrid.tool.length() for (const i in segments) { if (segments[i].vertices.length > 2) { multi_vertices = true; break } } - document.getElementById('option_line').className.baseVal = !DOTGRID.tool.canCast('line') ? 'icon inactive' : 'icon' - document.getElementById('option_arc_c').className.baseVal = !DOTGRID.tool.canCast('arc_c') ? 'icon inactive' : 'icon' - document.getElementById('option_arc_r').className.baseVal = !DOTGRID.tool.canCast('arc_r') ? 'icon inactive' : 'icon' - document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.canCast('bezier') ? 'icon inactive' : 'icon' - document.getElementById('option_close').className.baseVal = !DOTGRID.tool.canCast('close') ? 'icon inactive' : 'icon' + document.getElementById('option_line').className.baseVal = !dotgrid.tool.canCast('line') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_c').className.baseVal = !dotgrid.tool.canCast('arc_c') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_r').className.baseVal = !dotgrid.tool.canCast('arc_r') ? 'icon inactive' : 'icon' + document.getElementById('option_bezier').className.baseVal = !dotgrid.tool.canCast('bezier') ? 'icon inactive' : 'icon' + document.getElementById('option_close').className.baseVal = !dotgrid.tool.canCast('close') ? 'icon inactive' : 'icon' - document.getElementById('option_thickness').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linecap').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linejoin').className.baseVal = DOTGRID.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' - document.getElementById('option_mirror').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_fill').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_thickness').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linecap').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' + document.getElementById('option_mirror').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_color').children[0].style.fill = DOTGRID.tool.style().color - document.getElementById('option_color').children[0].style.stroke = DOTGRID.tool.style().color + document.getElementById('option_color').children[0].style.fill = dotgrid.tool.style().color + document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color document.getElementById('option_color').className.baseVal = 'icon' // Source @@ -130,15 +130,15 @@ DOTGRID.Interface = function () { document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_grid').className.baseVal = DOTGRID.renderer.showExtras ? 'icon inactive source' : 'icon source' + document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source' // Grid - if (DOTGRID.renderer.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } + if (dotgrid.renderer.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } // Mirror - if (DOTGRID.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (DOTGRID.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } + if (dotgrid.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (dotgrid.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } - this.prev_operation = DOTGRID.cursor.operation + this.prev_operation = dotgrid.cursor.operation } this.toggle = function () { diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 823f273..2a157e9 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Picker = function () { +function Picker (dotgrid) { this.memory = '' this.el = document.createElement('div') this.el.id = 'picker'