CoCalc -- colorpicker.cjsx

Path: cocalc/src / smc-webapp / colorpicker.cjsx
Views: ³⁹⁵⁵¹
1
###############################################################################
2
#
3
# All of the code below has been dedicated to the public domain by the authors.
4
#
5
###############################################################################
6

7
###
8
# AUTHORS:
9
#    - Travis Scholl
10
#    - Vivek Venkatachalam
11
###
12

13
React = require "react"
14
ReactDOM = require('react-dom')
15

16
percent_to_color = (x) ->
17
  switch
18
    when x<0.2 then [255,Math.floor(255*x/0.2),0]
19
    when x<0.4 then [Math.floor(255*(1-(x-0.2)/0.2)),255,0]
20
    when x<0.6 then [0,255,Math.floor(255*(x-0.4)/0.2)]
21
    when x<0.8 then [0,Math.floor(255*(1-(x-0.6)/0.2)),255]
22
    else [Math.floor(255*(x-0.8)/0.2),0,255]
23

24
exports.ColorPicker = React.createClass
25
  displayName: 'ColorPicker'
26

27
  propTypes:
28
      onChange: React.PropTypes.func
29
      color: React.PropTypes.string
30
      style: React.PropTypes.object
31

32
  getDefaultProps: ->
33
      color: "#aaa"
34
      style: {}
35

36
  shouldComponentUpdate: (nextProps, nextState) ->
37
    nextProps.color isnt @props.color
38

39
  _click: (e) ->
40
    pt = ReactDOM.findDOMNode(@refs["svg"]).createSVGPoint()
41
    [pt.x, pt.y] = [e.clientX, e.clientY]
42
    cpt =  pt.matrixTransform ReactDOM.findDOMNode(@refs["svg"]).getScreenCTM().inverse()
43
    [r,g,b] = percent_to_color cpt.x/800
44
    @props.onChange? "rgb(#{r},#{g},#{b})"
45

46
  render: ->
47
    <div style={@props.style}>
48
      <svg ref="svg"
49
        viewBox="0 0 800 400" style={{cursor:"crosshair"}}
50
        onClick={@_click}
51
        onMouseEnter={=>ReactDOM.findDOMNode(@refs.panel).style.fill="url(#rb)"}
52
        onMouseLeave={=>ReactDOM.findDOMNode(@refs.panel).style.fill="none"} >
53
        <g>
54
          <defs>
55
            <linearGradient id="rb">
56
              <stop offset="0%" stopColor="#ff0000" />
57
              <stop offset="20%" stopColor="#ffff00" />
58
              <stop offset="40%" stopColor="#00ff00" />
59
              <stop offset="60%" stopColor="#00ffff" />
60
              <stop offset="80%" stopColor="#0000ff" />
61
              <stop offset="100%" stopColor="#ff00ff" />
62
            </linearGradient>
63
          </defs>
64
          <rect fill={@props.color} width="800" height="400"/>
65
          <rect ref="panel" fill="none" y="100" width="800" height="300" />
66
        </g>
67
        <rect fill="none" stroke="#000" strokeWidth="10" width="800" height="400"/>
68
      </svg>
69
    </div>
70

71