big commit

parent 22ec29dc
......@@ -39,18 +39,39 @@
}
.hue-slider {
height: .25rem;
width: 1.5rem;
left: -1px;
right: -1px;
border: 1px solid #000;
background: #fff;
top: -.15rem;
left: 1.5rem;
height: 12.5rem;
width: 0;
opacity: .8;
position: absolute;
top: 0;
cursor: pointer;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
#colorContainer {
margin-right: 3rem;
}
.acp-pointMarker {
background: rgba(255, 255, 255, 1);
position: absolute;
width: .25rem;
height: .25rem;
border-radius: 50%;
border-color: black;
border-style: solid;
border-width: .05rem;
}
.acp-barMarker {
background: rgba(255, 255, 255, 1);
position: absolute;
height: .35rem;
width: 100%;
border-radius: 25%;
border-color: black;
border-style: solid;
border-width: .05rem;
}
\ No newline at end of file
export class AlphaSelect {
constructor() {
document.getElementById("alphaSelectContainer").appendChild(this.initRange());
}
private initRange() {
const size = 200;
const canvas: HTMLCanvasElement = document.createElement("canvas");
canvas.id = "alpha-canvas";
const context: CanvasRenderingContext2D = canvas.getContext('2d');
canvas.width = size;
canvas.height = size / 8;
canvas.style.backgroundImage = `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)`;
//Highest Value on the left side
const gradientAlpha: CanvasGradient = context.createLinearGradient(0, 0, size, 0);
gradientAlpha.addColorStop(0, "rgba(0,0,0,0)");
gradientAlpha.addColorStop(1, "rgba(0,0,0)");
context.fillStyle = gradientAlpha;
context.fillRect(0, 0, size, size / 8);
return canvas;
}
}
\ No newline at end of file
import {createDiv} from "./DOMHelper";
import {rgb2hex} from "./ColorHelper";
import {getGlobalMousePos, getMousePos, insertIntoRgbFields, rgbValueAtPosition} from "../helper/InputHelper";
type RGBValue = { r: number, g: number, b: number };
export class ColorPicker {
......@@ -7,44 +8,17 @@ export class ColorPicker {
document.getElementById("gradientSelectContainer").appendChild(this.initCanvas());
}
private init() {
//TODO: Color, Saturation, Value
const pickerContainer: HTMLDivElement = createDiv();
pickerContainer.style.width = "10rem";
pickerContainer.style.height = "10rem";
pickerContainer.classList.add("acs-picker-container");
const colorLayer: HTMLDivElement = createDiv("acs-picker-color");
//TODO: Color Layer inline currently selected color
colorLayer.style.background = "rgb(251, 255, 0)";
pickerContainer.appendChild(colorLayer);
const saturationLayer: HTMLDivElement = createDiv("acs-picker-saturation");
colorLayer.appendChild(saturationLayer);
const valueLayer: HTMLDivElement = createDiv("acs-picker-value");
saturationLayer.appendChild(valueLayer);
const dragger: HTMLDivElement = createDiv("acs-dragger");
dragger.style.top = "1px";
dragger.style.left = "1px";
//TODO: create Dragging element
return pickerContainer;
}
private initCanvas() {
const size = 200;
const canvas: HTMLCanvasElement = document.createElement("canvas");
canvas.id = "gradient-canvas";
const context: CanvasRenderingContext2D = canvas.getContext('2d');
canvas.width = size;
canvas.height = size;
context.fillStyle = "blue";
context.fillStyle = "white";
context.fillRect(0, 0, size, size);
//Highest Value on the left side
......@@ -63,35 +37,37 @@ export class ColorPicker {
context.fillStyle = gradientBlack;
context.fillRect(0, 0, size, size);
canvas.onmousemove = function (e: MouseEvent) {
const x: number = e.x;
const y: number = e.y;
// set color now
var canvasColor = context.getImageData(x, y, 1, 1).data; // rgba e [0,255]
var r = canvasColor[0];
var g = canvasColor[1];
var b = canvasColor[2];
//Create marker point
const point = document.createElement("div");
point.classList.add("acp-pointMarker");
point.style.display = "none";
document.getElementById("gradientSelectContainer").appendChild(point);
console.log(`${r}, ${g}, ${b}`);
canvas.onclick = function (e: MouseEvent) {
const coords: WebKitPoint = getMousePos(canvas, e);
insertIntoRgbFields(r, g, b);
const mousePosition: WebKitPoint = getGlobalMousePos(e);
point.style.display = "inline";
point.style.left = `${mousePosition.x}px`;
point.style.top = `${mousePosition.y}px`;
function insertIntoRgbFields(r, g, b) {
const R: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='R']");
const G: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='G']");
const B: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='B']");
const canvasColor: RGBValue = rgbValueAtPosition(context, coords);
R.value = r;
G.value = g;
B.value = b;
insertIntoRgbFields(canvasColor);
document.getElementById("hexFieldContainer").querySelector("input").value = rgb2hex(`rgb(${r},${g},${b})`);
let colorList: RGBValue[] = [];
if (!window["acpList"]) {
window["acpList"] = [];
} else {
colorList = window["acpList"];
}
colorList.unshift(canvasColor);
window["acpList"] = colorList.slice(0, 5);
console.log("Color List => ", window["acpList"]);
};
return canvas;
}
private
}
\ No newline at end of file
import {getGlobalMousePos, getMousePos, insertIntoRgbFields, rgbValueAtPosition} from "../helper/InputHelper";
type RGBValue = { r: number, g: number, b: number };
export class HueSelect {
constructor() {
document.getElementById("hueSelectContainer").appendChild(this.initHue());
//document.getElementById("hueSelectContainer").appendChild(this.initSlider());
}
private initHue() {
const size = 200;
const canvas: HTMLCanvasElement = document.createElement("canvas");
const context: CanvasRenderingContext2D = canvas.getContext('2d');
canvas.classList.add("hue-canvas");
canvas.width = size / 8;
canvas.height = size;
//Highest value at the bottom
const gradientHue: CanvasGradient = context.createLinearGradient(0, 0, 0, size);
gradientHue.addColorStop(0, "rgb(255,0,0)");
gradientHue.addColorStop(0.17, "rgb(255,255,0)");
gradientHue.addColorStop(0.33, "rgb(0,255,0)");
gradientHue.addColorStop(0.50, "rgb(0,255,255)");
gradientHue.addColorStop(0.67, "rgb(0,0,255)");
gradientHue.addColorStop(0.83, "rgb(255,0,255)");
gradientHue.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = gradientHue;
context.fillRect(0, 0, size / 8, size);
const gradientCanvas: HTMLCanvasElement = document.getElementById("gradient-canvas") as HTMLCanvasElement;
const gradientContext = gradientCanvas.getContext('2d');
//Create marker bar
const bar = document.createElement("div");
bar.classList.add("acp-barMarker");
bar.style.display = "none";
document.getElementById("hueSelectContainer").appendChild(bar);
canvas.onclick = (e: MouseEvent) => {
const coords: WebKitPoint = getMousePos(canvas, e);
const mousePosition: WebKitPoint = getGlobalMousePos(e);
bar.style.display = "inline";
console.log("Rect => ", canvas.getBoundingClientRect());
bar.style.top = `${mousePosition.y}px`;
const canvasColor: RGBValue = rgbValueAtPosition(context, coords);
gradientContext.fillStyle = `rgb(${canvasColor.r}, ${canvasColor.g}, ${canvasColor.b})`;
gradientContext.fillRect(0, 0, 200, 200);
//Highest Value on the left side
const gradientWhite: CanvasGradient = gradientContext.createLinearGradient(0, 0, 200, 0);
gradientWhite.addColorStop(0, "rgba(255,255,255,1)");
gradientWhite.addColorStop(1, "rgba(255,255,255,0)");
gradientContext.fillStyle = gradientWhite;
gradientContext.fillRect(0, 0, 200, 200);
//Highest value at the bottom
const gradientBlack: CanvasGradient = gradientContext.createLinearGradient(0, 0, 0, 200);
gradientBlack.addColorStop(0, "rgba(0,0,0,0)");
gradientBlack.addColorStop(1, "rgba(0,0,0,1)");
gradientContext.fillStyle = gradientBlack;
gradientContext.fillRect(0, 0, 200, 200);
};
return canvas;
}
private initBar() {
}
private initSlider() {
const rangeSlider: HTMLInputElement = document.createElement("input");
rangeSlider.classList.add("hue-slider");
rangeSlider.type = "range";
rangeSlider.setAttribute("orient", "vertical");
rangeSlider.addEventListener("change", (e: Event) => {
console.log("Event => ", e.target);
console.log("Value => ", rangeSlider.value);
const canvas: HTMLCanvasElement = document.querySelector(".hue-canvas");
canvas.dispatchEvent(new CustomEvent("mousemove"));
});
return rangeSlider;
/**
const slider: HTMLDivElement = document.createElement("div");
slider.classList.add("hue-slider");
slider.draggable = true;
slider.ondragstart = (e: DragEvent) => {
const sliderBounds = (e.target as HTMLDivElement).getBoundingClientRect();
e.dataTransfer.setData("Bounds", JSON.stringify(sliderBounds));
};
const canvas: HTMLCanvasElement = document.querySelector(".hue-canvas");
canvas.ondrop = (e: DragEvent) => {
};
canvas.ondragover = (e: DragEvent) => {
};
slider.ondragleave = (e: DragEvent) => {
e.preventDefault();
console.log("Drag Leave");
(e.target as HTMLDivElement).style.top = "100px";
};
slider.ondragstart = (e: DragEvent) => {
console.log("Drag Start");
const sliderBounds = slider.getBoundingClientRect();
e.dataTransfer.setData("Stuff", "content");
e.dataTransfer.setData("OriginalPosition", JSON.stringify({x: sliderBounds.left, y: sliderBounds.top}));
};
slider.ondrag = (e: DragEvent) => {
e.preventDefault();
console.log("Drag");
const sliderBounds = slider.getBoundingClientRect();
e.dataTransfer.setData("Stuff", "content");
e.dataTransfer.setData("OriginalPosition", JSON.stringify({x: sliderBounds.left, y: sliderBounds.top}));
const canvasBounds = canvas.getBoundingClientRect();
const deltaX = Math.abs(canvasBounds.left - sliderBounds.left);
const deltaY = Math.abs(canvasBounds.top - sliderBounds.top);
};
slider.ondragend = (e: DragEvent) => {
e.preventDefault();
console.log("Drag End");
};
slider.ondrop = (e: DragEvent) => {
e.preventDefault();
console.log("Pos => ", e.dataTransfer.getData("OriginalPosition"));
};
return slider;
*/
}
}
\ No newline at end of file
export class AlphaSelect {
}
\ No newline at end of file
export function createDiv(...classes: string[]): HTMLDivElement {
const div: HTMLDivElement = document.createElement("div");
if(classes) {
for(let i = 0; i < classes.length; i++) {
const c = classes[i];
div.classList.add(c);
}
}
return div;
}
\ No newline at end of file
export class HueSelect {
constructor() {
document.getElementById("hueSelectContainer").appendChild(this.initHue());
document.getElementById("hueSelectContainer").appendChild(this.initSlider());
}
private initHue() {
const size = 200;
const canvas: HTMLCanvasElement = document.createElement("canvas");
const context: CanvasRenderingContext2D = canvas.getContext('2d');
canvas.width = size / 8;
canvas.height = size;
//Highest value at the bottom
const gradientHue: CanvasGradient = context.createLinearGradient(0, 0, 0, size);
gradientHue.addColorStop(0, "rgb(255,0,0)");
gradientHue.addColorStop(0.17, "rgb(255,255,0)");
gradientHue.addColorStop(0.33, "rgb(0,255,0)");
gradientHue.addColorStop(0.50, "rgb(0,255,255)");
gradientHue.addColorStop(0.67, "rgb(0,0,255)");
gradientHue.addColorStop(0.83, "rgb(255,0,255)");
gradientHue.addColorStop(1, "rgb(255,0,0)");
context.fillStyle = gradientHue;
context.fillRect(0, 0, size, size);
canvas.style.position = "absolute";
return canvas;
}
private initSlider() {
const slider: HTMLDivElement = document.createElement("div");
slider.classList.add("hue-slider");
return slider;
}
}
\ No newline at end of file
import {rgb2hex} from "./ColorHelper";
export function getMousePos(canvas, evt): WebKitPoint {
const rect = canvas.getBoundingClientRect(), // abs. size of element
scaleX = canvas.width / rect.width, // relationship bitmap vs. element for X
scaleY = canvas.height / rect.height; // relationship bitmap vs. element for Y
return {
x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have
y: (evt.clientY - rect.top) * scaleY // been adjusted to be relative to element
}
}
export function getGlobalMousePos(evt): WebKitPoint {
return {
x: evt.clientX,
y: evt.clientY
}
}
export function rgbValueAtPosition(context: CanvasRenderingContext2D, coords: WebKitPoint) {
const canvasColor: Uint8ClampedArray = context.getImageData(coords.x, coords.y, 1, 1).data; // rgba e [0,255]
return {r: canvasColor[0], g: canvasColor[1], b: canvasColor[2]};
}
export function insertIntoRgbFields(color) {
const R: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='R']");
const G: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='G']");
const B: HTMLInputElement = document.getElementById("rgbFieldsContainer").querySelector("[data-title='B']");
R.value = color.r;
G.value = color.g;
B.value = color.b;
document.getElementById("hexFieldContainer").querySelector("input").value = rgb2hex(`rgb(${color.r},${color.g},${color.b})`);
}
\ No newline at end of file
......@@ -8,9 +8,9 @@ import {
createHsbPercentInput,
createRGBInput
} from "./helper/inputs";
import {ColorPicker} from "./helper/ColorPicker";
import {HueSelect} from "./helper/HueSelect";
import {AlphaSelect} from "./helper/AlphaSelect";
import {ColorPicker} from "./areas/ColorPicker";
import {HueSelect} from "./areas/HueSelect";
import {AlphaSelect} from "./areas/AlphaSelect";
export class init {
......@@ -20,9 +20,9 @@ export class init {
constructor() {
const colorSettings = document.getElementById("inputFields");
colorSettings.appendChild(this.initHSBInputs());
//colorSettings.appendChild(this.initHSBInputs());
colorSettings.appendChild(this.initRGBInputs());
colorSettings.appendChild(this.initCMYKInputs());
//colorSettings.appendChild(this.initCMYKInputs());
colorSettings.appendChild(this.initHexInput());
new ColorPicker();
......
type RGBValue = {r: number, g: number, b: number};
\ No newline at end of file
......@@ -7,18 +7,16 @@
<body>
<div class="container" id="colorSettings">
<div class="container" id="colorContainer">
<div class="row">
<div class="row" style="margin-right: 3rem;">
<div id="gradientSelectContainer">
</div>
</div>
<div class="row">
<div id="hueSelectContainer" style="position: relative;">
<div id="alphaSelectContainer">
</div>
</div>
<div class="row">
<div id="alphaSelectContainer">
<div id="hueSelectContainer" style="position: relative;">
</div>
</div>
......@@ -26,6 +24,9 @@
<div class="container" id="settingsContainer">
<div class="row" id="inputFields">
</div>
<div class="row" id="lastColors">
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment