Pergola colorpicker

The ColorBoxSelector class is specifically designed to use the pergola.colorpicker, a reusable instance of the ColorPicker class created at runtime. A ColorBoxSelector instance initializes the color picker through its event handler. To initialize the color picker through some other object or event you must specifically invoke the pergola.colorpicker.init method which expects one object with two properties: user, which designates an object (normally a reference to self), and color, a color value in any legal format, for example:

pergola.colorpicker.init({
  user: object,
  color: color value
});

View as standalone SVG

var g = $C({element : "g", transform : "translate(100 50)", appendTo : pergola.user});

var mySelector = new pergola.ColorBoxSelector();
mySelector.build({
  parent : g,
  caption : {
    text : {
      x : -6,
      y : 15,
      textNode : "Select color",
      "pointer-events" : "none"
    }
  },
  target : pergola.background,
  fn : function () {
    var cp = pergola.colorpicker;
    var user = cp.user;
    var color = cp.color;
    user.fill = color;
    user.rect.setAttributeNS(null, "fill", color);
// example : change the target element color
//    user.target.fill = color;
//    user.target.rect.setAttributeNS(null, "fill", color);
  }
});

Selector Box and Color Picker