diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/css/app.css | 3 | ||||
-rw-r--r-- | app/index.html | 62 | ||||
-rw-r--r-- | app/js/directives.js | 2 |
3 files changed, 8 insertions, 59 deletions
diff --git a/app/css/app.css b/app/css/app.css index 9fb3c90..65d6bb1 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -8,6 +8,9 @@ .world { position: relative; border: solid #999999 1px; + width: 100%; + height: 1000px; + overflow: hidden; } .world .line { diff --git a/app/index.html b/app/index.html index 4f960a6..8bb6176 100644 --- a/app/index.html +++ b/app/index.html @@ -41,11 +41,13 @@ <fieldset> <legend>TrackList :</legend> - <div id="futurTrackListDiv">-empty</div> + <ul> + <li data-ng-repeat="song in playseq | filter:{selected:true}">{{song.label}}</li> + </ul> </fieldset> </div> <div id="column-middle"> - <div class="world" style="width: 100%; height: 500px;"> + <div class="world"> <div data-pg-line data-line="line" data-list="playseq"class="line" resize></div> <div data-ng-repeat="point in points" data-pg-draggable="point" class="point" style="top: {{point.y}}px; left: {{point.x}}px;" data-ng-class="{selected: point.selected==true}"> @@ -54,64 +56,8 @@ </div> </div> - <ul> - <li data-ng-repeat="point in points | filter:{selected:true}">{{point.x}}, {{point.y}}</li> - - </ul> - - <button ng-click="foo()">Add button</button> - -<!-- - <svg id="world" width="500" height="500"> - <circle data-ng-repeat="point in points" cx="{{point.x}}" cy="{{point.y}}" r="10" stroke="gray" stroke-width="2" fill="{{getColor(point)}}"></circle> - <line data-ng-repeat="tuple in line | sliding2" x1="{{tuple[0].x}}" y1="{{tuple[0].y}}" x2="{{tuple[1].x}}" y2="{{tuple[1].y}}" style="stroke:rgb(255,0,0);stroke-width:2" /> - </svg>--> -<!-- - <a href="#" onclick="tool1.activate();">Lines</a> - <a href="#" onclick="tool2.activate();">Clouds</a> - <canvas id="myCanvas" resize></canvas> - <ul> - <li data-ng-repeat="song in playlist"> - {{song}} - </li> - </ul> - - <script> - // Keep global references to both tools, so the HTML - // links below can access them. - var tool1, tool2; - paper.setup('myCanvas'); - - // Create two drawing tools. - // tool1 will draw straight lines, - // tool2 will draw clouds. - - // Both share the mouseDown event: - var path; - function onMouseDown(event) { - path = new paper.Path(); - path.strokeColor = 'black'; - path.add(event.point); - } - - tool1 = new paper.Tool(); - tool1.onMouseDown = onMouseDown; - - tool1.onMouseDrag = function(event) { - path.add(event.point); - } - - tool2 = new paper.Tool(); - tool2.minDistance = 20; - tool2.onMouseDown = onMouseDown; - tool2.onMouseDrag = function(event) { - // Use the arcTo command to draw cloudy lines - path.arcTo(event.point); - } - </script> - --> </div> </body> </html> diff --git a/app/js/directives.js b/app/js/directives.js index a22d340..a367920 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -53,7 +53,7 @@ app.directive('pgLine', function () { var points = Array(); // When the mouse is released, simplify it: - path.simplify(1); + path.simplify(10); for(var i=0; i<path._segments.length; i++) { |