Skip to content

Commit ff75b0a

Browse files
volta2030volta2030
authored
Merge pull request #37 from Pascal-Institute/develop
version up to 1.0.5
2 parents 2c845fb + 29e5cbe commit ff75b0a

6 files changed

Lines changed: 324 additions & 288 deletions

File tree

‎README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,25 @@
77

88
## 1. Requirements
99

10+
### For Development
1011
- IDE : Visual Studio Code (Recommemded)
1112
- node.js : v22.18.0 (At least version)
1213

14+
```bash
15+
npm install -g electron
16+
```
17+
1318
```bash
1419
npm install --save electron electron-reload electron-rebuild electron-builder sharp sharp-ico sharp-bmp fs imgkit
1520
```
21+
### For Application use
22+
23+
1. Install node.js : https://nodejs.org/
24+
25+
2. Install electron
26+
```bash
27+
npm install -g electron
28+
```
1629

1730
### when electron is not working
1831
```bash
@@ -29,6 +42,7 @@ npm update
2942

3043
## 2-1. How to execute
3144

45+
### window
3246
```bash
3347
electron .
3448
```
@@ -39,6 +53,11 @@ or
3953
npm start
4054
```
4155

56+
### linux line-up
57+
```bash
58+
electron . --ozone-platform=x11
59+
```
60+
4261
## 2-2. How to build
4362

4463
```bash

‎assets/icon.png‎

5.9 KB
Loading

‎imgkit/index.js‎

Lines changed: 123 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -163,35 +163,38 @@ class ImageLayer {
163163

164164
document.addEventListener("keydown", (event) => {
165165
if (
166-
(event.ctrlKey && event.key === "d") ||
167-
(event.key === "Delete" && document.activeElement === this.imgPanel)
166+
(event.ctrlKey && event.key === "d") ||
167+
(event.key === "Delete" && document.activeElement === this.imgPanel)
168168
) {
169-
deleteImagePanel();
169+
deleteImagePanel();
170170
} else if (
171-
document.activeElement === this.imgPanel &&
172-
(event.key === "ArrowLeft" || event.key === "ArrowRight")
171+
document.activeElement === this.imgPanel &&
172+
(event.key === "ArrowLeft" || event.key === "ArrowRight")
173173
) {
174-
if (event.ctrlKey && event.key === "ArrowLeft") {
175-
Parameter.num = 0;
176-
imageLayerQueue[Parameter.num].imgPanel.focus();
177-
imageLayerQueue[Parameter.num].updateFocus();
178-
imageLayerQueue[Parameter.num].updateSio();
179-
} else if (event.ctrlKey && event.key === "ArrowRight") {
180-
Parameter.num = imageLayerQueue.length - 1;
181-
imageLayerQueue[Parameter.num].imgPanel.focus();
182-
imageLayerQueue[Parameter.num].updateFocus();
183-
imageLayerQueue[Parameter.num].updateSio();
184-
} else if (event.key === "ArrowLeft" && Parameter.num > 0) {
185-
Parameter.num--;
186-
imageLayerQueue[Parameter.num].imgPanel.focus();
187-
imageLayerQueue[Parameter.num].updateFocus();
188-
imageLayerQueue[Parameter.num].updateSio();
189-
} else if (event.key === "ArrowRight" && Parameter.num < imageLayerQueue.length - 1) {
190-
Parameter.num++;
191-
imageLayerQueue[Parameter.num].imgPanel.focus();
192-
imageLayerQueue[Parameter.num].updateFocus();
193-
imageLayerQueue[Parameter.num].updateSio();
194-
}
174+
if (event.ctrlKey && event.key === "ArrowLeft") {
175+
Parameter.num = 0;
176+
imageLayerQueue[Parameter.num].imgPanel.focus();
177+
imageLayerQueue[Parameter.num].updateFocus();
178+
imageLayerQueue[Parameter.num].updateSio();
179+
} else if (event.ctrlKey && event.key === "ArrowRight") {
180+
Parameter.num = imageLayerQueue.length - 1;
181+
imageLayerQueue[Parameter.num].imgPanel.focus();
182+
imageLayerQueue[Parameter.num].updateFocus();
183+
imageLayerQueue[Parameter.num].updateSio();
184+
} else if (event.key === "ArrowLeft" && Parameter.num > 0) {
185+
Parameter.num--;
186+
imageLayerQueue[Parameter.num].imgPanel.focus();
187+
imageLayerQueue[Parameter.num].updateFocus();
188+
imageLayerQueue[Parameter.num].updateSio();
189+
} else if (
190+
event.key === "ArrowRight" &&
191+
Parameter.num < imageLayerQueue.length - 1
192+
) {
193+
Parameter.num++;
194+
imageLayerQueue[Parameter.num].imgPanel.focus();
195+
imageLayerQueue[Parameter.num].updateFocus();
196+
imageLayerQueue[Parameter.num].updateSio();
197+
}
195198
}
196199
});
197200

@@ -290,8 +293,22 @@ class ImageLayer {
290293
this.updateFocus();
291294
this.updateSio();
292295
});
293-
// this.ctx.lineWidth = 1;
294-
this.canvas.addEventListener("drag", function (event) {}, false);
296+
297+
this.imgPanel.addEventListener(
298+
"mouseover",
299+
function (event) {
300+
document.body.style.cursor = "pointer";
301+
},
302+
false
303+
);
304+
305+
this.imgPanel.addEventListener(
306+
"mouseout",
307+
function (event) {
308+
document.body.style.cursor = "default";
309+
},
310+
false
311+
);
295312

296313
this.canvas.addEventListener(
297314
"dragover",
@@ -309,32 +326,19 @@ class ImageLayer {
309326
if (!file) return;
310327

311328
const tryOpenImg = (filepathOrBuffer) => {
312-
// Try to load image using sharp to check validity
313-
sharp(filepathOrBuffer).metadata((err, info) => {
314-
if (err) {
315-
// Invalid image, do not add
316-
document
317-
.getElementById("error_msg")
318-
?.animate([{ opacity: "1" }, { opacity: "0" }], {
319-
duration: 1800,
320-
iterations: 1,
321-
});
322-
return;
323-
}
324-
// Valid image, add new layer
325-
if (typeof filepathOrBuffer === "string") {
326-
imageLayerQueue[Parameter.num].openImg(filepathOrBuffer);
327-
} else {
328-
imageLayerQueue[Parameter.num].openImgBuffer(
329-
filepathOrBuffer,
330-
file.name
331-
);
332-
}
333-
Parameter.num++;
334-
imageLayerQueue.push(new ImageLayer());
335-
document.body.appendChild(imageLayerQueue[Parameter.num].imgPanel);
336-
imageLayerQueue[Parameter.num].openImg("./assets/addImage.png");
337-
});
329+
// Valid image, add new layer
330+
if (typeof filepathOrBuffer === "string") {
331+
return imageLayerQueue[Parameter.num].openImg(filepathOrBuffer);
332+
} else {
333+
imageLayerQueue[Parameter.num].openImgBuffer(
334+
filepathOrBuffer,
335+
file.name
336+
);
337+
}
338+
Parameter.num++;
339+
imageLayerQueue.push(new ImageLayer());
340+
document.body.appendChild(imageLayerQueue[Parameter.num].imgPanel);
341+
imageLayerQueue[Parameter.num].openImg("./assets/addImage.png");
338342
};
339343

340344
if (!file.path) {
@@ -382,7 +386,12 @@ class ImageLayer {
382386
ctxs.setLineDash([2]);
383387

384388
const mouseMoveHandler = (evt) => {
385-
ctxs.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
389+
ctxs.clearRect(
390+
0,
391+
0,
392+
this.canvas.clientWidth,
393+
this.canvas.clientHeight
394+
);
386395
ctxs.drawImage(this.image, 0, 0);
387396
const currX = evt.clientX - rect.left;
388397
const currY = evt.clientY - rect.top;
@@ -421,8 +430,8 @@ class ImageLayer {
421430
cropH > 0 &&
422431
this.buffer &&
423432
this.information &&
424-
(cropX + cropW) <= this.information.width &&
425-
(cropY + cropH) <= this.information.height
433+
cropX + cropW <= this.information.width &&
434+
cropY + cropH <= this.information.height
426435
) {
427436
sharp(this.buffer)
428437
.extract({ left: cropX, top: cropY, width: cropW, height: cropH })
@@ -694,73 +703,92 @@ class ImageLayer {
694703
}
695704

696705
openImg(filepath) {
706+
this.extension = path.extname(filepath).replace(".", "");
697707
if (filepath !== "./assets/addImage.png") {
698708
this.canvas.id = "full";
699709
}
700-
this.filepath = filepath;
701-
this.extension = path.extname(this.filepath).replace(".", "");
702-
this.nameSpan.textContent = path
703-
.basename(this.filepath)
704-
.replace("." + this.extension, "");
705710

706711
const afterLoad = (buf, info) => {
707712
this.updatePreviewImg(buf, info);
708713
updateScrollUI();
709-
// Automatically scroll to the right when a new image is opened
710714
scrollContainer.scrollLeft = scrollContainer.scrollWidth;
711715
};
712716

713-
if (this.extension === "tiff" || this.extension === "tif") {
714-
sharp(filepath)
715-
.toFormat("png")
716-
.toBuffer((err, buf, info) => afterLoad(buf, info));
717+
let loader;
718+
if (["tiff", "tif"].includes(this.extension)) {
719+
loader = sharp(filepath).png();
717720
} else if (this.extension === "ico") {
718-
ico
719-
.sharpsFromIco(this.filepath)
720-
.png()
721-
.toBuffer((err, buf, info) => afterLoad(buf, info));
721+
loader = ico.sharpsFromIco(filepath)[0].png();
722722
} else if (this.extension === "bmp") {
723-
bmp
724-
.sharpFromBmp(this.filepath)
725-
.png()
726-
.toBuffer((err, buf, info) => afterLoad(buf, info));
723+
loader = bmp.sharpFromBmp(filepath).png();
727724
} else {
728-
sharp(filepath).toBuffer((err, buf, info) => afterLoad(buf, info));
725+
loader = sharp(filepath);
729726
}
727+
728+
return new Promise((resolve) => {
729+
loader.toBuffer((err, buf, info) => {
730+
if (err) {
731+
document
732+
.getElementById("error_msg")
733+
?.animate([{ opacity: "1" }, { opacity: "0" }], {
734+
duration: 1800,
735+
iterations: 1,
736+
});
737+
resolve(false);
738+
return;
739+
}
740+
this.filepath = filepath;
741+
this.nameSpan.textContent = path.basename(
742+
filepath,
743+
path.extname(filepath)
744+
);
745+
afterLoad(buf, info);
746+
resolve(true);
747+
});
748+
});
730749
}
731750

732751
openImgBuffer(buffer, name) {
733-
this.canvas.id = "full";
734-
this.filepath = name;
735752
this.extension = path.extname(name).replace(".", "");
736-
this.nameSpan.textContent = path
737-
.basename(name)
738-
.replace("." + this.extension, "");
753+
this.canvas.id = "full";
739754

740755
const afterLoad = (buf, info) => {
741756
this.updatePreviewImg(buf, info);
742757
updateScrollUI();
743758
scrollContainer.scrollLeft = scrollContainer.scrollWidth;
744759
};
745760

746-
// sharp는 buffer 입력도 지원
747-
if (this.extension === "tiff" || this.extension === "tif") {
748-
sharp(buffer)
749-
.toFormat("png")
750-
.toBuffer((err, buf, info) => afterLoad(buf, info));
761+
let loader;
762+
if (["tiff", "tif"].includes(this.extension)) {
763+
loader = sharp(buffer).png();
751764
} else if (this.extension === "ico") {
752-
ico
753-
.sharpsFromIco(buffer)
754-
.png()
755-
.toBuffer((err, buf, info) => afterLoad(buf, info));
765+
loader = ico.sharpsFromIco(buffer)[0].png();
756766
} else if (this.extension === "bmp") {
757-
bmp
758-
.sharpFromBmp(buffer)
759-
.png()
760-
.toBuffer((err, buf, info) => afterLoad(buf, info));
767+
loader = bmp.sharpFromBmp(buffer).png();
761768
} else {
762-
sharp(buffer).toBuffer((err, buf, info) => afterLoad(buf, info));
769+
loader = sharp(buffer);
763770
}
771+
772+
return new Promise((resolve) => {
773+
loader.toBuffer((err, buf, info) => {
774+
if (err) {
775+
document
776+
.getElementById("error_msg")
777+
?.animate([{ opacity: "1" }, { opacity: "0" }], {
778+
duration: 1800,
779+
iterations: 1,
780+
});
781+
resolve(false);
782+
return;
783+
}
784+
this.filepath = name;
785+
this.nameSpan.textContent = path
786+
.basename(name)
787+
.replace("." + this.extension, "");
788+
afterLoad(buf, info);
789+
resolve(true);
790+
});
791+
});
764792
}
765793

766794
saveImg(filepath) {
@@ -774,7 +802,6 @@ class ImageLayer {
774802
if (err) {
775803
// console.log("failed to save");
776804
} else {
777-
// console.log("saved successfully");
778805
document
779806
.getElementById("save_msg")
780807
.animate([{ opacity: "1" }, { opacity: "0" }], {

‎main.js‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,21 @@ app.whenReady().then(() => {
7878
// Open the DevTools.(only develop)
7979
// mainWindow.webContents.openDevTools();
8080

81-
["resizeImgREQ", "cropImgREQ", "filterImgREQ", "rotateImgREQ", "paintImgREQ"].forEach(
82-
(item, index, arr) => {
83-
ipcMain.on(item, (event) => {
84-
mainWindow
85-
.getBrowserViews()[0]
86-
.webContents.loadFile(
87-
`./pages/${item.replace("ImgREQ", "")}_panel.html`
88-
);
89-
});
90-
}
91-
);
81+
[
82+
"resizeImgREQ",
83+
"cropImgREQ",
84+
"filterImgREQ",
85+
"rotateImgREQ",
86+
"paintImgREQ",
87+
].forEach((item, index, arr) => {
88+
ipcMain.on(item, (event) => {
89+
mainWindow
90+
.getBrowserViews()[0]
91+
.webContents.loadFile(
92+
`./pages/${item.replace("ImgREQ", "")}_panel.html`
93+
);
94+
});
95+
});
9296

9397
ipcMain.on("resizeValueSEND", (event, res) => {
9498
mainWindow.webContents.send("resizeImgCMD", res);
@@ -221,7 +225,15 @@ app.whenReady().then(() => {
221225
filters: [
222226
{
223227
name: "Image file",
224-
extensions: ["png", "jpg", "jpeg", "webp"],
228+
extensions: [
229+
"png",
230+
"jpg",
231+
"jpeg",
232+
"webp",
233+
"ico",
234+
"tiff",
235+
"tif",
236+
],
225237
},
226238
],
227239
})

0 commit comments

Comments
 (0)