add initial drawfield layout
This commit is contained in:
Barry Gitarts
parent
40f009cad6
commit
e34044634e
|
|
@ -0,0 +1,438 @@
|
|||
import React from 'react';
|
||||
import { CompactPicker } from 'react-color';
|
||||
import 'flexboxgrid';
|
||||
import './draw.css';
|
||||
import {
|
||||
AppBar,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardContent,
|
||||
GridList,
|
||||
GridTile,
|
||||
IconButton,
|
||||
MenuItem,
|
||||
Button,
|
||||
Select,
|
||||
TextField,
|
||||
} from '@material-ui/core';
|
||||
import Slider from '@material-ui/lab/Slider';
|
||||
import UndoIcon from '@material-ui/icons/Undo';
|
||||
import RedoIcon from '@material-ui/icons/Redo';
|
||||
import ClearIcon from '@material-ui/icons/Delete';
|
||||
import SaveIcon from '@material-ui/icons/Save';
|
||||
import RemoveIcon from '@material-ui/icons/Clear';
|
||||
import DownloadIcon from '@material-ui/icons/CloudDownload';
|
||||
import ZoomInIcon from '@material-ui/icons/ZoomIn';
|
||||
import ZoomOutIcon from '@material-ui/icons/ZoomOutMap';
|
||||
//TODO remove data assets
|
||||
import dataJson from './data.json';
|
||||
import dataJsonControlled from './data.json.controlled';
|
||||
import dataUrl from './data.url';
|
||||
|
||||
import { SketchField, Tools } from 'react-sketch';
|
||||
import DropZone from 'react-dropzone';
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
padding: '3px',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
margin: '10px 10px 5px 10px',
|
||||
justifyContent: 'space-around'
|
||||
},
|
||||
gridList: {
|
||||
width: '100%',
|
||||
overflowY: 'auto',
|
||||
marginBottom: '24px'
|
||||
},
|
||||
gridTile: {
|
||||
backgroundColor: '#fcfcfc'
|
||||
},
|
||||
appBar: {
|
||||
backgroundColor: '#333'
|
||||
},
|
||||
radioButton: {
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px'
|
||||
},
|
||||
separator: {
|
||||
height: '42px',
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
iconButton: {
|
||||
fill: 'white',
|
||||
width: '42px',
|
||||
height: '42px'
|
||||
},
|
||||
dropArea: {
|
||||
width: '100%',
|
||||
height: '64px',
|
||||
border: '2px dashed rgb(102, 102, 102)',
|
||||
borderStyle: 'dashed',
|
||||
borderRadius: '5px',
|
||||
textAlign: 'center',
|
||||
paddingTop: '20px'
|
||||
},
|
||||
activeStyle: {
|
||||
borderStyle: 'solid',
|
||||
backgroundColor: '#eee'
|
||||
},
|
||||
rejectStyle: {
|
||||
borderStyle: 'solid',
|
||||
backgroundColor: '#ffdddd'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Helper function to manually fire an event
|
||||
*
|
||||
* @param el the element
|
||||
* @param etype the event type
|
||||
*/
|
||||
function eventFire(el, etype) {
|
||||
if (el.fireEvent) {
|
||||
el.fireEvent('on' + etype);
|
||||
} else {
|
||||
var evObj = document.createEvent('Events');
|
||||
evObj.initEvent(etype, true, false);
|
||||
el.dispatchEvent(evObj);
|
||||
}
|
||||
}
|
||||
|
||||
class SketchFieldDemo extends React.Component {
|
||||
state = {
|
||||
lineColor: 'black',
|
||||
lineWidth: 1,
|
||||
fillColor: '#68CCCA',
|
||||
backgroundColor: 'transparent',
|
||||
shadowWidth: 0,
|
||||
shadowOffset: 0,
|
||||
tool: Tools.Pencil,
|
||||
fillWithColor: false,
|
||||
fillWithBackgroundColor: false,
|
||||
drawings: [],
|
||||
canUndo: false,
|
||||
canRedo: false,
|
||||
controlledSize: false,
|
||||
sketchWidth: 600,
|
||||
sketchHeight: 600,
|
||||
stretched: true,
|
||||
stretchedX: false,
|
||||
stretchedY: false,
|
||||
originX: 'left',
|
||||
originY: 'top'
|
||||
};
|
||||
_selectTool = (event, index, value) => {
|
||||
this.setState({
|
||||
tool: value
|
||||
});
|
||||
};
|
||||
_save = () => {
|
||||
let drawings = this.state.drawings;
|
||||
drawings.push(this._sketch.toDataURL());
|
||||
this.setState({drawings: drawings});
|
||||
};
|
||||
_download = () => {
|
||||
/*eslint-disable no-console*/
|
||||
|
||||
console.save(this._sketch.toDataURL(), 'toDataURL.txt');
|
||||
console.save(JSON.stringify(this._sketch.toJSON()), 'toDataJSON.txt');
|
||||
|
||||
/*eslint-enable no-console*/
|
||||
|
||||
let {imgDown} = this.refs;
|
||||
let event = new Event('click', {});
|
||||
|
||||
imgDown.href = this._sketch.toDataURL();
|
||||
imgDown.download = 'toPNG.png';
|
||||
imgDown.dispatchEvent(event);
|
||||
};
|
||||
_renderTile = (drawing, index) => {
|
||||
return (
|
||||
<GridTile
|
||||
key={index}
|
||||
title='Canvas Image'
|
||||
actionPosition="left"
|
||||
titlePosition="top"
|
||||
titleBackground="linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%)"
|
||||
cols={1} rows={1} style={styles.gridTile}
|
||||
actionIcon={<IconButton onClick={(c) => this._removeMe(index)}><RemoveIcon
|
||||
color="white"/></IconButton>}>
|
||||
<img src={drawing}/>
|
||||
</GridTile>
|
||||
);
|
||||
};
|
||||
_removeMe = (index) => {
|
||||
let drawings = this.state.drawings;
|
||||
drawings.splice(index, 1);
|
||||
this.setState({drawings: drawings});
|
||||
};
|
||||
_undo = () => {
|
||||
this._sketch.undo();
|
||||
this.setState({
|
||||
canUndo: this._sketch.canUndo(),
|
||||
canRedo: this._sketch.canRedo()
|
||||
})
|
||||
};
|
||||
_redo = () => {
|
||||
this._sketch.redo();
|
||||
this.setState({
|
||||
canUndo: this._sketch.canUndo(),
|
||||
canRedo: this._sketch.canRedo()
|
||||
})
|
||||
};
|
||||
_clear = () => {
|
||||
this._sketch.clear();
|
||||
this._sketch.setBackgroundFromDataUrl('');
|
||||
this.setState({
|
||||
controlledValue: null,
|
||||
backgroundColor: 'transparent',
|
||||
fillWithBackgroundColor: false,
|
||||
canUndo: this._sketch.canUndo(),
|
||||
canRedo: this._sketch.canRedo()
|
||||
})
|
||||
};
|
||||
_onSketchChange = () => {
|
||||
let prev = this.state.canUndo;
|
||||
let now = this._sketch.canUndo();
|
||||
if (prev !== now) {
|
||||
this.setState({canUndo: now});
|
||||
}
|
||||
};
|
||||
_onBackgroundImageDrop = (accepted/*, rejected*/) => {
|
||||
if (accepted && accepted.length > 0) {
|
||||
let sketch = this._sketch;
|
||||
let reader = new FileReader();
|
||||
let {stretched, stretchedX, stretchedY, originX, originY} = this.state;
|
||||
reader.addEventListener('load', () => sketch.setBackgroundFromDataUrl(reader.result, {
|
||||
stretched: stretched,
|
||||
stretchedX: stretchedX,
|
||||
stretchedY: stretchedY,
|
||||
originX: originX,
|
||||
originY: originY
|
||||
}), false);
|
||||
reader.readAsDataURL(accepted[0]);
|
||||
}
|
||||
};
|
||||
componentDidMount = () => {
|
||||
|
||||
/*eslint-disable no-console*/
|
||||
|
||||
(function (console) {
|
||||
console.save = function (data, filename) {
|
||||
if (!data) {
|
||||
console.error('Console.save: No data');
|
||||
return;
|
||||
}
|
||||
if (!filename) filename = 'console.json';
|
||||
if (typeof data === 'object') {
|
||||
data = JSON.stringify(data, undefined, 4)
|
||||
}
|
||||
var blob = new Blob([data], {type: 'text/json'}),
|
||||
e = document.createEvent('MouseEvents'),
|
||||
a = document.createElement('a');
|
||||
a.download = filename;
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
|
||||
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
||||
a.dispatchEvent(e)
|
||||
}
|
||||
})(console);
|
||||
|
||||
/*eslint-enable no-console*/
|
||||
|
||||
};
|
||||
render = () => {
|
||||
const { controlledValue } = this.state;
|
||||
return (
|
||||
<div>
|
||||
{/*Sketch Area with tools*/}
|
||||
|
||||
<div className='row'>
|
||||
<div className='col-xs-7 col-sm-7 col-md-9 col-lg-9'>
|
||||
|
||||
{/* Sketch area */}
|
||||
|
||||
<SketchField
|
||||
name='sketch'
|
||||
className='canvas-area'
|
||||
ref={(c) => this._sketch = c}
|
||||
lineColor={this.state.lineColor}
|
||||
lineWidth={this.state.lineWidth}
|
||||
fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
|
||||
backgroundColor={this.state.fillWithBackgroundColor ? this.state.backgroundColor : 'transparent'}
|
||||
width={this.state.controlledSize ? this.state.sketchWidth : null}
|
||||
height={this.state.controlledSize ? this.state.sketchHeight : null}
|
||||
defaultValue={dataJson}
|
||||
value={controlledValue}
|
||||
forceValue={true}
|
||||
onChange={this._onSketchChange}
|
||||
tool={this.state.tool}
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className='col-xs-5 col-sm-5 col-md-3 col-lg-3'>
|
||||
<Card style={{margin: '10px 10px 5px 0'}}>
|
||||
<CardHeader title='Tools' />
|
||||
<CardContent>
|
||||
<label htmlFor='tool'>Canvas Tool</label><br/>
|
||||
<Select ref='tool' value={this.state.tool} onChange={this._selectTool}>
|
||||
<MenuItem value={Tools.Select} primaryText="Select"/>
|
||||
<MenuItem value={Tools.Pencil} primaryText="Pencil"/>
|
||||
<MenuItem value={Tools.Line} primaryText="Line"/>
|
||||
<MenuItem value={Tools.Rectangle} primaryText="Rectangle"/>
|
||||
<MenuItem value={Tools.Circle} primaryText="Circle"/>
|
||||
<MenuItem value={Tools.Pan} primaryText="Pan"/>
|
||||
</Select>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<label htmlFor='slider'>Line Weight</label>
|
||||
<Slider ref='slider' step={0.1}
|
||||
value={this.state.lineWidth / 100}
|
||||
onChange={(e, v) => this.setState({lineWidth: v * 100})}/>
|
||||
<br/>
|
||||
<label htmlFor='zoom'>Zoom</label>
|
||||
<div>
|
||||
<IconButton
|
||||
ref='zoom'
|
||||
onClick={(e) => this._sketch.zoom(1.25)}>
|
||||
<ZoomInIcon/>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
ref='zoom1'
|
||||
onClick={(e) => this._sketch.zoom(0.8)}>
|
||||
<ZoomOutIcon/>
|
||||
</IconButton>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<label htmlFor='xSize'>Change Canvas Width</label>
|
||||
<Slider ref='xSize' step={1}
|
||||
min={10} max={1000}
|
||||
value={this.state.sketchWidth}
|
||||
onChange={(e, v) => this.setState({sketchWidth: v})}/>
|
||||
<br/>
|
||||
<label htmlFor='ySize'>Change Canvas Height</label>
|
||||
<Slider ref='ySize' step={1}
|
||||
min={10} max={1000}
|
||||
value={this.state.sketchHeight}
|
||||
onChange={(e, v) => this.setState({sketchHeight: v})}/>
|
||||
<br/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card style={{margin: '5px 10px 5px 0'}}>
|
||||
<CardHeader title='Colors'/>
|
||||
<CardContent>
|
||||
<label htmlFor='lineColor'>Line</label>
|
||||
<CompactPicker
|
||||
id='lineColor' color={this.state.lineColor}
|
||||
onChange={(color) => this.setState({lineColor: color.hex})}/>
|
||||
<br/>
|
||||
<br/>
|
||||
<CompactPicker
|
||||
color={this.state.fillColor}
|
||||
onChange={(color) => this.setState({fillColor: color.hex})}/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card style={{margin: '5px 10px 5px 0'}}>
|
||||
<CardHeader title='Background'/>
|
||||
<CardContent>
|
||||
<CompactPicker
|
||||
color={this.state.backgroundColor}
|
||||
onChange={(color) => this.setState({backgroundColor: color.hex})}/>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<label htmlFor='lineColor'>Set Image Background</label>
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<DropZone
|
||||
ref="dropzone"
|
||||
accept='image/*'
|
||||
multiple={false}
|
||||
style={styles.dropArea}
|
||||
activeStyle={styles.activeStyle}
|
||||
rejectStyle={styles.rejectStyle}
|
||||
onDrop={this._onBackgroundImageDrop}>
|
||||
Try dropping an image here,<br/>
|
||||
or click<br/>
|
||||
to select image as background.
|
||||
</DropZone>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card style={{margin: '5px 10px 5px 0'}}>
|
||||
<CardHeader title='Images'/>
|
||||
<CardContent>
|
||||
|
||||
<div>
|
||||
<TextField
|
||||
floatingLabelText='Image URL'
|
||||
hintText='Copy/Paste an image URL'
|
||||
ref={(c) => this._imageUrlTxt = c}
|
||||
defaultValue='https://files.gamebanana.com/img/ico/sprays/4ea2f4dad8d6f.png'/>
|
||||
|
||||
<br/>
|
||||
|
||||
<Button
|
||||
label='Load Image from URL'
|
||||
onClick={(e) => this._sketch.addImg(this._imageUrlTxt.getValue())}/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
label='Load Image from Data URL'
|
||||
onClick={(e) => this._sketch.addImg(dataUrl)}/>
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card style={{margin: '5px 10px 5px 0'}}>
|
||||
<CardHeader title='Controlled value'/>
|
||||
<CardContent>
|
||||
|
||||
<div>
|
||||
|
||||
<Button
|
||||
label='Load controlled Value'
|
||||
onClick={(e) => this.setState({
|
||||
controlledValue: dataJsonControlled
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/*Saved Paintings*/}
|
||||
|
||||
<div className='row'>
|
||||
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<div className="box" style={styles.root}>
|
||||
<GridList
|
||||
cols={5}
|
||||
cellHeight={200}
|
||||
padding={1} style={styles.gridList}>
|
||||
{this.state.drawings.map(this._renderTile)}
|
||||
</GridList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export default SketchFieldDemo;
|
||||
|
|
@ -0,0 +1,474 @@
|
|||
export default {
|
||||
"objects":
|
||||
[{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 98.41,
|
||||
"top": 133.92,
|
||||
"width": 5,
|
||||
"height": 162,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -2.5000111045611817,
|
||||
"x2": 2.5000111045611817,
|
||||
"y1": -81.00166757284126,
|
||||
"y2": 81.00166757284126
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 121.41,
|
||||
"top": 130.42,
|
||||
"width": 41,
|
||||
"height": 1,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -20.500091057401697,
|
||||
"x2": 20.500091057401697,
|
||||
"y1": 0.5000102936595141,
|
||||
"y2": -0.5000102936595141
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 144.41,
|
||||
"top": 121.42,
|
||||
"width": 1,
|
||||
"height": 187,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -0.5000022209122363,
|
||||
"x2": 0.5000022209122363,
|
||||
"y1": -93.5019249143291,
|
||||
"y2": 93.5019249143291
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 187.41,
|
||||
"top": 182.92,
|
||||
"width": 33,
|
||||
"height": 0,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -16.5000732901038,
|
||||
"x2": 16.5000732901038,
|
||||
"y1": 0,
|
||||
"y2": 0
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 202.41,
|
||||
"top": 166.42,
|
||||
"width": 3,
|
||||
"height": 33,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": 1.500006662736709,
|
||||
"x2": -1.500006662736709,
|
||||
"y1": 16.500339690763965,
|
||||
"y2": -16.500339690763965
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 184.41,
|
||||
"top": 149.92,
|
||||
"width": 35,
|
||||
"height": 0,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": 17.500077731928272,
|
||||
"x2": -17.500077731928272,
|
||||
"y1": 0,
|
||||
"y2": 0
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 169.91,
|
||||
"top": 182.42,
|
||||
"width": 6,
|
||||
"height": 65,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -3.000013325473418,
|
||||
"x2": 3.000013325473418,
|
||||
"y1": -32.5006690878684,
|
||||
"y2": 32.5006690878684
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 189.91,
|
||||
"top": 215.42,
|
||||
"width": 34,
|
||||
"height": 1,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": -17.000075511016036,
|
||||
"x2": 17.000075511016036,
|
||||
"y1": -0.5000102936595141,
|
||||
"y2": 0.5000102936595141
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 235.91,
|
||||
"top": 134.92,
|
||||
"width": 10,
|
||||
"height": 156,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": 5.000022209122363,
|
||||
"x2": -5.000022209122363,
|
||||
"y1": 78.00160581088417,
|
||||
"y2": -78.00160581088417
|
||||
}, {
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 260.91,
|
||||
"top": 135.92,
|
||||
"width": 12,
|
||||
"height": 148,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"x1": 6.00002665094685,
|
||||
"x2": -6.00002665094685,
|
||||
"y1": 74.00152346160806,
|
||||
"y2": -74.00152346160806
|
||||
}, {
|
||||
"type": "circle",
|
||||
"originX": "left",
|
||||
"originY": "center",
|
||||
"left": 284.91,
|
||||
"top": 154.92,
|
||||
"width": 57.32,
|
||||
"height": 57.32,
|
||||
"fill": "transparent",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 47.12,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"radius": 28.65783551172888,
|
||||
"startAngle": 0,
|
||||
"endAngle": 6.283185307179586
|
||||
}, {
|
||||
"type": "rect",
|
||||
"originX": "left",
|
||||
"originY": "top",
|
||||
"left": 374.91,
|
||||
"top": 46.91,
|
||||
"width": 14,
|
||||
"height": 123,
|
||||
"fill": "#b0bc00",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"rx": 0,
|
||||
"ry": 0
|
||||
}, {
|
||||
"type": "circle",
|
||||
"originX": "left",
|
||||
"originY": "center",
|
||||
"left": 373.91,
|
||||
"top": 182.92,
|
||||
"width": 21.93,
|
||||
"height": 21.93,
|
||||
"fill": "#b0bc00",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 46.85,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"radius": 10.96599903840613,
|
||||
"startAngle": 0,
|
||||
"endAngle": 6.283185307179586
|
||||
}, {
|
||||
"type": "path",
|
||||
"originX": "left",
|
||||
"originY": "top",
|
||||
"left": 121.99000000000001,
|
||||
"top": 234.25212246173203,
|
||||
"width": 651.02,
|
||||
"height": 174.76,
|
||||
"fill": null,
|
||||
"stroke": "black",
|
||||
"strokeWidth": 10,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "round",
|
||||
"strokeLineJoin": "round",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"transformMatrix": null,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"pathOffset": {"x": 452.5, "y": 326.631061230866},
|
||||
"path": [["M", 126.99, 270], ["Q", 127, 270, 131, 270], ["Q", 135, 270, 185.5, 270], ["Q", 236, 270, 281.5, 270], ["Q", 327, 270, 351.5, 268.5], ["Q", 376, 267, 445.5, 261], ["Q", 515, 255, 555, 250], ["Q", 595, 245, 609, 242], ["Q", 623, 239, 623, 239.5], ["Q", 623, 240, 618.5, 245], ["Q", 614, 250, 608, 254.5], ["Q", 602, 259, 592.5, 264], ["Q", 583, 269, 575, 273.5], ["Q", 567, 278, 564.5, 279], ["Q", 562, 280, 562, 280.5], ["Q", 562, 281, 570.5, 281], ["Q", 579, 281, 588.5, 282], ["Q", 598, 283, 601, 283.5], ["Q", 604, 284, 604, 286.5], ["Q", 604, 289, 601.5, 293], ["Q", 599, 297, 594, 301], ["Q", 589, 305, 588, 306.5], ["Q", 587, 308, 590.5, 308], ["Q", 594, 308, 600.5, 310], ["Q", 607, 312, 607.5, 313], ["Q", 608, 314, 608, 317.5], ["Q", 608, 321, 608, 321.5], ["Q", 608, 322, 608, 322.5], ["Q", 608, 323, 608, 323.5], ["Q", 608, 324, 609.5, 324.5], ["Q", 611, 325, 616, 327.5], ["Q", 621, 330, 622.5, 331], ["Q", 624, 332, 624, 332.5], ["Q", 624, 333, 624.5, 334], ["Q", 625, 335, 628.5, 337.5], ["Q", 632, 340, 643, 345.5], ["Q", 654, 351, 665.5, 355.5], ["Q", 677, 360, 679, 364], ["Q", 681, 368, 681.5, 370], ["Q", 682, 372, 682.5, 373.5], ["Q", 683, 375, 691.5, 376], ["Q", 700, 377, 715.5, 381], ["Q", 731, 385, 736, 389.5], ["Q", 741, 394, 741.5, 395], ["Q", 742, 396, 742, 396.5], ["Q", 742, 397, 742.5, 398], ["Q", 743, 399, 745, 399], ["Q", 747, 399, 750.5, 402], ["Q", 754, 405, 764, 408.5], ["Q", 774, 412, 776, 413], ["L", 778.01, 414.01]]
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,417 @@
|
|||
export default {
|
||||
"objects": [
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 98.41,
|
||||
"top": 133.92,
|
||||
"width": 5,
|
||||
"height": 162,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -2.5000111045611817,
|
||||
"x2": 2.5000111045611817,
|
||||
"y1": -81.00166757284126,
|
||||
"y2": 81.00166757284126
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 121.41,
|
||||
"top": 130.42,
|
||||
"width": 41,
|
||||
"height": 1,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -20.500091057401697,
|
||||
"x2": 20.500091057401697,
|
||||
"y1": 0.5000102936595141,
|
||||
"y2": -0.5000102936595141
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 144.41,
|
||||
"top": 121.42,
|
||||
"width": 1,
|
||||
"height": 187,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -0.5000022209122363,
|
||||
"x2": 0.5000022209122363,
|
||||
"y1": -93.5019249143291,
|
||||
"y2": 93.5019249143291
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 187.41,
|
||||
"top": 182.92,
|
||||
"width": 33,
|
||||
"height": 0,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -16.5000732901038,
|
||||
"x2": 16.5000732901038,
|
||||
"y1": 0,
|
||||
"y2": 0
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 202.41,
|
||||
"top": 166.42,
|
||||
"width": 3,
|
||||
"height": 33,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": 1.500006662736709,
|
||||
"x2": -1.500006662736709,
|
||||
"y1": 16.500339690763965,
|
||||
"y2": -16.500339690763965
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 184.41,
|
||||
"top": 149.92,
|
||||
"width": 35,
|
||||
"height": 0,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": 17.500077731928272,
|
||||
"x2": -17.500077731928272,
|
||||
"y1": 0,
|
||||
"y2": 0
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 169.91,
|
||||
"top": 182.42,
|
||||
"width": 6,
|
||||
"height": 65,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -3.000013325473418,
|
||||
"x2": 3.000013325473418,
|
||||
"y1": -32.5006690878684,
|
||||
"y2": 32.5006690878684
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 189.91,
|
||||
"top": 215.42,
|
||||
"width": 34,
|
||||
"height": 1,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": -17.000075511016036,
|
||||
"x2": 17.000075511016036,
|
||||
"y1": -0.5000102936595141,
|
||||
"y2": 0.5000102936595141
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 235.91,
|
||||
"top": 134.92,
|
||||
"width": 10,
|
||||
"height": 156,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": 5.000022209122363,
|
||||
"x2": -5.000022209122363,
|
||||
"y1": 78.00160581088417,
|
||||
"y2": -78.00160581088417
|
||||
},
|
||||
{
|
||||
"type": "line",
|
||||
"originX": "center",
|
||||
"originY": "center",
|
||||
"left": 260.91,
|
||||
"top": 135.92,
|
||||
"width": 12,
|
||||
"height": 148,
|
||||
"fill": "black",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"x1": 6.00002665094685,
|
||||
"x2": -6.00002665094685,
|
||||
"y1": 74.00152346160806,
|
||||
"y2": -74.00152346160806
|
||||
},
|
||||
{
|
||||
"type": "circle",
|
||||
"originX": "left",
|
||||
"originY": "center",
|
||||
"left": 284.91,
|
||||
"top": 154.92,
|
||||
"width": 57.32,
|
||||
"height": 57.32,
|
||||
"fill": "transparent",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 47.12,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"radius": 28.65783551172888,
|
||||
"startAngle": 0,
|
||||
"endAngle": 6.283185307179586
|
||||
},
|
||||
{
|
||||
"type": "rect",
|
||||
"originX": "left",
|
||||
"originY": "top",
|
||||
"left": 374.91,
|
||||
"top": 46.91,
|
||||
"width": 14,
|
||||
"height": 123,
|
||||
"fill": "#b0bc00",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 0,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"rx": 0,
|
||||
"ry": 0
|
||||
},
|
||||
{
|
||||
"type": "circle",
|
||||
"originX": "left",
|
||||
"originY": "center",
|
||||
"left": 373.91,
|
||||
"top": 182.92,
|
||||
"width": 21.93,
|
||||
"height": 21.93,
|
||||
"fill": "#b0bc00",
|
||||
"stroke": "black",
|
||||
"strokeWidth": 2,
|
||||
"strokeDashArray": null,
|
||||
"strokeLineCap": "butt",
|
||||
"strokeLineJoin": "miter",
|
||||
"strokeMiterLimit": 10,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"angle": 46.85,
|
||||
"flipX": false,
|
||||
"flipY": false,
|
||||
"opacity": 1,
|
||||
"shadow": null,
|
||||
"visible": true,
|
||||
"clipTo": null,
|
||||
"backgroundColor": "",
|
||||
"fillRule": "nonzero",
|
||||
"globalCompositeOperation": "source-over",
|
||||
"radius": 10.96599903840613,
|
||||
"startAngle": 0,
|
||||
"endAngle": 6.283185307179586
|
||||
}
|
||||
],
|
||||
"background": ""
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,26 @@
|
|||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: beige;
|
||||
font-weight: 300;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eeffd3;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
margin: 7px 0 0 7px;
|
||||
border: 1px solid #0d3349;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import { VotingContext } from './context';
|
|||
import Web3Render from './components/standard/Web3Render';
|
||||
import fetchIdeas from './utils/fetchIdeas';
|
||||
import { getPolls, omitPolls } from './utils/polls';
|
||||
import DrawField from './components/draw/DrawField';
|
||||
window['SNT'] = SNT;
|
||||
|
||||
import './dapp.css';
|
||||
|
|
@ -31,7 +32,7 @@ class App extends React.Component {
|
|||
this._setAccounts();
|
||||
}
|
||||
web3.eth.net.getId((err, netId) => {
|
||||
if (netId !== MAINNET) this.setState({ web3Provider: false})
|
||||
//if (netId !== MAINNET) this.setState({ web3Provider: false})
|
||||
})
|
||||
fetchIdeas().then(ideaSites => { this.setState({ ideaSites })});
|
||||
})
|
||||
|
|
@ -93,13 +94,14 @@ class App extends React.Component {
|
|||
const votingContext = { getPolls: _getPolls, toggleAdmin, updatePoll, appendToPoll, setPollOrder, ...this.state };
|
||||
return (
|
||||
<Web3Render ready={web3Provider}>
|
||||
<VotingContext.Provider value={votingContext}>
|
||||
<DrawField />
|
||||
{false && <VotingContext.Provider value={votingContext}>
|
||||
<Fragment>
|
||||
{admin ?
|
||||
<AdminView setAccount={this.setAccount} /> :
|
||||
<Voting />}
|
||||
</Fragment>
|
||||
</VotingContext.Provider>
|
||||
</VotingContext.Provider>}
|
||||
</Web3Render>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,17 @@
|
|||
"babel-preset-stage-2": "^6.24.1",
|
||||
"bignumber.js": "^5.0.0",
|
||||
"bootstrap": "^3.3.7",
|
||||
"flexboxgrid": "^6.3.1",
|
||||
"formik": "^0.11.11",
|
||||
"jquery": "^3.3.1",
|
||||
"lodash": "^4.17.10",
|
||||
"react": "^16.3.2",
|
||||
"react-blockies": "^1.3.0",
|
||||
"react-bootstrap": "^0.32.1",
|
||||
"react-color": "^2.14.1",
|
||||
"react-dom": "^16.3.2",
|
||||
"react-dropzone": "^4.2.13",
|
||||
"react-sketch": "^0.4.4",
|
||||
"react-toggle": "^4.0.2",
|
||||
"rlp": "^2.0.0",
|
||||
"typeface-roboto": "0.0.54"
|
||||
|
|
|
|||
Loading…
Reference in New Issue