Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved export

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-10-11 08:09:00 +12:00
parent d7d22f8061
commit a3d2468df4
7 changed files with 44 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
desktop/sources/scripts/cursor.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Cursor = function() {
DOTGRID.Cursor = function () {
this.pos = { x: 0, y: 0 }
this.translation = null
this.operation = null

77
desktop/sources/scripts/dotgrid.js
View File

@ -1,7 +1,6 @@
'use strict'
function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.controller = null
this.theme = new Theme()
this.history = new History()
@ -14,7 +13,6 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
// ISU
this.install = function (host) {
this.guide = new this.Guide()
this.tool = new this.Tool()
this.interface = new this.Interface()
@ -76,61 +74,30 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
})
}
this.save = function (content = this.tool.export()) {
function grab (base64, name) {
const link = document.createElement('a')
link.setAttribute('href', base64)
link.setAttribute('download', name)
link.click()
}
this.save = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return }
if (!dialog) { this.save_web(content); return }
dialog.showSaveDialog({ title: 'Save to .grid', filters: [{ name: 'Dotgrid Format', extensions: ['grid', 'dot'] }] }, (fileName) => {
if (fileName === undefined) { return }
fileName = fileName.substr(-5, 5) != '.grid' ? fileName + '.grid' : fileName
fs.writeFileSync(fileName, content)
DOTGRID.guide.update()
})
this.renderer.to_grid(grab)
}
this.save_web = function (content) {
console.info('Web Save')
const win = window.open('', 'Save', `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height - 200},left=${screen.width - 640}`)
win.document.body.innerHTML = `<style>body { background:${DOTGRID.theme.active.background}; color:${DOTGRID.theme.active.f_med}} pre { color:${DOTGRID.theme.active.f_high} }</style><p>To save: Copy this into a .grid file.<br />To load: Drag the .grid onto the browser window.</p><pre>${content}</pre>`
}
this.render = function (content = this.renderer.to_png({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }), ready = null, size = null) {
if (!ready) { return }
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
if (!dialog) { DOTGRID.render_web(content); return }
dialog.showSaveDialog({ title: 'Save to .png', filters: [{ name: 'Image Format', extensions: ['png'] }] }, (fileName) => {
if (fileName === undefined) { return }
fileName = fileName.substr(-4, 4) != '.png' ? fileName + '.png' : fileName
console.log(`Rendered ${size.width}x${size.height}`)
fs.writeFileSync(fileName, ready)
})
}
this.render_web = function (content, window) {
// Handled in Renderer
console.info('Web Render')
}
this.export = function (content = this.renderer.to_svg()) {
this.export = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
if (!dialog) { this.export_web(content); return }
dialog.showSaveDialog({ title: 'Save to .svg', filters: [{ name: 'Vector Format', extensions: ['svg'] }] }, (fileName) => {
if (fileName === undefined) { return }
fileName = fileName.substr(-4, 4) != '.svg' ? fileName + '.svg' : fileName
fs.writeFileSync(fileName, content)
this.guide.update()
})
this.renderer.to_svg(grab)
}
this.export_web = function (content) {
console.info('Web Export')
const win = window.open('', 'Save', `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height - 200},left=${screen.width - 640}`)
win.document.body.innerHTML = `<style>body { background:${DOTGRID.theme.active.background}}</style>${DOTGRID.renderer.to_svg()}`
this.render = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
const size = { width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }
this.renderer.to_png(size, grab)
}
// Basics
@ -230,8 +197,8 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/plain', DOTGRID.tool.path())
e.clipboardData.setData('text/html', DOTGRID.renderer.to_svg())
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.to_svg())
e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
e.preventDefault()
}
@ -243,8 +210,8 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/html', DOTGRID.renderer.to_svg())
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.to_svg())
e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
DOTGRID.tool.layers[DOTGRID.tool.index] = []
e.preventDefault()
}
@ -285,6 +252,4 @@ function pos_is_equal (a, b) { return a && b && a.x == b.x && a.y == b.y }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
function step (v, s) { return Math.round(v / s) * s }
const DOTGRID = new Dotgrid(300,300,20,20,4,4);
const DOTGRID = new Dotgrid(300, 300, 20, 20, 4, 4)

2
desktop/sources/scripts/guide.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Guide = function(){
DOTGRID.Guide = function () {
this.el = document.createElement('canvas')
this.el.id = 'guide'
this.el.width = 640

6
desktop/sources/scripts/interface.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Interface = function(){
DOTGRID.Interface = function () {
this.el = document.createElement('div')
this.el.id = 'interface'
@ -72,7 +72,7 @@ DOTGRID.Interface = function(){
DOTGRID.cursor.operation = {}
DOTGRID.cursor.operation[type] = name
this.update(true)
DOTGRID.guide.update(true);
DOTGRID.guide.update(true)
}
this.out = function (type, name) {
@ -92,7 +92,7 @@ DOTGRID.Interface = function(){
DOTGRID.tool[type](name)
this.update(true)
DOTGRID.guide.update(true);
DOTGRID.guide.update(true)
}
this.prev_operation = null

2
desktop/sources/scripts/picker.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Picker = function() {
DOTGRID.Picker = function () {
this.memory = ''
this.el = document.createElement('div')
this.el.id = 'picker'

54
desktop/sources/scripts/renderer.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Renderer = function(){
DOTGRID.Renderer = function () {
// Create SVG parts
this.svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.svg_el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
@ -48,15 +48,17 @@ DOTGRID.Renderer = function(){
this.layer_3.setAttribute('d', paths[2])
}
this.to_png = function (size = DOTGRID.tool.settings.size, callback = DOTGRID.render) {
if (!dialog) { return this.to_png_web(size) }
this.svg64 = function () {
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
let image64 = b64Start + svg64
return b64Start + svg64
}
this.to_png = function (size = DOTGRID.tool.settings.size, callback) {
let image64 = this.svg64()
let img = new Image()
let canvas = document.createElement('canvas')
@ -68,44 +70,20 @@ DOTGRID.Renderer = function(){
img.onload = function () {
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2)
let data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, '')
DOTGRID.renderer.to_png_ready(callback, new Buffer(data, 'base64'), size)
let data = canvas.toDataURL('image/png')
callback(data, 'export.png')
}
img.src = image64
}
this.to_png_ready = function (callback, buffer, size) {
callback(null, buffer, size)
this.to_svg = function (callback) {
const image64 = this.svg64()
callback(image64, 'export.svg')
}
this.to_png_web = function (size) {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
let image64 = b64Start + svg64
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let win = window.open('about:blank', 'image from canvas')
let img = new Image()
canvas.width = size.width * 2
canvas.height = size.height * 2
img.onload = function () {
ctx.drawImage(img, 0, 0, size.width * 2, size.height * 2)
win.document.write(`<style>body { background:${DOTGRID.theme.active.background}}</style><img width='${size.width / 2}' height='${size.height / 2}' src='${canvas.toDataURL('image/png')}' alt='from canvas'/>`)
}
img.src = image64
}
this.to_svg = function () {
this.update()
return this.svg_el.outerHTML
this.to_grid = function (callback) {
const text = DOTGRID.tool.export()
const file = new Blob([text], { type: 'text/plain' })
callback(URL.createObjectURL(file), 'export.grid')
}
}

2
desktop/sources/scripts/tool.js
View File

@ -1,6 +1,6 @@
'use strict'
DOTGRID.Tool = function(){
DOTGRID.Tool = function () {
this.index = 0
this.settings = { size: { width: 300, height: 300 } }
this.layers = [[], [], []]