@jswf/core
Version:
JavaScript Window Framework
313 lines • 13 kB
JavaScript
;
/**
*カラーピッカー表示用
*
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
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 extendStatics(d, b);
};
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 });
require("../scss/ColorPickerView.scss");
var BaseView_1 = require("./BaseView");
var FrameWindow_1 = require("./FrameWindow");
var Libs_1 = require("./Libs");
var ColorView = /** @class */ (function (_super) {
__extends(ColorView, _super);
function ColorView() {
var _this = _super.call(this) || this;
_this.trianglePoinst = [];
_this.targetSize = 40;
_this.triangleSize = 1;
_this.color = { r: 255, g: 255, b: 255 };
_this.color2 = { r: 255, g: 255, b: 255 };
_this.setSize(300, 300);
var client = _this.getClient();
var targetSize = _this.targetSize;
var triangleCanvas = document.createElement("canvas");
_this.triangleCanvas = triangleCanvas;
triangleCanvas.style.position = "absolute";
client.appendChild(triangleCanvas);
triangleCanvas.addEventListener("mousemove", function (e) {
if (e.buttons == 0)
return;
_this.setTriangleColor(e);
});
var canvasTarget = document.createElement("canvas");
_this.canvasTarget = canvasTarget;
canvasTarget.style.position = "absolute";
client.appendChild(canvasTarget);
canvasTarget.addEventListener("click", function () {
_this.callEvent("color", _this.color2);
});
var canvasLevel = document.createElement("canvas");
_this.canvasLevel = canvasLevel;
canvasLevel.style.position = "absolute";
client.appendChild(canvasLevel);
canvasLevel.addEventListener("mousemove", function (e) {
if (e.buttons == 0 || !(e.target instanceof HTMLCanvasElement))
return;
var rect = e.target.getBoundingClientRect();
var mouseY = e.clientY - rect.top;
var color = _this.color;
var color2 = _this.color2;
color2.r = _this.getColorLevel(mouseY, color.r);
color2.g = _this.getColorLevel(mouseY, color.g);
color2.b = _this.getColorLevel(mouseY, color.b);
_this.setTarget();
});
_this.addEventListener("layouted", function () {
var width = _this.getClientWidth();
var height = _this.getClientHeight();
canvasTarget.width = targetSize;
canvasTarget.height = targetSize;
canvasLevel.style.top = targetSize + "px";
canvasLevel.width = targetSize;
canvasLevel.height = height - targetSize;
canvasLevel.style.marginRight = "2px";
triangleCanvas.style.left = targetSize + "px";
triangleCanvas.width = width - targetSize;
triangleCanvas.height = height;
_this.drawTriangle();
_this.setLevel();
});
return _this;
}
ColorView.prototype.getColorLevel = function (py, color) {
var length = this.canvasLevel.height / 2;
var level = ((py - length) / length) * 1.1;
var value;
if (level < 0) {
value = Math.floor(255 * -level + color * (1 + level));
}
else {
value = Math.floor(color * (1 - level));
}
if (value < 0)
value = 0;
else if (value > 255)
value = 255;
return value;
};
ColorView.prototype.setTriangleColor = function (e) {
if (!e.target)
return;
var trianglePoinst = this.trianglePoinst;
var rect = e.target.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;
var r = this.getColor(mouseX, mouseY, trianglePoinst[0].x, trianglePoinst[0].y);
var g = this.getColor(mouseX, mouseY, trianglePoinst[1].x, trianglePoinst[1].y);
var b = this.getColor(mouseX, mouseY, trianglePoinst[2].x, trianglePoinst[2].y);
this.setLevel(r, g, b);
};
ColorView.prototype.setTarget = function () {
var canvasTarget = this.canvasTarget;
var ctx = canvasTarget.getContext("2d");
if (!ctx)
return;
var color2 = this.color2;
ctx.fillStyle =
"rgb(" +
(255 - color2.r) +
"," +
(255 - color2.g) +
"," +
(255 - color2.b) +
")";
ctx.fillRect(0, 0, canvasTarget.width, canvasTarget.height);
ctx.fillStyle = "rgb(" + color2.r + "," + color2.g + "," + color2.b + ")";
ctx.fillRect(2, 2, canvasTarget.width - 4, canvasTarget.height - 4);
};
ColorView.prototype.setLevel = function (r, g, b) {
var color = this.color;
if (r === undefined || g === undefined || b === undefined) {
r = color.r;
g = color.g;
b = color.b;
}
else {
this.color = { r: r, g: g, b: b };
this.color2 = { r: r, g: g, b: b };
}
var canvasLevel = this.canvasLevel;
var ctxLevel = canvasLevel.getContext("2d");
if (!ctxLevel)
return false;
var grad = ctxLevel.createLinearGradient(0, canvasLevel.height, 0, 0);
grad.addColorStop(0 + (1 - 1 / 1.1), "rgb(0,0,0)");
grad.addColorStop(0.5, "rgb(" + r + "," + g + "," + b + ")");
grad.addColorStop(1 - (1 - 1 / 1.1), "rgb(255,255,255)");
ctxLevel.fillStyle = grad;
ctxLevel.fillRect(0, 0, canvasLevel.width, canvasLevel.height);
this.setTarget();
};
ColorView.prototype.getColor = function (px, py, cx, cy) {
var value = Math.floor((1 -
Math.sqrt(Math.pow(px - cx, 2) + Math.pow(py - cy, 2)) /
this.triangleSize) *
255 *
1.1);
if (value < 0)
value = 0;
else if (value > 255)
value = 255;
return value;
};
ColorView.prototype.drawTriangle = function () {
var triangleCanvas = this.triangleCanvas;
var targetSize = this.targetSize;
//クライアントサイズの取得
var width = this.getClientWidth() - targetSize;
var height = this.getClientHeight();
//キャンバスサイズの修正
triangleCanvas.width = width;
triangleCanvas.height = height;
var ctx = triangleCanvas.getContext("2d");
if (!ctx)
return;
ctx.clearRect(0, 0, width, height);
//トライアングルサイズの補正
var triangle = Math.min(width, height) * 0.95;
this.triangleSize = triangle;
width = triangle;
height = triangle;
var x = (triangleCanvas.width - width) / 2;
var y = (triangleCanvas.height - height) / 2;
var trianglePoinst = [
{ x: x + width / 2, y: y },
{ x: x, y: y + height },
{ x: x + width, y: y + height }
];
this.trianglePoinst = trianglePoinst;
var color = [
["RGBA(255,0,0,255)", "RGBA(0,0,0,255)"],
["RGBA(0,255,0,255)", "RGBA(0,0,0,255)"],
["RGBA(0,0,255,255)", "RGBA(0,0,0,255)"]
];
ctx.globalCompositeOperation = "lighter";
for (var i = 0; i < 3; i++) {
var i0 = i % 3;
var i1 = (i + 1) % 3;
var i2 = (i + 2) % 3;
/* 三角形を描く */
var grad = ctx.createLinearGradient(trianglePoinst[i0].x, trianglePoinst[i0].y, (trianglePoinst[i1].x + trianglePoinst[i2].x) / 2, (trianglePoinst[i1].y + trianglePoinst[i2].y) / 2);
grad.addColorStop(0, color[i][0]);
grad.addColorStop(1 / 1.1, color[i][1]);
ctx.fillStyle = grad;
ctx.beginPath();
ctx.moveTo(trianglePoinst[i0].x, trianglePoinst[i0].y);
ctx.lineTo(trianglePoinst[i1].x, trianglePoinst[i1].y);
ctx.lineTo(trianglePoinst[i2].x, trianglePoinst[i2].y);
ctx.closePath();
/* 三角形を塗りつぶす */
ctx.fill();
}
};
return ColorView;
}(BaseView_1.BaseView));
exports.ColorView = ColorView;
var ColorPickerWindow = /** @class */ (function (_super) {
__extends(ColorPickerWindow, _super);
function ColorPickerWindow() {
var _this = _super.call(this) || this;
_this.setJwfStyle("ColorPickerWindow");
_this.setSize(400, 300);
_this.setTitle("Color Picker");
var colorView = new ColorView();
_this.addChild(colorView, "client");
var colorValues = JSON.parse(localStorage.getItem(_this.getStrageName("Colors")) || "[]");
_this.colorValues = colorValues;
var colorSelector = new BaseView_1.BaseView();
colorSelector.setJwfStyle("ColorSelector");
colorSelector.setWidth(120);
_this.addChild(colorSelector, "left");
var client = colorSelector.getClient();
var inputArea = document.createElement("div");
var input = document.createElement("input");
inputArea.appendChild(input);
input = document.createElement("input");
inputArea.appendChild(input);
input = document.createElement("input");
inputArea.appendChild(input);
client.appendChild(inputArea);
var inputs = inputArea.childNodes;
_this.inputs = inputs;
var colorsArea = document.createElement("div");
_this.colorsArea = colorsArea;
colorsArea.dataset.type = "colors";
var _loop_1 = function (i) {
var cell = document.createElement("div");
colorsArea.appendChild(cell);
var c = document.createElement("div");
cell.appendChild(c);
if (colorValues[i])
c.style.backgroundColor = this_1.getRGB(colorValues[i]);
else
c.style.backgroundColor = this_1.getRGB({ r: 255, g: 255, b: 255 });
cell.addEventListener("click", function () {
_this.selectCell(i);
_this.callEvent("color", _this.colorValues[i]);
});
};
var this_1 = this;
for (var i = 0; i < 40; i++) {
_loop_1(i);
}
client.appendChild(colorsArea);
_this.selectCell(0);
colorView.addEventListener("color", function (color) {
var cell = _this.cell;
if (!cell)
return;
var c = cell.childNodes[0];
var index = cell.dataset.index;
colorValues[parseInt(index)] = color;
c.style.backgroundColor = _this.getRGB(color);
localStorage.setItem(_this.getStrageName("Colors"), JSON.stringify(colorValues));
_this.selectCell(parseInt(index));
});
return _this;
}
ColorPickerWindow.prototype.getStrageName = function (name) {
return (location.hostname || "") + (location.pathname || "") + name;
};
ColorPickerWindow.prototype.getRGB = function (color) {
return Libs_1.sprintf("rgb(%d,%d,%d)", color.r, color.g, color.b);
};
ColorPickerWindow.prototype.selectCell = function (index) {
var colorsArea = this.colorsArea;
var cell = colorsArea.childNodes[index];
if (!cell)
return;
if (this.cell)
this.cell.dataset.active = "false";
cell.dataset.index = index.toString();
cell.dataset.active = "true";
this.cell = cell;
var color = this.colorValues[index];
var inputs = this.inputs;
if (color) {
inputs[0].value = color.r.toString();
inputs[1].value = color.g.toString();
inputs[2].value = color.b.toString();
}
else {
inputs[0].value = "255";
inputs[1].value = "255";
inputs[2].value = "255";
}
};
return ColorPickerWindow;
}(FrameWindow_1.FrameWindow));
exports.ColorPickerWindow = ColorPickerWindow;
//# sourceMappingURL=ColorPickerView.js.map