Skip to content

Commit

Permalink
Merge pull request #113 from devforth/replace-control-positons
Browse files Browse the repository at this point in the history 
Replace control positons
  • Loading branch information
@ivictbor
ivictbor authored Nov 20, 2020
2 parents b323eb3 + ecfe037 commit 0d90b60
Show file tree
Hide file tree
Showing 6 changed files with 170 additions and 50 deletions.
4 changes: 2 additions & 2 deletions build/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
hideByEsc: true,
saveByEnter: true,
shadowScale: 1,
// backplateImgUrl: 'https://www.meme-arsenal.com/memes/50569ac974c29121ff9075e45a334942.jpg',
// backplateImgUrl: 'https://images.pexels.com/photos/4386297/pexels-photo-4386297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
//toolbarHeightPx: 50,
//buttonSizePx: 42,
// defaultTool: 'arrow',
Expand Down Expand Up @@ -86,7 +86,7 @@
// fixMobilePageReloader: false,
// defaultTool: 'line',
//hiddenTools: ['line']
}).show()
}).show('https://images.pexels.com/photos/4386297/pexels-photo-4386297.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')
const ctx = window.p.ctx;

console.log(ctx);
Expand Down
8 changes: 8 additions & 0 deletions css/icons/ptroiconfont.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,14 @@ url("ptroiconfont.svg?bf58900bc0f41f759214435220e5b3df#ptroiconfont") format("sv
.ptro-icon-paste_extend_right:before {
content: "\f10f";
}
.ptro-icon-paste_extend_left:before {
content: "\f10f";
transform: rotate(-180deg);
}
.ptro-icon-paste_extend_top:before {
content: "\f10f";
transform: rotate(-90deg);
}
.ptro-icon-paste_fit:before {
content: "\f110";
}
Expand Down
44 changes: 41 additions & 3 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,26 @@ select.ptro-input {
line-height: normal;
text-align: left;
}

.ptro-paster-wrappers-fits {
display: flex;
justify-content: space-around;
align-items: center;
}
.ptro-selector-extend {
height: 70px;
width: 70px !important;
}
.ptro-selector-extend div:last-child {
display: none;
}
.ptro-selector-fit {
height: 220px;
width: 220px !important;
margin: 0px !important;
}
.ptro-paster-fit {
margin-right: 46px !important;
}
.ptro-text-tool-buttons {
display: flex;
position: fixed;
Expand Down Expand Up @@ -546,7 +565,7 @@ input.ptro-pixel-size-input {

.ptro-paster-select .ptro-in {
background-color: rgba(0,0,0,0.7);
padding: 10px;
padding: 40px;
}
.ptro-paster-select-wrapper {
position: absolute;
Expand All @@ -555,7 +574,26 @@ input.ptro-pixel-size-input {
right: 0;
bottom: 0;
}

.ptro-paster-select-wrapper-extends button:first-child {
display: block;
margin: 0 auto;
}
.ptro-paster-select-wrapper-extends button:last-child{
display: block;
margin: 0 auto;
}
.ptro-paster-select-wrapper-extends button:nth-child(2){
display: inline-block;
margin-right: 78px;
}
.ptro-paster-wrapper-label {
display: block;
color: white;
font-size: 20px !important;
text-align: center;
margin-top: 10px;
text-transform: uppercase;
}
.ptro-paste-label {
color: white;
margin-bottom: 10px;
Expand Down
145 changes: 110 additions & 35 deletions js/inserter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@ import { genId, KEYS, imgToDataURL } from './utils';

let instance = null;
export default class Inserter {
constructor() {
this.pasteOptions = {
replace_all: {
internalName: 'fit',
handle: (img) => {
this.main.fitImage(img, this.mimetype);
},
},
extend_down: {
internalName: 'extend_down',
constructor(main) {
this.main = main;
const extendObj = {
extend_top: {
internalName: 'extend_top',
handle: (img) => {
this.tmpImg = img;
const oldH = this.main.size.h;
Expand All @@ -22,18 +17,35 @@ export default class Inserter {
const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
this.main.resize(newW, newH);
this.main.clearBackground();
this.ctx.putImageData(tmpData, 0, 0);
this.ctx.putImageData(tmpData, 0, img.naturalHeight);
this.main.adjustSizeFull();
if (this.main.params.backplateImgUrl) {
this.main.tabelCell.style.backgroundPosition = 'top center';
this.main.tabelCell.style.backgroundSize = `auto ${this.main.substrate.style.width}`;
this.main.substrate.style.opacity = 0;
}
if (img.naturalWidth < oldW) {
const offset = Math.round((oldW - img.naturalWidth) / 2);
this.main.select.placeAt(offset, oldH, offset, 0, img);
this.main.select.placeAt(offset, 0, offset, oldH, img);
} else {
this.main.select.placeAt(0, oldH, 0, 0, img);
this.main.select.placeAt(0, 0, 0, oldH, img);
}
this.worklog.captureState();
},
},
extend_left: {
internalName: 'extend_left',
handle: (img) => {
this.tmpImg = img;
const oldH = this.main.size.h;
const oldW = this.main.size.w;
const newW = oldW + img.naturalWidth;
const newH = Math.max(oldH, img.naturalHeight);
const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
this.main.resize(newW, newH);
this.main.clearBackground();
this.ctx.putImageData(tmpData, img.naturalWidth, 0);
this.main.adjustSizeFull();
if (img.naturalHeight < oldH) {
const offset = Math.round((oldH - img.naturalHeight) / 2);
this.main.select.placeAt(0, offset, oldW, offset, img);
} else {
this.main.select.placeAt(0, 0, oldW, 0, img);
}
this.worklog.captureState();
},
Expand All @@ -51,12 +63,6 @@ export default class Inserter {
this.main.clearBackground();
this.ctx.putImageData(tmpData, 0, 0);
this.main.adjustSizeFull();
if (this.main.params.backplateImgUrl) {
this.main.tabelCell.style.backgroundPosition = `${this.main.substrate.style.left} center`;
this.main.tabelCell.style.backgroundSize = `auto ${this.main.substrate.style.height}`;
this.main.tabelCell.style.width = this.main.substrate.style.width;
this.main.substrate.style.opacity = 0;
}
if (img.naturalHeight < oldH) {
const offset = Math.round((oldH - img.naturalHeight) / 2);
this.main.select.placeAt(oldW, offset, 0, offset, img);
Expand All @@ -66,6 +72,46 @@ export default class Inserter {
this.worklog.captureState();
},
},
extend_down: {
internalName: 'extend_down',
handle: (img) => {
this.tmpImg = img;
const oldH = this.main.size.h;
const oldW = this.main.size.w;
const newH = oldH + img.naturalHeight;
const newW = Math.max(oldW, img.naturalWidth);
const tmpData = this.ctx.getImageData(0, 0, this.main.size.w, this.main.size.h);
this.main.resize(newW, newH);
this.main.clearBackground();
this.ctx.putImageData(tmpData, 0, 0);
this.main.adjustSizeFull();
if (img.naturalWidth < oldW) {
const offset = Math.round((oldW - img.naturalWidth) / 2);
this.main.select.placeAt(offset, oldH, offset, 0, img);
} else {
this.main.select.placeAt(0, oldH, 0, 0, img);
}
this.worklog.captureState();
},
},
};
const fitObj = {
replace_all: {
internalName: 'fit',
handle: (img) => {
if (this.main.params.backplateImgUrl) {
this.main.params.backplateImgUrl = undefined;
this.main.tabelCell.style.background = '';
this.main.canvas.style.backgroundColor = `${this.main.params.backgroundFillColor}ff`;
this.pasteOptions = Object.assign({}, fitObj, extendObj);
this.activeOption = this.pasteOptions;
this.main.wrapper.querySelector('.ptro-paster-select-wrapper').remove();
this.main.wrapper.insertAdjacentHTML('beforeend', this.html());
this.init(main);
}
this.main.fitImage(img, this.mimetype);
},
},
paste_over: {
internalName: 'over',
handle: (img) => {
Expand All @@ -88,6 +134,12 @@ export default class Inserter {
},
},
};
if (this.main.params.backplateImgUrl) {
this.pasteOptions = Object.assign({}, fitObj);
this.activeOption = this.pasteOptions;
return;
}
this.pasteOptions = Object.assign({}, fitObj, extendObj);
this.activeOption = this.pasteOptions;
}

Expand Down Expand Up @@ -206,11 +258,11 @@ export default class Inserter {
}
}

static get() {
static get(main) {
if (instance) {
return instance;
}
instance = new Inserter();
instance = new Inserter(main);
return instance;
}

Expand All @@ -229,23 +281,46 @@ export default class Inserter {
});
this.activeOption = this.pasteOptions;
}
static controlObjToString(o, btnClassName = '') {
const tempObj = o;
tempObj.id = genId();
return `<button type="button" id="${o.id}" class="ptro-selector-btn ptro-color-control ${btnClassName}">` +
`<div><i class="ptro-icon ptro-icon-paste_${o.internalName}"></i></div>` +
`<div>${tr(`pasteOptions.${o.internalName}`)}</div>` +
'</button>';
}

html() {
let buttons = '';
const bcklOptions = this.main.params.backplateImgUrl;
let fitControls = '';
let extendControls = '';
Object.keys(this.pasteOptions).forEach((k) => {
const o = this.pasteOptions[k];
o.id = genId();
buttons += `<button type="button" id="${o.id}" class="ptro-selector-btn ptro-color-control">` +
`<div><i class="ptro-icon ptro-icon-paste_${o.internalName}"></i></div>` +
`<div>${tr(`pasteOptions.${o.internalName}`)}</div>` +
'</button>';
if (k === 'replace_all' || k === 'paste_over') {
fitControls += `<div class="ptro-paster-fit">
${Inserter.controlObjToString(this.pasteOptions[k], 'ptro-selector-fit')}
<div class="ptro-paster-wrapper-label">
${tr(`pasteOptions.${this.pasteOptions[k].internalName}`)}
</div></div>`;
} else {
extendControls += Inserter.controlObjToString(this.pasteOptions[k], 'ptro-selector-extend');
}
});
return '<div class="ptro-paster-select-wrapper" hidden><div class="ptro-paster-select ptro-v-middle">' +
'<div class="ptro-in ptro-v-middle-in">' +
`<div class="ptro-paste-label">${tr('pasteOptions.how_to_paste')}</div>${
buttons}</div></div></div>`;
` <div class="ptro-paster-wrappers-fits">
${fitControls}
${bcklOptions ? '' : `<div class="ptro-paster-select-wrapper-extends">
<div class="ptro-paster-extends-items">
${extendControls}
</div>
<div class="ptro-paster-wrapper-label">extend</div>
</div>`}
</div>
</div></div></div>`;
}
}

export function setActivePasteOptions(a) {
return Inserter.get().activeOptions(a);
}

17 changes: 7 additions & 10 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ class PainterroProc {
}
});

this.inserter = Inserter.get();
this.inserter = Inserter.get(this);

const cropper = '<div class="ptro-crp-el">' +
`${PainterroSelecter.code()}${TextTool.code()}</div>`;
Expand Down Expand Up @@ -507,7 +507,10 @@ class PainterroProc {
this.tabelCell.style.backgroundPosition = 'center center';
const img = new Image();
img.onload = () => {
this.fitImage(img);
this.resize(img.naturalWidth, img.naturalHeight);
this.adjustSizeFull();
this.worklog.captureState();
this.tabelCell.style.backgroundSize = `${window.getComputedStyle(this.substrate).width} ${window.getComputedStyle(this.substrate).height}`;
};
img.src = this.params.backplateImgUrl;
}
Expand Down Expand Up @@ -1014,15 +1017,10 @@ class PainterroProc {
fitImage(img, mimetype) {
this.loadedImageType = mimetype;
this.resize(img.naturalWidth, img.naturalHeight);
if (!this.params.backplateImgUrl) {
this.ctx.drawImage(img, 0, 0);
this.zoomFactor = (this.wrapper.documentClientHeight / this.size.h) - 0.2;
}
this.ctx.drawImage(img, 0, 0);
this.zoomFactor = (this.wrapper.documentClientHeight / this.size.h) - 0.2;
this.adjustSizeFull();
this.worklog.captureState();
if (this.params.backplateImgUrl) {
this.tabelCell.style.backgroundSize = `auto ${window.getComputedStyle(this.substrate).width}`;
}
}

loadImage(source, mimetype) {
Expand Down Expand Up @@ -1085,7 +1083,6 @@ class PainterroProc {

adjustSizeFull() {
const ratio = this.wrapper.documentClientWidth / this.wrapper.documentClientHeight;

if (this.zoom === false) {
if (this.size.w > this.wrapper.documentClientWidth ||
this.size.h > this.wrapper.documentClientHeight) {
Expand Down
2 changes: 2 additions & 0 deletions langs/en.lang.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,8 @@ export default {
fit: 'Replace all',
extend_down: 'Extend down',
extend_right: 'Extend right',
extend_left: 'Extend left',
extend_top: 'Extend top',
over: 'Paste over',
how_to_paste: 'How to paste?',
},
Expand Down

0 comments on commit 0d90b60

Please sign in to comment.