mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Arrow icons update
This commit is contained in:
parent
9395be3034
commit
3a8d96f840
|
@ -72,6 +72,10 @@ body {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layers-canvas {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
.sticky-section {
|
.sticky-section {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -141,13 +145,17 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.canvas.canvas-overlay {
|
.canvas.canvas-overlay, .canvas.layers-canvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.canvas.layers-down-canvas {z-index: 7;}
|
||||||
|
.canvas.drawing-canvas {z-index: 8;}
|
||||||
|
.canvas.layers-up-canvas {z-index: 9;}
|
||||||
|
.canvas.canvas-overlay {z-index: 10;}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Animated preview styles.
|
* Animated preview styles.
|
||||||
|
@ -181,22 +189,23 @@ body {
|
||||||
* Layers container
|
* Layers container
|
||||||
*/
|
*/
|
||||||
.layers-container {
|
.layers-container {
|
||||||
border : 1px solid #444;
|
border: 4px solid #888;
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
color: white;
|
color: white;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
border-radius: 4px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layers-title {
|
.layers-title {
|
||||||
padding : 10px;
|
padding: 8px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size : 18px;
|
font-size: 15px;
|
||||||
background: #222;
|
background: #222;
|
||||||
background-image: url('../img/layers.svg');
|
background-image: url('../img/layers.svg');
|
||||||
background-size: 24px 24px;
|
background-size: 22px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 95%;
|
background-position: 97%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layers-list {
|
.layers-list {
|
||||||
|
@ -224,6 +233,11 @@ body {
|
||||||
overflow : hidden;
|
overflow : hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layers-button-arrow {
|
||||||
|
font-family : 'Lucida Grande', Calibri;
|
||||||
|
padding : 2px 6px 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
.layers-button {
|
.layers-button {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -22,8 +22,10 @@
|
||||||
"supportGridRendering" : true
|
"supportGridRendering" : true
|
||||||
};
|
};
|
||||||
|
|
||||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
|
|
||||||
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
|
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
|
||||||
|
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
|
||||||
|
this.layersDownRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-down-canvas");
|
||||||
|
this.layersUpRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "layers-canvas layers-up-canvas");
|
||||||
|
|
||||||
|
|
||||||
// State of drawing controller:
|
// State of drawing controller:
|
||||||
|
@ -36,8 +38,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.DrawingController.prototype.init = function () {
|
ns.DrawingController.prototype.init = function () {
|
||||||
this.renderer.render(this.piskelController.getCurrentFrame());
|
// this.render();
|
||||||
this.overlayRenderer.render(this.overlayFrame);
|
|
||||||
|
|
||||||
this.initMouseBehavior();
|
this.initMouseBehavior();
|
||||||
|
|
||||||
|
@ -242,6 +243,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.DrawingController.prototype.render = function () {
|
ns.DrawingController.prototype.render = function () {
|
||||||
|
this.renderLayers();
|
||||||
this.renderFrame();
|
this.renderFrame();
|
||||||
this.renderOverlay();
|
this.renderOverlay();
|
||||||
};
|
};
|
||||||
|
@ -266,6 +268,35 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
ns.DrawingController.prototype.renderLayers = function () {
|
||||||
|
var layers = this.piskelController.getLayers();
|
||||||
|
var currentFrameIndex = this.piskelController.currentFrameIndex;
|
||||||
|
var currentLayerIndex = this.piskelController.currentLayerIndex;
|
||||||
|
|
||||||
|
var serialized = [currentFrameIndex, this.piskelController.currentLayerIndex, layers.length].join("-");
|
||||||
|
if (this.serializedLayerFrame != serialized) {
|
||||||
|
var downLayers = layers.slice(0, currentLayerIndex);
|
||||||
|
var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
|
||||||
|
this.layersDownRenderer.render(downFrame);
|
||||||
|
|
||||||
|
// try {this.layersUpRenderer.clear();}catch(e) {}
|
||||||
|
if (currentLayerIndex + 1 < layers.length) {
|
||||||
|
var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
|
||||||
|
var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
|
||||||
|
this.layersUpRenderer.render(upFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.serializedLayerFrame = serialized;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.DrawingController.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
|
||||||
|
var frames = layers.map(function (l) {
|
||||||
|
return l.getFrameAt(frameIndex);
|
||||||
|
});
|
||||||
|
return pskl.utils.FrameUtils.merge(frames);
|
||||||
|
};
|
||||||
|
|
||||||
ns.DrawingController.prototype.forceRendering_ = function () {
|
ns.DrawingController.prototype.forceRendering_ = function () {
|
||||||
this.serializedFrame = this.serializedOverlay = null;
|
this.serializedFrame = this.serializedOverlay = null;
|
||||||
};
|
};
|
||||||
|
@ -297,8 +328,8 @@
|
||||||
*/
|
*/
|
||||||
ns.DrawingController.prototype.updateDPI_ = function() {
|
ns.DrawingController.prototype.updateDPI_ = function() {
|
||||||
var dpi = this.calculateDPI_();
|
var dpi = this.calculateDPI_();
|
||||||
this.renderer.updateDPI(dpi);
|
|
||||||
this.overlayRenderer.updateDPI(dpi);
|
this.overlayRenderer.updateDPI(dpi);
|
||||||
|
this.renderer.updateDPI(dpi);
|
||||||
|
|
||||||
var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
|
var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
|
||||||
var canvasHeight = currentFrameHeight * dpi;
|
var canvasHeight = currentFrameHeight * dpi;
|
||||||
|
|
|
@ -65,6 +65,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.FrameRenderer.prototype.render = function (frame) {
|
ns.FrameRenderer.prototype.render = function (frame) {
|
||||||
|
if (frame) {
|
||||||
this.clear(frame);
|
this.clear(frame);
|
||||||
var context = this.getCanvas_(frame).getContext('2d');
|
var context = this.getCanvas_(frame).getContext('2d');
|
||||||
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
||||||
|
@ -74,6 +75,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.lastRenderedFrame = frame;
|
this.lastRenderedFrame = frame;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
||||||
|
@ -142,7 +144,7 @@
|
||||||
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
|
||||||
var classes = ['canvas'];
|
var classes = ['canvas'];
|
||||||
if (this.className) {
|
if (this.className) {
|
||||||
classes.push(this.className);
|
classes = classes.concat(this.className.split(' '));
|
||||||
}
|
}
|
||||||
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
|
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, classes);
|
||||||
|
|
||||||
|
|
|
@ -3,11 +3,14 @@
|
||||||
|
|
||||||
ns.FrameUtils = {
|
ns.FrameUtils = {
|
||||||
merge : function (frames) {
|
merge : function (frames) {
|
||||||
var merged = frames[0].clone();
|
var merged = null;
|
||||||
|
if (frames.length) {
|
||||||
|
merged = frames[0].clone();
|
||||||
var w = merged.getWidth(), h = merged.getHeight();
|
var w = merged.getWidth(), h = merged.getHeight();
|
||||||
for (var i = 1 ; i < frames.length ; i++) {
|
for (var i = 1 ; i < frames.length ; i++) {
|
||||||
pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
|
pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
return merged;
|
return merged;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
<div class="layers-button-container">
|
<div class="layers-button-container">
|
||||||
<button class="layers-button" data-action="add" >Add</button>
|
<button class="layers-button" data-action="add" >Add</button>
|
||||||
<button class="layers-button" data-action="delete" >Delete</button>
|
<button class="layers-button" data-action="delete" >Delete</button>
|
||||||
<button class="layers-button" data-action="up" >↑</button>
|
<button class="layers-button layers-button-arrow" data-action="up" >↑</button>
|
||||||
<button class="layers-button" data-action="down" >↓</button>
|
<button class="layers-button layers-button-arrow" data-action="down" >↓</button>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/template" id="layer-item-template">
|
<script type="text/template" id="layer-item-template">
|
||||||
<li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
|
<li class="layer-item" data-layer-name="{{layername}}">{{layername}}</li>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user