solrkit
Version:
 
149 lines • 8.84 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var lodash_1 = require("lodash");
var semantic_ui_react_1 = require("semantic-ui-react");
var d3 = require("d3");
var tinycolor = require("tinycolor2");
require("d3-scale");
require("d3-svg");
require("d3-brush");
require("d3-drag");
var semantic_ui_react_2 = require("semantic-ui-react");
var types = ['Analogous', 'Complementary', 'Triad', 'Tetrad', 'Monochromatic'].map(function (value, i) {
return {
key: i,
text: value,
value: value
};
});
var Modes = {
CUSTOM: 'Custom',
ANALOGOUS: 'Analogous',
COMPLEMENTARY: 'Complementary',
TRIAD: 'Triad',
TETRAD: 'Tetrad',
MONOCHROMATIC: 'Monochromatic',
SHADES: 'Shades',
};
var ColorPickerFacet = (function (_super) {
__extends(ColorPickerFacet, _super);
function ColorPickerFacet() {
var _this = _super.call(this) || this;
_this.options = {
radius: 175,
margin: 0,
markerWidth: 5,
defaultSlice: 20,
initRoot: 'red',
baseClassName: 'colorwheel',
};
_this.state = {
mode: Modes.ANALOGOUS,
colors: []
};
_this.dispatch = d3.dispatch('markersUpdated', 'updateEnd', 'bindData', 'modeChanged');
_this.pickColor = _this.pickColor.bind(_this);
return _this;
}
ColorPickerFacet.prototype.render = function () {
var _this = this;
var title = this.props.title;
var help = this.props.help;
return (React.createElement("div", { className: "ui", style: { marginBottom: '1em' } },
title ? (help ? (React.createElement(semantic_ui_react_2.Popup, { trigger: React.createElement("h4", null, title), content: help })) :
React.createElement("h4", null, title))
: null,
React.createElement("div", null,
React.createElement(semantic_ui_react_1.Dropdown, { options: types, selection: true, closeOnBlur: true, simple: true, item: true, value: 'Analogous', onChange: function (e, _a) {
var value = _a.value;
return _this.onClick(value + '');
} }),
this.state.colors.map(function (color) { return (React.createElement("div", { style: { width: 10, height: 10, float: 'left', backgroundColor: color } })); }),
React.createElement("svg", { ref: function (svg) { return _this.container = svg; }, className: "colorwheel", width: "160", height: "160", viewBox: "-30 -30 420 420", onClick: this.pickColor },
React.createElement("g", null,
React.createElement("line", { className: "colorwheel-marker-trail", x1: "175", y1: "175", stroke: "steelblue", strokeOpacity: "0.75", strokeWidth: "3", strokeDasharray: "10, 6", x2: "350", y2: "175", visibility: "visible" }),
React.createElement("line", { className: "colorwheel-marker-trail", x1: "175", y1: "175", stroke: "steelblue", strokeOpacity: "0.75", strokeWidth: "3", strokeDasharray: "10, 6", x2: "125.55000305175781", y2: "221.22500610351562", visibility: "visible" }),
React.createElement("line", { className: "colorwheel-marker-trail", x1: "175", y1: "175", stroke: "steelblue", strokeOpacity: "0.75", strokeWidth: "3", strokeDasharray: "10, 6", x2: "47.15779716907171", y2: "55.49530898188226", visibility: "visible" }),
React.createElement("line", { className: "colorwheel-marker-trail", x1: "175", y1: "175", stroke: "steelblue", strokeOpacity: "0.75", strokeWidth: "3", strokeDasharray: "10, 6", x2: "186.54407515803408", y2: "3.9569560828419696", visibility: "visible" }),
React.createElement("line", { className: "colorwheel-marker-trail", x1: "175", y1: "175", stroke: "steelblue", strokeOpacity: "0.75", strokeWidth: "3", strokeDasharray: "10, 6", x2: "186.78432942473347", y2: "349.6027765529785", visibility: "visible" })),
React.createElement("g", null,
React.createElement("g", { className: "colorwheel-marker root", visibility: "visible", transform: "translate(350,175)" },
React.createElement("circle", { r: "20", stroke: "steelblue", strokeWidth: "2", strokeOpacity: "0.9", cursor: "move", fill: "#ff0000" }),
React.createElement("text", { x: "28", y: "5", fill: "steelblue", fontSize: "13px" })),
React.createElement("g", { className: "colorwheel-marker", visibility: "visible", transform: "translate(125.55000305175781,221.22500610351562)" },
React.createElement("circle", { r: "20", stroke: "steelblue", strokeWidth: "2", strokeOpacity: "0.9", cursor: "move", fill: "#9cf6ff" }),
React.createElement("text", { x: "28", y: "5", fill: "steelblue", fontSize: "13px" })),
React.createElement("g", { className: "colorwheel-marker", visibility: "visible", transform: "translate(47.15779716907171,55.49530898188226)" },
React.createElement("circle", { r: "20", stroke: "steelblue", strokeWidth: "2", strokeOpacity: "0.9", cursor: "move", fill: "#a6ff00" }),
React.createElement("text", { x: "28", y: "5", fill: "steelblue", fontSize: "13px" })),
React.createElement("g", { className: "colorwheel-marker", visibility: "visible", transform: "translate(186.54407515803408,3.9569560828419696)" },
React.createElement("circle", { r: "20", stroke: "steelblue", strokeWidth: "2", strokeOpacity: "0.9", cursor: "move", fill: "#ffc305" }),
React.createElement("text", { x: "28", y: "5", fill: "steelblue", fontSize: "13px" })),
React.createElement("g", { className: "colorwheel-marker", visibility: "visible", transform: "translate(186.78432942473347,349.6027765529785)" },
React.createElement("circle", { r: "20", stroke: "steelblue", strokeWidth: "2", strokeOpacity: "0.9", cursor: "move", fill: "#0005ff" }),
React.createElement("text", { x: "28", y: "5", fill: "steelblue", fontSize: "13px" })))))));
};
ColorPickerFacet.prototype.pickColor = function (elt) {
var newColors = {
colors: [
tinycolor.fromRatio({
r: Math.random(),
g: Math.random(),
b: Math.random()
}),
tinycolor.fromRatio({
r: Math.random(),
g: Math.random(),
b: Math.random()
})
]
};
var searchTerms = newColors.colors.map(function (color) {
var cm = color.toRgb();
return (Math.round(cm.r / 32.0) * 8 * 8 +
Math.round(cm.g / 32.0) * 8 +
Math.round(cm.b / 32.0));
});
this.context.transition({
start: 0,
boost: searchTerms.join(' ')
});
this.setState(newColors);
};
ColorPickerFacet.prototype.onClick = function (value) {
var _this = this;
return function () {
var selections = lodash_1.get(_this.context.searchState.facets, _this.props.facet, []);
if (lodash_1.includes(selections, value)) {
selections = selections.filter(function (f) { return f !== value; });
}
else {
selections.push(value);
}
var thisFacet = {};
thisFacet[_this.props.facet] = selections;
_this.context.transition({
start: 0,
facets: thisFacet
});
};
};
ColorPickerFacet.contextTypes = {
searchState: React.PropTypes.object,
transition: React.PropTypes.func
};
return ColorPickerFacet;
}(React.Component));
exports.ColorPickerFacet = ColorPickerFacet;
//# sourceMappingURL=ColorPickerFacet.js.map