mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge branch 'master' into feature-export-to-file
This commit is contained in:
jdescottes
commit
b2fbe269d3
76
Gruntfile.js
76
Gruntfile.js
|
|
@ -13,6 +13,10 @@
|
|||
var SOURCE_FOLDER = "src";
|
||||
|
||||
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 piskelScripts = require('./src/piskel-script-list.js').scripts.map(mapToSrcFolder);
|
||||
|
|
@ -110,11 +114,11 @@ module.exports = function(grunt) {
|
|||
separator : ';'
|
||||
},
|
||||
src : piskelScripts,
|
||||
dest : 'dest/js/piskel-packaged.js'
|
||||
dest : 'dest/js/piskel-packaged' + version + '.js'
|
||||
},
|
||||
css : {
|
||||
src : piskelStyles,
|
||||
dest : 'dest/css/piskel-style-packaged.css'
|
||||
dest : 'dest/css/piskel-style-packaged' + version + '.css'
|
||||
}
|
||||
},
|
||||
uglify : {
|
||||
|
|
@ -123,19 +127,72 @@ module.exports = function(grunt) {
|
|||
},
|
||||
my_target : {
|
||||
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: {
|
||||
main: {
|
||||
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/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: ['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/js/**/*.js',
|
||||
'src/piskel-boot.js',
|
||||
'src/piskel-boot-0.1.0.js',
|
||||
'src/piskel-script-list.js',
|
||||
'!src/js/lib/**/*.js'
|
||||
],
|
||||
|
|
@ -223,6 +280,7 @@ module.exports = function(grunt) {
|
|||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-express');
|
||||
grunt.loadNpmTasks('grunt-replace');
|
||||
grunt.loadNpmTasks('grunt-ghost');
|
||||
grunt.loadNpmTasks('grunt-open');
|
||||
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).
|
||||
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
|
||||
grunt.registerTask('default', ['clean:before', 'lint', 'compile', 'merge']);
|
||||
|
|
|
|||
72
misc/icons/SVG/swap-colors-sq.svg
Normal file
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
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
BIN
misc/icons/swap-colors-tests/swap-colors-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-2.png
Normal file
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-3.png
Normal file
BIN
misc/icons/swap-colors-tests/swap-colors-twirl-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
misc/icons/swap-colors-tests/swap-colors-twirl.png
Normal file
BIN
misc/icons/swap-colors-tests/swap-colors-twirl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
misc/icons/swap-colors-tests/swap.png
Normal file
BIN
misc/icons/swap-colors-tests/swap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
21
misc/scripts/copy-to-piskel-website.cmd
Normal file
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-watch": "0.6.1",
|
||||
"grunt-express": "1.0",
|
||||
"grunt-replace": "0.7.8",
|
||||
"grunt-ghost": "1.0.12",
|
||||
"grunt-open": "0.2.3",
|
||||
"grunt-leading-indent": "0.1.0",
|
||||
"grunt-closure-tools": "~0.8.3",
|
||||
"grunt-node-webkit-builder": "0.1.19",
|
||||
"nodewebkit": "0.8.4"
|
||||
"nodewebkit": "0.8.4",
|
||||
"dateformat" : "1.0.8-1.2.3"
|
||||
},
|
||||
"window": {
|
||||
"title": "Piskel",
|
||||
|
|
|
|||
|
|
@ -96,6 +96,10 @@
|
|||
border: #999 3px solid;
|
||||
}
|
||||
|
||||
.tile-view {
|
||||
position : relative;
|
||||
}
|
||||
|
||||
.preview-tile .tile-overlay {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -97,11 +97,18 @@
|
|||
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-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;
|
||||
}
|
||||
|
||||
|
|
@ -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
BIN
src/img/tools/swap-colors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -22,7 +22,11 @@
|
|||
color:white;">
|
||||
<span style="top:45%">Loading Piskel ...</span>
|
||||
</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">
|
||||
<iframe src="templates/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
|
||||
|
|
@ -69,6 +73,10 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@
|
|||
this.tools = [
|
||||
toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
|
||||
toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
|
||||
toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
|
||||
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('rectangle', 'R', new pskl.drawingtools.Rectangle()),
|
||||
toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
|
||||
|
|
@ -130,14 +131,10 @@
|
|||
return pskl.utils.Template.replace(tpl, {
|
||||
cssclass : classList.join(' '),
|
||||
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 () {
|
||||
for(var i = 0 ; i < this.tools.length ; i++) {
|
||||
pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
try {
|
||||
overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
|
||||
} catch (e) {
|
||||
console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
|
||||
window.console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
|
||||
}
|
||||
this.highlightedPixelRow = 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) {};
|
||||
|
||||
/**
|
||||
* Bresenham line algorihtm: Get an array of pixels from
|
||||
* Bresenham line algorithm: Get an array of pixels from
|
||||
* start and end coordinates.
|
||||
*
|
||||
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
ns.ShapeTool.call(this);
|
||||
|
||||
this.toolId = "tool-circle";
|
||||
|
||||
this.helpText = "Circle tool";
|
||||
};
|
||||
|
||||
|
|
|
|||
58
src/js/drawingtools/ColorSwap.js
Normal file
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() {
|
||||
this.superclass.constructor.call(this);
|
||||
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_();
|
||||
};
|
||||
|
||||
|
|
@ -31,7 +38,7 @@
|
|||
var frameColor = frame.getPixel(col, row);
|
||||
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 isTransparent = pixelColor === Constants.TRANSPARENT_COLOR;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
ns.ShapeTool.call(this);
|
||||
|
||||
this.toolId = "tool-rectangle";
|
||||
this.helpText = "Rectangle tool";
|
||||
|
||||
this.shortHelpText = "Rectangle tool";
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Rectangle, ns.ShapeTool);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
// Shapes's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
this.startRow = null;
|
||||
|
||||
this.tooltipDescriptors = [
|
||||
{key : 'shift', description : 'Keep 1 to 1 ratio'}
|
||||
];
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
this.superclass.constructor.call(this);
|
||||
|
||||
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);
|
||||
|
|
@ -30,11 +35,12 @@
|
|||
var mirroredCol = this.getSymmetricCol_(col, 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);
|
||||
}
|
||||
|
||||
if (event.shiftKey || event.ctrlKey) {
|
||||
if (event.shiftKey || hasCtrlKey) {
|
||||
this.superclass.applyToolAt.call(this, col, mirroredRow, color, frame, overlay);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,12 @@
|
|||
this.startRow = 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);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
ns.RectangleSelect = function() {
|
||||
this.toolId = "tool-rectangle-select";
|
||||
this.helpText = "Rectangle selection tool";
|
||||
|
||||
this.helpText = "Rectangle selection";
|
||||
|
||||
ns.BaseSelect.call(this);
|
||||
this.hasSelection = false;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
ns.ShapeSelect = function() {
|
||||
this.toolId = "tool-shape-select";
|
||||
this.helpText = "Shape selection tool";
|
||||
|
||||
this.helpText = "Shape selection";
|
||||
|
||||
ns.BaseSelect.call(this);
|
||||
};
|
||||
|
|
|
|||
1
src/js/lib/gif/gif.ie.worker.js
Normal file
1
src/js/lib/gif/gif.ie.worker.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -37,11 +37,7 @@
|
|||
var storeFrame = function (iframe) {
|
||||
var script=document.createElement("script");
|
||||
script.setAttribute("type", "text/html");
|
||||
if (window.pskl && window.pskl.appEngineToken_) {
|
||||
script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
|
||||
} else {
|
||||
script.setAttribute("id", iframe.getAttribute("src"));
|
||||
}
|
||||
script.setAttribute("id", iframe.getAttribute("src").replace(/.*templates[^\/]*\//,'templates/'));
|
||||
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
document.body.appendChild(script);
|
||||
|
|
@ -52,5 +48,5 @@
|
|||
var iframe = event.target || event.srcElement;
|
||||
processFrame(iframe);
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
@ -84,28 +84,30 @@
|
|||
return [this.id, this.version].join('-');
|
||||
};
|
||||
|
||||
ns.Frame.prototype.setPixel = function (col, row, color) {
|
||||
if (this.containsPixel(col, row)) {
|
||||
var p = this.pixels[col][row];
|
||||
ns.Frame.prototype.setPixel = function (x, y, color) {
|
||||
if (this.containsPixel(x, y)) {
|
||||
var p = this.pixels[x][y];
|
||||
if (p !== color) {
|
||||
this.pixels[col][row] = color;
|
||||
this.pixels[x][y] = color;
|
||||
this.version++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.Frame.prototype.getPixel = function (col, row) {
|
||||
if (this.containsPixel(col, row)) {
|
||||
return this.pixels[col][row];
|
||||
ns.Frame.prototype.getPixel = function (x, y) {
|
||||
if (this.containsPixel(x, y)) {
|
||||
return this.pixels[x][y];
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
ns.Frame.prototype.forEachPixel = function (callback) {
|
||||
for (var col = 0 ; col < this.getWidth() ; col++) {
|
||||
for (var row = 0 ; row < this.getHeight() ; row++) {
|
||||
callback(this.getPixel(col, row), col, row);
|
||||
var width = this.getWidth();
|
||||
var height = this.getHeight();
|
||||
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;
|
||||
};
|
||||
|
||||
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) {
|
||||
return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@
|
|||
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, 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+C', this.copy.bind(this));
|
||||
pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
|
||||
|
|
@ -92,13 +91,6 @@
|
|||
};
|
||||
|
||||
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) {
|
||||
var pixels = this.currentSelection.pixels;
|
||||
var opaquePixels = pixels.filter(function (p) {
|
||||
|
|
|
|||
|
|
@ -55,6 +55,9 @@
|
|||
};
|
||||
|
||||
ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
|
||||
if (pskl.utils.UserAgent.isMac) {
|
||||
shortcut = shortcut.replace('ctrl', 'cmd');
|
||||
}
|
||||
return {
|
||||
'shortcut' : shortcut,
|
||||
'description' : description,
|
||||
|
|
@ -84,7 +87,7 @@
|
|||
|
||||
ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
|
||||
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));
|
||||
|
||||
this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
};
|
||||
|
||||
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) {
|
||||
|
|
@ -117,8 +117,4 @@
|
|||
ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
|
||||
return evt.altKey;
|
||||
};
|
||||
|
||||
ns.ShortcutService.prototype.isMac_ = function () {
|
||||
return navigator.appVersion.indexOf("Mac") != -1;
|
||||
};
|
||||
})();
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
(function () {
|
||||
var ns = $.namespace("pskl.utils");
|
||||
var templates = {};
|
||||
|
||||
ns.Template = {
|
||||
get : function (templateId) {
|
||||
var template = document.getElementById(templateId);
|
||||
if (template) {
|
||||
return template.innerHTML;
|
||||
} else {
|
||||
console.error("Could not find template for id :", templateId);
|
||||
if (!templates[templateId]) {
|
||||
var template = document.getElementById(templateId);
|
||||
if (template) {
|
||||
templates[templateId] = template.innerHTML;
|
||||
} else {
|
||||
console.error("Could not find template for id :", templateId);
|
||||
}
|
||||
}
|
||||
return templates[templateId];
|
||||
},
|
||||
|
||||
createFromHTML : function (html) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
|
||||
ns.UserAgent = {
|
||||
isIE : /MSIE/i.test( ua ),
|
||||
isIE11 : /trident/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 () {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
(function () {
|
||||
|
||||
var version = '@@version';
|
||||
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
|
||||
if (versionHasNotBeenReplaced) {
|
||||
version = '';
|
||||
}
|
||||
|
||||
window.onPiskelReady = function () {
|
||||
var loadingMask = document.getElementById('loading-mask');
|
||||
loadingMask.style.opacity = 0;
|
||||
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600)
|
||||
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
|
||||
pskl.app.init();
|
||||
// cleanup
|
||||
delete window.pskl_exports;
|
||||
|
|
@ -36,18 +42,18 @@
|
|||
document.head.appendChild(link);
|
||||
};
|
||||
|
||||
if (window.location.href.indexOf("debug") != -1) {
|
||||
if (window.location.href.indexOf('debug') != -1) {
|
||||
window.pskl_exports = {};
|
||||
var scriptIndex = 0;
|
||||
window.loadNextScript = function () {
|
||||
if (scriptIndex == window.pskl_exports.scripts.length) {
|
||||
window.onPiskelReady();
|
||||
} else {
|
||||
loadScript(window.pskl_exports.scripts[scriptIndex], "loadNextScript()");
|
||||
loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
|
||||
scriptIndex ++;
|
||||
}
|
||||
};
|
||||
loadScript("piskel-script-list.js", "loadNextScript()");
|
||||
loadScript('piskel-script-list.js', 'loadNextScript()');
|
||||
|
||||
window.loadStyles = function () {
|
||||
var styles = window.pskl_exports.styles;
|
||||
|
|
@ -55,22 +61,22 @@
|
|||
loadStyle(styles[i]);
|
||||
}
|
||||
};
|
||||
loadScript("piskel-style-list.js", "loadStyles()");
|
||||
loadScript('piskel-style-list.js', 'loadStyles()');
|
||||
} else {
|
||||
var script;
|
||||
if (window.location.href.indexOf("pack") != -1) {
|
||||
script = "js/piskel-packaged.js";
|
||||
if (window.location.href.indexOf('pack') != -1) {
|
||||
script = 'js/piskel-packaged' + version + '.js';
|
||||
} 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 () {
|
||||
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
||||
if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
|
||||
window.clearInterval(loaderInterval);
|
||||
loadScript(script, "onPiskelReady()");
|
||||
loadScript(script, 'onPiskelReady()');
|
||||
} else {
|
||||
console.log("waiting for templates to load ....");
|
||||
window.console.log('waiting for templates to load ....');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
|
@ -4,17 +4,6 @@
|
|||
// 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",
|
||||
|
||||
// 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
|
||||
"js/Constants.js",
|
||||
"js/Events.js",
|
||||
|
|
@ -41,6 +30,17 @@
|
|||
"js/utils/serialization/backward/Deserializer_v0.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-->
|
||||
"js/rendering/DrawingLoop.js",
|
||||
|
||||
|
|
@ -132,6 +132,7 @@
|
|||
"js/drawingtools/selectiontools/RectangleSelect.js",
|
||||
"js/drawingtools/selectiontools/ShapeSelect.js",
|
||||
"js/drawingtools/ColorPicker.js",
|
||||
"js/drawingtools/ColorSwap.js",
|
||||
// Application controller and initialization
|
||||
"js/app.js"
|
||||
];
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
<div class="sticky-section left-sticky-section" id="tool-section">
|
||||
<div class="sticky-section-wrap">
|
||||
<div class="vertical-centerer">
|
||||
<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>
|
||||
<ul id="tools-container" class="tools-wrapper"></ul>
|
||||
<ul id="tools-container" class="tools-wrapper">
|
||||
<!-- Drawing tools will be inserted here -->
|
||||
</ul>
|
||||
<div class="palette-wrapper">
|
||||
<div
|
||||
class="tool-icon tool-color-picker"
|
||||
|
|
@ -31,4 +30,34 @@
|
|||
</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>
|
||||
Loading…
Reference in New Issue
Block a user