Skip to content

Commit b3bd96f

Browse files
ivictborivictbor
committed
rework alpha input
1 parent 1635644 commit b3bd96f

4 files changed

Lines changed: 164 additions & 29 deletions

File tree

‎css/checkers.svg‎

Lines changed: 85 additions & 0 deletions
Loading

‎css/styles.css‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,12 @@
8585

8686
.ptro-wrapper .ptro-crp-el {
8787
position: absolute;
88+
}
8889

90+
.ptro-wrapper .ptro-close-color-picker {
91+
height: 24px;
92+
float: right;
93+
margin-top: 5px;
8994
}
9095

9196
.ptro-wrapper .ptro-crp-rect {
@@ -238,7 +243,7 @@
238243
}
239244

240245
.ptro-wrapper .ptro-color-edit {
241-
margin-top: 10px;
246+
margin-top: 15px;
242247
}
243248

244249
.ptro-wrapper .ptro-color-edit input {
@@ -274,27 +279,28 @@
274279
font-family: "Open Sans", sans-serif;
275280
}
276281

277-
.ptro-wrapper .ptro-color-edit button {
282+
.ptro-wrapper .ptro-pipette {
278283
float: right;
279284
height: 24px;
280285
width: 24px;
281286
margin: 0;
282287
}
283288

284-
.ptro-wrapper .ptro-color-edit button i {
289+
.ptro-wrapper .ptro-pipette i {
285290
line-height: 16px;
286291
}
287292

288-
.ptro-wrapper .ptro-color-edit button:active {
293+
.ptro-wrapper .ptro-pipette:active {
289294
outline: none;
290295
}
291296

292297
.ptro-wrapper .ptro-color-widget-wrapper .ptro-canvas-light,
293-
.ptro-wrapper .ptro-resize-widget-wrapper .ptro-canvas-light {
298+
.ptro-wrapper .ptro-color-widget-wrapper .ptro-canvas-alpha {
294299
margin-top: 10px;
295300
}
296301

297-
.ptro-color-light-regulator {
302+
.ptro-color-light-regulator,
303+
.ptro-color-alpha-regulator {
298304
display: block;
299305
margin-top: -5px;
300306
margin-left: 5px;
@@ -307,12 +313,24 @@
307313
cursor: crosshair;
308314
}
309315

316+
.ptro-color-alpha-regulator {
317+
margin-top: 0;
318+
}
319+
320+
.alpha-checkers {
321+
background-image: url("checkers.svg");
322+
display: block;
323+
width: 100%;
324+
height: 15px;
325+
background-size: 10px 10px;
326+
margin-top: -20px;
327+
}
310328

311329
.ptro-input:focus{
312330
outline: none;
313331
}
314332

315-
.ptro-wrapper .ptro-zoomer{
333+
.ptro-wrapper .ptro-zoomer {
316334
border-top:1px solid white;
317335
border-left:1px solid white;
318336
position: absolute;

‎js/colorPicker.js‎

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,19 +51,25 @@ export default class ColorPicker {
5151

5252
this.wrapper = document.querySelector(`#${main.id} .ptro-color-widget-wrapper`);
5353
this.input = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-color`);
54-
this.inputAlpha = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-color-alpha`);
5554
this.pipetteButton = document.querySelector(`#${main.id} .ptro-color-widget-wrapper button.ptro-pipette`);
56-
this.closeButton = document.querySelector(`#${main.id} .ptro-color-widget-wrapper button.ptro-close`);
57-
this.colorRegulator = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-color-light-regulator`);
55+
this.closeButton = document.querySelector(`#${main.id} .ptro-color-widget-wrapper button.ptro-close-color-picker`);
5856
this.canvas = document.querySelector(`#${main.id} .ptro-color-widget-wrapper canvas`);
5957
this.ctx = this.canvas.getContext('2d');
58+
6059
this.canvasLight = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-canvas-light`);
60+
this.colorRegulator = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-color-light-regulator`);
61+
62+
this.canvasAlpha = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-canvas-alpha`);
63+
this.alphaRegulator = document.querySelector(`#${main.id} .ptro-color-widget-wrapper .ptro-color-alpha-regulator`);
64+
6165
this.ctxLight = this.canvasLight.getContext('2d');
66+
this.ctxAlpha = this.canvasAlpha.getContext('2d');
6267
this.canvas.setAttribute('width', `${w}`);
6368
this.canvas.setAttribute('height', `${h}`);
6469
this.canvasLight.setAttribute('width', `${w}`);
6570
this.canvasLight.setAttribute('height', `${20}`);
66-
71+
this.canvasAlpha.setAttribute('width', `${w}`);
72+
this.canvasAlpha.setAttribute('height', `${20}`);
6773
const palette = this.ctx.createLinearGradient(0, 0, w, 0);
6874
palette.addColorStop(1 / 15, '#ff0000');
6975
palette.addColorStop(4 / 15, '#ffff00');
@@ -93,12 +99,16 @@ export default class ColorPicker {
9399

94100
this.canvasLight.onmousedown = startLightSelecting;
95101
this.colorRegulator.onmousedown = startLightSelecting;
96-
102+
const startAlphaSelecting = (e) => {
103+
this.alphaSelecting = true;
104+
this.getAlphaAtClick(e);
105+
};
106+
this.canvasAlpha.onmousedown = startAlphaSelecting;
107+
this.alphaRegulator.onmousedown = startAlphaSelecting;
97108
this.closeButton.onclick = () => {
98109
this.wrapper.setAttribute('hidden', 'true');
99110
this.opened = false;
100111
};
101-
102112
this.pipetteButton.onclick = () => {
103113
this.wrapper.setAttribute('hidden', 'true');
104114
this.opened = false;
@@ -108,11 +118,6 @@ export default class ColorPicker {
108118
this.input.onkeyup = () => {
109119
this.setActiveColor(this.input.value, true);
110120
};
111-
this.inputAlpha.value = this.alpha;
112-
this.inputAlpha.oninput = () => {
113-
this.alpha = this.inputAlpha.value;
114-
this.setActiveColor(this.color, true);
115-
};
116121
}
117122

118123
open(state, addCallback) {
@@ -123,8 +128,8 @@ export default class ColorPicker {
123128

124129
this.drawLighter();
125130
this.colorRegulator.style.left = `${this.lightPosition}px`;
131+
this.alphaRegulator.style.left = `${Math.round(this.alpha * this.w)}px`;
126132
this.regetColor();
127-
this.inputAlpha.value = this.alpha;
128133

129134
this.wrapper.removeAttribute('hidden');
130135
this.opened = true;
@@ -147,6 +152,13 @@ export default class ColorPicker {
147152
regetColor() {
148153
const p = this.ctxLight.getImageData(this.lightPosition, 5, 1, 1).data;
149154
this.setActiveColor(rgbToHex(p[0], p[1], p[2]));
155+
this.drawAlpher();
156+
}
157+
158+
regetAlpha() {
159+
const p = this.ctxAlpha.getImageData(this.alphaPosition, 5, 1, 1).data;
160+
this.alpha = p[3] / 255;
161+
this.setActiveColor(this.color, true);
150162
}
151163

152164
getColorLightAtClick(e) {
@@ -158,6 +170,15 @@ export default class ColorPicker {
158170
this.regetColor();
159171
}
160172

173+
getAlphaAtClick(e) {
174+
let x = e.clientX - this.canvasAlpha.documentOffsetLeft;
175+
x = (x < 1 && 1) || x;
176+
x = (x > this.w - 1 && this.w - 1) || x;
177+
this.alphaPosition = x;
178+
this.alphaRegulator.style.left = x;
179+
this.regetAlpha();
180+
}
181+
161182
handleMouseDown(e) {
162183
if (this.choosing && e.button === 0) { // 0 - m1, 1 middle, 2-m2
163184
this.choosingActive = true;
@@ -176,6 +197,9 @@ export default class ColorPicker {
176197
if (this.lightSelecting) {
177198
this.getColorLightAtClick(e);
178199
}
200+
if (this.alphaSelecting) {
201+
this.getAlphaAtClick(e);
202+
}
179203
} else if (this.choosingActive) {
180204
const scale = this.main.getScale();
181205
let x = (e.clientX - this.main.canvas.documentOffsetLeft) * scale;
@@ -210,6 +234,7 @@ export default class ColorPicker {
210234
this.lightSelecting = false;
211235
this.choosing = false;
212236
this.choosingActive = false;
237+
this.alphaSelecting = false;
213238
}
214239

215240
setActiveColor(color, ignoreUpdateText) {
@@ -251,18 +276,17 @@ export default class ColorPicker {
251276
'<canvas></canvas>' +
252277
'<canvas class="ptro-canvas-light"></canvas>' +
253278
'<span class="ptro-color-light-regulator ptro-bordered-control"></span>' +
279+
'<canvas class="ptro-canvas-alpha"></canvas>' +
280+
'<span class="alpha-checkers"></span>' +
281+
'<span class="ptro-color-alpha-regulator ptro-bordered-control"></span>' +
254282
'<div class="ptro-colors"></div>' +
255283
'<div class="ptro-color-edit">' +
256284
'<button class="ptro-icon-btn ptro-pipette ptro-color-control" style="float: left; margin-right: 5px">' +
257285
'<i class="ptro-icon ptro-icon-pipette"></i>' +
258286
'</button>' +
259287
'<input class="ptro-color" type="text" size="7"/>' +
260-
'<span style="float:right"><span class="ptro-color-alpha-label" ' +
261-
`title="${Translation.get().tr('alphaFull')}">${Translation.get().tr('alpha')}</span>` +
262-
'<input class="ptro-color-alpha ptro-input" type="number" min="0" max="1" step="0.1"/></span>' +
263-
'<div><button class="ptro-named-btn ptro-close ptro-color-control" ' +
264-
'style="margin-top: 8px;position: absolute; top: 225px; right: 10px;width: 50px;">' +
265-
`${Translation.get().tr('close')}</button></div>` +
288+
'<button class="ptro-named-btn ptro-close-color-picker ptro-color-control" >' +
289+
`${Translation.get().tr('close')}</button>` +
266290
'</div>' +
267291
'</div>' +
268292
'</div>' +
@@ -278,4 +302,15 @@ export default class ColorPicker {
278302
this.ctxLight.fillStyle = lightGradient;
279303
this.ctxLight.fillRect(0, 0, this.w, 15);
280304
}
305+
306+
drawAlpher() {
307+
this.ctxAlpha.clearRect(0, 0, this.w, 15);
308+
const lightGradient = this.ctxAlpha.createLinearGradient(0, 0, this.w, 0);
309+
lightGradient.addColorStop(0, 'rgba(255,255,255,0)');
310+
lightGradient.addColorStop(0.05, 'rgba(255,255,255,0)');
311+
lightGradient.addColorStop(0.95, this.color);
312+
lightGradient.addColorStop(1, this.color);
313+
this.ctxAlpha.fillStyle = lightGradient;
314+
this.ctxAlpha.fillRect(0, 0, this.w, 15);
315+
}
281316
}

‎js/main.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,6 @@ class PainterroProc {
241241
activate: () => {
242242
this.textTool.setFontColor(this.colorWidgetState.line.alphaColor);
243243
this.toolContainer.style.cursor = 'crosshair';
244-
this.textTool.activate();
245244
},
246245
close: () => {
247246
this.textTool.cancel();
@@ -796,9 +795,7 @@ class PainterroProc {
796795
document.getElementById(ctl.id).onclick = ctl.action;
797796
}
798797
});
799-
if (b.activate) {
800-
b.activate();
801-
}
798+
b.activate();
802799
}
803800
}
804801

0 commit comments

Comments
 (0)