Extend layer concept into tails to correctly handle overlap

BloomBooks · Sep 29, 2019 · 9884d65 · 9884d65
1 parent ae2f693
commit 9884d65
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/bubble.ts b/src/bubble.ts
@@ -235,7 +235,6 @@ export default class Bubble {
       this.content.offsetTop + this.content.offsetHeight / 2);
 
     const tail = this.drawTail(start, mid, target,);
-    tail.putStrokeBehind(this.innerShape);
     // keep track of it; eventually adjustSize will adjust its start position.
     this.tails.push(tail);
   }
@@ -295,6 +294,8 @@ export default class Bubble {
       start,
       tipHandle.position!,
       curveHandle.position!,
+      this.lowerLayer,
+      this.upperLayer
     );
 
     curveHandle.bringToFront();
@@ -326,7 +327,7 @@ export default class Bubble {
       const updatedTail = new Tail(
         start,
         tipHandle.position!,
-        curveHandle.position!
+        curveHandle.position!, this.lowerLayer, this.upperLayer
       );
       tail.replaceWith(updatedTail);
       curveHandle.bringToFront();

diff --git a/src/tail.ts b/src/tail.ts
@@ -1,4 +1,4 @@
-import { Path, Point, Color, Item} from "paper";
+import { Path, Point, Color, Layer} from "paper";
 import Comical from "./comical";
 
 export class Tail {
@@ -7,11 +7,19 @@ export class Tail {
     // the path representing the space within the tail
     pathFill: Path;
 
+    lowerLayer: Layer;
+    upperLayer: Layer;
+
     public constructor(
         root: Point,
         tip: Point,
         mid: Point,
+        lowerLayer: Layer,
+        upperLayer: Layer
       ) {
+        this.lowerLayer = lowerLayer;
+        this.upperLayer = upperLayer;
+        this.lowerLayer.activate();
         const tailWidth = 25;
         // we want to make the base of the tail a line of length tailWidth
         // at right angles to the line from root to mid
@@ -36,7 +44,10 @@ export class Tail {
         const pathArc2 = new Path.Arc(tip, mid2, end);
         this.pathstroke.addSegments(pathArc2.segments!);
         pathArc2.remove();
+        this.upperLayer.activate();
         this.pathFill = this.pathstroke.clone() as Path;
+        this.pathFill.remove();
+        this.upperLayer.addChild(this.pathFill);
         this.pathstroke.strokeColor = new Color("black");
         this.pathFill.fillColor = Comical.backColor;
       }
@@ -48,8 +59,4 @@ export class Tail {
           this.pathstroke = other.pathstroke;
           this.pathFill = other.pathFill;
       }
-
-      public putStrokeBehind(item: Item) {
-        this.pathstroke.insertBelow(item);
-      }
 }
diff --git a/stories/index.stories.ts b/stories/index.stories.ts
@@ -166,7 +166,7 @@ storiesOf("bubble-edit", module)
     bubble.setBubbleSpec({
       version: "1.0",
       style: "shout",
-      tips: [{ targetX: 220, targetY: 250, midpointX: 220, midpointY: 175 }],
+      tips: [],
       level: 1
     });
     bubble.makeShapes();
@@ -273,7 +273,12 @@ storiesOf("bubble-edit", module)
       bubble4.spec = {
         version: "1.0",
         style: "speech",
-        tips: [Bubble.makeDefaultTip(div4)],
+        // Give this one a non-default tip so it starts out intersecting the provious bubble.
+        // This lets us easily check on a later tail overlapping an earlier bubble in the same
+        // level (though as a cartoon it looks a bit odd...a more plausible comic might have
+        // a bubble with no tail overlapping one with a tail that merges into a third which has a
+        // regular tail.)
+        tips: [{ targetX: 470, targetY: 100, midpointX: 370, midpointY: 150 }],
         level: 2
       };
       bubble4.setBubbleSpec(bubble4.spec);