Skip to content

Commit db70fe8

Browse files
ivictborivictbor
committed
great fix for pixelize (no exceeding area) + fix for #132 
1 parent 5eb81f9 commit db70fe8

File tree

5 files changed

+67
-43
lines changed

5 files changed

+67
-43
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ Painterro({
197197
|`initTextColor` | Color of init text | `'#808080'` |
198198
|`initTextStyle` | Style of init text | `"26px 'Open Sans', sans-serif"` |
199199
|`pixelizePixelSize` | Default pixel size of pixelize tool. Can accept values - `x` - x pixels, `x%` - means percents of minimal area rectangle side | `20%` |
200+
|`pixelizeHideUserInput` | Don't allow users to enter pixel size In settings tools (and save in localstorage), this would allow developer to freeze pixel size by using params `pixelizePixelSize` to make sure users will not set low pixel sizes | `false` |
200201
|`availableLineWidths` | A list of the line width values that are available for selection in a drop down list e.g. `[1,2,4,8,16,64]`. Otherwise an input field is used. | `undefined` |
201202
|`availableArrowLengths` | A list of the arrow sizes values that are available for selection in a drop down list e.g. `[10,20,30,40,50,60]`. Otherwise an input field is used. | `undefined` |
202203
| `defaultArrowLength` | default arrow length | `15` |

‎build/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@
111111
//availableFontSizes: [1,2,4,8,16,64],
112112
//availableArrowLengths: [10,20,30,40,50,60],
113113
how_to_paste_actions: ['paste_over', 'replace_all'],
114+
// pixelizeHideUserInput: true,
114115
//saveHandler: (saver, done) => {
115116
// console.log('saving', saver.getWidth(), saver.getHeight())
116117
// console.log('hasAlphaChannel', saver.hasAlphaChannel())

‎js/params.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ export function setDefaults(parameters) {
9494
}
9595

9696
params.pixelizePixelSize = settings.pixelizePixelSize || params.pixelizePixelSize || '20%';
97-
9897
params.colorScheme = params.colorScheme || {};
9998
params.colorScheme.main = params.colorScheme.main || '#fff';
10099
params.colorScheme.control = params.colorScheme.control || '#fff';

‎js/selecter.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default class PainterroSelecter {
1313
rect: document.querySelector(`#${main.id} .ptro-crp-rect`),
1414
};
1515
this.imagePlaced = false;
16-
this.pixelizePixelSize = main.params.pixelizePixelSize;
1716
this.areaionCallback(false);
1817
}
1918

@@ -44,22 +43,36 @@ export default class PainterroSelecter {
4443
doPixelize() {
4544
const c = this.area.topl;
4645
const size = [
47-
this.area.bottoml[0] - this.area.topl[0],
48-
this.area.bottoml[1] - this.area.topl[1],
46+
this.area.bottoml[0] - c[0], // width
47+
this.area.bottoml[1] - c[1],
4948
];
5049

50+
this.pixelizePixelSize = this.main.params.pixelizePixelSize;
51+
5152
if (this.pixelizePixelSize.slice(-1) === '%') {
52-
this.pixelSize = (Math.min(size[0], size[1]) / (100 / this.pixelizePixelSize.slice(0, -1)));
53+
this.pixelSize = (Math.min(size[0], size[1]) / (100.0 / this.pixelizePixelSize.slice(0, -1)));
5354
} else if (this.pixelizePixelSize.slice(-2).toLowerCase() === 'px') {
5455
this.pixelSize = this.pixelizePixelSize.slice(0, -2);
5556
} else {
5657
this.pixelSize = this.pixelizePixelSize;
5758
}
59+
60+
5861
if (this.pixelSize < 2) {
5962
this.pixelSize = 2; // prevent errors
6063
}
64+
65+
if (size[1] < size[0]) {
66+
this.pixelSizeY = this.pixelSize;
67+
const desiredHorPxs = Math.round(size[0] / this.pixelSizeY);
68+
this.pixelSizeX = (size[0] * 1.0) / desiredHorPxs;
69+
} else {
70+
this.pixelSizeX = this.pixelSize;
71+
const desiredVerPxs = Math.round(size[1] / this.pixelSizeX);
72+
this.pixelSizeY = (size[1] * 1.0) / desiredVerPxs;
73+
}
6174
const pxData = [];
62-
const pxSize = [size[0] / this.pixelSize, size[1] / this.pixelSize];
75+
const pxSize = [size[0] / this.pixelSizeX, size[1] / this.pixelSizeY];
6376
for (let i = 0; i < pxSize[0]; i += 1) {
6477
const row = [];
6578
for (let j = 0; j < pxSize[1]; j += 1) {
@@ -70,8 +83,8 @@ export default class PainterroSelecter {
7083
const data = this.ctx.getImageData(c[0], c[1], size[0], size[1]);
7184
for (let i = 0; i < size[0]; i += 1) {
7285
for (let j = 0; j < size[1]; j += 1) {
73-
const ii = Math.floor(i / this.pixelSize);
74-
const jj = Math.floor(j / this.pixelSize);
86+
const ii = Math.floor(i / this.pixelSizeX);
87+
const jj = Math.floor(j / this.pixelSizeY);
7588
const base = ((j * size[0]) + i) * 4;
7689
pxData[ii][jj][0] += data.data[base];
7790
pxData[ii][jj][1] += data.data[base + 1];
@@ -88,9 +101,9 @@ ${Math.round(pxData[i][j][0] / s)},
88101
${Math.round(pxData[i][j][1] / s)},
89102
${Math.round(pxData[i][j][2] / s)},
90103
${Math.round(pxData[i][j][3] / s)})`;
91-
const baseX = c[0] + (i * this.pixelSize);
92-
const baseY = c[1] + (j * this.pixelSize);
93-
this.ctx.fillRect(baseX, baseY, this.pixelSize, this.pixelSize);
104+
const baseX = c[0] + (i * this.pixelSizeX);
105+
const baseY = c[1] + (j * this.pixelSizeY);
106+
this.ctx.fillRect(baseX, baseY, this.pixelSizeX, this.pixelSizeY);
94107
}
95108
}
96109
this.main.worklog.captureState();
@@ -133,7 +146,6 @@ ${Math.round(pxData[i][j][3] / s)})`;
133146
this.area.bottoml = [
134147
Math.round(this.area.topl[0] + ((this.area.rect.clientWidth + 2) / ratio)),
135148
Math.round(this.area.topl[1] + ((this.area.rect.clientHeight + 2) / ratio))];
136-
// console.log('recalced cords', ratio, this.area.topl, this.area.bottoml);
137149
}
138150

139151
adjustPosition() {

‎js/settings.js

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,30 @@ export default class Settings {
3030
this.startClose();
3131
};
3232

33-
this.applyButton.onclick = () => {
34-
let pixelVal = trim(this.inputPixelSize.value);
35-
let valid;
36-
if (pixelVal.slice(-1) === '%') {
37-
const checkInt = trim(pixelVal.slice(0, -1));
38-
valid = /^\d+$/.test(checkInt) && parseInt(checkInt, 10) !== 0;
33+
if (this.applyButton) {
34+
this.applyButton.onclick = () => {
35+
let pixelVal = trim(this.inputPixelSize.value);
36+
let valid;
37+
if (pixelVal.slice(-1) === '%') {
38+
const checkInt = trim(pixelVal.slice(0, -1));
39+
valid = /^\d+$/.test(checkInt) && parseInt(checkInt, 10) !== 0;
40+
if (valid) {
41+
pixelVal = `${checkInt}%`;
42+
}
43+
} else {
44+
valid = /^\d+$/.test(pixelVal) && parseInt(pixelVal, 10) !== 0;
45+
}
3946
if (valid) {
40-
pixelVal = `${checkInt}%`;
47+
this.main.select.pixelizePixelSize = pixelVal;
48+
setParam('pixelizePixelSize', pixelVal);
49+
this.startClose();
50+
this.errorHolder.setAttribute('hidden', '');
51+
} else {
52+
this.errorHolder.innerText = tr('wrongPixelSizeValue');
53+
this.errorHolder.removeAttribute('hidden');
4154
}
42-
} else {
43-
valid = /^\d+$/.test(pixelVal) && parseInt(pixelVal, 10) !== 0;
44-
}
45-
if (valid) {
46-
this.main.select.pixelizePixelSize = pixelVal;
47-
setParam('pixelizePixelSize', pixelVal);
48-
this.startClose();
49-
this.errorHolder.setAttribute('hidden', '');
50-
} else {
51-
this.errorHolder.innerText = tr('wrongPixelSizeValue');
52-
this.errorHolder.removeAttribute('hidden');
53-
}
54-
};
55+
};
56+
}
5557
}
5658

5759
handleKeyDown(event) {
@@ -68,7 +70,9 @@ export default class Settings {
6870
open() {
6971
this.wrapper.removeAttribute('hidden');
7072
this.opened = true;
71-
this.inputPixelSize.value = this.main.select.pixelizePixelSize;
73+
if (this.inputPixelSize) {
74+
this.inputPixelSize.value = this.main.select.pixelizePixelSize;
75+
}
7276
this.bgSelBtn.style['background-color'] = this.main.colorWidgetState.bg.alphaColor;
7377
}
7478

@@ -82,7 +86,8 @@ export default class Settings {
8286
this.main.closeActiveTool();
8387
}
8488

85-
static html() {
89+
/* eslint-disable */
90+
static html(main) {
8691
return '' +
8792
'<div class="ptro-settings-widget-wrapper ptro-common-widget-wrapper ptro-v-middle" hidden>' +
8893
'<div class="ptro-settings-widget ptro-color-main ptro-v-middle-in">' +
@@ -98,20 +103,26 @@ export default class Settings {
98103
`<button type="button" style="margin-top: -2px;" class="ptro-named-btn ptro-clear ptro-color-control" title="${tr('fillPageWith')}">${tr('clear')}</button>` +
99104
'</td>' +
100105
'</tr>' +
101-
'<tr>' +
102-
`<td class="ptro-label ptro-resize-table-left" >${tr('pixelizePixelSize')}</td>` +
103-
'<td colspan="2">' +
104-
'<input class="ptro-input ptro-pixel-size-input" pattern="[0-9]{1,}%?" type="text" />' +
105-
'</td>' +
106-
'</tr>' +
106+
(!main.params.pixelizeHideUserInput ?
107+
'<tr>' +
108+
`<td class="ptro-label ptro-resize-table-left" >${tr('pixelizePixelSize')}</td>` +
109+
'<td colspan="2">' +
110+
'<input class="ptro-input ptro-pixel-size-input" pattern="[0-9]{1,}%?" type="text" />' +
111+
'</td>' +
112+
'</tr>' : '') +
107113
'</table>' +
108114
'<div class="ptro-error" hidden></div>' +
109115
'<div style="margin-top: 20px">' +
110-
'<button type="button" class="ptro-named-btn ptro-apply ptro-color-control">' +
111-
`${tr('apply')}</button>` +
112-
`<button type="button" class="ptro-named-btn ptro-close ptro-color-control">${tr('cancel')}</button>` +
116+
(!main.params.pixelizeHideUserInput ?
117+
'<button type="button" class="ptro-named-btn ptro-apply ptro-color-control">' +
118+
`${tr('apply')}</button>` +
119+
`<button type="button" class="ptro-named-btn ptro-close ptro-color-control">${tr('cancel')}</button>`
120+
:
121+
`<button type="button" class="ptro-named-btn ptro-close ptro-color-control">${tr('close')}</button>`
122+
) +
113123
'</div>' +
114124
'</div>' +
115125
'</div>';
116126
}
127+
/* eslint-enable */
117128
}

0 commit comments

Comments
 (0)