Add mobx. Add scratchpad
parent
b82dc913a6
commit
a23905c826
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@
|
||||
{
|
||||
"presets": [
|
||||
["@babel/preset-env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["last 2 versions", "IE >= 9"]
|
||||
},
|
||||
}]
|
||||
],
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||
["@babel/plugin-proposal-class-properties", { "loose" : true }],
|
||||
["@babel/plugin-transform-react-jsx", {"pragma": "h"}]
|
||||
]
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
{
|
||||
"extends": "standard"
|
||||
"extends": ["standard", "standard-preact"],
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,69 @@
|
||||
import { Component, h, render } from 'preact'
|
||||
import { observer } from 'mobx-preact'
|
||||
import { coordsToPath } from './util.js'
|
||||
import state from './state.js'
|
||||
import { Scratchpad } from './scratchpad.js'
|
||||
|
||||
const root = document.getElementById('currentTile')
|
||||
|
||||
export const render = (coords) => {
|
||||
root.innerHTML = `
|
||||
<div class="flex">
|
||||
<img src="/tiles${coordsToPath(coords)}">
|
||||
</div>
|
||||
Hello World! ${JSON.stringify(coords)}
|
||||
`
|
||||
}
|
||||
@observer
|
||||
class CurrentTileComponent extends Component {
|
||||
render () {
|
||||
let coordsPath = '/tiles/' + coordsToPath(state.coords)
|
||||
return (
|
||||
<div>
|
||||
<h2>Current Tile: {coordsToPath(state.coords)}</h2>
|
||||
<div className='current-tile-upload'>
|
||||
<SubmitDrawingForm tilePath={coordsPath} />
|
||||
<UploadForm tilePath={coordsPath} />
|
||||
<img src={coordsPath} className='tile-image' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
handleClick (e) {
|
||||
console.log(this.scratchpad.image)
|
||||
}
|
||||
}
|
||||
|
||||
class SubmitDrawingForm extends Component {
|
||||
render (props) {
|
||||
console.log('submDrawing', props)
|
||||
return (
|
||||
(
|
||||
<div className='uploadForm'>
|
||||
<Scratchpad ref={s => { this.scratchpad = s }} />
|
||||
<form
|
||||
action={props.tilePath}
|
||||
method='POST'
|
||||
enctype='multipart/form-data'
|
||||
onSubmit={(e) => this.handleSubmit(e)}>
|
||||
<input type='hidden' name='file' ref={f => { this.file = f }} />
|
||||
<input type='submit' value='Upload Scratch' />
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
handleSubmit (e) {
|
||||
console.log(this.file, this.scratchpad)
|
||||
this.file.value = this.scratchpad.image
|
||||
}
|
||||
}
|
||||
|
||||
class UploadForm extends Component {
|
||||
render (props) {
|
||||
console.log(props)
|
||||
return (
|
||||
<div className='uploadForm'>
|
||||
<form action={props.tilePath} method='POST' enctype='multipart/form-data'>
|
||||
<input type='file' name='file' /><br />
|
||||
<input type='submit' value='Upload' />
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export const CurrentTile = render(<CurrentTileComponent />, root)
|
||||
|
||||
@ -0,0 +1,47 @@
|
||||
import { Component, h } from 'preact'
|
||||
|
||||
export class Scratchpad extends Component {
|
||||
draw = false
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<canvas
|
||||
width='256' height='256'
|
||||
className='tile-image'
|
||||
onMouseDown={(e) => this.handleMouseDown(e)}
|
||||
onMouseMove={(e) => this.handleMouseMove(e)}
|
||||
onMouseUp={(e) => this.handleMouseUp(e)}
|
||||
onMouseOut={(e) => this.handleMouseOut(e)}
|
||||
ref={c => { this.canvas = c }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
get ctx () {
|
||||
return this.canvas.getContext('2d')
|
||||
}
|
||||
|
||||
get image () {
|
||||
return this.canvas.toDataURL()
|
||||
}
|
||||
|
||||
handleMouseDown (e) {
|
||||
this.draw = true
|
||||
this.ctx.beginPath()
|
||||
this.ctx.moveTo(e.layerX, e.layerY)
|
||||
}
|
||||
handleMouseMove (e) {
|
||||
if (this.draw === true) {
|
||||
this.ctx.lineTo(e.layerX, e.layerY)
|
||||
this.ctx.stroke()
|
||||
}
|
||||
}
|
||||
handleMouseUp (e) {
|
||||
this.draw = false
|
||||
}
|
||||
handleMouseOut (e) {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import { observable } from 'mobx'
|
||||
|
||||
class State {
|
||||
@observable coords = { x: 0, y: 0, z: 0 }
|
||||
|
||||
setState (newState) {
|
||||
this.state = { ...this.state, ...newState }
|
||||
}
|
||||
}
|
||||
|
||||
export default new State()
|
||||
@ -1 +1 @@
|
||||
export const coordsToPath = coords => `/${coords.z}/${coords.x}/${coords.y}`
|
||||
export const coordsToPath = coords => `${coords.z}/${coords.x}/${coords.y}`
|
||||
|
||||
Loading…
Reference in New Issue