Merge branch 'master' into feature-export-to-file
76
Gruntfile.js
|
@ -13,6 +13,10 @@
|
||||||
var SOURCE_FOLDER = "src";
|
var SOURCE_FOLDER = "src";
|
||||||
|
|
||||||
module.exports = function(grunt) {
|
module.exports = function(grunt) {
|
||||||
|
var dateFormat = require('dateformat');
|
||||||
|
var now = new Date();
|
||||||
|
var version = '-' + dateFormat(now, "yyyy-mm-dd-hh-MM");
|
||||||
|
|
||||||
var mapToSrcFolder = function (path) {return [SOURCE_FOLDER, path].join('/');};
|
var mapToSrcFolder = function (path) {return [SOURCE_FOLDER, path].join('/');};
|
||||||
|
|
||||||
var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
|
var piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
|
||||||
|
@ -110,11 +114,11 @@ module.exports = function(grunt) {
|
||||||
separator : ';'
|
separator : ';'
|
||||||
},
|
},
|
||||||
src : piskelScripts,
|
src : piskelScripts,
|
||||||
dest : 'dest/js/piskel-packaged.js'
|
dest : 'dest/js/piskel-packaged' + version + '.js'
|
||||||
},
|
},
|
||||||
css : {
|
css : {
|
||||||
src : piskelStyles,
|
src : piskelStyles,
|
||||||
dest : 'dest/css/piskel-style-packaged.css'
|
dest : 'dest/css/piskel-style-packaged' + version + '.css'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
uglify : {
|
uglify : {
|
||||||
|
@ -123,19 +127,72 @@ module.exports = function(grunt) {
|
||||||
},
|
},
|
||||||
my_target : {
|
my_target : {
|
||||||
files : {
|
files : {
|
||||||
'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged.js']
|
'dest/js/piskel-packaged-min.js' : ['dest/js/piskel-packaged' + version + '.js']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
replace: {
|
||||||
|
main: {
|
||||||
|
options: {
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
match: 'version',
|
||||||
|
replacement: version
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
{expand: true, flatten: true, src: ['src/piskel-boot-0.1.0.js'], dest: 'dest/'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
index: {
|
||||||
|
options: {
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
match: /templates\//g,
|
||||||
|
replacement: "templates"+version+"/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
{src: ['src/index.html'], dest: 'dest/index.html'}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
editor: {
|
||||||
|
options: {
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
match: /templates\//g,
|
||||||
|
replacement: "../templates"+version+"/"
|
||||||
|
},{
|
||||||
|
match: /^(.|[\r\n])*<!--body-main-start-->/,
|
||||||
|
replacement: "",
|
||||||
|
description : "Remove everything before body-main-start comment"
|
||||||
|
},{
|
||||||
|
match: /<!--body-main-end-->(.|[\r\n])*$/,
|
||||||
|
replacement: "",
|
||||||
|
description : "Remove everything after body-main-end comment"
|
||||||
|
},{
|
||||||
|
match: /([\r\n]) /g,
|
||||||
|
replacement: "$1",
|
||||||
|
description : "Decrease indentation by one"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
files: [
|
||||||
|
{src: ['src/index.html'], dest: 'dest/piskelapp-partials/main-partial.html'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
copy: {
|
copy: {
|
||||||
main: {
|
main: {
|
||||||
files: [
|
files: [
|
||||||
{src: ['src/piskel-boot.js'], dest: 'dest/piskel-boot.js'},
|
{src: ['dest/js/piskel-packaged-min.js'], dest: 'dest/js/piskel-packaged-min' + version + '.js'},
|
||||||
{src: ['src/logo.png'], dest: 'dest/logo.png'},
|
{src: ['src/logo.png'], dest: 'dest/logo.png'},
|
||||||
{src: ['src/js/lib/iframeLoader.js'], dest: 'dest/js/lib/iframeLoader.js'},
|
{src: ['src/js/lib/iframeLoader-0.1.0.js'], dest: 'dest/js/lib/iframeLoader-0.1.0.js'},
|
||||||
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
{expand: true, src: ['img/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
||||||
{expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
{expand: true, src: ['css/fonts/**'], cwd: 'src/', dest: 'dest/', filter: 'isFile'},
|
||||||
{expand: true, src: ['**/*.html'], cwd: 'src/', dest: 'dest/', filter: 'isFile'}
|
{expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates/', filter: 'isFile'}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -182,7 +239,7 @@ module.exports = function(grunt) {
|
||||||
},
|
},
|
||||||
src: [
|
src: [
|
||||||
'src/js/**/*.js',
|
'src/js/**/*.js',
|
||||||
'src/piskel-boot.js',
|
'src/piskel-boot-0.1.0.js',
|
||||||
'src/piskel-script-list.js',
|
'src/piskel-script-list.js',
|
||||||
'!src/js/lib/**/*.js'
|
'!src/js/lib/**/*.js'
|
||||||
],
|
],
|
||||||
|
@ -223,6 +280,7 @@ module.exports = function(grunt) {
|
||||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
grunt.loadNpmTasks('grunt-express');
|
grunt.loadNpmTasks('grunt-express');
|
||||||
|
grunt.loadNpmTasks('grunt-replace');
|
||||||
grunt.loadNpmTasks('grunt-ghost');
|
grunt.loadNpmTasks('grunt-ghost');
|
||||||
grunt.loadNpmTasks('grunt-open');
|
grunt.loadNpmTasks('grunt-open');
|
||||||
grunt.loadNpmTasks('grunt-leading-indent');
|
grunt.loadNpmTasks('grunt-leading-indent');
|
||||||
|
@ -241,7 +299,9 @@ module.exports = function(grunt) {
|
||||||
// Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
|
// Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
|
||||||
grunt.registerTask('compile', ['closureCompiler:compile', 'clean:after']);
|
grunt.registerTask('compile', ['closureCompiler:compile', 'clean:after']);
|
||||||
|
|
||||||
grunt.registerTask('merge', ['concat:js', 'concat:css', 'uglify', 'copy']);
|
grunt.registerTask('rep', ['replace:main', 'replace:index', 'replace:editor']);
|
||||||
|
|
||||||
|
grunt.registerTask('merge', ['concat:js', 'concat:css', 'uglify', 'rep', 'copy']);
|
||||||
|
|
||||||
// Validate & Build
|
// Validate & Build
|
||||||
grunt.registerTask('default', ['clean:before', 'lint', 'compile', 'merge']);
|
grunt.registerTask('default', ['clean:before', 'lint', 'compile', 'merge']);
|
||||||
|
|
72
misc/icons/SVG/swap-colors-sq.svg
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="435"
|
||||||
|
height="409.28125"
|
||||||
|
id="svg3768"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
sodipodi:docname="New document 3">
|
||||||
|
<defs
|
||||||
|
id="defs3770" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.98994949"
|
||||||
|
inkscape:cx="87.95854"
|
||||||
|
inkscape:cy="195.23297"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1148"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1" />
|
||||||
|
<metadata
|
||||||
|
id="metadata3773">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-151.0625,-197.71875)">
|
||||||
|
<rect
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:35;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
id="rect3784"
|
||||||
|
width="400"
|
||||||
|
height="374.28571"
|
||||||
|
x="168.57143"
|
||||||
|
y="215.21933" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:none"
|
||||||
|
d="m 368.5625,209.5 0,97.0625 c -18.16488,0.20304 -36.33513,0.39071 -54.5,0.59375 l 0,-51.1875 c -36.22093,27.13868 -72.43533,54.2988 -108.65625,81.4375 l 107.375,91.46875 1.28125,-53.5 54.5,0.96875 0,62.25 c 20.86255,0.2332 41.73121,0.45431 62.59375,0.6875 l 0,-51.1875 C 467.37718,415.23243 503.59158,442.3613 539.8125,469.5 l -107.40625,91.5 -1.25,-53.5 -62.59375,1.09375 0,75.1875 200,0 0,-365.71875 -200,-8.5625 z"
|
||||||
|
id="path4296"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 2.5 KiB |
97
misc/icons/SVG/swap-colors.svg
Normal file
|
@ -0,0 +1,97 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="305.0015"
|
||||||
|
height="340.10172"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
|
||||||
|
inkscape:export-xdpi="28.799999"
|
||||||
|
inkscape:export-ydpi="28.799999"
|
||||||
|
sodipodi:docname="swap-colors.svg">
|
||||||
|
<defs
|
||||||
|
id="defs2994" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.979899"
|
||||||
|
inkscape:cx="8.3838947"
|
||||||
|
inkscape:cy="209.5365"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1148"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-253.81175,62.601668)">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:25;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 281.31983,48.818994 c 3.33333,70.714286 6.66667,141.428566 10,212.142856 61.21871,3.33294 122.57845,5.69263 183.84823,2.1217 15.38711,-0.63513 30.77146,-1.33859 46.15177,-2.1217 3.33333,-70.71429 6.66667,-141.42857 10,-212.142856 -62.39939,12.482847 -126.73342,18.836303 -190.05871,9.668003 -20.08786,-2.492087 -40.09989,-5.6543 -59.94129,-9.668003 z"
|
||||||
|
id="path3907"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
|
||||||
|
inkscape:export-xdpi="28.799999"
|
||||||
|
inkscape:export-ydpi="28.799999" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 261.31983,63.818994 c 0,-10 0,-20 0,-30 17.1189,-42.7715577 62.54009,-66.510405 106.22509,-72.841714 51.17865,-7.022275 108.04464,-2.652241 150.47229,29.6746917 14.38134,11.798678 28.46011,26.7242963 33.30262,44.9943353 0,9.390896 0,18.781791 0,28.172687"
|
||||||
|
id="path3909"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
|
||||||
|
inkscape:export-xdpi="28.799999"
|
||||||
|
inkscape:export-ydpi="28.799999" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:35;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 364.53412,-41.538146 c 25.60486,-3.886191 51.66473,-4.881507 77.20839,0.0707 l 3.09159,0.466979 1.12859,0.176599"
|
||||||
|
id="path3915"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
|
||||||
|
inkscape:export-xdpi="28.799999"
|
||||||
|
inkscape:export-ydpi="28.799999" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||||
|
d="m 154.55334,129.87795 0.68071,15.85947 c 0,0 -57.346456,21.06263 -57.436416,36.51009 -0.09,15.44746 36.662436,29.96772 55.746256,42.34379 19.08382,12.37606 46.83462,28.70031 47.51123,48.36912 C 200.90809,289.78491 152.86,310.7174 152.86,310.7174 l 0.68319,14.23203 111.11677,-2.02031 11.11168,-206.07112 z"
|
||||||
|
id="path3764"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
transform="translate(253.81175,-62.601668)"
|
||||||
|
sodipodi:nodetypes="cczzcccccc"
|
||||||
|
inkscape:export-filename="C:\Development\git\piskel\src\img\tools\swap.png"
|
||||||
|
inkscape:export-xdpi="28.799999"
|
||||||
|
inkscape:export-ydpi="28.799999" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 4.5 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-square.png
Normal file
After Width: | Height: | Size: 1.9 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-2.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-3.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl.png
Normal file
After Width: | Height: | Size: 4.5 KiB |
BIN
misc/icons/swap-colors-tests/swap.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
21
misc/scripts/copy-to-piskel-website.cmd
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
@ECHO off
|
||||||
|
|
||||||
|
SETLOCAL
|
||||||
|
|
||||||
|
SET PISKEL_PATH="C:\Development\git\piskel"
|
||||||
|
SET PISKELAPP_PATH="C:\Development\git\piskel-website"
|
||||||
|
|
||||||
|
ECHO "Copying files to piskelapp"
|
||||||
|
XCOPY "%PISKEL_PATH%\dest" "%PISKELAPP_PATH%\static\editor" /e /i /h /y
|
||||||
|
|
||||||
|
ECHO "Delete previous partial"
|
||||||
|
DEL "%PISKELAPP_PATH%\templates\editor\main-partial.html"
|
||||||
|
ECHO "Copy new partial"
|
||||||
|
MOVE "%PISKELAPP_PATH%\static\editor\piskelapp-partials\main-partial.html" "%PISKELAPP_PATH%\templates\editor"
|
||||||
|
ECHO "Delete temp partial"
|
||||||
|
RMDIR "%PISKELAPP_PATH%\static\editor\piskelapp-partials\" /S /Q
|
||||||
|
|
||||||
|
PAUSE
|
||||||
|
explorer "%PISKELAPP_PATH%\"
|
||||||
|
|
||||||
|
ENDLOCAL
|
|
@ -23,12 +23,14 @@
|
||||||
"grunt-contrib-uglify": "0.2.2",
|
"grunt-contrib-uglify": "0.2.2",
|
||||||
"grunt-contrib-watch": "0.6.1",
|
"grunt-contrib-watch": "0.6.1",
|
||||||
"grunt-express": "1.0",
|
"grunt-express": "1.0",
|
||||||
|
"grunt-replace": "0.7.8",
|
||||||
"grunt-ghost": "1.0.12",
|
"grunt-ghost": "1.0.12",
|
||||||
"grunt-open": "0.2.3",
|
"grunt-open": "0.2.3",
|
||||||
"grunt-leading-indent": "0.1.0",
|
"grunt-leading-indent": "0.1.0",
|
||||||
"grunt-closure-tools": "~0.8.3",
|
"grunt-closure-tools": "~0.8.3",
|
||||||
"grunt-node-webkit-builder": "0.1.19",
|
"grunt-node-webkit-builder": "0.1.19",
|
||||||
"nodewebkit": "0.8.4"
|
"nodewebkit": "0.8.4",
|
||||||
|
"dateformat" : "1.0.8-1.2.3"
|
||||||
},
|
},
|
||||||
"window": {
|
"window": {
|
||||||
"title": "Piskel",
|
"title": "Piskel",
|
||||||
|
|
|
@ -96,6 +96,10 @@
|
||||||
border: #999 3px solid;
|
border: #999 3px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tile-view {
|
||||||
|
position : relative;
|
||||||
|
}
|
||||||
|
|
||||||
.preview-tile .tile-overlay {
|
.preview-tile .tile-overlay {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -97,11 +97,18 @@
|
||||||
background-size: 23px 23px;
|
background-size: 23px 23px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tool-icon.tool-colorswap {
|
||||||
|
background-image: url(../img/tools/swap-colors.png);
|
||||||
|
background-position: 6px 6px;
|
||||||
|
background-size: 36px 36px;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Tool cursors:
|
* Tool cursors:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.tool-paint-bucket .drawing-canvas-container:hover {
|
.tool-paint-bucket .drawing-canvas-container:hover,
|
||||||
|
.tool-colorswap .drawing-canvas-container:hover {
|
||||||
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
|
cursor: url(../img/icons/paint-bucket.png) 12 12, pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -228,4 +235,28 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tools-tooltip-container {
|
||||||
|
text-align: left;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-tooltip-shortcut {
|
||||||
|
color:gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-tooltip-descriptor {
|
||||||
|
color:#999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tools-tooltip-descriptor-button {
|
||||||
|
padding:2px;
|
||||||
|
border:1px Solid #999;
|
||||||
|
font-size:0.8em;
|
||||||
|
margin-right:5px;
|
||||||
|
width:35px;
|
||||||
|
text-align:center;
|
||||||
|
border-radius:3px;
|
||||||
|
display:inline-block;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
BIN
src/img/tools/swap-colors.png
Normal file
After Width: | Height: | Size: 6.6 KiB |
|
@ -22,7 +22,11 @@
|
||||||
color:white;">
|
color:white;">
|
||||||
<span style="top:45%">Loading Piskel ...</span>
|
<span style="top:45%">Loading Piskel ...</span>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
<script type="text/javascript" src="js/lib/iframeLoader-0.1.0.js"></script>
|
||||||
|
|
||||||
|
<!-- the comment below indicates the beginning of markup reused by the editor integrated in piskelapp.com -->
|
||||||
|
<!-- do not delete, do not move :) -->
|
||||||
|
<!--body-main-start-->
|
||||||
<div id="main-wrapper" class="main-wrapper">
|
<div id="main-wrapper" class="main-wrapper">
|
||||||
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||||
|
|
||||||
|
@ -69,6 +73,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
<iframe src="templates/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||||
<script type="text/javascript" src="piskel-boot.js"></script>
|
<!--body-main-end-->
|
||||||
|
<!-- the comment above indicates the end of the markup reused by the editor integrated in piskelapp.com -->
|
||||||
|
<!-- do not delete, do not move :) -->
|
||||||
|
|
||||||
|
<script type="text/javascript" src="piskel-boot-0.1.0.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -9,8 +9,9 @@
|
||||||
this.tools = [
|
this.tools = [
|
||||||
toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
|
toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
|
||||||
toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
|
toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
|
||||||
toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
|
|
||||||
toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
|
toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
|
||||||
|
toDescriptor('colorSwap', 'A', new pskl.drawingtools.ColorSwap()),
|
||||||
|
toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
|
||||||
toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
|
toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
|
||||||
toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
|
toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
|
||||||
toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
|
toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
|
||||||
|
@ -130,14 +131,10 @@
|
||||||
return pskl.utils.Template.replace(tpl, {
|
return pskl.utils.Template.replace(tpl, {
|
||||||
cssclass : classList.join(' '),
|
cssclass : classList.join(' '),
|
||||||
toolid : toolId,
|
toolid : toolId,
|
||||||
title : this.getTooltipText_(tool)
|
title : tool.instance.getTooltipText(tool.shortcut)
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.ToolController.prototype.getTooltipText_ = function (tool) {
|
|
||||||
return tool.instance.helpText + ' (' + tool.shortcut + ')';
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
|
ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
|
||||||
for(var i = 0 ; i < this.tools.length ; i++) {
|
for(var i = 0 ; i < this.tools.length ; i++) {
|
||||||
pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
|
pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
try {
|
try {
|
||||||
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
|
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
|
window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
|
||||||
}
|
}
|
||||||
this.highlightedPixelRow = null;
|
this.highlightedPixelRow = null;
|
||||||
this.highlightedPixelCol = null;
|
this.highlightedPixelCol = null;
|
||||||
|
@ -58,11 +58,45 @@
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.BaseTool.prototype.getHelpText = function() {
|
||||||
|
return this.shortHelpText || this.helpText;
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.BaseTool.prototype.getTooltipText = function(shortcut) {
|
||||||
|
var tpl = pskl.utils.Template.get('drawing-tool-tooltip-container-template');
|
||||||
|
|
||||||
|
var descriptors = "";
|
||||||
|
if (Array.isArray(this.tooltipDescriptors)) {
|
||||||
|
this.tooltipDescriptors.forEach(function (descriptor) {
|
||||||
|
descriptors += this.getTooltipDescription(descriptor);
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
return pskl.utils.Template.replace(tpl, {
|
||||||
|
helptext : this.getHelpText(),
|
||||||
|
shortcut : shortcut,
|
||||||
|
descriptors : descriptors
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.BaseTool.prototype.getTooltipDescription = function(descriptor) {
|
||||||
|
var tpl;
|
||||||
|
if (descriptor.key) {
|
||||||
|
tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-template');
|
||||||
|
descriptor.key = descriptor.key.toUpperCase();
|
||||||
|
if (pskl.utils.UserAgent.isMac) {
|
||||||
|
descriptor.key = descriptor.key.replace('CTRL', 'CMD');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
tpl = pskl.utils.Template.get('drawing-tool-tooltip-descriptor-simple-template');
|
||||||
|
}
|
||||||
|
return pskl.utils.Template.replace(tpl, descriptor);
|
||||||
|
};
|
||||||
|
|
||||||
ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
|
ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bresenham line algorihtm: Get an array of pixels from
|
* Bresenham line algorithm: Get an array of pixels from
|
||||||
* start and end coordinates.
|
* start and end coordinates.
|
||||||
*
|
*
|
||||||
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
|
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
ns.ShapeTool.call(this);
|
ns.ShapeTool.call(this);
|
||||||
|
|
||||||
this.toolId = "tool-circle";
|
this.toolId = "tool-circle";
|
||||||
|
|
||||||
this.helpText = "Circle tool";
|
this.helpText = "Circle tool";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
58
src/js/drawingtools/ColorSwap.js
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
/**
|
||||||
|
* @provide pskl.drawingtools.ColorSwap
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
(function() {
|
||||||
|
var ns = $.namespace("pskl.drawingtools");
|
||||||
|
|
||||||
|
ns.ColorSwap = function() {
|
||||||
|
this.toolId = "tool-colorswap";
|
||||||
|
|
||||||
|
this.helpText = "Paint all pixels of the same color";
|
||||||
|
|
||||||
|
this.tooltipDescriptors = [
|
||||||
|
{key : 'ctrl', description : 'Apply to all layers'},
|
||||||
|
{key : 'shift', description : 'Apply to all frames'}
|
||||||
|
];
|
||||||
|
};
|
||||||
|
|
||||||
|
pskl.utils.inherit(ns.ColorSwap, ns.BaseTool);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @override
|
||||||
|
*/
|
||||||
|
ns.ColorSwap.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
|
||||||
|
if (frame.containsPixel(col, row)) {
|
||||||
|
var sampledColor = frame.getPixel(col, row);
|
||||||
|
|
||||||
|
var allLayers = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
|
var allFrames = event.shiftKey;
|
||||||
|
|
||||||
|
this.swapColors(sampledColor, color, allLayers, allFrames);
|
||||||
|
|
||||||
|
$.publish(Events.PISKEL_SAVE_STATE, {
|
||||||
|
type : pskl.service.HistoryService.SNAPSHOT
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.ColorSwap.prototype.swapColors = function(oldColor, newColor, allLayers, allFrames) {
|
||||||
|
var swapPixelColor = function (pixelColor,x,y,frame) {
|
||||||
|
if (pixelColor == oldColor) {
|
||||||
|
frame.pixels[x][y] = newColor;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var currentLayer = pskl.app.piskelController.getCurrentLayer();
|
||||||
|
var currentFrameIndex = pskl.app.piskelController.getCurrentFrameIndex();
|
||||||
|
pskl.app.piskelController.getPiskel().getLayers().forEach(function (l) {
|
||||||
|
if (allLayers || l === currentLayer) {
|
||||||
|
l.getFrames().forEach(function (f, frameIndex) {
|
||||||
|
if (allFrames || frameIndex === currentFrameIndex) {
|
||||||
|
f.forEachPixel(swapPixelColor);
|
||||||
|
f.version++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
})();
|
|
@ -11,7 +11,14 @@
|
||||||
ns.Lighten = function() {
|
ns.Lighten = function() {
|
||||||
this.superclass.constructor.call(this);
|
this.superclass.constructor.call(this);
|
||||||
this.toolId = "tool-lighten";
|
this.toolId = "tool-lighten";
|
||||||
this.helpText = "Lighten (hold ctrl for Darken)";
|
|
||||||
|
this.helpText = "Lighten";
|
||||||
|
|
||||||
|
this.tooltipDescriptors = [
|
||||||
|
{key : 'ctrl', description : 'Darken'},
|
||||||
|
{key : 'shift', description : 'Apply only once per pixel'}
|
||||||
|
];
|
||||||
|
|
||||||
this.resetUsedPixels_();
|
this.resetUsedPixels_();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -31,7 +38,7 @@
|
||||||
var frameColor = frame.getPixel(col, row);
|
var frameColor = frame.getPixel(col, row);
|
||||||
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
|
var pixelColor = overlayColor === Constants.TRANSPARENT_COLOR ? frameColor : overlayColor;
|
||||||
|
|
||||||
var isDarken = event.ctrlKey || event.cmdKey;
|
var isDarken = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
var isSinglePass = event.shiftKey;
|
var isSinglePass = event.shiftKey;
|
||||||
|
|
||||||
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
|
var isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
ns.ShapeTool.call(this);
|
ns.ShapeTool.call(this);
|
||||||
|
|
||||||
this.toolId = "tool-rectangle";
|
this.toolId = "tool-rectangle";
|
||||||
this.helpText = "Rectangle tool";
|
|
||||||
|
this.shortHelpText = "Rectangle tool";
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
|
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
|
||||||
|
|
|
@ -8,6 +8,10 @@
|
||||||
// Shapes's first point coordinates (set in applyToolAt)
|
// Shapes's first point coordinates (set in applyToolAt)
|
||||||
this.startCol = null;
|
this.startCol = null;
|
||||||
this.startRow = null;
|
this.startRow = null;
|
||||||
|
|
||||||
|
this.tooltipDescriptors = [
|
||||||
|
{key : 'shift', description : 'Keep 1 to 1 ratio'}
|
||||||
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
|
pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
|
||||||
|
|
|
@ -5,7 +5,12 @@
|
||||||
this.superclass.constructor.call(this);
|
this.superclass.constructor.call(this);
|
||||||
|
|
||||||
this.toolId = "tool-vertical-mirror-pen";
|
this.toolId = "tool-vertical-mirror-pen";
|
||||||
this.helpText = "Vertical Mirror pen tool (hold CTRL for Horizontal, hold SHIFT for both)";
|
this.helpText = "Vertical Mirror pen";
|
||||||
|
|
||||||
|
this.tooltipDescriptors = [
|
||||||
|
{key : 'ctrl', description : 'Use horizontal axis'},
|
||||||
|
{key : 'shift', description : 'Use horizontal and vertical axis'}
|
||||||
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
|
pskl.utils.inherit(ns.VerticalMirrorPen, ns.SimplePen);
|
||||||
|
@ -30,11 +35,12 @@
|
||||||
var mirroredCol = this.getSymmetricCol_(col, frame);
|
var mirroredCol = this.getSymmetricCol_(col, frame);
|
||||||
var mirroredRow = this.getSymmetricRow_(row, frame);
|
var mirroredRow = this.getSymmetricRow_(row, frame);
|
||||||
|
|
||||||
if (!event.ctrlKey) {
|
var hasCtrlKey = pskl.utils.UserAgent.isMac ? event.metaKey : event.ctrlKey;
|
||||||
|
if (!hasCtrlKey) {
|
||||||
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
|
this.superclass.applyToolAt.call(this, mirroredCol, row, color, frame, overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.shiftKey || event.ctrlKey) {
|
if (event.shiftKey || hasCtrlKey) {
|
||||||
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
|
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -15,6 +15,12 @@
|
||||||
this.startRow = null;
|
this.startRow = null;
|
||||||
|
|
||||||
this.selection = null;
|
this.selection = null;
|
||||||
|
|
||||||
|
this.tooltipDescriptors = [
|
||||||
|
{description : "Drag the selection to move it. You may switch to other layers and frames."},
|
||||||
|
{key : 'ctrl+c', description : 'Copy the selected area'},
|
||||||
|
{key : 'ctrl+v', description : 'Paste the copied area'}
|
||||||
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
|
pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
ns.RectangleSelect = function() {
|
ns.RectangleSelect = function() {
|
||||||
this.toolId = "tool-rectangle-select";
|
this.toolId = "tool-rectangle-select";
|
||||||
this.helpText = "Rectangle selection tool";
|
|
||||||
|
this.helpText = "Rectangle selection";
|
||||||
|
|
||||||
ns.BaseSelect.call(this);
|
ns.BaseSelect.call(this);
|
||||||
this.hasSelection = false;
|
this.hasSelection = false;
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
|
|
||||||
ns.ShapeSelect = function() {
|
ns.ShapeSelect = function() {
|
||||||
this.toolId = "tool-shape-select";
|
this.toolId = "tool-shape-select";
|
||||||
this.helpText = "Shape selection tool";
|
|
||||||
|
this.helpText = "Shape selection";
|
||||||
|
|
||||||
ns.BaseSelect.call(this);
|
ns.BaseSelect.call(this);
|
||||||
};
|
};
|
||||||
|
|
1
src/js/lib/gif/gif.ie.worker.js
Normal file
|
@ -37,11 +37,7 @@
|
||||||
var storeFrame = function (iframe) {
|
var storeFrame = function (iframe) {
|
||||||
var script=document.createElement("script");
|
var script=document.createElement("script");
|
||||||
script.setAttribute("type", "text/html");
|
script.setAttribute("type", "text/html");
|
||||||
if (window.pskl && window.pskl.appEngineToken_) {
|
script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/'));
|
||||||
script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
|
|
||||||
} else {
|
|
||||||
script.setAttribute("id", iframe.getAttribute("src"));
|
|
||||||
}
|
|
||||||
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
||||||
iframe.parentNode.removeChild(iframe);
|
iframe.parentNode.removeChild(iframe);
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
|
@ -52,5 +48,5 @@
|
||||||
var iframe = event.target || event.srcElement;
|
var iframe = event.target || event.srcElement;
|
||||||
processFrame(iframe);
|
processFrame(iframe);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
})();
|
})();
|
|
@ -84,28 +84,30 @@
|
||||||
return [this.id, this.version].join('-');
|
return [this.id, this.version].join('-');
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Frame.prototype.setPixel = function (col, row, color) {
|
ns.Frame.prototype.setPixel = function (x, y, color) {
|
||||||
if (this.containsPixel(col, row)) {
|
if (this.containsPixel(x, y)) {
|
||||||
var p = this.pixels[col][row];
|
var p = this.pixels[x][y];
|
||||||
if (p !== color) {
|
if (p !== color) {
|
||||||
this.pixels[col][row] = color;
|
this.pixels[x][y] = color;
|
||||||
this.version++;
|
this.version++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Frame.prototype.getPixel = function (col, row) {
|
ns.Frame.prototype.getPixel = function (x, y) {
|
||||||
if (this.containsPixel(col, row)) {
|
if (this.containsPixel(x, y)) {
|
||||||
return this.pixels[col][row];
|
return this.pixels[x][y];
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Frame.prototype.forEachPixel = function (callback) {
|
ns.Frame.prototype.forEachPixel = function (callback) {
|
||||||
for (var col = 0 ; col < this.getWidth() ; col++) {
|
var width = this.getWidth();
|
||||||
for (var row = 0 ; row < this.getHeight() ; row++) {
|
var height = this.getHeight();
|
||||||
callback(this.getPixel(col, row), col, row);
|
for (var x = 0 ; x < width ; x++) {
|
||||||
|
for (var y = 0 ; y < height ; y++) {
|
||||||
|
callback(this.pixels[x][y], x, y, this);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -122,29 +124,6 @@
|
||||||
return col >= 0 && row >= 0 && col < this.width && row < this.height;
|
return col >= 0 && row >= 0 && col < this.width && row < this.height;
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.Frame.prototype.saveState = function () {
|
|
||||||
// remove all states past current state
|
|
||||||
this.previousStates.length = this.stateIndex + 1;
|
|
||||||
// push new state
|
|
||||||
this.previousStates.push(this.getPixels());
|
|
||||||
// set the stateIndex to latest saved state
|
|
||||||
this.stateIndex = this.previousStates.length - 1;
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.Frame.prototype.loadPreviousState = function () {
|
|
||||||
if (this.stateIndex > 0) {
|
|
||||||
this.stateIndex--;
|
|
||||||
this.setPixels(this.previousStates[this.stateIndex]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.Frame.prototype.loadNextState = function () {
|
|
||||||
if (this.stateIndex < this.previousStates.length - 1) {
|
|
||||||
this.stateIndex++;
|
|
||||||
this.setPixels(this.previousStates[this.stateIndex]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.Frame.prototype.isSameSize = function (otherFrame) {
|
ns.Frame.prototype.isSameSize = function (otherFrame) {
|
||||||
return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
|
return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
|
||||||
};
|
};
|
||||||
|
|
|
@ -19,7 +19,6 @@
|
||||||
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
|
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
|
||||||
|
|
||||||
pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
|
pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
|
||||||
pskl.app.shortcutService.addShortcut('ctrl+shift+V', this.pasteOpaqueOnly.bind(this));
|
|
||||||
pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
|
pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
|
||||||
pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
|
pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
|
||||||
pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
|
pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
|
||||||
|
@ -92,13 +91,6 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.SelectionManager.prototype.paste = function() {
|
ns.SelectionManager.prototype.paste = function() {
|
||||||
if(this.currentSelection && this.currentSelection.hasPastedContent) {
|
|
||||||
var pixels = this.currentSelection.pixels;
|
|
||||||
this.pastePixels(pixels);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ns.SelectionManager.prototype.pasteOpaqueOnly = function() {
|
|
||||||
if(this.currentSelection && this.currentSelection.hasPastedContent) {
|
if(this.currentSelection && this.currentSelection.hasPastedContent) {
|
||||||
var pixels = this.currentSelection.pixels;
|
var pixels = this.currentSelection.pixels;
|
||||||
var opaquePixels = pixels.filter(function (p) {
|
var opaquePixels = pixels.filter(function (p) {
|
||||||
|
|
|
@ -55,6 +55,9 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
|
ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
|
||||||
|
if (pskl.utils.UserAgent.isMac) {
|
||||||
|
shortcut = shortcut.replace('ctrl', 'cmd');
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
'shortcut' : shortcut,
|
'shortcut' : shortcut,
|
||||||
'description' : description,
|
'description' : description,
|
||||||
|
@ -84,7 +87,7 @@
|
||||||
|
|
||||||
ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
|
ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
|
||||||
var descriptors = pskl.app.toolController.tools.map(function (tool) {
|
var descriptors = pskl.app.toolController.tools.map(function (tool) {
|
||||||
return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
|
return this.toDescriptor_(tool.shortcut, tool.instance.getHelpText(), 'tool-icon ' + tool.instance.toolId);
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
|
this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
|
||||||
|
|
|
@ -107,7 +107,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
|
ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
|
||||||
return this.isMac_() ? evt.metaKey : evt.ctrlKey;
|
return pskl.utils.UserAgent.isMac ? evt.metaKey : evt.ctrlKey;
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
|
ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
|
||||||
|
@ -117,8 +117,4 @@
|
||||||
ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
|
ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
|
||||||
return evt.altKey;
|
return evt.altKey;
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.ShortcutService.prototype.isMac_ = function () {
|
|
||||||
return navigator.appVersion.indexOf("Mac") != -1;
|
|
||||||
};
|
|
||||||
})();
|
})();
|
|
@ -1,14 +1,18 @@
|
||||||
(function () {
|
(function () {
|
||||||
var ns = $.namespace("pskl.utils");
|
var ns = $.namespace("pskl.utils");
|
||||||
|
var templates = {};
|
||||||
|
|
||||||
ns.Template = {
|
ns.Template = {
|
||||||
get : function (templateId) {
|
get : function (templateId) {
|
||||||
var template = document.getElementById(templateId);
|
if (!templates[templateId]) {
|
||||||
if (template) {
|
var template = document.getElementById(templateId);
|
||||||
return template.innerHTML;
|
if (template) {
|
||||||
} else {
|
templates[templateId] = template.innerHTML;
|
||||||
console.error("Could not find template for id :", templateId);
|
} else {
|
||||||
|
console.error("Could not find template for id :", templateId);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return templates[templateId];
|
||||||
},
|
},
|
||||||
|
|
||||||
createFromHTML : function (html) {
|
createFromHTML : function (html) {
|
||||||
|
|
|
@ -4,8 +4,10 @@
|
||||||
|
|
||||||
ns.UserAgent = {
|
ns.UserAgent = {
|
||||||
isIE : /MSIE/i.test( ua ),
|
isIE : /MSIE/i.test( ua ),
|
||||||
|
isIE11 : /trident/i.test( ua ),
|
||||||
isChrome : /Chrome/i.test( ua ),
|
isChrome : /Chrome/i.test( ua ),
|
||||||
isFirefox : /Firefox/i.test( ua )
|
isFirefox : /Firefox/i.test( ua ),
|
||||||
|
isMac : /Mac/.test( ua )
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.UserAgent.version = (function () {
|
ns.UserAgent.version = (function () {
|
||||||
|
|
|
@ -1,9 +1,15 @@
|
||||||
(function () {
|
(function () {
|
||||||
|
|
||||||
|
var version = '@@version';
|
||||||
|
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
|
||||||
|
if (versionHasNotBeenReplaced) {
|
||||||
|
version = '';
|
||||||
|
}
|
||||||
|
|
||||||
window.onPiskelReady = function () {
|
window.onPiskelReady = function () {
|
||||||
var loadingMask = document.getElementById('loading-mask');
|
var loadingMask = document.getElementById('loading-mask');
|
||||||
loadingMask.style.opacity = 0;
|
loadingMask.style.opacity = 0;
|
||||||
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
|
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
|
||||||
pskl.app.init();
|
pskl.app.init();
|
||||||
// cleanup
|
// cleanup
|
||||||
delete window.pskl_exports;
|
delete window.pskl_exports;
|
||||||
|
@ -36,18 +42,18 @@
|
||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (window.location.href.indexOf("debug") != -1) {
|
if (window.location.href.indexOf('debug') != -1) {
|
||||||
window.pskl_exports = {};
|
window.pskl_exports = {};
|
||||||
var scriptIndex = 0;
|
var scriptIndex = 0;
|
||||||
window.loadNextScript = function () {
|
window.loadNextScript = function () {
|
||||||
if (scriptIndex == window.pskl_exports.scripts.length) {
|
if (scriptIndex == window.pskl_exports.scripts.length) {
|
||||||
window.onPiskelReady();
|
window.onPiskelReady();
|
||||||
} else {
|
} else {
|
||||||
loadScript(window.pskl_exports.scripts[scriptIndex], "loadNextScript()");
|
loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
|
||||||
scriptIndex ++;
|
scriptIndex ++;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
loadScript("piskel-script-list.js", "loadNextScript()");
|
loadScript('piskel-script-list.js', 'loadNextScript()');
|
||||||
|
|
||||||
window.loadStyles = function () {
|
window.loadStyles = function () {
|
||||||
var styles = window.pskl_exports.styles;
|
var styles = window.pskl_exports.styles;
|
||||||
|
@ -55,22 +61,22 @@
|
||||||
loadStyle(styles[i]);
|
loadStyle(styles[i]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
loadScript("piskel-style-list.js", "loadStyles()");
|
loadScript('piskel-style-list.js', 'loadStyles()');
|
||||||
} else {
|
} else {
|
||||||
var script;
|
var script;
|
||||||
if (window.location.href.indexOf("pack") != -1) {
|
if (window.location.href.indexOf('pack') != -1) {
|
||||||
script = "js/piskel-packaged.js";
|
script = 'js/piskel-packaged' + version + '.js';
|
||||||
} else {
|
} else {
|
||||||
script = "js/piskel-packaged-min.js";
|
script = 'js/piskel-packaged-min' + version + '.js';
|
||||||
}
|
}
|
||||||
loadStyle('css/piskel-style-packaged.css');
|
loadStyle('css/piskel-style-packaged' + version + '.css');
|
||||||
|
|
||||||
var loaderInterval = window.setInterval(function () {
|
var loaderInterval = window.setInterval(function () {
|
||||||
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
|
||||||
window.clearInterval(loaderInterval);
|
window.clearInterval(loaderInterval);
|
||||||
loadScript(script, "onPiskelReady()");
|
loadScript(script, 'onPiskelReady()');
|
||||||
} else {
|
} else {
|
||||||
console.log("waiting for templates to load ....");
|
window.console.log('waiting for templates to load ....');
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
|
@ -4,17 +4,6 @@
|
||||||
// Core libraries
|
// Core libraries
|
||||||
"js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js",
|
"js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js",
|
||||||
|
|
||||||
// GIF Encoding libraries
|
|
||||||
"js/lib/gif/gif.worker.js",
|
|
||||||
"js/lib/gif/gif.js",
|
|
||||||
"js/lib/gif/libgif.js",
|
|
||||||
|
|
||||||
// JSZip https://github.com/Stuk/jszip
|
|
||||||
"js/lib/jszip/jszip.min.js",
|
|
||||||
|
|
||||||
// Spectrum color-picker library
|
|
||||||
"js/lib/spectrum/spectrum.js",
|
|
||||||
|
|
||||||
// Application wide configuration
|
// Application wide configuration
|
||||||
"js/Constants.js",
|
"js/Constants.js",
|
||||||
"js/Events.js",
|
"js/Events.js",
|
||||||
|
@ -41,6 +30,17 @@
|
||||||
"js/utils/serialization/backward/Deserializer_v0.js",
|
"js/utils/serialization/backward/Deserializer_v0.js",
|
||||||
"js/utils/serialization/backward/Deserializer_v1.js",
|
"js/utils/serialization/backward/Deserializer_v1.js",
|
||||||
|
|
||||||
|
// GIF Encoding libraries
|
||||||
|
"js/lib/gif/gif.worker.js",
|
||||||
|
"js/lib/gif/gif.js",
|
||||||
|
"js/lib/gif/libgif.js",
|
||||||
|
|
||||||
|
// JSZip https://github.com/Stuk/jszip
|
||||||
|
"js/lib/jszip/jszip.min.js",
|
||||||
|
|
||||||
|
// Spectrum color-picker library
|
||||||
|
"js/lib/spectrum/spectrum.js",
|
||||||
|
|
||||||
// Application libraries-->
|
// Application libraries-->
|
||||||
"js/rendering/DrawingLoop.js",
|
"js/rendering/DrawingLoop.js",
|
||||||
|
|
||||||
|
@ -132,6 +132,7 @@
|
||||||
"js/drawingtools/selectiontools/RectangleSelect.js",
|
"js/drawingtools/selectiontools/RectangleSelect.js",
|
||||||
"js/drawingtools/selectiontools/ShapeSelect.js",
|
"js/drawingtools/selectiontools/ShapeSelect.js",
|
||||||
"js/drawingtools/ColorPicker.js",
|
"js/drawingtools/ColorPicker.js",
|
||||||
|
"js/drawingtools/ColorSwap.js",
|
||||||
// Application controller and initialization
|
// Application controller and initialization
|
||||||
"js/app.js"
|
"js/app.js"
|
||||||
];
|
];
|
|
@ -1,10 +1,9 @@
|
||||||
<div class="sticky-section left-sticky-section" id="tool-section">
|
<div class="sticky-section left-sticky-section" id="tool-section">
|
||||||
<div class="sticky-section-wrap">
|
<div class="sticky-section-wrap">
|
||||||
<div class="vertical-centerer">
|
<div class="vertical-centerer">
|
||||||
<script type="text/template" id="drawing-tool-item-template">
|
<ul id="tools-container" class="tools-wrapper">
|
||||||
<li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
|
<!-- Drawing tools will be inserted here -->
|
||||||
</script>
|
</ul>
|
||||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
|
||||||
<div class="palette-wrapper">
|
<div class="palette-wrapper">
|
||||||
<div
|
<div
|
||||||
class="tool-icon tool-color-picker"
|
class="tool-icon tool-color-picker"
|
||||||
|
@ -31,4 +30,34 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Templates -->
|
||||||
|
|
||||||
|
<!-- Drawing tool icon-button -->
|
||||||
|
<script type="text/template" id="drawing-tool-item-template">
|
||||||
|
<li rel="tooltip" data-placement="right" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Drawing tool tooltip container -->
|
||||||
|
<script type="text/template" id="drawing-tool-tooltip-container-template">
|
||||||
|
<div class='tools-tooltip-container'>
|
||||||
|
<div>{{helptext}} <span class='tools-tooltip-shortcut'>({{shortcut}})</span></div>
|
||||||
|
{{descriptors}}
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Drawing tool tooltip line for modifier -->
|
||||||
|
<script type="text/template" id="drawing-tool-tooltip-descriptor-template">
|
||||||
|
<div class='tools-tooltip-descriptor'>
|
||||||
|
<span class='tools-tooltip-descriptor-button'>{{key}}</span>
|
||||||
|
{{description}}
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Drawing tool tooltip line -->
|
||||||
|
<script type="text/template" id="drawing-tool-tooltip-descriptor-simple-template">
|
||||||
|
<div class='tools-tooltip-descriptor'>
|
||||||
|
{{description}}
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
</div>
|
</div>
|