Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Improve UI

  • Loading branch information...
commit e733e0f7975d3efe8a4e7ee4d46556afa764ff6c 1 parent 1ab8fc9
@trethaller authored
View
6 css/app.css
@@ -4,12 +4,14 @@ body {
}
.document-view {
- padding: 20px;
+ padding: 60px;
border: 1px solid #ddd;
text-align: center;
}
.document-view canvas {
- border: 1px solid #ddd;
+ border: 1px solid #000;
}
+#tools {
+}
View
16 index.html
@@ -16,18 +16,18 @@
</head>
<body>
<div>
- <div class="document-view">
- </div>
- <div id="tools">
- <div class="buttons"></div>
- <div class="properties"></div>
- </div>
<div id="renderers">
<div class="buttons"></div>
<div class="properties"></div>
</div>
-
- <div><pre id="status-bar"></pre></div>
+ <div class="row">
+ <div class="document-view span8">
+ </div>
+ <div id="tools" class="span4">
+ <div class="buttons"></div>
+ <div class="properties"></div>
+ </div>
+ </div>
</div>
<!--[if IE]>
View
22 js/app.coffee
@@ -77,6 +77,7 @@ class DocumentView
local.offsetStart = self.offset.clone()
$container.mouseup (e)->
+ e.preventDefault()
if e.which is 1
editor.getToolObject().endDraw(getCanvasCoords(e))
self.drawing = false
@@ -85,15 +86,17 @@ class DocumentView
self.panning = false
$container.mousemove (e)->
+ e.preventDefault()
if self.drawing
self.onDraw(getCanvasCoords(e))
if self.panning
curPos = getCoords(e)
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)
+ limW = self.doc.width / 3.0
+ limH = self.doc.height / 3.0
+ self.offset.x = Math.min(Math.max(o.x, -limW), limW)
+ self.offset.y = Math.min(Math.max(o.y, -limH), limH)
self.rePaint()
screenToCanvas: (pt)->
@@ -175,11 +178,12 @@ PropertyView = Backbone.View.extend
# Slider
if prop.range?
+ step = if prop.type is 'int' then 1 else (prop.range[1]-prop.range[0]) / 100
$slider = $('<div/>').slider({
min: prop.range[0]
max: prop.range[1]
value: tool.get(prop.id)
- step: 0.01
+ step: step
change: (evt, ui)->
tool.set(prop.id, ui.value)
editor.setToolDirty()
@@ -189,7 +193,10 @@ PropertyView = Backbone.View.extend
.val(tool.get(prop.id))
.appendTo(@$el)
.change (evt)->
- tool.set(prop.id, parseFloat($val.val()))
+ if prop.type is 'int'
+ tool.set(prop.id, parseInt($val.val()))
+ else
+ tool.set(prop.id, parseFloat($val.val()))
@listenTo @model.tool, "change:#{prop.id}", ()->
v = tool.get(prop.id)
@@ -247,11 +254,16 @@ createRenderersButtons = ($container)->
$(document).ready ()->
doc = new Document(512, 512)
+
+ '''
fillLayer doc.layer, (x,y)->
x += 1.0
y += 1.0
return (Math.round(x*40) % 2) * 0.1 -
(Math.round(y*40) % 2) * 0.1
+ '''
+ fillLayer doc.layer, (x,y)->
+ return -1
view = new DocumentView($('.document-view'), doc)
View
27 js/app.js
@@ -109,6 +109,7 @@ DocumentView = (function() {
}
});
$container.mouseup(function(e) {
+ e.preventDefault();
if (e.which === 1) {
editor.getToolObject().endDraw(getCanvasCoords(e));
self.drawing = false;
@@ -118,16 +119,18 @@ DocumentView = (function() {
}
});
$container.mousemove(function(e) {
- var curPos, lim, o;
+ var curPos, limH, limW, o;
+ e.preventDefault();
if (self.drawing) {
self.onDraw(getCanvasCoords(e));
}
if (self.panning) {
curPos = getCoords(e);
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);
+ limW = self.doc.width / 3.0;
+ limH = self.doc.height / 3.0;
+ self.offset.x = Math.min(Math.max(o.x, -limW), limW);
+ self.offset.y = Math.min(Math.max(o.y, -limH), limH);
return self.rePaint();
}
});
@@ -214,23 +217,28 @@ view = null;
PropertyView = Backbone.View.extend({
className: "property",
initialize: function() {
- var $slider, $val, prop, tool;
+ var $slider, $val, prop, step, tool;
tool = this.model.tool;
prop = this.model.prop;
$('<span/>').text(prop.name).appendTo(this.$el);
if (prop.range != null) {
+ step = prop.type === 'int' ? 1 : (prop.range[1] - prop.range[0]) / 100;
$slider = $('<div/>').slider({
min: prop.range[0],
max: prop.range[1],
value: tool.get(prop.id),
- step: 0.01,
+ step: step,
change: function(evt, ui) {
tool.set(prop.id, ui.value);
return editor.setToolDirty();
}
}).width(200).appendTo(this.$el);
$val = $('<input/>').val(tool.get(prop.id)).appendTo(this.$el).change(function(evt) {
- return tool.set(prop.id, parseFloat($val.val()));
+ if (prop.type === 'int') {
+ return tool.set(prop.id, parseInt($val.val()));
+ } else {
+ return tool.set(prop.id, parseFloat($val.val()));
+ }
});
return this.listenTo(this.model.tool, "change:" + prop.id, function() {
var v;
@@ -324,10 +332,9 @@ createRenderersButtons = function($container) {
$(document).ready(function() {
var doc;
doc = new Document(512, 512);
+ 'fillLayer doc.layer, (x,y)->\n x += 1.0\n y += 1.0\n return (Math.round(x*40) % 2) * 0.1 -\n (Math.round(y*40) % 2) * 0.1';
fillLayer(doc.layer, function(x, y) {
- x += 1.0;
- y += 1.0;
- return (Math.round(x * 40) % 2) * 0.1 - (Math.round(y * 40) % 2) * 0.1;
+ return -1;
});
view = new DocumentView($('.document-view'), doc);
createToolsButtons($('#tools > .buttons'));
View
17 js/tools.coffee
@@ -11,9 +11,10 @@ class StepBrush
fb[ Math.floor(pos.x) + Math.floor(pos.y) * layer.width ] = intensity
rect.extend(pos)
- move: (pos, intensity) ->;
- draw: (layer, pos, intensity) ->
+ move: (pos, pressure) ->;
+ draw: (layer, pos, pressure) ->
rect = new Rect(pos.x, pos.y, 1, 1)
+ intensity = pressure * @stepSize / 10.0
if @lastpos?
delt = pos.sub(@lastpos)
length = delt.length()
@@ -87,20 +88,22 @@ RoundBrush = (()->
{
id: 'stepSize'
name: "Step size"
- defaultValue: 4
+ defaultValue: 3
range: [1, 20]
+ type: 'int'
},
{
id: 'hardness'
name: "Hardness"
- defaultValue: 0.0
+ defaultValue: 0.5
range: [0.0, 10.0]
},
{
id: 'size'
name: "Size"
- defaultValue: 40.0
+ defaultValue: 16.0
range: [1.0, 256.0]
+ type: 'int'
},
{
id: 'blendMode'
@@ -111,8 +114,8 @@ RoundBrush = (()->
{
id:'intensity'
name: "Intensity"
- defaultValue: 0.1
- range: [0.0, 1.0]
+ defaultValue: 0.5
+ range: [0.0, 3.0]
}
]
View
23 js/tools.js
@@ -21,11 +21,12 @@ StepBrush = (function() {
return rect.extend(pos);
};
- StepBrush.prototype.move = function(pos, intensity) {};
+ StepBrush.prototype.move = function(pos, pressure) {};
- StepBrush.prototype.draw = function(layer, pos, intensity) {
- var delt, dir, length, pt, rect;
+ StepBrush.prototype.draw = function(layer, pos, pressure) {
+ var delt, dir, intensity, length, pt, rect;
rect = new Rect(pos.x, pos.y, 1, 1);
+ intensity = pressure * this.stepSize / 10.0;
if (this.lastpos != null) {
delt = pos.sub(this.lastpos);
length = delt.length();
@@ -117,18 +118,20 @@ RoundBrush = (function() {
{
id: 'stepSize',
name: "Step size",
- defaultValue: 4,
- range: [1, 20]
+ defaultValue: 3,
+ range: [1, 20],
+ type: 'int'
}, {
id: 'hardness',
name: "Hardness",
- defaultValue: 0.0,
+ defaultValue: 0.5,
range: [0.0, 10.0]
}, {
id: 'size',
name: "Size",
- defaultValue: 40.0,
- range: [1.0, 256.0]
+ defaultValue: 16.0,
+ range: [1.0, 256.0],
+ type: 'int'
}, {
id: 'blendMode',
name: "Blend mode",
@@ -137,8 +140,8 @@ RoundBrush = (function() {
}, {
id: 'intensity',
name: "Intensity",
- defaultValue: 0.1,
- range: [0.0, 1.0]
+ defaultValue: 0.5,
+ range: [0.0, 3.0]
}
];
self = new Backbone.Model;
Please sign in to comment.
Something went wrong with that request. Please try again.