Skip to content
This repository has been archived by the owner on Jan 17, 2023. It is now read-only.

Commit

Permalink
add color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
Niharika Khanna authored and Niharika Khanna committed Dec 12, 2017
1 parent ac82ab3 commit 81a8c7f
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 10 deletions.
75 changes: 65 additions & 10 deletions server/src/pages/shot/editor.js
View file
Expand Up @@ -22,9 +22,10 @@ exports.Editor = class Editor extends React.Component {
<div className="editor-header default-color-scheme">
<div className="shot-main-actions annotation-actions">
<div className="annotation-tools">
<button className={`button transparent pen-button ${penState}`} id="pen" onClick={this.onClickPen.bind(this)} title="pen"></button>
<button className={`button transparent highlight-button ${highlighterState}`} id="highlight" onClick={this.onClickHighlight.bind(this)} title="highlighter"></button>
<button className={`button transparent clear-button`} id="clear" onClick={this.onClickClear.bind(this)} title="clear"></button>
<button className={`button transparent pen-button ${penState}`} id="pen" onClick={this.onClickPen.bind(this)} title="Pen"></button>
<button className={`button transparent highlight-button ${highlighterState}`} id="highlight" onClick={this.onClickHighlight.bind(this)} title="Highlighter"></button>
<ColorPicker setColor={this.setColor.bind(this)} />
<button className={`button transparent clear-button`} id="clear" onClick={this.onClickClear.bind(this)} title="Clear"></button>
</div>
</div>
<div className="shot-alt-actions annotation-alt-actions">
Expand All @@ -36,20 +37,24 @@ exports.Editor = class Editor extends React.Component {
<div className="canvas-container" id="canvas-container" ref={(canvasContainer) => this.canvasContainer = canvasContainer}>
<canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ canvasHeight } width={ canvasWidth } style={{height: canvasHeight, width: canvasWidth}}></canvas>
<canvas className="highlighter centered" id="highlighter" ref={(highlighter) => { this.highlighter = highlighter }} height={canvasHeight} width={canvasWidth}></canvas>
<canvas className={"editor centered " + this.state.tool} id="editor" ref={(editor) => { this.editor = editor }} height={canvasHeight} width={canvasWidth}></canvas>
<canvas className="editor centered" id="editor" ref={(editor) => { this.editor = editor }} height={canvasHeight} width={canvasWidth}></canvas>
</div>
</div>
</div>
}

setColor(color) {
this.setState({color});
}

componentDidUpdate() {
this.edit();
}

onClickClear() {
this.setState({tool: this.state.tool});
sendEvent("clear-select", "annotation-toolbar");
this.drawContext.clearRect(0, 0, this.editor.width, this.editor.height);
this.penContext.clearRect(0, 0, this.editor.width, this.editor.height);
this.highlightContext.clearRect(0, 0, this.editor.width, this.editor.height);
}

Expand Down Expand Up @@ -82,7 +87,7 @@ exports.Editor = class Editor extends React.Component {
}

componentDidMount() {
this.context = this.editor.getContext('2d');
this.penContext = this.editor.getContext('2d');
this.highlightContext = this.highlighter.getContext('2d');
let imageContext = this.imageCanvas.getContext('2d');
let img = new Image();
Expand All @@ -100,12 +105,14 @@ exports.Editor = class Editor extends React.Component {
edit() {
this.pos = { x: 0, y: 0 };
if (this.state.tool == 'highlighter') {
this.drawContext = this.highlightContext;
this.highlightContext.lineWidth = 20;
this.highlightContext.strokeStyle = '#ff0';
this.highlightContext.strokeStyle = this.state.color;
} else if (this.state.tool == 'pen') {
this.context.strokeStyle = this.state.color;
this.drawContext = this.penContext;
this.penContext.strokeStyle = this.state.color;
this.penContext.lineWidth = this.state.size;
}
this.context.lineWidth = this.state.size;
if (this.state.tool == 'none') {
this.canvasContainer.removeEventListener("mousemove", this.draw);
this.canvasContainer.removeEventListener("mousedown", this.setPosition);
Expand All @@ -127,7 +134,6 @@ exports.Editor = class Editor extends React.Component {
if (e.buttons !== 1) {
return null;
}
this.drawContext = this.state.tool == 'highlighter' ? this.highlightContext : this.context;
this.drawContext.beginPath();

this.drawContext.lineCap = this.state.tool == 'highlighter' ? 'square' : 'round';
Expand All @@ -140,3 +146,52 @@ exports.Editor = class Editor extends React.Component {
this.drawContext.stroke();
}
}

class ColorPicker extends React.Component {

constructor(props) {
super(props);
this.state = {
pickerActive: false,
color: '#000'
};
}

render() {
let border = this.state.color == 'rgb(255, 255, 255)' ? '#000' : this.state.color;
return <div><button className="color-button" id="color-picker" onClick={this.onClickColorPicker.bind(this)} title="Color Picker" style={{"backgroundColor": this.state.color, "border": `1px solid ${border}`}}></button>
{this.state.pickerActive ? this.renderColorBoard() : null}
</div>
}

renderColorBoard() {
return <div className="color-board">
<div className="row">
<div className="swatch" title="White" style={{backgroundColor: "#FFF", border: "1px solid #000"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Black" style={{backgroundColor: "#000"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Red" style={{backgroundColor: "#E74C3C"}} onClick={this.onClickSwatch.bind(this)}></div>
</div>
<div className="row">
<div className="swatch" title="Green" style={{backgroundColor: "#2ECC71"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Blue" style={{backgroundColor: "#3498DB"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Yellow" style={{backgroundColor: "#FF0"}} onClick={this.onClickSwatch.bind(this)}></div>
</div>
<div className="row">
<div className="swatch" title="Purple" style={{backgroundColor: "#8E44AD"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Sea Green" style={{backgroundColor: "#1ABC9C"}} onClick={this.onClickSwatch.bind(this)}></div>
<div className="swatch" title="Grey" style={{backgroundColor: "#34495E"}} onClick={this.onClickSwatch.bind(this)}></div>
</div>
</div>
}

onClickSwatch(e) {
let color = e.target.style.backgroundColor
this.setState({color, pickerActive: false});
this.props.setColor(color);
}

onClickColorPicker() {
let pickerActive = !this.state.pickerActive;
this.setState({pickerActive});
}
}
35 changes: 35 additions & 0 deletions static/css/frame.scss
View file
Expand Up @@ -421,3 +421,38 @@ body {
overflow: hidden;
margin-bottom: 20px;
}

.color-button {
height: 25px;
width: 25px;
border-radius: 12.5px;
margin: 12px 5px 0 5px;
}

.color-board {
margin-top: $grid-unit/2;
width: 160px;
height: 160px;
position: absolute;
background: $light-default;
border: 1px solid $light-border;
padding: 20px;
}

.color-board .row {
display: flex;
}

.swatch {
margin: 5px;
flex-direction: row;
flex-wrap: wrap;
width: 30px;
height: 30px;
border-radius: 15px;

&:hover
{
border: 2px solid $light-border-active !important;
}
}

0 comments on commit 81a8c7f

Please sign in to comment.