added onion skinning

This commit is contained in:
sander 2015-12-03 04:34:54 -05:00
parent f6b691bbd4
commit 5cefa27f05
15 changed files with 408 additions and 29 deletions

0
index.css Normal file
View file

31
js/ColorPickerView.js Normal file
View file

@ -0,0 +1,31 @@
'use strict';
import React from "react";
import ColorPicker from 'react-color-picker';
import Drawpad from './Drawpad'
import State from './State';
let state=State.instance;
state.strokeColor="#000000";
let COLOR=null;
class ColorPickerView extends React.Component{
constructor(props) {
super(props);
}
onDrag(color, c){
COLOR = color;
state.strokeColor=color;
}
render(){
return <div id="colorpicker"><ColorPicker value={COLOR} onDrag={this.onDrag} />
<div style={{background: COLOR, width: 100, height: 50, color: 'white'}}>
{COLOR}
</div>
</div>;
}
}
export default ColorPickerView

41
js/ControlsView.js Normal file
View file

@ -0,0 +1,41 @@
'use strict';
import d3 from "d3";
import React from "react";
/**
*/
class ControlsView extends React.Component{
constructor(props) {
super(props);
}
next(){
let drawpad=d3.select("#drawpad");
let drawpadMin1=d3.select("#drawpadMin1");
let drawpadMin2=d3.select("#drawpadMin2");
if (drawpadMin1.select("path")[0][0]!= undefined){
drawpadMin2.selectAll("path").remove();
drawpadMin2
.append("path")
.attr("d", function(){return drawpadMin1.select("path").attr("d");})
.attr("style", function(){return drawpadMin1.select("path").attr("style");});
}
drawpadMin1.selectAll("path").remove();
drawpadMin1
.append("path")
.attr("d", function(){return drawpad.select("path").attr("d");})
.attr("style", function(){return drawpad.select("path").attr("style");});
drawpad.selectAll("path").remove();
}
render() {
return <div id="nextFrame"><button onClick={this.next}>Next</button></div>;
}
}
export default ControlsView

View file

