added in ghost. made z-index thingy so that i wouldn't have to use po…

…inter-events (so i can support opera and.. ie?)
BAVW · May 2, 2012 · 5f9bf0d · 5f9bf0d
1 parent 1c486c9
commit 5f9bf0d
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 50 deletions.
diff --git a/compiled/app.js b/compiled/app.js
@@ -96,6 +96,7 @@
     definitions: definitions,
     focus: ko.observable(movedCircle),
     mouseOver: ko.observable(false),
+    ghostHint: ko.observable(false),
     isHighlighted: function(componentPath) {
       var mo;
       mo = koState.mouseOver();
@@ -199,6 +200,7 @@
     $("#workspace").mouseenter(function(e) {
       var c, componentPath, mouse, t, _ref;
       if ((_ref = ui.dragging) != null ? _ref.definition : void 0) {
+        koState.ghostHint(false);
         mouse = localCoords([], workspaceCoords(e));
         t = model.makeTransform([1, 0, 0, 1, mouse[0] - ui.dragging.dragPoint[0], mouse[1] - ui.dragging.dragPoint[1]]);
         c = koState.focus().add(ui.dragging.definition, t);
@@ -231,6 +233,12 @@
     });
     $(window).mousemove(function(e) {
       var c0, components, constraintType, d, mouse;
+      if (koState.ghostHint()) {
+        $("#ghostHint").css({
+          top: e.clientY - koState.ghostHint()[1],
+          left: e.clientX - koState.ghostHint()[0]
+        });
+      }
       if (ui.dragging) {
         mouse = localCoords([], workspaceCoords(e));
         if (ui.dragging.pan) {
@@ -242,8 +250,10 @@
           constraintType = koState.mouseOver().edge ? (key.shift ? "scale" : "scaleRotate") : "translate";
           c0.transform = require("solveConstraint")(components, ui.dragging.startPosition, ui.dragging.originalCenter, mouse)[constraintType]();
         }
-        regenerateRenderers();
-        return render();
+        if (ui.dragging.pan || ui.dragging.componentPath) {
+          regenerateRenderers();
+          return render();
+        }
       }
     });
     $("#workspace").mousewheel(function(e, delta) {
@@ -259,7 +269,7 @@
       regenerateRenderers();
       return render();
     });
-    $(window).on("mousedown", "canvas", function(e) {
+    $(window).on("mousedown", function(e) {
       return e.preventDefault();
     });
     $("#workspace").mousedown(function(e) {
@@ -289,22 +299,35 @@
         };
       }
     });
-    $("#definitions").on("mousedown", "canvas", function(e) {
-      var definition, dragPoint;
-      definition = $(this).data("definition");
-      dragPoint = canvasTopLevelTransform(this).mult(definition.view).inverse().p(domCompensate(e, this));
-      return ui.dragging = {
+    $("#dragHint").on("mousedown", function(e) {
+      return console.log("dragHint mousedown");
+    });
+    $("#definitions").on("mousedown", ".definition", function(e) {
+      var definition, dragPoint, offset;
+      canvas = $(this).find("canvas")[0];
+      definition = $(canvas).data("definition");
+      dragPoint = canvasTopLevelTransform(canvas).mult(definition.view).inverse().p(domCompensate(e, canvas));
+      ui.dragging = {
         definition: definition,
         dragPoint: dragPoint
       };
+      $("#ghostHint canvas").data("definition", definition);
+      render();
+      offset = $(this).offset();
+      $("#ghostHint").css({
+        top: offset.top,
+        left: offset.left
+      });
+      return koState.ghostHint([e.clientX - offset.left, e.clientY - offset.top]);
     });
-    $("#definitions").on("click", "canvas", function(e) {
+    $("#definitions").on("click", ".definition", function(e) {
       var definition;
-      definition = $(this).data("definition");
+      canvas = $(this).find("canvas")[0];
+      definition = $(canvas).data("definition");
       if (definition.draw) {
         $("#dragHint").css({
-          left: $(this).offset().left + $(this).outerWidth(),
-          top: $(this).offset().top,
+          left: $(canvas).offset().left + $(canvas).outerWidth(),
+          top: $(canvas).offset().top,
           opacity: 0.7
         });
         return $("#dragHint").animate({
@@ -369,7 +392,8 @@
       }
     });
     $(window).mouseup(function(e) {
-      return ui.dragging = false;
+      ui.dragging = false;
+      return koState.ghostHint(false);
     });
     ko.applyBindings(koState);
     render();

diff --git a/compiled/css/style.css b/compiled/css/style.css
@@ -36,6 +36,14 @@ button:active {
   box-shadow: 0 1px 1px rgba(255,255,255,0.35), inset 0 0 1px rgba(0,0,0,0.50), inset 0 1px 4px rgba(0,0,0,0.40);
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#d5d5d5));
 }
+.filler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+}
 #workspace {
   position: absolute;
   top: 16px;
@@ -74,14 +82,20 @@ button:active {
   width: 96px;
   height: 96px;
   margin-bottom: 16px;
-  border: 1px solid #777;
-  background-color: #fff;
-  box-shadow: 0px 1px 5px #888;
+  border: 1px solid #999;
+  box-shadow: 0px 1px 5px rgba(128,128,128,0.50);
+  background-color: rgba(255,255,255,0.50);
+}
+#sidebar #definitions .definition canvas {
   opacity: 0.5;
 }
 #sidebar #definitions .definition.focused {
-  opacity: 1;
+  box-shadow: 0px 1px 5px #888;
   border: 1px solid #000;
+  background-color: #fff;
+}
+#sidebar #definitions .definition.focused canvas {
+  opacity: 1;
 }
 #sidebar #addDefinition {
   margin-left: 34px;
@@ -164,6 +178,14 @@ button:active {
   background: transparent url("images/dragArrow.png") no-repeat;
   opacity: 0;
 }
+#ghostHint {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 96px;
+  height: 96px;
+  opacity: 0.5;
+}
 #components,
 #drawFurther {
   -webkit-transition: opacity 0.5s;

diff --git a/index.html b/index.html
@@ -10,36 +10,25 @@
 </head>
 <body>
 
-<!-- <div style="position: absolute; top: 10px; left: 10px">
-  Click and drag the circles.
-</div> -->
+
 
 <div id="workspace">
   <canvas id="workspaceCanvas" data-bind="canvas: focus()"></canvas>
   <canvas id="drawFurther" data-bind="css: {hidden: mouseOver()}"></canvas>
   <canvas id="forSaving"></canvas>
+  <div class="filler"></div>
 </div>
 
 <div id="sidebar">
-  <!-- <div id="definitions"></div> -->
-  <!-- <div id="addDefinition">
-    <i class="icon-plus"></i>
-  </div> -->
-
   <div id="definitions" data-bind="foreach: definitions">
     <div class="definition mini" data-bind="css: {focused: $data === $root.focus()}">
+
       <canvas data-bind="canvas: $data"></canvas>
+      <div class="filler"></div>
     </div>
   </div>
 
   <button class="button" id="addDefinition">+</button>
-
-  <!-- <div style="width: 40px; height: 40px; background-color: green; position: relative">
-    <canvas data-bind="canvas: test"></canvas>
-  </div>
-  <div style="width: 50px; height: 50px; background-color: purple; position: relative">
-    <canvas data-bind="canvas: test"></canvas>
-  </div> -->
 </div>
 
 
@@ -76,9 +65,11 @@
   Drag
 </div>
 
-<!-- <div id="ghostHint">
+<div id="ghostHint" class="mini" data-bind="visible: ghostHint">
   <canvas id="ghostHintCanvas"></canvas>
-</div> -->
+</div>
+
+
 
 <script src="vendor/numeric-1.0.2.min.js"></script>
 <script src="vendor/underscore-min.js"></script>

diff --git a/src/app.coffee b/src/app.coffee
@@ -45,6 +45,7 @@ koState = window.koState = {
   definitions: definitions
   focus: ko.observable(movedCircle) # current definition we're looking at
   mouseOver: ko.observable(false)
+  ghostHint: ko.observable(false) # false if hidden, or offset coordinates from mouse position
 
   isHighlighted: (componentPath) ->
     mo = koState.mouseOver()
@@ -151,6 +152,8 @@ init = () ->
 
   $("#workspace").mouseenter (e) ->
     if ui.dragging?.definition
+      koState.ghostHint(false) # clear ghost hint
+
       # create a new component in the focused definition
       mouse = localCoords([], workspaceCoords(e))
 
@@ -195,6 +198,9 @@ init = () ->
       render()
 
   $(window).mousemove (e) ->
+    if koState.ghostHint()
+      $("#ghostHint").css(top: e.clientY - koState.ghostHint()[1], left: e.clientX - koState.ghostHint()[0])
+
     if ui.dragging
       mouse = localCoords([], workspaceCoords(e))
       if ui.dragging.pan
@@ -215,8 +221,9 @@ init = () ->
 
         c0.transform = require("solveConstraint")(components, ui.dragging.startPosition, ui.dragging.originalCenter, mouse)[constraintType]()
 
-      regenerateRenderers()
-      render()
+      if ui.dragging.pan || ui.dragging.componentPath
+        regenerateRenderers()
+        render()
 
   $("#workspace").mousewheel (e, delta) ->
     # console.log "delta", delta
@@ -239,7 +246,8 @@ init = () ->
     render()
 
 
-  $(window).on "mousedown", "canvas", (e) ->
+  # $(window).on "mousedown", "canvas", (e) ->
+  $(window).on "mousedown", (e) ->
     e.preventDefault() # so you don't start selecting text
 
   $("#workspace").mousedown (e) ->
@@ -263,19 +271,32 @@ init = () ->
         pan: localCoords([], workspaceCoords(e))
       }
 
-  $("#definitions").on "mousedown", "canvas", (e) ->
-    definition = $(this).data("definition")
-    dragPoint = canvasTopLevelTransform(this).mult(definition.view).inverse().p(domCompensate(e, this))
+  $("#dragHint").on "mousedown", (e) ->
+    console.log "dragHint mousedown"
+
+  $("#definitions").on "mousedown", ".definition", (e) ->
+    canvas = $(this).find("canvas")[0]
+    definition = $(canvas).data("definition")
+    dragPoint = canvasTopLevelTransform(canvas).mult(definition.view).inverse().p(domCompensate(e, canvas))
     ui.dragging = {
       definition: definition
       dragPoint: dragPoint
     }
+
+    # set up ghost hint
+    $("#ghostHint canvas").data("definition", definition)
+    render()
+
+    offset = $(this).offset()
+    $("#ghostHint").css(top: offset.top, left: offset.left)
+    koState.ghostHint([e.clientX - offset.left, e.clientY - offset.top])
 
-  $("#definitions").on "click", "canvas", (e) ->
-    definition = $(this).data("definition")
+  $("#definitions").on "click", ".definition", (e) ->
+    canvas = $(this).find("canvas")[0]
+    definition = $(canvas).data("definition")
     if definition.draw
       # you can't edit the primitive shapes, show hint
-      $("#dragHint").css({left: $(this).offset().left + $(this).outerWidth(), top: $(this).offset().top, opacity: 0.7})
+      $("#dragHint").css({left: $(canvas).offset().left + $(canvas).outerWidth(), top: $(canvas).offset().top, opacity: 0.7})
       $("#dragHint").animate {opacity: 0.7}, 900, () ->
         $("#dragHint").animate {opacity: 0}, 300
     else
@@ -332,6 +353,7 @@ init = () ->
 
   $(window).mouseup (e) ->
     ui.dragging = false
+    koState.ghostHint(false) # clear ghost hint
 
 
 
@@ -368,8 +390,7 @@ setSize = () ->
 
   ui.view = canvasTopLevelTransform($("#workspaceCanvas")[0])
 
-  # TODO: need to regenerateRenderers if I change config...
-  regenerateRenderers()
+  regenerateRenderers() # to clear the drawFurther canvas...
   render()
 
 

diff --git a/src/style.styl b/src/style.styl
@@ -8,6 +8,8 @@ indent = 20px
 
 shadow()
   box-shadow: 0px 1px 5px #888
+shadowtrans()
+  box-shadow: 0px 1px 5px rgba(128,128,128,0.5)
 
 transition()
   -webkit-transition arguments
@@ -54,6 +56,16 @@ button
     // padding: 6px 8px 5px 8px
 
 
+
+.filler
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: 10
+
+
 #workspace
   position: absolute
   top: spacing
@@ -95,13 +107,17 @@ button
       width: sidebarDefinition
       height: sidebarDefinition
       margin-bottom: spacing
-      border: 1px solid #777
-      background-color: #fff
-      shadow()
-      opacity: 0.5
+      border: 1px solid #999
+      shadowtrans()
+      background-color: rgba(255,255,255,0.5)
+      canvas
+        opacity: 0.5
       &.focused
-        opacity: 1.0
+        shadow()
+        canvas
+          opacity: 1.0
         border: 1px solid #000
+        background-color: #fff
   #addDefinition
     margin-left: 34px
 
@@ -182,6 +198,14 @@ button
   background: transparent url(images/dragArrow.png) no-repeat
   opacity: 0
 
+#ghostHint
+  position: absolute
+  top: 0px
+  left: 0px
+  width: sidebarDefinition
+  height: sidebarDefinition
+  opacity: 0.5
+
 // animations
 #components, #drawFurther
   transition(opacity 0.5s)