-
Notifications
You must be signed in to change notification settings - Fork 12
/
ShapeBasedOverlay.js
86 lines (65 loc) · 2.39 KB
/
ShapeBasedOverlay.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Copyright 2013-2019, University of Colorado Boulder
/**
* Supertype for overlays that display colored shapes (updated every frame).
*
* @author Jonathan Olson <jonathan.olson@colorado.edu>
*/
define( require => {
'use strict';
const inherit = require( 'PHET_CORE/inherit' );
const scenery = require( 'SCENERY/scenery' );
require( 'SCENERY/util/Trail' );
function ShapeBasedOverlay( display, rootNode, name ) {
this.display = display;
this.rootNode = rootNode;
const svg = document.createElementNS( scenery.svgns, 'svg' );
svg.style.position = 'absolute';
svg.setAttribute( 'class', name );
svg.style.top = 0;
svg.style.left = 0;
svg.style[ 'pointer-events' ] = 'none';
this.svg = svg;
function resize( width, height ) {
svg.setAttribute( 'width', width );
svg.setAttribute( 'height', height );
svg.style.clip = 'rect(0px,' + width + 'px,' + height + 'px,0px)';
}
display.onStatic( 'displaySize', function( dimension ) {
resize( dimension.width, dimension.height );
} );
resize( display.width, display.height );
this.domElement = svg;
}
scenery.register( 'ShapeBasedOverlay', ShapeBasedOverlay );
inherit( Object, ShapeBasedOverlay, {
addShape: function( shape, color, isOffset ) {
const path = document.createElementNS( scenery.svgns, 'path' );
let svgPath = shape.getSVGPath();
// temporary workaround for https://bugs.webkit.org/show_bug.cgi?id=78980
// and http://code.google.com/p/chromium/issues/detail?id=231626 where even removing
// the attribute can cause this bug
if ( !svgPath ) { svgPath = 'M0 0'; }
if ( svgPath ) {
// only set the SVG path if it's not the empty string
path.setAttribute( 'd', svgPath );
}
else if ( path.hasAttribute( 'd' ) ) {
path.removeAttribute( 'd' );
}
path.setAttribute( 'style', 'fill: none; stroke: ' + color + '; stroke-dasharray: 5, 3; stroke-dashoffset: ' + ( isOffset ? 5 : 0 ) + '; stroke-width: 3;' );
this.svg.appendChild( path );
},
update: function() {
while ( this.svg.childNodes.length ) {
this.svg.removeChild( this.svg.childNodes[ this.svg.childNodes.length - 1 ] );
}
this.addShapes();
},
// STUB to be overridden
addShapes: function() {
},
dispose: function() {
}
} );
return ShapeBasedOverlay;
} );