Skip to content

Commit b2b2b4f

Browse files
ivictborivictbor
committed
extend paste down (raw)
1 parent e18cbfc commit b2b2b4f

7 files changed

Lines changed: 268 additions & 93 deletions

File tree

‎css/styles.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@
107107
-webkit-user-drag: none;
108108
user-drag: none;
109109
-webkit-touch-callout: none;
110+
111+
background-repeat: no-repeat;
112+
background-size: 100% 100%;
110113
}
111114

112115
.ptro-wrapper .ptro-crp-tl {
@@ -425,4 +428,11 @@
425428
display: inline-block;
426429
background-color: rgba(0,0,0,0.5);
427430
padding: 10px;
431+
}
432+
.ptro-paster-select-wrapper {
433+
position: absolute;
434+
top: 0;
435+
left: 0;
436+
right: 0;
437+
bottom: 0;
428438
}

‎js/colorPicker.js‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -270,16 +270,17 @@ export default class ColorPicker {
270270
}
271271

272272
static html() {
273-
return '<div class="ptro-color-widget-wrapper" hidden>' +
274-
'<div class="ptro-color-widget">' +
275-
'<div class="ptro-pallet ptro-color-main">' +
276-
'<canvas></canvas>' +
277-
'<canvas class="ptro-canvas-light"></canvas>' +
278-
'<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>' +
282-
'<div class="ptro-colors"></div>' +
273+
return '' +
274+
'<div class="ptro-color-widget-wrapper" hidden>' +
275+
'<div class="ptro-color-widget">' +
276+
'<div class="ptro-pallet ptro-color-main">' +
277+
'<canvas></canvas>' +
278+
'<canvas class="ptro-canvas-light"></canvas>' +
279+
'<span class="ptro-color-light-regulator ptro-bordered-control"></span>' +
280+
'<canvas class="ptro-canvas-alpha"></canvas>' +
281+
'<span class="alpha-checkers"></span>' +
282+
'<span class="ptro-color-alpha-regulator ptro-bordered-control"></span>' +
283+
'<div class="ptro-colors"></div>' +
283284
'<div class="ptro-color-edit">' +
284285
'<button class="ptro-icon-btn ptro-pipette ptro-color-control" style="float: left; margin-right: 5px">' +
285286
'<i class="ptro-icon ptro-icon-pipette"></i>' +

‎js/inserter.js‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,27 @@ export default class Inserter {
99
this.main.fitImage(img);
1010
},
1111
},
12-
extend_down: {},
12+
extend_down: {
13+
handle: (img) => {
14+
this.tmpImg = img;
15+
const oldH = this.main.size.h;
16+
const oldW = this.main.size.w;
17+
const newH = oldH + img.naturalHeight;
18+
const newW = Math.max(oldW, img.naturalWidth);
19+
const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
20+
this.main.resize(newW, newH);
21+
this.main.clearBackground();
22+
this.ctx.putImageData(tmpData, 0, 0);
23+
this.main.adjustSizeFull();
24+
this.worklog.captureState();
25+
if (img.naturalWidth < oldW) {
26+
const offset = Math.round((oldW - img.naturalWidth) / 2);
27+
this.main.select.placeAt(offset, oldH, offset, 0, img);
28+
} else {
29+
this.main.select.placeAt(0, oldH, 0, 0, img);
30+
}
31+
},
32+
},
1333
extend_right: {},
1434
over: {},
1535
};
@@ -18,8 +38,9 @@ export default class Inserter {
1838
init(main) {
1939
this.ctx = main.ctx;
2040
this.main = main;
21-
this.el = main.toolContainer;
22-
this.selector = this.el.querySelector('.ptro-paster-select');
41+
this.worklog = main.worklog;
42+
this.selector = main.wrapper.querySelector('.ptro-paster-select-wrapper');
43+
this.selector.setAttribute('hidden', '');
2344
this.img = null;
2445
Object.keys(this.pasteOptions).forEach((k) => {
2546
const o = this.pasteOptions[k];
@@ -29,13 +50,18 @@ export default class Inserter {
2950
} else {
3051
o.handle(this.img);
3152
}
32-
this.selector.style.display = 'none';
53+
this.selector.setAttribute('hidden', '');
3354
};
3455
});
3556
this.loading = false;
3657
this.doLater = null;
3758
}
3859

60+
insert(x, y, w, h) {
61+
console.log("inserting ", this.tmpImg, x, y, w, h);
62+
this.main.ctx.drawImage(this.tmpImg, x, y, w, h);
63+
}
64+
3965
loaded(img) {
4066
this.img = img;
4167
this.loading = false;
@@ -59,7 +85,7 @@ export default class Inserter {
5985
this.startLoading();
6086
img.src = source;
6187
if (!empty) {
62-
this.selector.style.display = 'inline-block';
88+
this.selector.removeAttribute('hidden');
6389
}
6490
}
6591

@@ -86,7 +112,7 @@ export default class Inserter {
86112
}
87113
}
88114

89-
code() {
115+
html() {
90116
let buttons = '';
91117
Object.keys(this.pasteOptions).forEach((k) => {
92118
const o = this.pasteOptions[k];
@@ -96,8 +122,8 @@ export default class Inserter {
96122
`<div>${tr(`pasteOptions.${k}`)}</div>` +
97123
'</button>';
98124
});
99-
return `<div class="ptro-paster-select" style="display: none"><div class="ptro-in">${
125+
return `<div class="ptro-paster-select-wrapper" hidden><div class="ptro-paster-select"><div class="ptro-in">${
100126
buttons
101-
}</div></div>`;
127+
}</div></div></div>`;
102128
}
103129
}

‎js/main.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,6 @@ class PainterroProc {
306306
this.zoom = false;
307307
this.ratioRelation = undefined;
308308
this.id = this.params.id;
309-
this.bgColor = this.params.backgroundFillColor;
310309
this.saving = false;
311310

312311
if (this.id === undefined) {
@@ -338,16 +337,16 @@ class PainterroProc {
338337
this.inserter = new Inserter();
339338

340339
const cropper = '<div class="ptro-crp-el">' +
341-
`${PainterroSelecter.code()}${TextTool.code()}${this.inserter.code()}</div>`;
340+
`${PainterroSelecter.code()}${TextTool.code()}</div>`;
342341

343342
this.baseEl.innerHTML =
344343
`${`<div class="ptro-wrapper" id="ptro-wrapper-${this.id}">` +
345344
`<canvas id="ptro-canvas-${this.id}"></canvas>`}${
346-
cropper
347-
}${ColorPicker.html()
348-
}${ZoomHelper.html()
349-
}${Resizer.html()
350-
}</div>` +
345+
cropper +
346+
ColorPicker.html() +
347+
ZoomHelper.html() +
348+
Resizer.html() +
349+
this.inserter.html()}</div>` +
351350
'<div class="ptro-bar ptro-color-main">' +
352351
`<span>${bar}</span>` +
353352
'<span class="tool-controls"></span>' +
@@ -724,9 +723,9 @@ class PainterroProc {
724723
}
725724

726725
syncToolElement() {
727-
const w = this.canvas.clientWidth;
726+
const w = Math.round(this.canvas.documentClientWidth);
728727
const l = this.canvas.offsetLeft;
729-
const h = this.canvas.clientHeight;
728+
const h = Math.round(this.canvas.documentClientHeight);
730729
const t = this.canvas.offsetTop;
731730
this.toolContainer.style.left = `${l}px`;
732731
this.toolContainer.style.width = `${w}px`;
@@ -738,15 +737,19 @@ class PainterroProc {
738737
const w = this.params.defaultSize.width === 'fill' ? this.wrapper.clientWidth : this.params.defaultSize.width;
739738
const h = this.params.defaultSize.height === 'fill' ? this.wrapper.clientHeight : this.params.defaultSize.height;
740739
this.resize(w, h);
741-
this.ctx.beginPath();
742-
this.ctx.rect(0, 0, this.size.w, this.size.h);
743-
this.ctx.fillStyle = this.bgColor;
744-
this.ctx.fill();
740+
this.clearBackground();
745741
this.worklog.captureState(true);
746742
this.syncToolElement();
747743
this.adjustSizeFull();
748744
}
749745

746+
clearBackground() {
747+
this.ctx.beginPath();
748+
this.ctx.rect(0, 0, this.size.w, this.size.h);
749+
this.ctx.fillStyle = this.params.backgroundFillColor;
750+
this.ctx.fill();
751+
}
752+
750753
setActiveTool(b) {
751754
this.activeTool = b;
752755
getBtnEl(b).className += ' ptro-color-active-control';

‎js/resizer.js‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -86,36 +86,38 @@ export default class Resizer {
8686
}
8787

8888
static html() {
89-
return '<div class="ptro-resize-widget-wrapper" hidden>' +
90-
'<div class="ptro-resize-widget ptro-color-main">' +
91-
'<div style="display: inline-block">' +
92-
'<table>' +
93-
'<tr>' +
94-
`<td class="ptro-label ptro-resize-table-left">${tr('width')}</td>` +
95-
'<td>' +
96-
'<input class="ptro-input ptro-resize-width-input" type="number" min="0" max="3000" step="1"/>' +
97-
'</td>' +
98-
'</tr>' +
99-
'<tr>' +
100-
`<td class="ptro-label ptro-resize-table-left">${tr('height')}</td>` +
101-
'<td>' +
102-
'<input class="ptro-input ptro-resize-heigth-input" type="number" min="0" max="3000" step="1"/>' +
103-
'</td>' +
104-
'</tr>' +
105-
'</table>' +
106-
'</div>' +
107-
'<div class="ptro-resize-link-wrapper">' +
108-
`<button class="ptro-icon-btn ptro-link ptro-color-control" title="${tr('keepRatio')}">` +
109-
'<i class="ptro-icon ptro-icon-linked"></i>' +
110-
'</button>' +
111-
'</div>' +
112-
'<div>' +
113-
'<button class="ptro-named-btn ptro-apply ptro-color-control" ' +
114-
'style="margin-top: 8px;position: absolute; top: 95px; right: 75px;">' +
115-
`${tr('apply')}</button></div>` +
116-
'<button class="ptro-named-btn ptro-close ptro-color-control" ' +
117-
'style="margin-top: 8px;position: absolute; top: 95px; right: 10px;">' +
118-
`${tr('cancel')}</button></div>` +
89+
return '' +
90+
'<div class="ptro-resize-widget-wrapper" hidden>' +
91+
'<div class="ptro-resize-widget ptro-color-main">' +
92+
'<div style="display: inline-block">' +
93+
'<table>' +
94+
'<tr>' +
95+
`<td class="ptro-label ptro-resize-table-left">${tr('width')}</td>` +
96+
'<td>' +
97+
'<input class="ptro-input ptro-resize-width-input" type="number" min="0" max="3000" step="1"/>' +
98+
'</td>' +
99+
'</tr>' +
100+
'<tr>' +
101+
`<td class="ptro-label ptro-resize-table-left">${tr('height')}</td>` +
102+
'<td>' +
103+
'<input class="ptro-input ptro-resize-heigth-input" type="number" min="0" max="3000" step="1"/>' +
104+
'</td>' +
105+
'</tr>' +
106+
'</table>' +
107+
'</div>' +
108+
'<div class="ptro-resize-link-wrapper">' +
109+
`<button class="ptro-icon-btn ptro-link ptro-color-control" title="${tr('keepRatio')}">` +
110+
'<i class="ptro-icon ptro-icon-linked"></i>' +
111+
'</button>' +
112+
'</div>' +
113+
'<div>' +
114+
'<button class="ptro-named-btn ptro-apply ptro-color-control" ' +
115+
'style="margin-top: 8px;position: absolute; top: 95px; right: 75px;">' +
116+
`${tr('apply')}</button>` +
117+
'<button class="ptro-named-btn ptro-close ptro-color-control" ' +
118+
'style="margin-top: 8px;position: absolute; top: 95px; right: 10px;">' +
119+
`${tr('cancel')}</button>` +
120+
'</div>' +
119121
'</div>' +
120122
'</div>';
121123
}

0 commit comments

Comments
 (0)