diff --git a/src/bubble.ts b/src/bubble.ts index 5f18fd1..60e286e 100644 --- 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 index 8f324c8..4db1c93 100644 --- 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); - } } \ No newline at end of file diff --git a/stories/index.stories.ts b/stories/index.stories.ts index e4200b2..d137ab9 100644 --- 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);