Skip to content

Commit 23fdd8a

Browse files
steffeststeffest
committed
Updated Save Dialog and basic touch support
1 parent d82a5e6 commit 23fdd8a

26 files changed

+774
-84
lines changed

‎TODO.txt

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,6 @@ Bugs:
1717

1818
Transforming a mask clears the layer ?
1919
resizing sizebox negatively, makes the sizebox 0 width/height
20-
copy/paste from syntax highlighter
20+
copy/paste from syntax highlighter
21+
22+
Draw line on non toplayer draws the line on the toplayer

‎_img/amigatick.png

8.17 KB
Loading

‎_img/image.svg

Lines changed: 12 additions & 0 deletions
Loading

‎_img/psd.svg

Lines changed: 61 additions & 0 deletions
Loading

‎_script/app.js

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import {COMMAND, EVENT} from "./enum.js";
44
import ImageFile from "./image.js";
55
import Palette from "./ui/palette.js";
66
import Modal, {DIALOG} from "./ui/modal.js";
7-
import Eventbus from "./util/eventbus.js";
8-
import layer from "./ui/layer.js";
97

108
let App = function(){
119
let me = {
1210
version: "0.01 alpha"
1311
}
1412

1513
me.init = function(){
14+
console.error("init");
1615
UI.init();
1716
EventBus.trigger(COMMAND.NEW);
1817

@@ -28,14 +27,35 @@ let App = function(){
2827
Modal.show(DIALOG.ABOUT,me.version);
2928
})
3029

30+
EventBus.on(COMMAND.FULLSCREEN,()=>{
31+
let elm = document.body;
32+
if (!elm) return;
33+
if (elm.requestFullscreen) {
34+
elm.requestFullscreen().catch(
35+
(err)=>{
36+
console.error("fullscreen failed");
37+
console.error(err);
38+
}
39+
);
40+
} else if (elm.webkitRequestFullscreen) { /* Safari */
41+
elm.webkitRequestFullscreen();
42+
}
43+
})
44+
3145
}
3246

3347
window.addEventListener('DOMContentLoaded', (event) => {
3448
me.init();
3549
});
3650

3751

52+
// prevent pinch-zoom for iOS Safari
53+
if (window.GestureEvent) {
54+
document.documentElement.addEventListener('gesturestart', (e)=>{e.preventDefault()}, {passive: false, capture:true});
55+
}
3856

57+
58+
/*
3959
window.test = function(){
4060
let canvas = ImageFile.getCanvas();
4161
let ctx = canvas.getContext("2d");
@@ -125,7 +145,7 @@ let App = function(){
125145
return image;
126146
}
127147
128-
148+
*/
129149

130150
return me;
131151
}();

‎_script/enum.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export let COMMAND={
5858
SELECTALL: 1057,
5959
COPY: 1058,
6060
PASTE: 1059,
61+
FULLSCREEN: 1060
6162
}
6263

