From f4de6acd2f8c18f77ee601caa21297a59cc41084 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:50:53 +0200 Subject: [PATCH 1/9] Update scrollbar gutter to make less visible --- css/reset.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/reset.css b/css/reset.css index 46bc9cd..b0c09cc 100644 --- a/css/reset.css +++ b/css/reset.css @@ -32,5 +32,5 @@ ul, li { } ::-webkit-scrollbar-track { - background-color: #444; + background-color: rgba(50, 50, 50, 0.4);; } \ No newline at end of file From b89409f82e4d8f2512561074749f9af46e53b242 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:57:03 +0200 Subject: [PATCH 2/9] Make tools sticky on screen's left edge So that the drawing canvas can expend full height --- css/style.css | 28 ++++++++++++++++++---------- css/tools.css | 4 ---- index.html | 45 ++++++++++++++++++++++++--------------------- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/css/style.css b/css/style.css index 04812bf..a06d901 100644 --- a/css/style.css +++ b/css/style.css @@ -12,10 +12,10 @@ body { text-align: center; font-size: 0; position: absolute; - left: 0; - top: 104px; + left: 104px; + top: 10px; right: 0; - bottom: 0; + bottom: 10px; } .left-column { @@ -35,19 +35,27 @@ body { font-size: 0; } -.top-section { - position: absolute; - bottom: 100%; - min-width: 400px; - margin-bottom: 5px; -} - .right-column { display: inline-block; vertical-align: top; margin-left: 10px; } +.sticky-section { + display: table; + height: 100%; + position: fixed; + top: 0; + bottom: 0; + left: 0; + width: 140px; +} + +.sticky-section .wrap { + display: table-cell; + vertical-align: middle; +} + /** * Canvases layout diff --git a/css/tools.css b/css/tools.css index 86fbc40..1471861 100644 --- a/css/tools.css +++ b/css/tools.css @@ -5,10 +5,6 @@ float: left; } -.tools-wrapper { - width: 70%; -} - .tool-icon { float: left; cursor : pointer; diff --git a/index.html b/index.html index b473932..370c5a7 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,30 @@ + +
@@ -27,27 +51,6 @@
- -
From f08f58328e48c86a79bbea098c4b9b758b3e9510 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 13:57:52 +0200 Subject: [PATCH 3/9] Fix selected state for tools on load --- js/controller/ToolController.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/js/controller/ToolController.js b/js/controller/ToolController.js index 921cb9a..26b008c 100644 --- a/js/controller/ToolController.js +++ b/js/controller/ToolController.js @@ -69,11 +69,15 @@ * @private */ ns.ToolController.prototype.createToolMarkup_ = function() { - var currentTool, toolMarkup = ''; + var currentTool, toolMarkup = '', extraClass; // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that. for (var toolKey in this.toolInstances) { currentTool = this.toolInstances[toolKey]; - toolMarkup += '
  • '; } $('#tools-container').html(toolMarkup); From 7484873c03fc3ec3f587d4ff231b7c3fefebfdac Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 14:00:38 +0200 Subject: [PATCH 4/9] Clean up image folder names and remove unused icon images --- css/tools.css | 22 +++++++++--------- img/{tools_legacy => icons}/circle.png | Bin img/{tools_legacy => icons}/color-palette.png | Bin img/{tools_legacy => icons}/dropper.png | Bin .../cursors => icons}/eraser.png | Bin img/{tools_legacy/cursors => icons}/hand.png | Bin img/{tools_legacy => }/icons/mirror-pen.png | Bin .../cursors => icons}/paint-bucket.png | Bin img/{tools_legacy/cursors => icons}/pen.png | Bin .../cursors => icons}/rectangle.png | Bin .../cursors => icons}/select.png | Bin img/{tools_legacy => }/icons/stroke.png | Bin .../cursors => icons}/vertical-mirror-pen.png | Bin img/{tools_legacy/cursors => icons}/wand.png | Bin img/save.png | Bin 0 -> 395 bytes img/tools_legacy/cursors/circle.png | Bin 761 -> 0 bytes img/tools_legacy/eraser.png | Bin 656 -> 0 bytes img/tools_legacy/hand.png | Bin 672 -> 0 bytes img/tools_legacy/icons/color-palette.png | Bin 209 -> 0 bytes img/tools_legacy/icons/eraser.png | Bin 656 -> 0 bytes img/tools_legacy/icons/hand.png | Bin 672 -> 0 bytes img/tools_legacy/icons/paint-bucket.png | Bin 707 -> 0 bytes img/tools_legacy/icons/pen.png | Bin 450 -> 0 bytes img/tools_legacy/icons/rectangle.png | Bin 660 -> 0 bytes img/tools_legacy/icons/select.png | Bin 1145 -> 0 bytes .../icons/vertical-mirror-pen.png | Bin 603 -> 0 bytes img/tools_legacy/icons/wand.png | Bin 570 -> 0 bytes img/tools_legacy/mirror-pen.png | Bin 557 -> 0 bytes img/tools_legacy/paint-bucket.png | Bin 707 -> 0 bytes img/tools_legacy/pen.png | Bin 450 -> 0 bytes img/tools_legacy/rectangle.png | Bin 660 -> 0 bytes img/tools_legacy/select.png | Bin 1145 -> 0 bytes img/tools_legacy/stroke.png | Bin 450 -> 0 bytes img/tools_legacy/vertical-mirror-pen.png | Bin 603 -> 0 bytes img/tools_legacy/wand.png | Bin 570 -> 0 bytes 35 files changed, 11 insertions(+), 11 deletions(-) rename img/{tools_legacy => icons}/circle.png (100%) rename img/{tools_legacy => icons}/color-palette.png (100%) rename img/{tools_legacy => icons}/dropper.png (100%) rename img/{tools_legacy/cursors => icons}/eraser.png (100%) rename img/{tools_legacy/cursors => icons}/hand.png (100%) rename img/{tools_legacy => }/icons/mirror-pen.png (100%) rename img/{tools_legacy/cursors => icons}/paint-bucket.png (100%) rename img/{tools_legacy/cursors => icons}/pen.png (100%) rename img/{tools_legacy/cursors => icons}/rectangle.png (100%) rename img/{tools_legacy/cursors => icons}/select.png (100%) rename img/{tools_legacy => }/icons/stroke.png (100%) rename img/{tools_legacy/cursors => icons}/vertical-mirror-pen.png (100%) rename img/{tools_legacy/cursors => icons}/wand.png (100%) create mode 100644 img/save.png delete mode 100644 img/tools_legacy/cursors/circle.png delete mode 100755 img/tools_legacy/eraser.png delete mode 100644 img/tools_legacy/hand.png delete mode 100755 img/tools_legacy/icons/color-palette.png delete mode 100755 img/tools_legacy/icons/eraser.png delete mode 100644 img/tools_legacy/icons/hand.png delete mode 100755 img/tools_legacy/icons/paint-bucket.png delete mode 100755 img/tools_legacy/icons/pen.png delete mode 100755 img/tools_legacy/icons/rectangle.png delete mode 100644 img/tools_legacy/icons/select.png delete mode 100644 img/tools_legacy/icons/vertical-mirror-pen.png delete mode 100755 img/tools_legacy/icons/wand.png delete mode 100644 img/tools_legacy/mirror-pen.png delete mode 100755 img/tools_legacy/paint-bucket.png delete mode 100755 img/tools_legacy/pen.png delete mode 100755 img/tools_legacy/rectangle.png delete mode 100644 img/tools_legacy/select.png delete mode 100755 img/tools_legacy/stroke.png delete mode 100644 img/tools_legacy/vertical-mirror-pen.png delete mode 100755 img/tools_legacy/wand.png diff --git a/css/tools.css b/css/tools.css index 1471861..4611a19 100644 --- a/css/tools.css +++ b/css/tools.css @@ -91,47 +91,46 @@ */ .tool-paint-bucket .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/paint-bucket.png) 12 12, pointer; + cursor: url(../img/icons/paint-bucket.png) 12 12, pointer; } .tool-vertical-mirror-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/vertical-mirror-pen.png) 5 15, pointer; + cursor: url(../img/icons/vertical-mirror-pen.png) 5 15, pointer; } .tool-pen .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-eraser .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/eraser.png) 0 15, pointer; + cursor: url(../img/icons/eraser.png) 0 15, pointer; } .tool-stroke .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/pen.png) 0 15, pointer; + cursor: url(../img/icons/pen.png) 0 15, pointer; } .tool-rectangle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/rectangle.png) 0 15, pointer; + cursor: url(../img/icons/rectangle.png) 0 15, pointer; } .tool-circle .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/circle.png) 2 15, pointer; + cursor: url(../img/icons/circle.png) 2 15, pointer; } .tool-move .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/hand.png) 15 15, pointer; + cursor: url(../img/icons/hand.png) 15 15, pointer; } .tool-rectangle-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/select.png) 15 15, pointer; + cursor: url(../img/icons/select.png) 15 15, pointer; } .tool-shape-select .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/wand.png) 15 15, pointer; + cursor: url(../img/icons/wand.png) 15 15, pointer; } .tool-colorpicker .drawing-canvas-container:hover { - cursor: url(../img/tools_legacy/dropper.png) 0 15, pointer; } .tool-grid, @@ -145,6 +144,7 @@ padding: 5px 0 0 5px; height: 25px; cursor : default; + cursor: url(../img/icons/dropper.png) 0 15, pointer; } .tool-color-picker input { diff --git a/img/tools_legacy/circle.png b/img/icons/circle.png similarity index 100% rename from img/tools_legacy/circle.png rename to img/icons/circle.png diff --git a/img/tools_legacy/color-palette.png b/img/icons/color-palette.png similarity index 100% rename from img/tools_legacy/color-palette.png rename to img/icons/color-palette.png diff --git a/img/tools_legacy/dropper.png b/img/icons/dropper.png similarity index 100% rename from img/tools_legacy/dropper.png rename to img/icons/dropper.png diff --git a/img/tools_legacy/cursors/eraser.png b/img/icons/eraser.png similarity index 100% rename from img/tools_legacy/cursors/eraser.png rename to img/icons/eraser.png diff --git a/img/tools_legacy/cursors/hand.png b/img/icons/hand.png similarity index 100% rename from img/tools_legacy/cursors/hand.png rename to img/icons/hand.png diff --git a/img/tools_legacy/icons/mirror-pen.png b/img/icons/mirror-pen.png similarity index 100% rename from img/tools_legacy/icons/mirror-pen.png rename to img/icons/mirror-pen.png diff --git a/img/tools_legacy/cursors/paint-bucket.png b/img/icons/paint-bucket.png similarity index 100% rename from img/tools_legacy/cursors/paint-bucket.png rename to img/icons/paint-bucket.png diff --git a/img/tools_legacy/cursors/pen.png b/img/icons/pen.png similarity index 100% rename from img/tools_legacy/cursors/pen.png rename to img/icons/pen.png diff --git a/img/tools_legacy/cursors/rectangle.png b/img/icons/rectangle.png similarity index 100% rename from img/tools_legacy/cursors/rectangle.png rename to img/icons/rectangle.png diff --git a/img/tools_legacy/cursors/select.png b/img/icons/select.png similarity index 100% rename from img/tools_legacy/cursors/select.png rename to img/icons/select.png diff --git a/img/tools_legacy/icons/stroke.png b/img/icons/stroke.png similarity index 100% rename from img/tools_legacy/icons/stroke.png rename to img/icons/stroke.png diff --git a/img/tools_legacy/cursors/vertical-mirror-pen.png b/img/icons/vertical-mirror-pen.png similarity index 100% rename from img/tools_legacy/cursors/vertical-mirror-pen.png rename to img/icons/vertical-mirror-pen.png diff --git a/img/tools_legacy/cursors/wand.png b/img/icons/wand.png similarity index 100% rename from img/tools_legacy/cursors/wand.png rename to img/icons/wand.png diff --git a/img/save.png b/img/save.png new file mode 100644 index 0000000000000000000000000000000000000000..fb044dc8302391120ef48a3d8f74905e61fc8711 GIT binary patch literal 395 zcmeAS@N?(olHy`uVBq!ia0vp^+CZ$u!3H837o`Fzwj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&kwYjh9Q6wJSh#5>QAjGbEzKIX^cyHLnE7WngeFN=+HhCPe7kHol9u#KTulJ~V01kxe0!#69g20(H!vs5T`g=ZD>6yT?|4m(5xKPMY@YpXav& f-FDb2=h6;l85`e^duP{rfWpMn)z4*}Q$iB}e|e1s literal 0 HcmV?d00001 diff --git a/img/tools_legacy/cursors/circle.png b/img/tools_legacy/cursors/circle.png deleted file mode 100644 index a186a26bbe4846ee539d230d7b0e722df019bf0e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 761 zcmV>^n)O>9(wFSqQ9Xhdk*TMA_yNG6oIv%OmtxDX~pIyx@o%R zrrCBkcene!w{vV)bkR!(KAiLYe$VHe?>XP|B`5ApGAM+Qa(xOEVop(%Ii@6F@6#;v zx7Y!0aOm+raE+jb^)1{ho$V98%LjskZa}yJvS?N4kf*8mgy*$=J); zW!p+B7Y4s6fV6W{wFHo%{tol;(erJCU~8$Y6!&K0SfT+{7<)bM{qQvr0DFhXmuhKm zu^3uMhua2=l8hVq@~g_SLNOuwtfaDHB%X=FI>gGdj1B3$JLSBNFP_YOBaQ|C$vl_@&Fnd`H5P0am`q&!@ zfCEM3M4DgO*j@|Ah3M)=F7+#0*v^ZTQb{I=@!8lSa*)eIq?x04U$G+tjt;0_hHOGI zBW~@~OiIs;qoFWF9fb=$O%C8pfIWjHOamOv=E|n@c98*c8l4qeLV)Z&+Z!+lgk0yhmKjPv*wW7qpy95of1#Dp&zj|RU4#UH^poBr{lT9!J-b%2AF?Jiq|bLcQ< zFqz=EYW3-jv(}r>KhezkLN++LB!u372frjBh2yLSz-}KXVfTO3T^u_}bjEXvn0~wA r8U0+^#)-@VayXzw{g(eLzXccocR_wGMq{CL00000NkvXXu0mjfIPhXY diff --git a/img/tools_legacy/eraser.png b/img/tools_legacy/eraser.png deleted file mode 100755 index e0d4b0201b9fc3f6f6da0c9b888822eafaac8414..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 656 zcmV;B0&o3^P)1RCwB?lh2D1VHn4scXm_|RPb*o z2t2F@!9+q64R!|)wREXlm!UK;JjfC*NEabIL{LnZWuc;5?7HNoAE&4}dY4uA7Bo7F zznz)4=Y4a;*7ejgygcu`?|k0x_kG@X2q6UQh{xlQN~OTzaKP2V8xU}e%?d!m6d(ye z3FglRz)uq>7}!JxMj{c2#bV%cx!{txZUIg1etP?iiB)&*+w1;dlVT>5*#z>nEr66% zJt}oI4Xp@}uDvUL+_|^KjRAZYU~@3|*6#6Pse>@3Xx_4*)9JwN+WP|&K*DcskZd-~ z9XOrNWfnzo+p?_ilWP%0?{>K|vriUTKR*Y*-w(Bi`_I=LpwjkqIt}M?ImJkYfTAi> zW)4_iYc~J(DKFxda1owNCgFTOugqpMFijKOcazISelK93&j%-u_Fv%Wsjv!<$K!CJ zP*BhThwbLNa}$1@o#7f5hpUgDzQkiZK_B0QRpnx_s9^pFX03_J)?R|cr@4bySiob% zzVc(VmCNO_G8&E6j-uUeV+{rHdcCms;kEpL&?ceei#;zg?JO>firZMi qS0)6!_zO_`=C*PVMkCl5`N9Qfv&d*`0-eD}<~0i_h~T|9uK{Sh1iG{f~V95!&s7MKs|n60}C zkzn&HrC{iR*Lc_X(N1o~Q9{P^)rrCDkFPQFm~b3@LTf9wAr;d5u1t=3K0-=LFt^4d zwDcAs-6P=mfUo{R4@Tk%wS15xkMH2}yZ%^*p!kkKv?qH_1hLBwjSXDRw(e3yW`y{hXv0)gfQS~Uxm{K`_{tBKt0531)Juuzx~o6D;hLZjC;k_h{kHThqfC`(hFmxSO zSd?`bB$R({-*5T0gITA{|Fu6pn0eqpx>}JTL$UWimE@yNe}L98c)I$ztaD0e0sx43 BPNV<; diff --git a/img/tools_legacy/icons/eraser.png b/img/tools_legacy/icons/eraser.png deleted file mode 100755 index e0d4b0201b9fc3f6f6da0c9b888822eafaac8414..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 656 zcmV;B0&o3^P)1RCwB?lh2D1VHn4scXm_|RPb*o z2t2F@!9+q64R!|)wREXlm!UK;JjfC*NEabIL{LnZWuc;5?7HNoAE&4}dY4uA7Bo7F zznz)4=Y4a;*7ejgygcu`?|k0x_kG@X2q6UQh{xlQN~OTzaKP2V8xU}e%?d!m6d(ye z3FglRz)uq>7}!JxMj{c2#bV%cx!{txZUIg1etP?iiB)&*+w1;dlVT>5*#z>nEr66% zJt}oI4Xp@}uDvUL+_|^KjRAZYU~@3|*6#6Pse>@3Xx_4*)9JwN+WP|&K*DcskZd-~ z9XOrNWfnzo+p?_ilWP%0?{>K|vriUTKR*Y*-w(Bi`_I=LpwjkqIt}M?ImJkYfTAi> zW)4_iYc~J(DKFxda1owNCgFTOugqpMFijKOcazISelK93&j%-u_Fv%Wsjv!<$K!CJ zP*BhThwbLNa}$1@o#7f5hpUgDzQkiZK_B0QRpnx_s9^pFX03_J)?R|cr@4bySiob% zzVc(VmCNO_G8&E6j-uUeV+{rHdcCms;kEpL&?ceei#;zg?JO>firZMi qS0)6!_zO_`=C*PVMkCl5`N9Qfv&d*`0-eD}<~0i_h~T|9uK{Sh1iG{f~V95!&s7MKs|n60}C zkzn&HrC{iR*Lc_X(N1o~Q9{P^)rrCDkFPQFm~b3@LTf9wAr;d5u1t=3K0-=LFt^4d zwDcAs-6P=mfUo{R4@Tk%wS15xkMH2}yZ%^*p!kkKv?qH_1hLBwjSXDRw(e3yW`y{hXv0)gfQS~Uxm{K`_{tBKt0531)Juuzx~o6D;hd6{}iR@dma4U zGwNI63={10?wsg6GrMIz9=9gZKjA|+f3>GAK+D|GJH82pDTdw`PIL|}-E9ldO1tCE zh!Y}h7`H{Mc=~qbQ(FLcAgsD6T*IKskM2jy_-qNlZnsM>1c*c;%G7om9HAYZ4@|gr ze-YdHGL{@3SlraFMS}W1yBeCDwgj)70ffV0WjdWkyAqr__<>5Lf>Nmjzuyn#`-SF| zCD@#CrZM!vJ3OHFTxO9ZIYyfsjRp#Z0 zMwk*D4u?7#jpFF&2#1GEG`Byu|C}hU^-i!wvCE+^rj9RT$?eTa}EEYkR zMK{!HwbGGEfk1HjC$2x=82slTsZ=WU`uaN4eVfe&i9|y3`F!?;Cy|z1E>{~228hLC plE>q<_Zv^tYSsXk%l)sJ)*onV;!t9*YM1~3002ovPDHLkV1n&hO1S_4 diff --git a/img/tools_legacy/icons/pen.png b/img/tools_legacy/icons/pen.png deleted file mode 100755 index 0bfecd50ee9f5bc5828f0c0745aa3e0effcbe250..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 450 zcmV;z0X_bSP)Rq1}l<=psl5*5Xz9i;M}s*NP=ugs7Q#8Z;Dyx|}!`#}xw_C3!B-yaPC&0j)XcpuX@rNfq|q}N(wJOjA& z>u+z?dfJEuLePrqzy!)73pvLjxk4d6XNZt?hm_iYES{i}J5y3l?}PPNYDBR7oPc~6 zL^d)Bi4Q2L3pnp!nFxN9c2E+=@XAl&+;2m6a~kZj1r3Mz3C=hmUG<{+vWR@t4q?fJ zhFc(ozZD#Mx`^Q~g1v=K6!QnfuqyD4>U4EjF0eamL}Jx| z%&`kR-H+3GBYr*Qx}frLU4`%n9(`uSomzw)t%%NagXkA*R5Mbv9VLDp1wMo$cOMa~ s3Wm%r7^bwK$2$}-<~D8p`#1iScU4^XCLAA~0ssI207*qoM6N<$g3sK(Qvd(} diff --git a/img/tools_legacy/icons/rectangle.png b/img/tools_legacy/icons/rectangle.png deleted file mode 100755 index d28dc6b1a4420e67d2ad201e77fa6ffdff47b0f0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 660 zcmV;F0&D$=P)-HHgciWXH=58>$m+)aUP_=fNurq~c9Jfr+{g4OA6VysNJCVr!>1 zyO(ukr-@eVVQOd_eeEr`d;&*7#Zd36d)>ub=%lXvJGs$=On&Pn97vP9zKEPnrBRKfD#EKdHd|_ZeufOm#a)m@NAF&m3;5bVE$Q(zLZS1JKPk-x02D-XgTe_RX z#5m7GmzbE!!E}bj^$Yyl#_Q*HW-gz-5F#kVUOZxW=<7_hAg}KDjh>#B%CwB&uQ)_iwz;@6pmo1X^%*Tz443SFZSDVxCn00004Tx04R}-Ro!pfR1`mnZ(O7nKcKOW4i$^9Ra0BJ8yc;~21%2p=|UR0&DbiW z$#rfTQ`a`O(`{9s_5yDV_yd5l2Of}kLK+Oj_Ok5(v`JGz71bo9J#^YYXp{DWs&KBa zQ@dTpxRI}aIp=pi@6k0t$5)!;m`NF6-tt{FpOKHBn3g+MAqmexC-gw4rh87hTrL7G z#)U`L!(So6-Zux@>;H3gR;i~0B%VTSS3P|m@o9jRsXML@Al^p#@G0Lx-0?i(9WEw_ zSYddU<1E8793KxjQ|c&UmW!mTC>k>?{om1c9S zUx<6_jj_!T&^M{wWM#>IBbOSf*xP<^F{$j$aOQ5Y{cT zROCL1M7^NKKL z&(yA}mSw#iM0^;IB{ZO5!wl{^Sg-*ysE~&Yz8!E;Qv(A`lu*=Clo*MpVGd>OdF6n^ zam1Jntk;<}MrqIC5$=Q>n{*R}?8oOIDUw5En2dl--Xw34!z7E+5pr-OgyQ-soSab)C%saskMla`aQLVzg0+MZf20tJU&K{hZoBrUc+U4e9&3o zw|KmGEe4#xz17wBu{f`SS_4i66?j31EjY7n{zGfhONK~c+td!TS#B}JoR}5UAd7p& z5phTyXSkK0xCeD3xaYP^o&J~#Xp9xFb0C;HHml5fA<%h1eR|qw7wxF+oNL9T1Aits?sKNIwvGaN)^WO$I^cUV)HzL_| z1K?{9p!>B*)`xfEv!4N6IG{J&h49W#Bz^(#YWw%`e_a{8n{G9m5AeR~_yl0%<7V@p zjk3mRNaU93L|Nr(jY_l2UJ2)^m2h&zGb`XMg zDG%YGIu%`lP6k02aaJTkr<6_=i5PSVBzH!ryt+X@B3p!g#Ey)Ei#$Rp3GGR`)+Vx0=LtWG3FRvd~t;w1x~2bX{xDD zIyb1s54n$O0|^-U1#m;@CB_&k^FMyd_vlEt9k%rb9^W!}U2_VC)MM}EvLW53y5VQh(i7O!z~?9K{_&3T z`VQID09AU7GE8h5L9D!+N6XDAR^&(F{`e}3!=iw#}5u#Tg^3nctWfs1Hmk-X; z@nk1*BVEXSn1Q$P6pH#9I{Ky=04#pn0Out=QOHWa{k|wd@iVZLapdxv4FI{kwqq&d z2*s1|`=Tghr43%vpBBDiZb{#{d~3)%`l!=Pghh8- pYX~H4&6M=-*DnmnOBDeTVHZOpxosdUl1cyo002ovPDHLkV1ipX1AhPj diff --git a/img/tools_legacy/icons/wand.png b/img/tools_legacy/icons/wand.png deleted file mode 100755 index 44ccbf812879c42cb1f9587d865bcfc337ce6361..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 570 zcmV-A0>%A_P)hUn2-Navsqo?5A8 zh}}V^=%7@_%C;=H{tGpIj5CMu*>5J=i;m^t2QTySd)}9aAppozC}++wDz`eOViU-dbRRoz=JsVlZk>N%^azhi%=xTCt9`LQjtqNFW~e|R=r9= z`@I3J^#z@aD5yBuq2DLQO#|4uFW6R5kzPZ+h&6Af&5}POarL&lA~3t5R1i7uh*ffDw@qEs=HBW ze?CI~MkvG6H-MF7r{Yv4kw_q&PNP^XqFgTHXlH@RpLO}3aV{T{Ez=8lo;PHV$Ads1 zfOtF(s5%5V>3qE|&{lueV1Y1j%GF zXt&#NI-LlGLPN>_18TJzN~Mxf*f6pY5Dteo^|P&3>(H{!KTr&_wGRQWb^rhX07*qo IM6N<$g7V1&P5=M^ diff --git a/img/tools_legacy/mirror-pen.png b/img/tools_legacy/mirror-pen.png deleted file mode 100644 index f51489460073ccd61817ab46e6f96fd5b22cfebc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 557 zcmV+|0@D47P)Llf6q@Q5c7xb91>@gRz2|N(4=YMnrVF2udl^ z4x%6q4(cZO2S__eCuh+iD2m-WI7o*I0ZSF6Lm{byS3wCVe#4Dg8=BDIXUsir!C>~kdT`hLf`_q+&ay zVmkmR4)rdtK?c?n+(y4)U+El}7r4qj#7_5V9SMq@23hd=S7dr0y}lmzOO<kqx>Y`N5G#KZuk(+dT&<1^7t!h^v@Ly0|+T4pN73& zpIu^ywlOnjQ8G=` z6$k%*1~6*N*xiU={`!K`?WSiklDB0lKsa*A+vO>IMiTpUo3WxhWm0sk9Q!R`<)*Es7cZe`iGfa00000NkvXXu0mjfwg>H5 diff --git a/img/tools_legacy/paint-bucket.png b/img/tools_legacy/paint-bucket.png deleted file mode 100755 index f82a8865a7bc0326fd56f27a869326be4a7d688b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 707 zcmV;!0zCbRP)d6{}iR@dma4U zGwNI63={10?wsg6GrMIz9=9gZKjA|+f3>GAK+D|GJH82pDTdw`PIL|}-E9ldO1tCE zh!Y}h7`H{Mc=~qbQ(FLcAgsD6T*IKskM2jy_-qNlZnsM>1c*c;%G7om9HAYZ4@|gr ze-YdHGL{@3SlraFMS}W1yBeCDwgj)70ffV0WjdWkyAqr__<>5Lf>Nmjzuyn#`-SF| zCD@#CrZM!vJ3OHFTxO9ZIYyfsjRp#Z0 zMwk*D4u?7#jpFF&2#1GEG`Byu|C}hU^-i!wvCE+^rj9RT$?eTa}EEYkR zMK{!HwbGGEfk1HjC$2x=82slTsZ=WU`uaN4eVfe&i9|y3`F!?;Cy|z1E>{~228hLC plE>q<_Zv^tYSsXk%l)sJ)*onV;!t9*YM1~3002ovPDHLkV1n&hO1S_4 diff --git a/img/tools_legacy/pen.png b/img/tools_legacy/pen.png deleted file mode 100755 index 0bfecd50ee9f5bc5828f0c0745aa3e0effcbe250..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 450 zcmV;z0X_bSP)Rq1}l<=psl5*5Xz9i;M}s*NP=ugs7Q#8Z;Dyx|}!`#}xw_C3!B-yaPC&0j)XcpuX@rNfq|q}N(wJOjA& z>u+z?dfJEuLePrqzy!)73pvLjxk4d6XNZt?hm_iYES{i}J5y3l?}PPNYDBR7oPc~6 zL^d)Bi4Q2L3pnp!nFxN9c2E+=@XAl&+;2m6a~kZj1r3Mz3C=hmUG<{+vWR@t4q?fJ zhFc(ozZD#Mx`^Q~g1v=K6!QnfuqyD4>U4EjF0eamL}Jx| z%&`kR-H+3GBYr*Qx}frLU4`%n9(`uSomzw)t%%NagXkA*R5Mbv9VLDp1wMo$cOMa~ s3Wm%r7^bwK$2$}-<~D8p`#1iScU4^XCLAA~0ssI207*qoM6N<$g3sK(Qvd(} diff --git a/img/tools_legacy/rectangle.png b/img/tools_legacy/rectangle.png deleted file mode 100755 index d28dc6b1a4420e67d2ad201e77fa6ffdff47b0f0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 660 zcmV;F0&D$=P)-HHgciWXH=58>$m+)aUP_=fNurq~c9Jfr+{g4OA6VysNJCVr!>1 zyO(ukr-@eVVQOd_eeEr`d;&*7#Zd36d)>ub=%lXvJGs$=On&Pn97vP9zKEPnrBRKfD#EKdHd|_ZeufOm#a)m@NAF&m3;5bVE$Q(zLZS1JKPk-x02D-XgTe_RX z#5m7GmzbE!!E}bj^$Yyl#_Q*HW-gz-5F#kVUOZxW=<7_hAg}KDjh>#B%CwB&uQ)_iwz;@6pmo1X^%*Tz443SFZSDVxCn00004Tx04R}-Ro!pfR1`mnZ(O7nKcKOW4i$^9Ra0BJ8yc;~21%2p=|UR0&DbiW z$#rfTQ`a`O(`{9s_5yDV_yd5l2Of}kLK+Oj_Ok5(v`JGz71bo9J#^YYXp{DWs&KBa zQ@dTpxRI}aIp=pi@6k0t$5)!;m`NF6-tt{FpOKHBn3g+MAqmexC-gw4rh87hTrL7G z#)U`L!(So6-Zux@>;H3gR;i~0B%VTSS3P|m@o9jRsXML@Al^p#@G0Lx-0?i(9WEw_ zSYddU<1E8793KxjQ|c&UmW!mTC>k>?{om1c9S zUx<6_jj_!T&^M{wWM#>IBbOSf*xP<^F{$j$aOQ5Y{cT zROCL1M7^NKKL z&(yA}mSw#iM0^;IB{ZO5!wl{^Sg-*ysE~&Yz8!E;Qv(A`lu*=Clo*MpVGd>OdF6n^ zam1Jntk;<}MrqIC5$=Q>n{*R}?8oOIDUw5En2dl--Xw34!z7E+5pr-OgyQ-soSab)C%saskMla`aQLVzg0+MZf20tJU&K{hZoBrUc+U4e9&3o zw|KmGEe4#xz17wBu{f`SS_4i66?j31EjY7n{zGfhONK~c+td!TS#B}JoR}5UAd7p& z5phTyXSkK0xCeD3xaYP^o&J~#Xp9xFb0C;HHml5fA<%h1eR|qw7wxF+oNL9T1Aits?sKNIwvGaN)^WO$I^cUV)HzL_| z1K?{9p!>B*)`xfEv!4N6IG{J&h49W#Bz^(#YWw%`e_a{8n{G9m5AeR~_yl0%<7V@p zRq1}l<=psl5*5Xz9i;M}s*NP=ugs7Q#8Z;Dyx|}!`#}xw_C3!B-yaPC&0j)XcpuX@rNfq|q}N(wJOjA& z>u+z?dfJEuLePrqzy!)73pvLjxk4d6XNZt?hm_iYES{i}J5y3l?}PPNYDBR7oPc~6 zL^d)Bi4Q2L3pnp!nFxN9c2E+=@XAl&+;2m6a~kZj1r3Mz3C=hmUG<{+vWR@t4q?fJ zhFc(ozZD#Mx`^Q~g1v=K6!QnfuqyD4>U4EjF0eamL}Jx| z%&`kR-H+3GBYr*Qx}frLU4`%n9(`uSomzw)t%%NagXkA*R5Mbv9VLDp1wMo$cOMa~ s3Wm%r7^bwK$2$}-<~D8p`#1iScU4^XCLAA~0ssI207*qoM6N<$g3sK(Qvd(} diff --git a/img/tools_legacy/vertical-mirror-pen.png b/img/tools_legacy/vertical-mirror-pen.png deleted file mode 100644 index cf2157d808d6e2257a792a2dd3ad1e9ddefb5c43..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 603 zcmV-h0;K(kP)jk3mRNaU93L|Nr(jY_l2UJ2)^m2h&zGb`XMg zDG%YGIu%`lP6k02aaJTkr<6_=i5PSVBzH!ryt+X@B3p!g#Ey)Ei#$Rp3GGR`)+Vx0=LtWG3FRvd~t;w1x~2bX{xDD zIyb1s54n$O0|^-U1#m;@CB_&k^FMyd_vlEt9k%rb9^W!}U2_VC)MM}EvLW53y5VQh(i7O!z~?9K{_&3T z`VQID09AU7GE8h5L9D!+N6XDAR^&(F{`e}3!=iw#}5u#Tg^3nctWfs1Hmk-X; z@nk1*BVEXSn1Q$P6pH#9I{Ky=04#pn0Out=QOHWa{k|wd@iVZLapdxv4FI{kwqq&d z2*s1|`=Tghr43%vpBBDiZb{#{d~3)%`l!=Pghh8- pYX~H4&6M=-*DnmnOBDeTVHZOpxosdUl1cyo002ovPDHLkV1ipX1AhPj diff --git a/img/tools_legacy/wand.png b/img/tools_legacy/wand.png deleted file mode 100755 index 44ccbf812879c42cb1f9587d865bcfc337ce6361..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 570 zcmV-A0>%A_P)hUn2-Navsqo?5A8 zh}}V^=%7@_%C;=H{tGpIj5CMu*>5J=i;m^t2QTySd)}9aAppozC}++wDz`eOViU-dbRRoz=JsVlZk>N%^azhi%=xTCt9`LQjtqNFW~e|R=r9= z`@I3J^#z@aD5yBuq2DLQO#|4uFW6R5kzPZ+h&6Af&5}POarL&lA~3t5R1i7uh*ffDw@qEs=HBW ze?CI~MkvG6H-MF7r{Yv4kw_q&PNP^XqFgTHXlH@RpLO}3aV{T{Ez=8lo;PHV$Ads1 zfOtF(s5%5V>3qE|&{lueV1Y1j%GF zXt&#NI-LlGLPN>_18TJzN~Mxf*f6pY5Dteo^|P&3>(H{!KTr&_wGRQWb^rhX07*qo IM6N<$g7V1&P5=M^ From a6ef4ace6dc902990e5b2aca736a75ba818ed0cb Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 14:03:50 +0200 Subject: [PATCH 5/9] Quick poor fix palette/colorpickers --- css/tools.css | 45 +++++++++++++-------------------------------- 1 file changed, 13 insertions(+), 32 deletions(-) diff --git a/css/tools.css b/css/tools.css index 4611a19..d208df2 100644 --- a/css/tools.css +++ b/css/tools.css @@ -131,56 +131,37 @@ } .tool-colorpicker .drawing-canvas-container:hover { -} - -.tool-grid, -.tool-grid label, -.tool-grid input { - line-height: 2.5; - cursor: pointer; -} - -.tool-color-picker { - padding: 5px 0 0 5px; - height: 25px; - cursor : default; cursor: url(../img/icons/dropper.png) 0 15, pointer; } .tool-color-picker input { - width: 8px; height: 8px; + width: 16px; + height: 16px; + text-indent: -10000px; border: 1px solid black; - padding: 1px; background: white; cursor: pointer; position : relative; + top: 10px; + margin-left: 2px; } -.secondary-color-picker { - top : 8px; +.tool-color-picker .secondary-color-picker { + top : 18px; + margin-left: 0; } -.tool-palette { - width: auto; -} -.tool-palette .palette li { - float: left; -} - -.palette .palette-color { - cursor: pointer; - display : inline-block; - height : 20px; - width : 20px; - margin : 5px; -} .palette .palette-color.transparent-color { + position: relative; + top: 10px; + left: 10px; background-color: white; height : 16px; width : 16px; border: 2px solid #000; - + background-size: 16px 16px; + background-position: 0 0; background-image: -webkit-gradient( linear, left top, From d1f292bd699be47ca760ee0f09c683d2aae60023 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 16:31:09 +0200 Subject: [PATCH 6/9] Fix save/upload buttons UX - new look and feel - upload for png spritesheet & animated gif - remove host code (window.open) from spritesheetRenderer --- css/tools.css | 24 +++++++++---- img/actions/image-upload.png | Bin 1574 -> 0 bytes img/actions/save.png | Bin 468 -> 0 bytes img/cloud_export.png | Bin 0 -> 594 bytes index.html | 18 +++++----- js/piskel.js | 51 ++++++++++++++-------------- js/rendering/SpritesheetRenderer.js | 36 ++++++++++++-------- 7 files changed, 74 insertions(+), 55 deletions(-) delete mode 100644 img/actions/image-upload.png delete mode 100755 img/actions/save.png create mode 100644 img/cloud_export.png diff --git a/css/tools.css b/css/tools.css index d208df2..abcabee 100644 --- a/css/tools.css +++ b/css/tools.css @@ -185,19 +185,29 @@ /* * Framesheet level actions: */ -.tool-icon.tool-save { - background-image: url(../img/actions/save.png); +.tool-icon.save-icon { + background-image: url(../img/save.png); + background-position: 6px 6px; + background-size: 36px 36px; } -.tool-icon.tool-export { - background-image: url(../img/actions/image-export.png); +.tool-icon.upload-cloud-icon { + background-image: url(../img/cloud_export.png); + background-position: 4px 0px; + background-size: 36px 36px; + position: relative; } -.tool-icon.tool-upload { - background-image: url(../img/actions/image-upload.png); +.upload-cloud-icon .label { + position: absolute; + left: 0; + bottom: 4px; + right: 0; + font-size: 11px; + text-transform: uppercase; + color: #fff; } - .tool-icon.tool-add-frame { background-image: url(../img/actions/add.png); } diff --git a/img/actions/image-upload.png b/img/actions/image-upload.png deleted file mode 100644 index df9129eb67c47e1f963829935d5d649a5b746edf..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1574 zcmaJ>X;2eq7>-IkP{ex_ZQZVTR86v*&9yrO%w`irO~fRlu~u+NHe`#*rn`#?NR_KH zc+>-rYAq^=tuUgkqj;cBic%>QkQw{KiqJB6v>qsRtk{-r5Re}ocV_pyp67YbZ}a0# zv0MMLNeOTO^8#@q0;o3dI9SR5I<+fKM)70Rh^f0aqxD zkkPB7T=c?pma?RqtoHO2JL&*qqJbzsCJ4AGo&@~vwH^-hYrq~|Oqd6^r6AA);Zro= zYo~0+ctFRn6rhkmVmqXS03|Ge5xGjGnh(ez7?MIVDJ&DiDh!cf5Crr-pkR%4I59I} z=(Q!RG@y&;y_i($^Z6t`M8dGiQW!v2~{+ZYdNatz-Yt>#-8e?JbWCX z0R^bUK|3%6ffPywgb)e^0mFI-#pPN9imGIU4n+)*p^qEq;ds(xr~0_`8?NlFTujGO zB+sx`hFRO!4Dl|8XE+z*1#}h!SV4OnjE@V}N$@J@C&kk1D2IV%+(1vtFnWOX)KtN= zRtFnodNqQ`(89-(#;CDBO&&1xkxnF5=UsQ{##cq z4Ji@J#uPR`*MB&5g-gy0+A@c+&JZYlwYa(R+XHtSSB?I(<57JE(s?QEm2=83XMdfw z<+G`hADWuxwW=S7R?W=C$Jb`Jnhsk|s<=Ii9%&8~hdiuod6LsMy$GMbE~dZ~Te4t5 zjsB6E> zVE4;$@F{Tm+~hq`?}guxj~rDTK6`fP!^a!$RAuwn{%8KmH7k|SsLU4WE`LVCu6DM5 z?5NH2Mve@hS@>c{Lc`F#)PwzHr%o3%M{7rOM0=2Ro`a?H+gSsrSV4Tto37*Ni;4?qxw) zgss+pX?yj(yLdx(AYWZ8tG{t`VrWcfUf!XEwnja;J#kaji{CchyQZ8_vUgwmkE@*5 zw=KIJI3E}snu8ZZdC}EOSldJB&iCrhmhS4sgNBNRWXU3~wC=YC|J-qU6H$(@$^H+P Cepk)_ diff --git a/img/actions/save.png b/img/actions/save.png deleted file mode 100755 index 966a19db2025e1b6408752935530e614f2b144ea..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 468 zcmV;_0W1EAP)-G+qFXIAJ9SvXVu{! zN)-o#N98dGi^bwI2m*#7;gw|sOb9_mn9t|RN6`}3kpjhe&NR&v&-2QzLg(^}^Mmbv3W|@L-f}=D|Aq+#P)oRKMAwkMb*>&%g7a~zL>ZO?iL6Ri6 zLkyG2L?wE?+sc!t-d_a7YTNcfS68XPbzQJpt)0UkqY(^;!*T^@mIY!XuhOWeOaUha z0t@-wSDF5E2E0H(tVFQfLm(N;6%+_`dItirkAUeqP;Vv%c=nm<44E~~LC1%*^YdU2 z_2OJz#fVeH6T;@r=JO%fn2g8Q=-v@GL~x8S@>BhT(LpS~1Q-C|PszqU=K$yc0000< KMNUMnLSTY>DbIKS diff --git a/img/cloud_export.png b/img/cloud_export.png new file mode 100644 index 0000000000000000000000000000000000000000..654edc8ce01bf1cfd89c16941b6799bfc4bcbfe5 GIT binary patch literal 594 zcmeAS@N?(olHy`uVBq!ia0vp^MnJ63!3HE3me2eGq}Y|gW!U_%O?XxI14-? ziy0WWg+Z8+Vb&Z8pdfpRr>`sfT{d1`bIyOU%S|xv6<2KrRD=b5Uwy zNotBhd1gt5g1e`0fI@zrLZX6iV)E1{@zD$njB7nz978hhy}fzfoh4D?z{mGnW@cZX zVV|HWxbgZr?Rq&a$YOMD-)Ab`1K8Ph=%TC%)gKzaFY^OEzNb~!p4i~3I;%1L`!d(mra;!R z%~`tQ5v=bT6{B64&df4QQ_1aMw_$2OkP_nJn!X;Y?kCds+eF-5##woi^CGL?rIwf{ES5qOubYI6 zh*$i3elm6MBA2^c_i%ilr1Ft9r}Kp4H1EaSYZx{wmVdXn$oB5hnvZ?|E(UKvgdA6( bN7+Ya7N>gI{Z{ifgQC{c)z4*}Q$iB}#!K+q literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 370c5a7..ccf3c00 100644 --- a/index.html +++ b/index.html @@ -74,14 +74,16 @@
    -
      - -
    • -
    • -
    • -
    • -
    +
    +
    + GIF +
    +
    + PNG +
    + + +
    diff --git a/js/piskel.js b/js/piskel.js index 7cb0afd..5ed585a 100644 --- a/js/piskel.js +++ b/js/piskel.js @@ -167,41 +167,42 @@ $.namespace("pskl"); return false; }, - /** - * Open new window with spritesheet as PNG - */ - exportToPNG : function () { - (new pskl.rendering.SpritesheetRenderer(frameSheet)).render(); - }, - - uploadAsGIF : function () { - var encoder = new GIFEncoder(), - dpi = 10; - encoder.setRepeat(0); - var fps = piskel.animationController.fps; - encoder.setDelay(1000/fps); - - encoder.start(); - encoder.setSize(frameSheet.getWidth() * dpi, frameSheet.getHeight() * dpi); - for (var i = 0 ; i < frameSheet.frames.length ; i++) { - var frame = frameSheet.frames[i]; - var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); - encoder.addFrame(renderer.render()); - } - encoder.finish(); - - var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + uploadToScreenletstore : function(imageData) { var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('data', imageData); xhr.open('POST', "http://screenletstore.appspot.com/__/upload", true); + var cloudURL; + var that = this; xhr.onload = function(e) { if (this.status == 200) { - var baseUrl = window.open("http://screenletstore.appspot.com/img/" + this.responseText); + cloudURL = "http://screenletstore.appspot.com/img/" + this.responseText; + that.openWindow(cloudURL); } }; xhr.send(formData); + }, + + uploadAsAnimatedGIF : function () { + var fps = piskel.animationController.fps; + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataAnimatedGIF(fps); + this.uploadToScreenletstore(imageData); + }, + + uploadAsSpritesheetPNG : function () { + var imageData = (new pskl.rendering.SpritesheetRenderer(frameSheet)).renderAsImageDataSpritesheetPNG(); + this.uploadToScreenletstore(imageData); + }, + + openWindow: function(url) { + var options = [ + "dialog=yes", "scrollbars=no", "status=no", + "width=" + frameSheet.getWidth() * frameSheet.getFrameCount(), + "height=" + frameSheet.getHeight() + ].join(","); + + window.open(url, "piskel-export", options); } }; diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index d7d9819..703b50a 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -6,18 +6,34 @@ this.framesheet = framesheet; }; - /** - * Will open a new window displaying the spritesheet as a png - */ - ns.SpritesheetRenderer.prototype.render = function () { + ns.SpritesheetRenderer.prototype.renderAsImageDataSpritesheetPNG = function () { var canvas = this.createCanvas_(); for (var i = 0 ; i < this.framesheet.getFrameCount() ; i++) { var frame = this.framesheet.getFrameByIndex(i); this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } - this.openCanvasAsPNGInWindow_(canvas); + return canvas.toDataURL("image/png") }; + ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) { + var encoder = new GIFEncoder(), dpi = 10; + encoder.setRepeat(0); + encoder.setDelay(1000/fps); + + encoder.start(); + encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); + for (var i = 0 ; i < this.framesheet.frames.length ; i++) { + var frame = this.framesheet.frames[i]; + var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); + encoder.addFrame(renderer.render()); + } + encoder.finish(); + + var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + return imageData; + }; + + /** * TODO(juliandescottes): Mutualize with code already present in FrameRenderer */ @@ -44,14 +60,4 @@ throw "Cannot render empty Spritesheet"; } }; - - ns.SpritesheetRenderer.prototype.openCanvasAsPNGInWindow_ = function (canvas) { - var options = [ - "dialog=yes", "scrollbars=no", "status=no", - "width=" + this.framesheet.getWidth() * this.framesheet.getFrameCount(), - "height=" + this.framesheet.getHeight() - ].join(","); - - window.open(canvas.toDataURL("image/png"), "piskel-export", options); - }; })(); \ No newline at end of file From 947805565842706792204c3069fdcab82d7ac742 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 17:39:12 +0200 Subject: [PATCH 7/9] Move 'add frame button' to preview frames and change UXD --- css/preview-film-section.css | 25 +++++++++++++++++++++++++ css/tools.css | 5 +---- img/plus.png | Bin 0 -> 271 bytes index.html | 3 --- js/controller/PreviewFilmController.js | 15 ++++++++++----- 5 files changed, 36 insertions(+), 12 deletions(-) create mode 100644 img/plus.png diff --git a/css/preview-film-section.css b/css/preview-film-section.css index 52019e9..48680d0 100644 --- a/css/preview-film-section.css +++ b/css/preview-film-section.css @@ -10,6 +10,31 @@ padding-right: 7px; } +.add-frame-action { + border: #888 solid 4px; + font-size: 13px; + color: #888; + cursor: pointer; + padding: 6px 0; + border-radius: 4px; + margin-top: 8px; + background-image: url(../img/plus.png); + background-repeat: no-repeat; + background-position: 3px 7px; + background-size: 26px 26px; + text-indent: 18px; + background-color: #222; +} + +.add-frame-action .label { + width: 80px; + margin: 0 auto; +} + +.add-frame-action:hover { + border-color: gold; +} + .preview-tile { position: relative; border: #444 3px solid; diff --git a/css/tools.css b/css/tools.css index abcabee..1a12a3e 100644 --- a/css/tools.css +++ b/css/tools.css @@ -185,6 +185,7 @@ /* * Framesheet level actions: */ + .tool-icon.save-icon { background-image: url(../img/save.png); background-position: 6px 6px; @@ -208,7 +209,3 @@ color: #fff; } -.tool-icon.tool-add-frame { - background-image: url(../img/actions/add.png); -} - diff --git a/img/plus.png b/img/plus.png new file mode 100644 index 0000000000000000000000000000000000000000..6b60af79ec6b529de068160deb2ff610ae8b1ccf GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^#z3sc!3HE-Un=GUDYhhUcNd2LAh=-f^2tCE&H|6f zVg?3oVGw3ym^DWND9B#o>FdgVmyMUt%DORWQZ-OWEi)vd#5q4VH#M&W$Yo$~E=o-- zNlj5G&n(GMaQE~LP{_|yNL27mOrH8AJ{qVX%hSa%B;(%O>lZm240u=%xZN?5)vtcV z=H(dpdhdOwhaL)^DQUA+y=Q9}fWZ3GRmYcyZk65p{ho7b0vO2o^vpS%KKbvfo;!0B}XCW~EqswC>kh?rx{an^LB{Ts5AL3WL literal 0 HcmV?d00001 diff --git a/index.html b/index.html index ccf3c00..0fa2c99 100644 --- a/index.html +++ b/index.html @@ -81,9 +81,6 @@
    PNG
    - - -
    diff --git a/js/controller/PreviewFilmController.js b/js/controller/PreviewFilmController.js index 2818914..61b4fe3 100644 --- a/js/controller/PreviewFilmController.js +++ b/js/controller/PreviewFilmController.js @@ -13,10 +13,7 @@ $.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this)); }; - ns.PreviewFilmController.prototype.init = function() { - var addFrameButton = $('#add-frame-button')[0]; - addFrameButton.addEventListener('mousedown', this.addFrame.bind(this)); - }; + ns.PreviewFilmController.prototype.init = function() {}; ns.PreviewFilmController.prototype.addFrame = function () { this.framesheet.addEmptyFrame(); @@ -50,7 +47,15 @@ for (var i = 0, l = frameCount; i < l ; i++) { this.container.append(this.createPreviewTile_(i)); } - + // Append 'new empty frame' button + var newFrameButton = document.createElement("div"); + newFrameButton.id = "add-frame-action"; + newFrameButton.className = "add-frame-action"; + newFrameButton.innerHTML = "

    Add new frame

    "; + this.container.append(newFrameButton); + + $(newFrameButton).click(this.addFrame.bind(this)); + var needDragndropBehavior = (frameCount > 1); if(needDragndropBehavior) { this.initDragndropBehavior_(); From 93da547cb199ddf91bccdb3a57952aee449a2e6e Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 17:56:44 +0200 Subject: [PATCH 8/9] Fix Travis --- js/rendering/SpritesheetRenderer.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index 703b50a..2548501 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -12,25 +12,25 @@ var frame = this.framesheet.getFrameByIndex(i); this.drawFrameInCanvas_(frame, canvas, i * this.framesheet.getWidth(), 0); } - return canvas.toDataURL("image/png") + return canvas.toDataURL("image/png"); }; ns.SpritesheetRenderer.prototype.renderAsImageDataAnimatedGIF = function (fps) { var encoder = new GIFEncoder(), dpi = 10; encoder.setRepeat(0); - encoder.setDelay(1000/fps); + encoder.setDelay(1000/fps); - encoder.start(); - encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); - for (var i = 0 ; i < this.framesheet.frames.length ; i++) { - var frame = this.framesheet.frames[i]; - var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); - encoder.addFrame(renderer.render()); - } + encoder.start(); + encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); + for (var i = 0 ; i < this.framesheet.frames.length ; i++) { + var frame = this.framesheet.frames[i]; + var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); + encoder.addFrame(renderer.render()); + } encoder.finish(); - var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); - return imageData; + var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); + return imageData; }; From 9f940c5b26cdeabddf75db7cdabfdc24df809657 Mon Sep 17 00:00:00 2001 From: Vince Date: Thu, 13 Jun 2013 18:00:16 +0200 Subject: [PATCH 9/9] Fix Travis 2 --- js/rendering/SpritesheetRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/rendering/SpritesheetRenderer.js b/js/rendering/SpritesheetRenderer.js index 2548501..f7e61fd 100644 --- a/js/rendering/SpritesheetRenderer.js +++ b/js/rendering/SpritesheetRenderer.js @@ -19,7 +19,7 @@ var encoder = new GIFEncoder(), dpi = 10; encoder.setRepeat(0); encoder.setDelay(1000/fps); - + encoder.start(); encoder.setSize(this.framesheet.getWidth() * dpi, this.framesheet.getHeight() * dpi); for (var i = 0 ; i < this.framesheet.frames.length ; i++) { @@ -27,7 +27,7 @@ var renderer = new pskl.rendering.CanvasRenderer(frame, dpi); encoder.addFrame(renderer.render()); } - encoder.finish(); + encoder.finish(); var imageData = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); return imageData;