Renamed classes
This commit is contained in:
parent
1d574d43c0
commit
23c53ef37e
@ -1,6 +1,6 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
DOTGRID.Cursor = function () {
|
function Cursor () {
|
||||||
this.pos = { x: 0, y: 0 }
|
this.pos = { x: 0, y: 0 }
|
||||||
this.translation = null
|
this.translation = null
|
||||||
this.operation = null
|
this.operation = null
|
||||||
|
@ -19,10 +19,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
|||||||
this.manager = new Manager(this)
|
this.manager = new Manager(this)
|
||||||
this.renderer = new Renderer(this)
|
this.renderer = new Renderer(this)
|
||||||
this.tool = new Tool(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)
|
host.appendChild(this.renderer.el)
|
||||||
|
|
||||||
this.manager.install()
|
this.manager.install()
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
DOTGRID.Interface = function () {
|
function Interface (dotgrid) {
|
||||||
this.el = document.createElement('div')
|
this.el = document.createElement('div')
|
||||||
this.el.id = 'interface'
|
this.el.id = 'interface'
|
||||||
|
|
||||||
@ -51,10 +51,10 @@ DOTGRID.Interface = function () {
|
|||||||
<svg
|
<svg
|
||||||
id="option_${name}"
|
id="option_${name}"
|
||||||
title="${name.capitalize()}"
|
title="${name.capitalize()}"
|
||||||
onmouseout="DOTGRID.interface.out('${type}','${name}')"
|
onmouseout="dotgrid.interface.out('${type}','${name}')"
|
||||||
onmouseup="DOTGRID.interface.up('${type}','${name}')"
|
onmouseup="dotgrid.interface.up('${type}','${name}')"
|
||||||
onmousedown="DOTGRID.interface.down('${type}','${name}')"
|
onmousedown="dotgrid.interface.down('${type}','${name}')"
|
||||||
onmouseover="DOTGRID.interface.over('${type}','${name}')"
|
onmouseover="dotgrid.interface.over('${type}','${name}')"
|
||||||
viewBox="0 0 300 300"
|
viewBox="0 0 300 300"
|
||||||
class="icon ${type}">
|
class="icon ${type}">
|
||||||
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name == 'depth' ? `<path class="icon_path inactive" d=""/>` : ''}
|
<path id="${name}_path" class="icon_path" d="${tool.icon}"/>${name == 'depth' ? `<path class="icon_path inactive" d=""/>` : ''}
|
||||||
@ -65,63 +65,63 @@ DOTGRID.Interface = function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.menu_el.innerHTML = html
|
this.menu_el.innerHTML = html
|
||||||
this.menu_el.appendChild(DOTGRID.picker.el)
|
this.menu_el.appendChild(dotgrid.picker.el)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.over = function (type, name) {
|
this.over = function (type, name) {
|
||||||
DOTGRID.cursor.operation = {}
|
dotgrid.cursor.operation = {}
|
||||||
DOTGRID.cursor.operation[type] = name
|
dotgrid.cursor.operation[type] = name
|
||||||
this.update(true)
|
this.update(true)
|
||||||
DOTGRID.renderer.update(true)
|
dotgrid.renderer.update(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.out = function (type, name) {
|
this.out = function (type, name) {
|
||||||
DOTGRID.cursor.operation = ''
|
dotgrid.cursor.operation = ''
|
||||||
DOTGRID.renderer.update(true)
|
dotgrid.renderer.update(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.up = function (type, name) {
|
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)
|
this.update(true)
|
||||||
DOTGRID.renderer.update(true)
|
dotgrid.renderer.update(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.down = function (type, name) {
|
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)
|
this.update(true)
|
||||||
DOTGRID.renderer.update(true)
|
dotgrid.renderer.update(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.prev_operation = null
|
this.prev_operation = null
|
||||||
|
|
||||||
this.update = function (force = false, id) {
|
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 multi_vertices = null
|
||||||
let segments = DOTGRID.tool.layer()
|
let segments = dotgrid.tool.layer()
|
||||||
const sum_segments = DOTGRID.tool.length()
|
const sum_segments = dotgrid.tool.length()
|
||||||
|
|
||||||
for (const i in segments) {
|
for (const i in segments) {
|
||||||
if (segments[i].vertices.length > 2) { multi_vertices = true; break }
|
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_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_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_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_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_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_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_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_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_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_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.fill = dotgrid.tool.style().color
|
||||||
document.getElementById('option_color').children[0].style.stroke = DOTGRID.tool.style().color
|
document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color
|
||||||
document.getElementById('option_color').className.baseVal = 'icon'
|
document.getElementById('option_color').className.baseVal = 'icon'
|
||||||
|
|
||||||
// Source
|
// 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_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_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
|
// 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
|
// 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 () {
|
this.toggle = function () {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
'use strict'
|
'use strict'
|
||||||
|
|
||||||
DOTGRID.Picker = function () {
|
function Picker (dotgrid) {
|
||||||
this.memory = ''
|
this.memory = ''
|
||||||
this.el = document.createElement('div')
|
this.el = document.createElement('div')
|
||||||
this.el.id = 'picker'
|
this.el.id = 'picker'
|
||||||
|
Loading…
Reference in New Issue
Block a user