@ -1,8 +1,16 @@
'use strict';
/*
* Behaviour for the drawpad component. The reason this is separate from the view is that a React component class behaves very differently from a regular ES6 class.
* Ie. you don't have 'this'.
*/
import Point from "./Point";
import simplify from "simplify-js";
import d3 from "d3";
import State from './State';
let state=State.instance;
class Drawpad{
constructor() {
@ -19,7 +27,7 @@ class Drawpad{
//add starting point to svg-path
this.pathD="M"+newPoint.x+","+newPoint.y;//path Move operation
this.path=d3.select("#drawpad").append("path").attr("d", this.pathD);
this.path.attr("style", "stroke:" + state.strokeColor);
//add new point to array of points, used to reduce the number of points after finishing the line
this.points=[];
this.points.push(newPoint);

View file

@ -1,12 +1,17 @@
require('../less/main.less');
require('../less/index.less');
'use strict';
import React from "react";
import Drawpad from './Drawpad';
let drawpad=new Drawpad();
/**
* All methods delegate to the Drawpad class.
*/
class DrawpadView extends React.Component{
constructor(props) {
@ -27,7 +32,10 @@ class DrawpadView extends React.Component{
render() {
return <svg width="700" height="700" id ="drawpad" onMouseDown={this.startDrawing} onMouseMove={this.draw} onMouseUp={this.stopDrawing}></svg>;
return <div id="drawpadContainer">
<svg id ="drawpadMin2"></svg>
<svg id ="drawpadMin1"></svg>
<svg id ="drawpad" onMouseDown={this.startDrawing} onMouseMove={this.draw} onMouseUp={this.stopDrawing}></svg></div>;
}
}

10
js/Frames.js Normal file
View file

@ -0,0 +1,10 @@
'use strict'
class Frames {
static createSvg(frame) {
}
}
export default Frames

View file

@ -7,8 +7,6 @@ class Line{
this.start=startPoint;
this.end=endPoint;
}
}
export default Line;

25
js/State.js Normal file
View file

@ -0,0 +1,25 @@
'use strict';
/*
* Keeps global state properties like frames, current strokeColor etc.
*/
let singleton = Symbol();
let singletonEnforcer = Symbol();
class State {
constructor(enforcer, props) {
if(enforcer != singletonEnforcer) throw "Cannot construct singleton";
this.props=props;
}
static get instance() {
if(!this[singleton]) {
this[singleton] = new State(singletonEnforcer);
}
return this[singleton];
}
}
export default State

View file

@ -1,4 +1,14 @@
/*
* The main app component
*/
import React from 'react';
import DrawpadView from './DrawpadView';
import ColorPickerView from './ColorPickerView';
import ControlsView from './ControlsView';
import State from './State';
React.render(<DrawpadView/>, document.getElementById('app'));
var state=State.instance;
state.frames=[];
React.render(<div><DrawpadView/><ColorPickerView/><ControlsView/></div>, document.getElementById('app'));

56
less/index.less Normal file
View file

@ -0,0 +1,56 @@
.color-picker,
.color-picker *,
.cp-saturation-spectrum,
.cp-saturation-spectrum *,
.cp-hue-spectrum,
.cp-hue-spectrum * {
box-sizing: border-box;
}
.cp-saturation-spectrum,
.cp-hue-spectrum {
position: relative;
display: inline-block;
}
.cp-saturation-white,
.cp-saturation-black {
position: relative;
width: 100%;
height: 100%;
}
.cp-saturation-white {
background: linear-gradient(to right, #fff, rgba(204,154,129,0));
}
.cp-saturation-black {
background: linear-gradient(to top, #000, rgba(204,154,129,0));
}
.cp-saturation-spectrum {
cursor: pointer;
}
.cp-saturation-spectrum .cp-saturation-drag {
display: none;
border: 1px solid #fff;
border-radius: 10px;
position: absolute;
top: 0px;
left: 0px;
}
.cp-saturation-spectrum .cp-saturation-drag .inner {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #000;
border-radius: 10px;
}
.cp-hue-spectrum {
background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
cursor: pointer;
}
.cp-hue-spectrum .cp-hue-drag {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
border: 1px solid #000;
}

45
less/index.styl Normal file
View file

@ -0,0 +1,45 @@
.color-picker
.color-picker *
.cp-saturation-spectrum
.cp-saturation-spectrum *
.cp-hue-spectrum
.cp-hue-spectrum *
box-sizing border-box
.cp-saturation-spectrum
.cp-hue-spectrum
position relative
display inline-block
.cp-saturation-white
.cp-saturation-black
position relative
width 100%
height 100%
.cp-saturation-white
background linear-gradient(to right, #fff, rgba(204,154,129,0))
.cp-saturation-black
background linear-gradient(to top, #000, rgba(204,154,129,0))
.cp-saturation-spectrum
cursor pointer
.cp-saturation-drag
display none
border 1px solid white
border-radius 10px
position absolute
top 0px
left 0px
.inner
position relative
width 100%
height 100%
border 1px solid black
border-radius 10px
.cp-hue-spectrum
background linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)
cursor pointer
.cp-hue-drag
display none
position absolute
top 0px
left 0px
width 100%
border 1px solid black

View file

@ -4,10 +4,27 @@
svg{
background-color: #808080;
width: 700px;
height: 700px;
position: absolute;
top: 0px;
left: 0px;
opacity: .7;
}
path{
stroke:#660000;
fill:none;
fill:#668800;
stroke-width:5;
}
}
#colorpicker{
position: absolute;
top: 0px;
left: 720px;
}
#nextFrame{
position: absolute;
top: 310px;
left: 720px;
}

View file

@ -1,24 +1,153 @@
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node',
1 verbose cli '/usr/bin/npm',
1 verbose cli 'install',
1 verbose cli 'simplify-js',
1 verbose cli '--save' ]
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'install', '-g', 'styl' ]
2 info using npm@1.4.28
3 info using node@v0.10.40
4 error Failed to parse json
4 error Unexpected token }
5 error File: /workspaces/electron/electron-react-tutorial/package.json
6 error Failed to parse package.json data.
6 error package.json must be actual JSON, not just JavaScript.
6 error
6 error This is not a bug in npm.
6 error Tell the package author to fix their package.json file. JSON.parse
7 error System Linux 3.10.0-229.20.1.el7.x86_64
8 error command "/usr/bin/node" "/usr/bin/npm" "install" "simplify-js" "--save"
9 error cwd /workspaces/electron/electron-react-tutorial
10 error node -v v0.10.40
11 error npm -v 1.4.28
12 error file /workspaces/electron/electron-react-tutorial/package.json
13 error code EJSONPARSE
14 verbose exit [ 1, true ]
4 verbose cache add [ 'styl', null ]
5 verbose cache add name=undefined spec="styl" args=["styl",null]
6 verbose parsed url { protocol: null,
6 verbose parsed url slashes: null,
6 verbose parsed url auth: null,
6 verbose parsed url host: null,
6 verbose parsed url port: null,
6 verbose parsed url hostname: null,
6 verbose parsed url hash: null,
6 verbose parsed url search: null,
6 verbose parsed url query: null,
6 verbose parsed url pathname: 'styl',
6 verbose parsed url path: 'styl',
6 verbose parsed url href: 'styl' }
7 silly lockFile c0855232-styl styl
8 verbose lock styl /home/sander/.npm/c0855232-styl.lock
9 silly lockFile c0855232-styl styl
10 silly lockFile c0855232-styl styl
11 verbose addNamed [ 'styl', '' ]
12 verbose addNamed [ null, '*' ]
13 silly lockFile d9be92f8-styl styl@
14 verbose lock styl@ /home/sander/.npm/d9be92f8-styl.lock
15 silly addNameRange { name: 'styl', range: '*', hasData: false }
16 verbose request where is /styl
17 verbose request registry https://registry.npmjs.org/
18 verbose request id 7af8d1e5f25a0814
19 verbose url raw /styl
20 verbose url resolving [ 'https://registry.npmjs.org/', './styl' ]
21 verbose url resolved https://registry.npmjs.org/styl
22 verbose request where is https://registry.npmjs.org/styl
23 info trying registry request attempt 1 at 14:55:17
24 http GET https://registry.npmjs.org/styl
25 http 200 https://registry.npmjs.org/styl
26 silly registry.get cb [ 200,
26 silly registry.get { server: 'CouchDB/1.5.0 (Erlang OTP/R16B03)',
26 silly registry.get etag: '"9QC0I6Q57BCJZBWIPWWPW18CI"',
26 silly registry.get 'content-type': 'application/json',
26 silly registry.get 'cache-control': 'max-age=60',
26 silly registry.get 'content-length': '14506',
26 silly registry.get 'accept-ranges': 'bytes',
26 silly registry.get date: 'Sat, 21 Nov 2015 19:55:18 GMT',
26 silly registry.get via: '1.1 varnish',
26 silly registry.get age: '0',
26 silly registry.get connection: 'keep-alive',
26 silly registry.get 'x-served-by': 'cache-ams4136-AMS',
26 silly registry.get 'x-cache': 'HIT',
26 silly registry.get 'x-cache-hits': '1',
26 silly registry.get 'x-timer': 'S1448135717.917441,VS0,VE748',
26 silly registry.get vary: 'Accept' } ]
27 silly addNameRange number 2 { name: 'styl', range: '*', hasData: true }
28 silly addNameRange versions [ 'styl',
28 silly addNameRange [ '0.0.1',
28 silly addNameRange '0.1.0',
28 silly addNameRange '0.2.0',
28 silly addNameRange '0.2.1',
28 silly addNameRange '0.2.2',
28 silly addNameRange '0.2.3',
28 silly addNameRange '0.2.4',
28 silly addNameRange '0.2.5',
28 silly addNameRange '0.2.6',
28 silly addNameRange '0.2.7',
28 silly addNameRange '0.2.8',
28 silly addNameRange '0.2.9' ] ]
29 verbose addNamed [ 'styl', '0.2.9' ]
30 verbose addNamed [ '0.2.9', '0.2.9' ]
31 silly lockFile 71e81ccf-styl-0-2-9 styl@0.2.9
32 verbose lock styl@0.2.9 /home/sander/.npm/71e81ccf-styl-0-2-9.lock
33 silly lockFile e76bf2a4-ry-npmjs-org-styl-styl-0-2-9-tgz https://registry.npmjs.org/styl/-/styl-0.2.9.tgz
34 verbose lock https://registry.npmjs.org/styl/-/styl-0.2.9.tgz /home/sander/.npm/e76bf2a4-ry-npmjs-org-styl-styl-0-2-9-tgz.lock
35 verbose addRemoteTarball [ 'https://registry.npmjs.org/styl/-/styl-0.2.9.tgz',
35 verbose addRemoteTarball '392a1acecf126e7ed219ec9468df8ea830a9d2d7' ]
36 info retry fetch attempt 1 at 14:55:18
37 verbose fetch to= /tmp/npm-6371-snCn9fcA/registry.npmjs.org/styl/-/styl-0.2.9.tgz
38 http GET https://registry.npmjs.org/styl/-/styl-0.2.9.tgz
39 http 200 https://registry.npmjs.org/styl/-/styl-0.2.9.tgz
40 silly lockFile e76bf2a4-ry-npmjs-org-styl-styl-0-2-9-tgz https://registry.npmjs.org/styl/-/styl-0.2.9.tgz
41 silly lockFile e76bf2a4-ry-npmjs-org-styl-styl-0-2-9-tgz https://registry.npmjs.org/styl/-/styl-0.2.9.tgz
42 silly lockFile 71e81ccf-styl-0-2-9 styl@0.2.9
43 silly lockFile 71e81ccf-styl-0-2-9 styl@0.2.9
44 silly lockFile d9be92f8-styl styl@
45 silly lockFile d9be92f8-styl styl@
46 silly resolved [ { name: 'styl',
46 silly resolved description: 'CSS pre-processor built on Rework',
46 silly resolved version: '0.2.9',
46 silly resolved keywords: [ 'css', 'stylus', 'preprocessor', 'style' ],
46 silly resolved dependencies:
46 silly resolved { 'css-whitespace': '1.1.1',
46 silly resolved debug: '*',
46 silly resolved rework: '0.18.3',
46 silly resolved commander: '1.1.1',
46 silly resolved stdin: '0.0.1',
46 silly resolved 'rework-mixins': '1.1.1' },
46 silly resolved devDependencies: { should: '~1.2.2', mocha: '~1.9.0' },
46 silly resolved bin: { styl: 'bin/styl' },
46 silly resolved repository: { type: 'git', url: 'https://github.com/tj/styl.git' },
46 silly resolved gitHead: 'b987d4b1a2437bed398c34b2e62845468f638431',
46 silly resolved bugs: { url: 'https://github.com/tj/styl/issues' },
46 silly resolved homepage: 'https://github.com/tj/styl',
46 silly resolved _id: 'styl@0.2.9',
46 silly resolved scripts: {},
46 silly resolved _shasum: '392a1acecf126e7ed219ec9468df8ea830a9d2d7',
46 silly resolved _from: 'styl@',
46 silly resolved _npmVersion: '2.5.1',
46 silly resolved _nodeVersion: '0.12.0',
46 silly resolved _npmUser: { name: 'mattmueller', email: 'mattmuelle@gmail.com' },
46 silly resolved maintainers: [ [Object], [Object] ],
46 silly resolved dist:
46 silly resolved { shasum: '392a1acecf126e7ed219ec9468df8ea830a9d2d7',
46 silly resolved tarball: 'http://registry.npmjs.org/styl/-/styl-0.2.9.tgz' },
46 silly resolved directories: {},
46 silly resolved _resolved: 'https://registry.npmjs.org/styl/-/styl-0.2.9.tgz' } ]
47 info install styl@0.2.9 into /usr/lib
48 info installOne styl@0.2.9
49 verbose lib/node_modules/styl unbuild
50 verbose tar unpack /home/sander/.npm/styl/0.2.9/package.tgz
51 silly lockFile 5b1849c9-tar-usr-lib-node-modules-styl tar:///usr/lib/node_modules/styl
52 verbose lock tar:///usr/lib/node_modules/styl /home/sander/.npm/5b1849c9-tar-usr-lib-node-modules-styl.lock
53 silly lockFile 1a24ce1f-ander-npm-styl-0-2-9-package-tgz tar:///home/sander/.npm/styl/0.2.9/package.tgz
54 verbose lock tar:///home/sander/.npm/styl/0.2.9/package.tgz /home/sander/.npm/1a24ce1f-ander-npm-styl-0-2-9-package-tgz.lock
55 silly gunzTarPerm modes [ '775', '664' ]
56 error Error: EACCES, mkdir '/usr/lib/node_modules/styl'
56 error { [Error: EACCES, mkdir '/usr/lib/node_modules/styl']
56 error errno: 3,
56 error code: 'EACCES',
56 error path: '/usr/lib/node_modules/styl',
56 error fstream_type: 'Directory',
56 error fstream_path: '/usr/lib/node_modules/styl',
56 error fstream_class: 'DirWriter',
56 error fstream_stack:
56 error [ '/usr/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23',
56 error '/usr/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53',
56 error 'Object.oncomplete (fs.js:108:15)' ] }
57 error Please try running this command again as root/Administrator.
58 error System Linux 3.10.0-229.20.1.el7.x86_64
59 error command "/usr/bin/node" "/usr/bin/npm" "install" "-g" "styl"
60 error cwd /workspaces/electron/drawpad
61 error node -v v0.10.40
62 error npm -v 1.4.28
63 error path /usr/lib/node_modules/styl
64 error fstream_path /usr/lib/node_modules/styl
65 error fstream_type Directory
66 error fstream_class DirWriter
67 error code EACCES
68 error errno 3
69 error stack Error: EACCES, mkdir '/usr/lib/node_modules/styl'
70 error fstream_stack /usr/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23
70 error fstream_stack /usr/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53
70 error fstream_stack Object.oncomplete (fs.js:108:15)
71 verbose exit [ 3, true ]

View file

@ -28,6 +28,7 @@
"d3": "^3.5.9",
"electron-prebuilt": "^0.28.3",
"react": "^0.13.3",
"react-color-picker": "^2.1.9",
"simplify-js": "^1.2.1"
}
}

BIN
public/img/play.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB