Generalize ZoomButtonGroup and create subclasses with Plus/Minus or M…

…agnifyingGlass, see phetsims/circuit-construction-kit-common#620

js/MagnifyingGlassZoomButtonGroup.js

@@ -0,0 +1,45 @@
+// Copyright 2020, University of Colorado Boulder
+
+import Dimension2 from '../../dot/js/Dimension2.js';
+import merge from '../../phet-core/js/merge.js';
+import MagnifyingGlassNode from './MagnifyingGlassNode.js';
+import MinusNode from './MinusNode.js';
+import PlusNode from './PlusNode.js';
+import sceneryPhet from './sceneryPhet.js';
+import ZoomButtonGroup from './ZoomButtonGroup.js';
+
+/**
+ * ZoomButtonGroup that shows magnifying glass icons
+ * @author Sam Reid (PhET Interactive Simulations)
+ */
+class MagnifyingGlassZoomButtonGroup extends ZoomButtonGroup {
+
+  /**
+   * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out
+   * @param {Object} [options]
+   */
+  constructor( zoomLevelProperty, options ) {
+
+    options = merge( {
+      magnifyingGlassNodeOptions: {
+        glassRadius: 10
+      }
+    }, options );
+
+
+    // plus or minus sign in middle of magnifying glass
+    const signOptions = {
+      size: new Dimension2(
+        1.3 * options.magnifyingGlassNodeOptions.glassRadius,
+        options.magnifyingGlassNodeOptions.glassRadius / 3
+      )
+    };
+
+    const zoomInIcon = new MagnifyingGlassNode( merge( {}, options.magnifyingGlassNodeOptions, { icon: new PlusNode( signOptions ) } ) );
+    const zoomOutIcon = new MagnifyingGlassNode( merge( {}, options.magnifyingGlassNodeOptions, { icon: new MinusNode( signOptions ) } ) );
+    super( zoomInIcon, zoomOutIcon, zoomLevelProperty, options );
+  }
+}
+
+sceneryPhet.register( 'MagnifyingGlassZoomButtonGroup', MagnifyingGlassZoomButtonGroup );
+export default MagnifyingGlassZoomButtonGroup;

js/PlusMinusZoomButtonGroup.js

@@ -0,0 +1,51 @@
+// Copyright 2020, University of Colorado Boulder
+
+import Dimension2 from '../../dot/js/Dimension2.js';
+import merge from '../../phet-core/js/merge.js';
+import AlignBox from '../../scenery/js/nodes/AlignBox.js';
+import AlignGroup from '../../scenery/js/nodes/AlignGroup.js';
+import MinusNode from './MinusNode.js';
+import PlusNode from './PlusNode.js';
+import sceneryPhet from './sceneryPhet.js';
+import ZoomButtonGroup from './ZoomButtonGroup.js';
+
+// constants
+const DEFAULT_SIZE = new Dimension2( 20 * 0.35, 3.6 * 0.35 );
+
+/**
+ * A ZoomButtonGroup that shows a "+" and "-" sign for the button icons.
+ *
+ * @author Sam Reid (PhET Interactive Simulations)
+ */
+class PlusMinusZoomButtonGroup extends ZoomButtonGroup {
+
+  /**
+   * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out
+   * @param {Object} [options]
+   */
+  constructor( zoomLevelProperty, options ) {
+    options = merge( {
+      buttonOptions: {
+        xMargin: 9,
+        yMargin: 10
+      },
+      iconOptions: {
+        size: DEFAULT_SIZE
+      }
+    }, options );
+
+    // Make sure the + and - have the same dimensions
+    const alignGroup = new AlignGroup();
+    const plusMinusNodeOptions = merge( { size: DEFAULT_SIZE }, options.iconOptions );
+    const alignBoxOptions = { group: alignGroup };
+
+    super(
+      new AlignBox( new PlusNode( plusMinusNodeOptions ), alignBoxOptions ),
+      new AlignBox( new MinusNode( plusMinusNodeOptions ), alignBoxOptions ),
+      zoomLevelProperty, options
+    );
+  }
+}
+
+sceneryPhet.register( 'PlusMinusZoomButtonGroup', PlusMinusZoomButtonGroup );
+export default PlusMinusZoomButtonGroup;

js/ZoomButtonGroup.js

@@ -10,25 +10,24 @@
 import NumberProperty from '../../axon/js/NumberProperty.js';
 import merge from '../../phet-core/js/merge.js';
 import LayoutBox from '../../scenery/js/nodes/LayoutBox.js';
-import Text from '../../scenery/js/nodes/Text.js';
+import Node from '../../scenery/js/nodes/Node.js';
 import ButtonNode from '../../sun/js/buttons/ButtonNode.js';
 import RectangularPushButton from '../../sun/js/buttons/RectangularPushButton.js';
 import Tandem from '../../tandem/js/Tandem.js';
-import MathSymbols from './MathSymbols.js';
-import PhetFont from './PhetFont.js';
 import sceneryPhet from './sceneryPhet.js';
 
-// constants
-const DEFAULT_FONT = new PhetFont( 16 );
-
 class ZoomButtonGroup extends LayoutBox {
 
   /**
+   * @param {Node} zoomInIcon
+   * @param {Node} zoomOutIcon
    * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out
    * @param {Object} [options]
    */
-  constructor( zoomLevelProperty, options ) {
+  constructor( zoomInIcon, zoomOutIcon, zoomLevelProperty, options ) {
 
+    assert && assert(zoomInIcon instanceof Node,'icons are required in the base class');
+    assert && assert(zoomOutIcon instanceof Node,'icons are required in the base class');
     assert && assert( zoomLevelProperty instanceof NumberProperty, 'invalid zoomLevelProperty' );
     assert && assert( zoomLevelProperty.range, 'missing zoomLevelProperty.range' );
 
@@ -55,11 +54,6 @@ class ZoomButtonGroup extends LayoutBox {
         fireOnHoldInterval: 250 // ms
       },
 
-      // Text options, for the + and - buttons
-      textOptions: {
-        font: DEFAULT_FONT
-      },
-
       // LayoutBox options
       spacing: 0,
       orientation: 'horizontal',
@@ -74,7 +68,7 @@ class ZoomButtonGroup extends LayoutBox {
 
     // zoom in
     const zoomInButton = new RectangularPushButton( merge( {}, options.buttonOptions, {
-      content: new Text( MathSymbols.PLUS, options.textOptions ),
+      content: zoomInIcon,
       listener: () => {
         zoomLevelProperty.value += options.zoomInDelta;
       },
@@ -83,7 +77,7 @@ class ZoomButtonGroup extends LayoutBox {
 
     // zoom out
     const zoomOutButton = new RectangularPushButton( merge( {}, options.buttonOptions, {
-      content: new Text( MathSymbols.MINUS, options.textOptions ),
+      content: zoomOutIcon,
       listener: () => {
         zoomLevelProperty.value += options.zoomOutDelta;
       },