simple.html: zoom-buttons in header (+,-), auto-resize-code-textfield, UI-class. openjscad.js: mousewheel-zoom
This commit is contained in:
Denis Knauf
parent
47955a0b3d
commit
a91c07c68d
14
openjscad.js
14
openjscad.js
|
|
@ -94,6 +94,9 @@ OpenJsCad.Viewer = function(containerelement, width, height, initialdepth) {
|
||||||
gl.onmousemove = function(e) {
|
gl.onmousemove = function(e) {
|
||||||
_this.onMouseMove(e);
|
_this.onMouseMove(e);
|
||||||
};
|
};
|
||||||
|
gl.onmousewheel = function(e) {
|
||||||
|
_this.onMouseWheel(e);
|
||||||
|
}
|
||||||
gl.ondraw = function() {
|
gl.ondraw = function() {
|
||||||
_this.onDraw();
|
_this.onDraw();
|
||||||
};
|
};
|
||||||
|
|
@ -116,10 +119,19 @@ OpenJsCad.Viewer.prototype = {
|
||||||
return !!this.gl;
|
return !!this.gl;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onMouseWheel: function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log( 'mousewheel', e);
|
||||||
|
var factor = 1e-2;
|
||||||
|
this.viewpointZ *= Math.pow(2,factor * e.wheelDeltaY);
|
||||||
|
this.onDraw();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
onMouseMove: function(e) {
|
onMouseMove: function(e) {
|
||||||
if (e.dragging) {
|
if (e.dragging) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if(e.altKey)
|
if(e.altKey||e.ctrlKey||e.metaKey)
|
||||||
{
|
{
|
||||||
var factor = 1e-2;
|
var factor = 1e-2;
|
||||||
this.viewpointZ *= Math.pow(2,factor * e.deltaY);
|
this.viewpointZ *= Math.pow(2,factor * e.deltaY);
|
||||||
|
|
|
||||||
158
simple.html
158
simple.html
|
|
@ -39,36 +39,105 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
border-bottom: 1px solid black;
|
border-bottom: 1px solid black;
|
||||||
background: #bbb;
|
background: #bbb;
|
||||||
height: 1.2em;
|
height: 1.9em;
|
||||||
}
|
}
|
||||||
header > * {
|
header > * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
margin: 1.3em 0 0 0;
|
margin: 2em 0 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" href="openjscad.css" type="text/css">
|
<link rel="stylesheet" href="../openjscad.css" type="text/css">
|
||||||
<script type="text/coffeescript">
|
<script type="text/coffeescript">
|
||||||
# Show all exceptions to the user:
|
window.DelayedCall = (fun, delay = 250) ->
|
||||||
OpenJsCad.AlertUserOfUncaughtExceptions()
|
self = (args...) ->
|
||||||
gProcessor = revision = null
|
self.stop()
|
||||||
|
self.fire(args...)
|
||||||
|
self.call = fun
|
||||||
|
self.delay = delay
|
||||||
|
self.fire = (args...) ->
|
||||||
|
self.stop()
|
||||||
|
self.to = setTimeout (-> self.call( args...)), self.delay
|
||||||
|
this
|
||||||
|
self.stop = ->
|
||||||
|
clearTimeout self.to
|
||||||
|
this
|
||||||
|
self
|
||||||
|
|
||||||
window.prepareCode = (lang, code) ->
|
CSG.loadFile = (fn) ->
|
||||||
if 'CoffeeScript' == lang
|
[fn, rev, lang, code] = openjscadUI.loadFile()
|
||||||
code = CoffeeScript.compile code, bare: 'on'
|
eval openjscadUI.prepareCode( lang, code)
|
||||||
console.group 'code'
|
|
||||||
console.log code
|
|
||||||
console.groupEnd()
|
|
||||||
code
|
|
||||||
window.getCode = -> $('#code').val()
|
|
||||||
window.getLang = -> $('#lang').val()
|
|
||||||
window.getJsCode = ->
|
|
||||||
prepareCode getLang(), getCode()
|
|
||||||
|
|
||||||
window.updateSolid = ->
|
class UI
|
||||||
gProcessor.setJsCad getJsCode()
|
constructor: ->
|
||||||
|
self = this
|
||||||
|
# Show all exceptions to the user:
|
||||||
|
OpenJsCad.AlertUserOfUncaughtExceptions()
|
||||||
|
@gProcessor = null
|
||||||
|
@revision = null
|
||||||
|
@$code = $ '#code'
|
||||||
|
@$lang = $ '#lang'
|
||||||
|
@$viewer = $ '#viewer'
|
||||||
|
@$body = $ 'body'
|
||||||
|
|
||||||
|
[fn, rev, lang, code] = @loadFile @currentFilename()
|
||||||
|
@$lang.val lang
|
||||||
|
@$code.
|
||||||
|
on( 'keyup.openjscadui', -> self.edit_history()).
|
||||||
|
val code
|
||||||
|
@windowResized = new DelayedCall -> self.resizeCode()
|
||||||
|
$(window).on 'resize.openjscadui', @windowResized
|
||||||
|
|
||||||
|
@gProcessor = new OpenJsCad.Processor @$viewer[0]
|
||||||
|
@updateSolid()
|
||||||
|
@resizeCode()
|
||||||
|
|
||||||
|
destroy: ->
|
||||||
|
@$code.off '.openjscadui'
|
||||||
|
$(window).off '.openjscadui'
|
||||||
|
|
||||||
|
prepareCode: (lang, code) ->
|
||||||
|
code = CoffeeScript.compile code, bare: 'on' if 'CoffeeScript' == lang
|
||||||
|
console.group 'code'
|
||||||
|
console.log code
|
||||||
|
console.groupEnd()
|
||||||
|
code
|
||||||
|
getCode: -> @$code.val()
|
||||||
|
getLang: -> @$lang.val()
|
||||||
|
getJsCode: -> @prepareCode @getLang(), @getCode()
|
||||||
|
updateSolid: -> @gProcessor.setJsCad @getJsCode()
|
||||||
|
currentFilename: -> /\/([^\/]*?)$/.exec(window.location.pathname)[1]
|
||||||
|
|
||||||
|
loadFile: (fn) ->
|
||||||
|
rev = localStorage[fn]
|
||||||
|
JSON.parse localStorage[rev]
|
||||||
|
|
||||||
|
writeFile: (fn, lang, code) ->
|
||||||
|
rev = Math.uuid()
|
||||||
|
localStorage[rev] = JSON.stringify [fn, @revision, @getLang(), @getCode()]
|
||||||
|
localStorage[fn] = @revision = rev
|
||||||
|
|
||||||
|
# Store the file-history (for undo) in the browser-storage:
|
||||||
|
edit_history: (event) ->
|
||||||
|
fn = @currentFilename()
|
||||||
|
code = @getCode()
|
||||||
|
lang = @getLang()
|
||||||
|
[_,_, oldlang, oldcode] = @loadFile fn
|
||||||
|
@writeFile fn, lang, code unless oldcode == code and oldlang == lang
|
||||||
|
true
|
||||||
|
|
||||||
|
resizeCode: ->
|
||||||
|
@$code.css
|
||||||
|
width: "#{@$body.innerWidth() - @$viewer.outerWidth() - @$code.outerWidth() + @$code.width()}px"
|
||||||
|
height: '600px'
|
||||||
|
|
||||||
|
zoom: (i) ->
|
||||||
|
factor = -1
|
||||||
|
viewer = @gProcessor.viewer
|
||||||
|
viewer.viewpointZ *= Math.pow 2, factor * i
|
||||||
|
viewer.onDraw()
|
||||||
|
|
||||||
# http://pallieter.org/Projects/insertTab/
|
# http://pallieter.org/Projects/insertTab/
|
||||||
window.insertTab = (o, e) ->
|
window.insertTab = (o, e) ->
|
||||||
|
|
@ -89,55 +158,20 @@
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
true
|
true
|
||||||
|
|
||||||
window.currentFilename = -> /\/([^\/]*?)$/.exec(window.location.pathname)[1]
|
|
||||||
|
|
||||||
window.loadFile = (fn) ->
|
|
||||||
rev = localStorage[fn]
|
|
||||||
JSON.parse localStorage[rev]
|
|
||||||
|
|
||||||
window.writeFile = (fn, lang, code) ->
|
|
||||||
rev = Math.uuid()
|
|
||||||
localStorage[rev] = JSON.stringify [fn, revision, getLang(), getCode()]
|
|
||||||
localStorage[fn] = revision = rev
|
|
||||||
|
|
||||||
# Store the file-history (for undo) in the browser-storage:
|
|
||||||
window.edit_history = (event) ->
|
|
||||||
fn = currentFilename()
|
|
||||||
code = getCode()
|
|
||||||
lang = getLang()
|
|
||||||
[_,_, oldlang, oldcode] = loadFile fn
|
|
||||||
writeFile fn, lang, code unless oldcode == code and oldlang == lang
|
|
||||||
true
|
|
||||||
|
|
||||||
CSG.loadFile = (fn) ->
|
|
||||||
[fn, rev, lang, code] = loadFile()
|
|
||||||
eval prepareCode( lang, code)
|
|
||||||
|
|
||||||
window.resizeCode = ->
|
|
||||||
$code = $ '#code'
|
|
||||||
$code.css
|
|
||||||
width: "#{$('body').innerWidth() - $('#viewer').outerWidth() - $code.outerWidth() + $code.width()}px"
|
|
||||||
height: '600px'
|
|
||||||
|
|
||||||
$ ->
|
$ ->
|
||||||
$('#code').
|
window.openjscadUI = new UI
|
||||||
on( 'keydown', (e)-> insertTab this, e).
|
openjscadUI.$code.on 'keydown', (e)-> insertTab this, e
|
||||||
on( 'keyup', edit_history)
|
|
||||||
|
|
||||||
[fn, rev, lang, code] = loadFile currentFilename()
|
|
||||||
$('#lang').val lang
|
|
||||||
$('#code').val code
|
|
||||||
gProcessor = new OpenJsCad.Processor $("#viewer")[0]
|
|
||||||
updateSolid()
|
|
||||||
resizeCode()
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<title>OpenJsCad</title>
|
<title>OpenJsCad</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<a href='#' onclick="updateSolid(); return false;">Update</a>
|
<button onclick="openjscadUI.updateSolid();return false;">Update</button>
|
||||||
|
<span style="float:right">
|
||||||
|
<button onclick="openjscadUI.zoom(1);return false;">+</button>
|
||||||
|
<button onclick="openjscadUI.zoom(-1);return false;">-</button>
|
||||||
|
</span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="viewer" style="float:right;"></div>
|
<div id="viewer" style="float:right;"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue