mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #203 from juliandescottes/feature-swap-color
Feature swap color
This commit is contained in:
Julian Descottes
commit
2fabf68282
|
|
@ -192,7 +192,7 @@ module.exports = function(grunt) {
|
|||
{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/templates/', dest: 'dest/templates' + version + '/', filter: 'isFile'}
|
||||
{expand: true, src: ['**/*.html'], cwd: 'src/templates/', dest: 'dest/templates/', filter: 'isFile'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
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 |
|
|
@ -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 |
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@
|
|||
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 () {
|
||||
|
|
|
|||
|
|
@ -131,6 +131,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