Minor cleanup

This commit is contained in:
Devine Lu Linvega 2019-01-09 15:49:34 +12:00
parent e79fae8a49
commit 1d574d43c0
8 changed files with 136 additions and 140 deletions

View File

@ -71,19 +71,19 @@
DOTGRID.controller.add("default","Effect","Thicker +5",() => { DOTGRID.tool.toggle("thickness",5) },"]");
DOTGRID.controller.add("default","Effect","Thinner -5",() => { DOTGRID.tool.toggle("thickness",-5) },"[");
DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.add_vertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up");
DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right");
DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down");
DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.update() },"Left");
DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.remove_segments_at(DOTGRID.cursor.pos); },"Shift+Backspace");
DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.remove_segment(); },"Backspace");
DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace");
DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"Backspace");
DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.select_layer(0) },"CmdOrCtrl+1");
DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.select_layer(1) },"CmdOrCtrl+2");
DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3");
DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab");
DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab");
DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1");
DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2");
DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3");
DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() },"Tab");
DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() },"Shift+Tab");
DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M");
DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G");

View File

@ -8,7 +8,7 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
/* Interface */
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:45px; height:30px; max-width:calc(100vw - 90px); overflow: hidden;}
#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:35px; height:30px; max-width:calc(100vw - 80px); overflow: hidden;}
#interface.hidden { bottom:10px;opacity: 0 }
#interface.visible { bottom:20px; opacity: 1 }
#interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}

View File