6364
export let EVENT={

‎_script/image.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,28 @@ import {duplicateCanvas, releaseCanvas} from "./util/canvasUtils.js";
99
import Palette from "./ui/palette.js";
1010

1111
let ImageFile = function(){
12-
let me = {};
12+
let me = {};
1313
let activeLayer;
1414
let activeLayerIndex = 0;
1515
let activeFrameIndex = 0;
1616
let cachedImage;
1717
let currentFile = {
18+
name:"Untitled",
1819
layers:[]
1920
}
2021

2122
me.getCurrentFile = function(){
2223
return currentFile;
2324
}
2425

26+
me.getName = function(){
27+
return currentFile.name || "Untitled";
28+
}
29+
30+
me.setName = function(name){
31+
currentFile.name = name;
32+
}
33+
2534
me.getOriginal = function(){
2635
if (!cachedImage){
2736
console.error("caching image");
@@ -280,6 +289,7 @@ let ImageFile = function(){
280289
image: {}
281290
}
282291

292+
struct.image.name = currentFile.name;
283293
struct.image.width = currentFile.width;
284294
struct.image.height = currentFile.height;
285295
struct.image.frames=[];
@@ -308,6 +318,7 @@ let ImageFile = function(){
308318
currentFile.height = image.height;
309319
let mockImage = new Image(currentFile.width,currentFile.height);
310320
newFile(mockImage);
321+
currentFile.name = image.name || "Untitled";
311322
image.frames.forEach((_frame,frameIndex)=>{
312323
let frame = currentFile.frames[frameIndex];
313324
if (!frame){
@@ -327,7 +338,6 @@ let ImageFile = function(){
327338
let _image = new Image();
328339
_image.onload = function () {
329340
layer.drawImage(_image);
330-
console.error(_image.width);
331341
EventBus.trigger(EVENT.layersChanged);
332342
EventBus.trigger(EVENT.imageSizeChanged);
333343
}
@@ -462,7 +472,6 @@ let ImageFile = function(){
462472
}
463473

464474
function moveLayer(fromIndex,toIndex){
465-
console.error(fromIndex,toIndex);
466475
if (currentFrame().layers.length>1){
467476
if (toIndex>=currentFrame().layers.length) toIndex=currentFrame().layers.length-1;
468477
if (toIndex<0) toIndex=0;

‎_script/ui/canvas.js

Lines changed: 54 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,8 @@ let Canvas = function(parent){
330330
touchData.hotDrawFunction = function(x,y){
331331
drawLayer.clear();
332332
let ctx = drawLayer.getContext();
333-
ctx.lineWidth = ToolOptions.getLineSize() / (window.devicePixelRatio || 1);
333+
let lineWidth = ToolOptions.getLineSize() / (window.devicePixelRatio || 1)
334+
ctx.lineWidth = lineWidth;
334335
ctx.lineCap = "square";
335336
ctx.strokeStyle = Palette.getDrawColor();
336337
ctx.imageSmoothingEnabled = false;
@@ -369,7 +370,7 @@ let Canvas = function(parent){
369370
ctx.stroke();
370371
if (isOdd) ctx.translate(-.5,-.5);
371372
}else{
372-
bLine(point.x,point.y,x,y,ctx,Color.fromString(Palette.getDrawColor()));
373+
bLine(point.x,point.y,x,y,ctx,Color.fromString(Palette.getDrawColor()),lineWidth);
373374
}
374375

375376
EventBus.trigger(EVENT.layerContentChanged);
@@ -598,29 +599,73 @@ let Canvas = function(parent){
598599

599600
//Bresenham's_line_algorithm
600601
//http://rosettacode.org/wiki/Bitmap/Bresenham's_line_algorithm
601-
function bLine(x0, y0, x1, y1,ctx,color) {
602+
function bLine_(x0, y0, x1, y1,ctx,color,lineWidth) {
602603
let imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
603604
let data = imgData.data;
604605

605606
var dx = Math.abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
606607
var dy = Math.abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
607608
var err = (dx>dy ? dx : -dy)/2;
608609
while (true) {
609-
// setPixel
610-
let n=(y0*canvas.width+x0)*4;
611-
data[n]=color[0];
612-
data[n+1]=color[1];
613-
data[n+2]=color[2];
614-
data[n+3]=255;
610+
drawPixel(x0,y0);
611+
//drawPixel(x0+1,y0);
612+
//drawPixel(x0-1,y0);
613+
//drawPixel(x0,y0+1);
614+
//drawPixel(x0,y0-1);
615615

616616
if (x0 === x1 && y0 === y1) break;
617617
var e2 = err;
618618
if (e2 > -dx) { err -= dy; x0 += sx; }
619619
if (e2 < dy) { err += dx; y0 += sy; }
620620
}
621621
ctx.putImageData(imgData,0,0);
622+
623+
function drawPixel(x,y){
624+
let n=(y*canvas.width+x)*4;
625+
data[n]=color[0];
626+
data[n+1]=color[1];
627+
data[n+2]=color[2];
628+
data[n+3]=255;
629+
}
622630
}
623631

632+
633+
634+
635+
function bLine(x0, y0, x1, y1,ctx,color,thickness) {
636+
let dx = Math.abs(x1 - x0);
637+
let dy = Math.abs(y1 - y0);
638+
let sx = (x0 < x1) ? 1 : -1;
639+
let sy = (y0 < y1) ? 1 : -1;
640+
let err = dx - dy;
641+
let e2;
642+
let x = x0;
643+
let y = y0;
644+
let angle = Math.atan2(dy, dx);
645+
let thicknessX = thickness * Math.cos(angle);
646+
let thicknessY = thickness * Math.sin(angle);
647+
648+
color = "black";
649+
650+
while (true) {
651+
for (let i = Math.floor(-thicknessX/2); i <= Math.ceil(thicknessX/2); i++) {
652+
for (let j = Math.floor(-thicknessY/2); j <= Math.ceil(thicknessY/2); j++) {
653+
let xi = Math.round(x + i * Math.cos(angle) - j * Math.sin(angle));
654+
let yi = Math.round(y + i * Math.sin(angle) + j * Math.cos(angle));
655+
ctx.fillStyle = color;
656+
ctx.fillRect(xi, yi, 1, 1);
657+
}
658+
}
659+
660+
if ((x == x1) && (y == y1)) break;
661+
e2 = err * 2;
662+
if (e2 > -dy) { err -= dy; x += sx; }
663+
if (e2 < dx) { err += dx; y += sy; }
664+
}
665+
}
666+
667+
668+
624669
return me;
625670
};
626671

‎_script/ui/components/paletteDialog.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ var PaletteDialog = function() {
147147
let colors = Palette.get();
148148
colorHighlight = $div("highlight","",parent);
149149
colors.forEach(drawColor);
150-
paletteCanvas.onmousedown = function(e){
150+
paletteCanvas.onpointerdown = function(e){
151151
const rect = paletteCanvas.getBoundingClientRect();
152152
const x = Math.floor((e.clientX - rect.left) / colorSize);
153153
const y = Math.floor((e.clientY - rect.top) / colorSize);

‎_script/ui/components/resizer.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ var Resizer = function(){
156156
let c ={x:touchData.rotateEnd[0],y:touchData.rotateEnd[1]};
157157
let angle = angle_between_points(c,b,a);
158158
angle += touchData.startAngle||0;
159-
if (Input.isShiftDown() && Input.isMouseDown()){
159+
if (Input.isShiftDown() && Input.isPointerDown()){
160160
angle = Math.round(angle/15) * 15;
161161
}
162162
currentSize.angle=angle;
@@ -196,7 +196,7 @@ var Resizer = function(){
196196
var rect2 = viewport.getBoundingClientRect();
197197
let zoom = Editor.getActivePanel().getZoom();
198198

199-
if (Input.isShiftDown() && Input.isMouseDown() && !touchData.isRotating){
199+
if (Input.isShiftDown() && Input.isPointerDown() && !touchData.isRotating){
200200
// aspect ratio lock
201201
currentSize._width = currentSize._width||currentSize.width;
202202
currentSize._height = currentSize._height||currentSize.height;

0 commit comments

Comments
 (0)