Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Tiling display

  • Loading branch information...
commit 4496a78d08d02f031b54b277e3f81b454fa58fa5 1 parent 35e45ec
@trethaller authored
Showing with 59 additions and 44 deletions.
  1. +25 −20 js/app.coffee
  2. +28 −24 js/app.js
  3. +2 −0  js/core.coffee
  4. +4 −0 js/core.js
View
45 js/app.coffee
@@ -5,6 +5,7 @@ class Document
Editor = {
brush: null
+ tiling: true
renderer: GammaRenderer
targetValue: 1.0
}
@@ -22,7 +23,7 @@ class DocumentView
backContext: null
doc: null
offset: new Vec2(0.0, 0.0)
- scale: 1
+ scale: 1.0
constructor: ($container, doc)->
@doc = doc
@@ -61,7 +62,7 @@ class DocumentView
if e.which is 2
self.panning = true
local.panningStart = getCoords(e)
- local.offsetStart = self.offset
+ local.offsetStart = self.offset.clone()
$container.mouseup (e)->
if e.which is 1
@@ -77,29 +78,37 @@ class DocumentView
if self.panning
curPos = getCoords(e)
- self.offset = local.offsetStart.add(curPos.sub(local.panningStart))
- self.transformChanged()
+ o = local.offsetStart.add(curPos.sub(local.panningStart))
+ lim = 200.0
+ self.offset.x = Math.min(Math.max(o.x, -lim), lim)
+ self.offset.y = Math.min(Math.max(o.y, -lim), lim)
+ self.rePaint()
screenToCanvas: (pt)->
return pt.sub(@offset).scale(1.0/@scale)
- refreshAll: ()->
+ reRender: ()->
layer = @doc.layer
Editor.renderer.renderLayer(layer, this, [new Rect(0,0,@doc.width,@doc.height)])
- @backContext.drawImage(@canvas, 0, 0)
+ @rePaint()
- transformChanged: ()->
- @backContext.setTransform(1, 0, 0, 1, 0, 0)
- @backContext.translate(@offset.x, @offset.y)
- @backContext.scale(@scale, @scale)
- @backContext.drawImage(@canvas, 0, 0)
+ rePaint: ()->
+ ctx = @backContext
+ ctx.setTransform(1, 0, 0, 1, 0, 0)
+ ctx.translate(@offset.x, @offset.y)
+ ctx.scale(@scale, @scale)
+
+ if Editor.tiling
+ ctx.fillStyle = ctx.createPattern(@canvas,"repeat")
+ ctx.fillRect(-@offset.x / @scale,-@offset.y / @scale,@canvas.width / @scale, @canvas.height / @scale)
+ else
+ ctx.drawImage(@canvas, 0, 0)
onDraw: (pos)->
self = this
pressure = getPenPressure()
dirtyRects = []
- tiling = true
layer = @doc.layer
brush = Editor.tool
@@ -108,7 +117,7 @@ class DocumentView
r = brush.draw(layer, pos, pressure).round()
- if tiling
+ if Editor.tiling
for xoff in [-1,0,1]
for yoff in [-1,0,1]
dirtyRects.push(r.offset(new Vec2(xoff * layerRect.width, yoff * layerRect.height)))
@@ -119,14 +128,10 @@ class DocumentView
.map((r)->r.intersect(layerRect))
.filter((r)->not r.isEmpty())
- status(dirtyRects.length)
if true
#setTimeout (()->
Editor.renderer.renderLayer(layer, self, dirtyRects)
- for rect in dirtyRects
- self.backContext.drawImage(self.canvas,
- rect.x, rect.y, rect.width+1, rect.height+1,
- rect.x, rect.y, rect.width+1, rect.height+1)
+ self.rePaint()
#), 0
# ---
@@ -164,5 +169,5 @@ $(document).ready ()->
createToolsUI($('#tools'))
view = new DocumentView($('.document-view'), doc)
- view.transformChanged()
- view.refreshAll()
+ view.rePaint()
+ view.reRender()
View
52 js/app.js
@@ -14,6 +14,7 @@ Document = (function() {
Editor = {
brush: null,
+ tiling: true,
renderer: GammaRenderer,
targetValue: 1.0
};
@@ -39,7 +40,7 @@ DocumentView = (function() {
DocumentView.prototype.offset = new Vec2(0.0, 0.0);
- DocumentView.prototype.scale = 1;
+ DocumentView.prototype.scale = 1.0;
function DocumentView($container, doc) {
var $backCanvas, $canvas, getCanvasCoords, getCoords, local, self;
@@ -86,7 +87,7 @@ DocumentView = (function() {
if (e.which === 2) {
self.panning = true;
local.panningStart = getCoords(e);
- return local.offsetStart = self.offset;
+ return local.offsetStart = self.offset.clone();
}
});
$container.mouseup(function(e) {
@@ -99,14 +100,17 @@ DocumentView = (function() {
}
});
$container.mousemove(function(e) {
- var curPos;
+ var curPos, lim, o;
if (self.drawing) {
self.onDraw(getCanvasCoords(e));
}
if (self.panning) {
curPos = getCoords(e);
- self.offset = local.offsetStart.add(curPos.sub(local.panningStart));
- return self.transformChanged();
+ o = local.offsetStart.add(curPos.sub(local.panningStart));
+ lim = 200.0;
+ self.offset.x = Math.min(Math.max(o.x, -lim), lim);
+ self.offset.y = Math.min(Math.max(o.y, -lim), lim);
+ return self.rePaint();
}
});
}
@@ -115,31 +119,37 @@ DocumentView = (function() {
return pt.sub(this.offset).scale(1.0 / this.scale);
};
- DocumentView.prototype.refreshAll = function() {
+ DocumentView.prototype.reRender = function() {
var layer;
layer = this.doc.layer;
Editor.renderer.renderLayer(layer, this, [new Rect(0, 0, this.doc.width, this.doc.height)]);
- return this.backContext.drawImage(this.canvas, 0, 0);
+ return this.rePaint();
};
- DocumentView.prototype.transformChanged = function() {
- this.backContext.setTransform(1, 0, 0, 1, 0, 0);
- this.backContext.translate(this.offset.x, this.offset.y);
- this.backContext.scale(this.scale, this.scale);
- return this.backContext.drawImage(this.canvas, 0, 0);
+ DocumentView.prototype.rePaint = function() {
+ var ctx;
+ ctx = this.backContext;
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.translate(this.offset.x, this.offset.y);
+ ctx.scale(this.scale, this.scale);
+ if (Editor.tiling) {
+ ctx.fillStyle = ctx.createPattern(this.canvas, "repeat");
+ return ctx.fillRect(-this.offset.x / this.scale, -this.offset.y / this.scale, this.canvas.width / this.scale, this.canvas.height / this.scale);
+ } else {
+ return ctx.drawImage(this.canvas, 0, 0);
+ }
};
DocumentView.prototype.onDraw = function(pos) {
- var brush, dirtyRects, layer, layerRect, pressure, r, rect, self, tiling, xoff, yoff, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _results;
+ var brush, dirtyRects, layer, layerRect, pressure, r, self, xoff, yoff, _i, _j, _len, _len1, _ref, _ref1;
self = this;
pressure = getPenPressure();
dirtyRects = [];
- tiling = true;
layer = this.doc.layer;
brush = Editor.tool;
layerRect = layer.getRect();
r = brush.draw(layer, pos, pressure).round();
- if (tiling) {
+ if (Editor.tiling) {
_ref = [-1, 0, 1];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
xoff = _ref[_i];
@@ -157,15 +167,9 @@ DocumentView = (function() {
}).filter(function(r) {
return !r.isEmpty();
});
- status(dirtyRects.length);
if (true) {
Editor.renderer.renderLayer(layer, self, dirtyRects);
- _results = [];
- for (_k = 0, _len2 = dirtyRects.length; _k < _len2; _k++) {
- rect = dirtyRects[_k];
- _results.push(self.backContext.drawImage(self.canvas, rect.x, rect.y, rect.width + 1, rect.height + 1, rect.x, rect.y, rect.width + 1, rect.height + 1));
- }
- return _results;
+ return self.rePaint();
}
};
@@ -213,6 +217,6 @@ $(document).ready(function() {
});
createToolsUI($('#tools'));
view = new DocumentView($('.document-view'), doc);
- view.transformChanged();
- return view.refreshAll();
+ view.rePaint();
+ return view.reRender();
});
View
2  js/core.coffee
@@ -1,6 +1,8 @@
class Vec2
constructor: (@x, @y) ->;
+ clone: ()->
+ return new Vec2(@x,@y)
distanceTo: (v) ->
return Math.sqrt(squareDistanceTo(v))
squareDistanceTo: (v) ->
View
4 js/core.js
@@ -7,6 +7,10 @@ Vec2 = (function() {
this.y = y;
}
+ Vec2.prototype.clone = function() {
+ return new Vec2(this.x, this.y);
+ };
+
Vec2.prototype.distanceTo = function(v) {
return Math.sqrt(squareDistanceTo(v));
};
Please sign in to comment.
Something went wrong with that request. Please try again.