@ -20,7 +20,7 @@ DOTGRID.Cursor = function () {
this.pos = this.pos_from_event(e)
// Translation
if (DOTGRID.tool.vertex_at(this.pos)) {
if (DOTGRID.tool.vertexAt(this.pos)) {
this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey)
}
@ -53,9 +53,9 @@ DOTGRID.Cursor = function () {
this.pos = this.pos_from_event(e)
if (this.translation && !is_equal(this.translation.from, this.translation.to)) {
if (this.translation.layer === true) { DOTGRID.tool.translate_layer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translate_copy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translate_multi(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
} else if (e.target.id == 'guide') {
DOTGRID.tool.add_vertex({ x: this.pos.x, y: this.pos.y })
DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y })
DOTGRID.picker.stop()
}
@ -69,7 +69,7 @@ DOTGRID.Cursor = function () {
this.alt = function (e) {
this.pos = this.pos_from_event(e)
DOTGRID.tool.remove_segments_at(this.pos)
DOTGRID.tool.removeSegmentsAt(this.pos)
e.preventDefault()
setTimeout(() => { DOTGRID.tool.clear() }, 150)

View File

@ -18,7 +18,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.install = function (host) {
this.manager = new Manager(this)
this.renderer = new Renderer(this)
this.tool = new this.Tool()
this.tool = new Tool(this)
this.interface = new this.Interface()
this.picker = new this.Picker()

View File

@ -109,17 +109,6 @@ function Generator (layer, style) {
s += this.convert(operate(this.layer, offset, scale, mirror), mirror)
}
// if (mirror == 3) {
// s += this.convert(operate(this.layer, offset, scale, mirror, 120), mirror)
// s += this.convert(operate(this.layer, offset, scale, mirror, 240), mirror)
// }
// if (mirror == 4) {
// s += this.convert(operate(this.layer, offset, scale, mirror, 72), mirror)
// s += this.convert(operate(this.layer, offset, scale, mirror, 144), mirror)
// s += this.convert(operate(this.layer, offset, scale, mirror, 216), mirror)
// s += this.convert(operate(this.layer, offset, scale, mirror, 288), mirror)
// }
return s
}

View File

@ -23,13 +23,14 @@ function Renderer (dotgrid) {
this.drawMirror()
this.drawRulers()
this.drawRender()
this.drawRender() //
this.drawGrid()
this.drawVertices()
this.drawHandles()
this.drawTranslation()
this.drawCursor()
this.drawPreview()
this.drawDebug()
}
this.clear = function () {
@ -43,10 +44,11 @@ function Renderer (dotgrid) {
}
this.resize = function (size) {
this.el.width = size.width * this.scale
this.el.height = size.height * this.scale
this.el.style.width = size.width + 'px'
this.el.style.height = size.height + 'px'
const pad = 15
this.el.width = (size.width + pad) * this.scale
this.el.height = (size.height + pad) * this.scale
this.el.style.width = (size.width + pad) + 'px'
this.el.style.height = (size.height + pad) + 'px'
this.update()
}
@ -71,10 +73,10 @@ function Renderer (dotgrid) {
this.drawHandles = function () {
if (!this.showExtras) { return }
for (const segment_id in dotgrid.tool.layer()) {
const segment = dotgrid.tool.layer()[segment_id]
for (const vertex_id in segment.vertices) {
const vertex = segment.vertices[vertex_id]
for (const segmentId in dotgrid.tool.layer()) {
const segment = dotgrid.tool.layer()[segmentId]
for (const vertexId in segment.vertices) {
const vertex = segment.vertices[vertexId]
this.drawHandle(vertex)
}
}
@ -256,6 +258,12 @@ function Renderer (dotgrid) {
this.context.drawImage(img, 0, 0, this.el.width, this.el.height)
}
this.drawDebug = function () {
this.context.strokeRect(0, 0, this.el.width, this.el.height)
this.context.strokeRect(this.el.width / 2, 0, this.el.width, this.el.height)
this.context.strokeRect(0, this.el.height / 2, this.el.width, this.el.height)
}
function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
}

View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Tool = function () {
function Tool (dotgrid) {
this.index = 0
this.settings = { size: { width: 300, height: 300 } }
this.layers = [[], [], []]
@ -13,9 +13,9 @@ DOTGRID.Tool = function () {
this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 }
this.start = function () {
this.styles[0].color = DOTGRID.theme.active.f_high
this.styles[1].color = DOTGRID.theme.active.f_med
this.styles[2].color = DOTGRID.theme.active.f_low
this.styles[0].color = dotgrid.theme.active.f_high
this.styles[1].color = dotgrid.theme.active.f_med
this.styles[2].color = dotgrid.theme.active.f_low
}
this.erase = function () {
@ -36,20 +36,20 @@ DOTGRID.Tool = function () {
this.clear = function () {
this.vertices = []
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.undo = function () {
this.layers = DOTGRID.history.prev()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
this.layers = dotgrid.history.prev()
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.redo = function () {
this.layers = DOTGRID.history.next()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
this.layers = dotgrid.history.next()
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.length = function () {
@ -64,10 +64,10 @@ DOTGRID.Tool = function () {
this.import = function (layer) {
this.layers[this.index] = this.layers[this.index].concat(layer)
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.replace = function (dot) {
@ -77,7 +77,7 @@ DOTGRID.Tool = function () {
dot.settings.size = { width: dot.settings.width, height: dot.settings.height }
}
if (this.settings && (this.settings.size.width != dot.settings.size.width || this.settings.size.height != dot.settings.size.height)) {
DOTGRID.setSize({ width: dot.settings.size.width, height: dot.settings.size.height })
dotgrid.setSize({ width: dot.settings.size.width, height: dot.settings.size.height })
}
this.layers = dot.layers
@ -85,46 +85,46 @@ DOTGRID.Tool = function () {
this.settings = dot.settings
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
DOTGRID.history.push(this.layers)
dotgrid.renderer.update()
dotgrid.interface.update(true)
dotgrid.history.push(this.layers)
}
// EDIT
this.remove_segment = function () {
this.removeSegment = function () {
if (this.vertices.length > 0) { this.clear(); return }
this.layer().pop()
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.remove_segments_at = function (pos) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
this.removeSegmentsAt = function (pos) {
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (Math.abs(pos.x) == Math.abs(vertex.x) && Math.abs(pos.y) == Math.abs(vertex.y)) {
segment.vertices.splice(vertex_id, 1)
segment.vertices.splice(vertexId, 1)
}
}
if (segment.vertices.length < 2) {
this.layers[this.index].splice(segment_id, 1)
this.layers[this.index].splice(segmentId, 1)
}
}
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
}
this.select_segment_at = function (pos, source = this.layer()) {
this.selectSegmentAt = function (pos, source = this.layer()) {
let target_segment = null
for (const segment_id in source) {
let segment = source[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
for (const segmentId in source) {
let segment = source[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
return segment
}
@ -133,17 +133,17 @@ DOTGRID.Tool = function () {
return null
}
this.add_vertex = function (pos) {
this.addVertex = function (pos) {
pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) }
this.vertices.push(pos)
DOTGRID.interface.update(true)
dotgrid.interface.update(true)
}
this.vertex_at = function (pos) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
this.vertexAt = function (pos) {
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
return vertex
}
@ -152,8 +152,8 @@ DOTGRID.Tool = function () {
return null
}
this.add_segment = function (type, vertices) {
let append_target = this.can_append({ type: type, vertices: vertices })
this.addSegment = function (type, vertices) {
let append_target = this.canAppend({ type: type, vertices: vertices })
if (append_target) {
this.layer()[append_target].vertices = this.layer()[append_target].vertices.concat(vertices)
} else {
@ -165,13 +165,13 @@ DOTGRID.Tool = function () {
if (!this.layer()) { this.layers[this.index] = [] }
if (!this.canCast(type)) { console.warn('Cannot cast'); return }
this.add_segment(type, this.vertices.slice())
this.addSegment(type, this.vertices.slice())
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
console.log(`Casted ${type} -> ${this.layer().length} elements`)
}
@ -196,25 +196,25 @@ DOTGRID.Tool = function () {
} else {
console.warn('Unknown', type)
}
DOTGRID.interface.update(true)
DOTGRID.renderer.update()
dotgrid.interface.update(true)
dotgrid.renderer.update()
}
this.misc = function (type) {
DOTGRID.picker.start()
dotgrid.picker.start()
}
this.source = function (type) {
if (type == 'grid') { DOTGRID.renderer.toggle() }
if (type == 'grid') { dotgrid.renderer.toggle() }
if (type == 'screen') { app.toggle_fullscreen() }
if (type == 'open') { DOTGRID.open() }
if (type == 'save') { DOTGRID.save() }
if (type == 'render') { DOTGRID.render() }
if (type == 'export') { DOTGRID.export() }
if (type == 'open') { dotgrid.open() }
if (type == 'save') { dotgrid.save() }
if (type == 'render') { dotgrid.render() }
if (type == 'export') { dotgrid.export() }
}
this.can_append = function (content) {
this.canAppend = function (content) {
for (const id in this.layer()) {
let stroke = this.layer()[id]
if (stroke.type != content.type) { continue }
@ -245,78 +245,77 @@ DOTGRID.Tool = function () {
}
this.paths = function () {
let l1 = new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: -10, y: -10 }, 1)
let l2 = new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: -10, y: -10 }, 1)
let l3 = new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: -10, y: -10 }, 1)
let l1 = new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: 0, y: 0 }, 1)
let l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, 1)
let l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, 1)
return [l1, l2, l3]
}
this.path = function () {
return new Generator(DOTGRID.tool.layer(), DOTGRID.tool.style()).toString({ x: -10, y: -10 }, 1)
return new Generator(dotgrid.tool.layer(), dotgrid.tool.style()).toString({ x: 0, y: 0 }, 1)
}
this.translate = function (a, b) {
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
if (vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)) {
segment.vertices[vertex_id] = { x: Math.abs(b.x), y: Math.abs(b.y) }
segment.vertices[vertexId] = { x: Math.abs(b.x), y: Math.abs(b.y) }
}
}
}
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
dotgrid.renderer.update()
}
this.translate_multi = function (a, b) {
this.translateMulti = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
const segment = this.select_segment_at(a)
const segment = this.selectSegmentAt(a)
if (!segment) { return }
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
}
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
dotgrid.renderer.update()
}
this.translate_layer = function (a, b) {
console.log(a, b)
this.translateLayer = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
for (const segment_id in this.layer()) {
let segment = this.layer()[segment_id]
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const segmentId in this.layer()) {
let segment = this.layer()[segmentId]
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
}
}
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
dotgrid.renderer.update()
}
this.translate_copy = function (a, b) {
this.translateCopy = function (a, b) {
const offset = { x: a.x - b.x, y: a.y - b.y }
const segment = this.select_segment_at(a, copy(this.layer()))
const segment = this.selectSegmentAt(a, copy(this.layer()))
if (!segment) { return }
for (const vertex_id in segment.vertices) {
let vertex = segment.vertices[vertex_id]
segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
for (const vertexId in segment.vertices) {
let vertex = segment.vertices[vertexId]
segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
}
this.layer().push(segment)
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
dotgrid.renderer.update()
}
this.merge = function () {
@ -324,9 +323,9 @@ DOTGRID.Tool = function () {
this.erase()
this.layers[this.index] = merged
DOTGRID.history.push(this.layers)
dotgrid.history.push(this.layers)
this.clear()
DOTGRID.renderer.update()
dotgrid.renderer.update()
}
// Style
@ -347,22 +346,22 @@ DOTGRID.Tool = function () {
return this.layers[this.index]
}
this.select_layer = function (id) {
this.selectLayer = function (id) {
this.index = clamp(id, 0, 2)
this.clear()
DOTGRID.renderer.update()
DOTGRID.interface.update(true)
dotgrid.renderer.update()
dotgrid.interface.update(true)
console.log(`layer:${this.index}`)
}
this.select_next_layer = function () {
this.selectNextLayer = function () {
this.index = this.index >= 2 ? 0 : this.index++
this.select_layer(this.index)
this.selectLayer(this.index)
}
this.select_prev_layer = function () {
this.selectPrevLayer = function () {
this.index = this.index >= 0 ? 2 : this.index--
this.select_layer(this.index)
this.selectLayer(this.index)
}
function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] }

View File

@ -12,12 +12,12 @@ document.onkeyup = (e) =>
if((e.ctrlKey || e.metaKey) && ch == "e"){ DOTGRID.export(); e.preventDefault(); return; }
if(ch == "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); }
if(ch == "backspace"){ DOTGRID.tool.remove_segment(); e.preventDefault(); }
if(ch == "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); }
if(ch == "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); }
if(ch == "1"){ DOTGRID.tool.select_layer(0); e.preventDefault(); }
if(ch == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); }
if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); }
if(ch == "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); }
if(ch == "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); }
if(ch == "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); }
if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); }
if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); }
@ -47,5 +47,5 @@ document.onkeyup = (e) =>
document.onkeydown = (e) =>
{
if(e.keyCode == 9){ DOTGRID.tool.select_next_layer(); e.preventDefault(); }
if(e.keyCode == 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); }
}