@things-factory/modeller-ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/client/editors/paper-color-picker/paper-color-circle.js

@@ -1,466 +0,0 @@
-import { html } from '@polymer/polymer/polymer-element'
-
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn'
-import '@polymer/paper-ripple/paper-ripple'
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior'
-
-function hsv2rgb(h, s, v) {
-  var c = v * s
-  var h1 = h / 60
-  var x = c * (1 - Math.abs((h1 % 2) - 1))
-  var m = v - c
-  var rgb
-  if (typeof h == 'undefined') rgb = [0, 0, 0]
-  else if (h1 < 1) rgb = [c, x, 0]
-  else if (h1 < 2) rgb = [x, c, 0]
-  else if (h1 < 3) rgb = [0, c, x]
-  else if (h1 < 4) rgb = [0, x, c]
-  else if (h1 < 5) rgb = [x, 0, c]
-  else if (h1 <= 6) rgb = [c, 0, x]
-  return [255 * (rgb[0] + m), 255 * (rgb[1] + m), 255 * (rgb[2] + m)]
-}
-
-function hsl2rgb(h, s, l) {
-  var r, g, b
-  h /= 360
-  if (s == 0) {
-    r = g = b = l // achromatic
-  } else {
-    function hue2rgb(p, q, t) {
-      if (t < 0) t += 1
-      if (t > 1) t -= 1
-      if (t < 1 / 6) return p + (q - p) * 6 * t
-      if (t < 1 / 2) return q
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
-      return p
-    }
-
-    var q = l < 0.5 ? l * (1 + s) : l + s - l * s
-    var p = 2 * l - q
-    r = hue2rgb(p, q, h + 1 / 3)
-    g = hue2rgb(p, q, h)
-    b = hue2rgb(p, q, h - 1 / 3)
-  }
-
-  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
-}
-function rgb2hsl(r, g, b) {
-  ;(r /= 255), (g /= 255), (b /= 255)
-  var max = Math.max(r, g, b),
-    min = Math.min(r, g, b)
-  var h,
-    s,
-    l = (max + min) / 2
-
-  if (max == min) {
-    h = s = 0
-  } else {
-    var d = max - min
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0)
-        break
-      case g:
-        h = (b - r) / d + 2
-        break
-      case b:
-        h = (r - g) / d + 4
-        break
-    }
-    h /= 6
-  }
-
-  return [h, s, l]
-}
-var rgb2hsv = function(r, g, b) {
-  var b, delta, g, h, max, min, r, s, v
-  min = Math.min(r, g, b)
-  max = Math.max(r, g, b)
-  delta = max - min
-  v = max / 255.0
-  if (max === 0) {
-    h = Number.NaN
-    s = 0
-  } else {
-    s = delta / max
-    if (r === max) {
-      h = (g - b) / delta
-    }
-    if (g === max) {
-      h = 2 + (b - r) / delta
-    }
-    if (b === max) {
-      h = 4 + (r - g) / delta
-    }
-    h *= 60
-    if (h < 0) {
-      h += 360
-    }
-  }
-  return [h / 360, s, v]
-}
-
-Polymer({
-  _template: html`
-    <style>
-      :host {
-        display: inline-block;
-        position: relative;
-      }
-
-      canvas {
-        min-width: 100px;
-        min-height: 100px;
-        cursor: crosshair;
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      #rippleContainer {
-        position: relative;
-        margin: auto;
-      }
-    </style>
-
-    <div id="rippleContainer">
-      <canvas id="canvas" on-down="onDown" on-up="onUp" on-track="onMove"></canvas>
-      <paper-ripple id="ripple" class$="{{shape}}" recenters noink></paper-ripple>
-    </div>
-  `,
-
-  is: 'paper-color-circle',
-
-  properties: {
-    /**
-     * A AA border can be drawn to prevent jagged edges on circles
-     *
-     * @attribute colouredAaBorder
-     * @type boolean
-     * @default false
-     */
-    noAaBorder: {
-      type: Boolean,
-      value: false
-    },
-    _ctx: {
-      type: Object,
-      value: function() {
-        return {}
-      }
-    },
-    _domReady: {
-      type: Boolean,
-      value: false
-    },
-    _down: {
-      type: Boolean,
-      value: false
-    },
-    _moveStart: {
-      type: Boolean,
-      value: false
-    },
-    _redrawTimer: {
-      type: Number,
-      value: 0
-    },
-    _setAaBorder: {
-      value: function() {
-        return undefined
-      }
-    },
-    /**
-     * Picked color
-     *
-     * @attribute color
-     * @type Array
-     * @default new Array(2)
-     */
-    color: {
-      type: Object,
-      notify: true,
-      value: {
-        red: undefined,
-        green: undefined,
-        blue: undefined
-      }
-    },
-    /**
-     * A coloured AA border can be drawn to prevent jagged edges on circles
-     *
-     * @attribute colouredAaBorder
-     * @type Array
-     * @default false
-     */
-    colouredAaBorder: {
-      type: Boolean,
-      value: false,
-      notify: true
-    },
-    hsl2rgb: {
-      value: function() {
-        return hsl2rgb
-      }
-    },
-    rgb2hsl: {
-      value: function() {
-        return rgb2hsl
-      }
-    },
-    hsv2rgb: {
-      value: function() {
-        return hsv2rgb
-      }
-    },
-    rgb2hsv: {
-      value: function() {
-        return rgb2hsv
-      }
-    },
-    /**
-     * In case of a huebox, the hue from 0 to 1
-     *
-     * @attribute value
-     * @type number
-     * @default 1
-     */
-    hue: {
-      type: Number,
-      value: 0,
-      notify: true,
-      observer: 'hueChanged'
-    },
-    /**
-     * In case of hsl, the lightness
-     *
-     * @attribute lightness
-     * @type number
-     * @default .5
-     */
-    lightness: {
-      type: Number,
-      value: 0.5,
-      notify: true,
-      observer: 'lightnessChanged'
-    },
-    /**
-     * square, circle or huebox
-     *
-     * @attribute shape
-     * @type string
-     * @default 'circle'
-     */
-    shape: {
-      type: String,
-      value: 'circle',
-      notify: true
-    },
-    /**
-     * hsv OR hsl
-     *
-     * @attribute type
-     * @type string
-     * @default 'hsv'
-     */
-    type: {
-      type: String,
-      value: 'hsv',
-      notify: true
-    },
-    /**
-     * In case of hsv, the value
-     *
-     * @attribute value
-     * @type number
-     * @default 1
-     */
-    value: {
-      type: Number,
-      value: 1,
-      notify: true,
-      observer: 'valueChanged'
-    }
-  },
-  observers: ['colorChanged(color.*)'],
-  behaviors: [IronResizableBehavior],
-  listeners: {
-    'iron-resize': 'redraw'
-  },
-  pickColor: function(e) {
-    var rect = this.getBoundingClientRect()
-    var touchX = e.detail.x - rect.left
-    var touchY = e.detail.y - rect.top
-    var color = this._ctx.getImageData(touchX, touchY, 1, 1).data
-    if (this.shape === 'circle') {
-      var distance = Math.abs(
-        Math.sqrt(Math.pow(touchX - this.size / 2, 2) + Math.pow(touchY - this.size / 2, 2)) - this.size / 2
-      )
-      if (distance < this.size / 100) {
-        return
-      }
-    }
-    if (color[3] > 0 && color[3] == 255) {
-      this.set('color.red', color[0])
-      this.set('color.green', color[1])
-      this.set('color.blue', color[2])
-      if (!this.noAaBorder && this.colouredAaBorder) this.redraw()
-    }
-  },
-  onDown: function(e) {
-    this.pickColor(e, true)
-    this._trackingColorChanges = true
-  },
-  onMove: function(e) {
-    this.pickColor(e)
-  },
-  onUp: function(e) {
-    this._trackingColorChanges = false
-    this.$.ripple.style.color = 'rgb(' + this.color['red'] + ',' + this.color['green'] + ',' + this.color['blue'] + ')'
-    this.$.ripple.downAction(e)
-    this.async(function() {
-      this.$.ripple.upAction()
-    })
-  },
-  redraw: function() {
-    this.debounce('redraw', function() {
-      var size = this.getBoundingClientRect()
-      var width = size.width
-      var height = size.height
-      if (width == 0 || height == 0) {
-        var computedStyle = window.getComputedStyle(this)
-        width = parseInt(computedStyle.width)
-        height = parseInt(computedStyle.height)
-      }
-      this.size = Math.floor(Math.min(width, height))
-      this.$.canvas.width = this.size
-      this.$.canvas.height = this.size
-      this.$.rippleContainer.style.width = this.size + 'px'
-      this.$.rippleContainer.style.height = this.size + 'px'
-      var halfsize = this.size / 2
-      if (!this.size) return
-      var bitmap = this._ctx.getImageData(0, 0, this.size, this.size)
-      var smoothBorder = 0
-      for (var y = 0; y < this.size; y++) {
-        for (var x = 0; x < this.size; x++) {
-          // offset for the 4 RGBA values in the data array
-          var offset = 4 * (y * this.size + x)
-          if (this.shape === 'circle') {
-            var distanceFromCenter = Math.sqrt(Math.pow(y - halfsize, 2) + Math.pow(x - halfsize, 2)) / halfsize
-            if (distanceFromCenter < (halfsize + smoothBorder) / halfsize - 0.01) {
-              var hue = Math.atan2(y - halfsize, x - halfsize) * (180 / Math.PI)
-              if (hue < 0) hue += 360
-              var saturation = Math.round(distanceFromCenter * 1000) / 1000
-              saturation = Math.min(1, saturation)
-              if (this.type === 'hsv') {
-                var value = Math.round(this.value * 1000) / 1000
-                var color = hsv2rgb(hue, saturation, value)
-              } else if (this.type === 'hsl') {
-                var lightness = Math.round(this.lightness * 1000) / 1000
-                var color = hsl2rgb(hue, saturation, lightness)
-              }
-              // fill RGBA values
-              bitmap.data[offset + 0] = color[0]
-              bitmap.data[offset + 1] = color[1]
-              bitmap.data[offset + 2] = color[2]
-              if (distanceFromCenter - 1 >= 0) {
-                var distance = Math.round((distanceFromCenter - 1) * halfsize)
-                bitmap.data[offset + 3] = 255 * ((smoothBorder - distance) / smoothBorder) // transparency
-              } else {
-                bitmap.data[offset + 3] = 255 // no transparency
-              }
-            }
-          } else if (this.shape === 'huebox') {
-            var saturation = x / width
-            var hue = (Math.round(this.hue * 1000) / 1000) * 360
-            var third = 1 - y / this.size
-            if (this.type === 'hsv') {
-              var color = hsv2rgb(hue, saturation, third)
-            } else if (this.type === 'hsl') {
-              var color = hsl2rgb(hue, saturation, third)
-            }
-            bitmap.data[offset + 0] = color[0]
-            bitmap.data[offset + 1] = color[1]
-            bitmap.data[offset + 2] = color[2]
-            bitmap.data[offset + 3] = 255 // no transparency
-          } else if (this.shape === 'square') {
-            var hue = (x / width) * 360
-            var saturation = 1 - y / this.size
-            if (this.type === 'hsv') {
-              var value = Math.round(this.value * 1000) / 1000
-              var color = hsv2rgb(hue, saturation, value)
-            } else if (this.type === 'hsl') {
-              var lightness = Math.round(this.lightness * 1000) / 1000
-              var color = hsl2rgb(hue, saturation, lightness)
-            }
-            bitmap.data[offset + 0] = color[0]
-            bitmap.data[offset + 1] = color[1]
-            bitmap.data[offset + 2] = color[2]
-            bitmap.data[offset + 3] = 255 // no transparency
-          }
-        }
-      }
-      this._ctx.putImageData(bitmap, 0, 0)
-      if (!this.noAaBorder && this.shape === 'circle') {
-        //Getting a nice anti aliased edge using canvas is hard, so instead a white circle is draw over the border
-        this.drawAACircle()
-      }
-    })
-  },
-  drawAACircle: function() {
-    if (this.colouredAaBorder) {
-      if (this.color['green']) {
-        this.set(
-          '_ctx.strokeStyle',
-          'rgb(' + this.color['red'] + ',' + this.color['green'] + ',' + this.color['blue'] + ')'
-        )
-      } else {
-        this.set(
-          '_ctx.strokeStyle',
-          'rgb(' + this.colouredAaBorder[0] + ',' + this.colouredAaBorder[1] + ',' + this.colouredAaBorder[2] + ')'
-        )
-      }
-    } else {
-      this.set('_ctx.strokeStyle', 'rgba(255,255,255,.99)')
-    }
-    this.set('_ctx.lineWidth', this.size / 100)
-    this._ctx.beginPath()
-    var borderRadius = this.size / 2
-    this._ctx.arc(this.size / 2, this.size / 2, borderRadius - 1, 0, 2 * Math.PI, false)
-    this._ctx.closePath()
-    this._ctx.stroke()
-  },
-  valueChanged: function() {
-    if (this._domReady) this.redraw()
-  },
-  lightnessChanged: function() {
-    if (this._domReady) this.redraw()
-  },
-  hueChanged: function() {
-    if (this._domReady) this.redraw()
-  },
-  colorChanged: function() {
-    if (!this._trackingColorChanges) {
-      if (this.type == 'hsl') {
-        var hsl = this.rgb2hsl(parseInt(this.color.red), parseInt(this.color.green), parseInt(this.color.blue))
-        this.hue = hsl[0]
-        this.lightness = hsl[2]
-      } else if (this.type == 'hsv') {
-        var hsv = this.rgb2hsv(parseInt(this.color.red), parseInt(this.color.green), parseInt(this.color.blue))
-        if (!isNaN(Number(hsv[0]))) this.hue = Number(hsv[0])
-        this.value = hsv[2]
-      }
-    }
-    //if(this._domReady)
-    //  this.redraw();
-  },
-  attached: function() {
-    this._domReady = true
-    this._ctx = this.$.canvas.getContext('2d')
-    this.redraw()
-  }
-})