Skip to content

Commit

Permalink
factor out similar options and update documentation, #29
Browse files Browse the repository at this point in the history
  • Loading branch information
@zepumph
zepumph committed Mar 31, 2023
1 parent d6689d1 commit 850a7ac
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 41 deletions.
58 changes: 30 additions & 28 deletions js/lab/view/CardCreatorNode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
// Copyright 2022-2023, University of Colorado Boulder

/**
* A node that looks like a CardNode that creates a CardNode when pressed.
* A node that looks like a CardNode that creates a CardNode when pressed. (A card factor)
*
* Supports creating both a SymbolCardNode and a NumberCardNode, as well as handling the creator-pattern drag forwarding.
*
* @author Chris Klusendorf (PhET Interactive Simulations)
*/

import { DragListener, Node, PressListenerEvent } from '../../../../scenery/js/imports.js';
import numberSuiteCommon from '../../numberSuiteCommon.js';
import SymbolCardNode, { SymbolType } from './SymbolCardNode.js';
import SymbolCardNode, { SymbolCardNodeOptions, SymbolType } from './SymbolCardNode.js';
import LabScreenView from './LabScreenView.js';
import Easing from '../../../../twixt/js/Easing.js';
import Animation from '../../../../twixt/js/Animation.js';
import CardNode from './CardNode.js';
import TProperty from '../../../../axon/js/TProperty.js';
import Vector2 from '../../../../dot/js/Vector2.js';
import NumberCardNode from './NumberCardNode.js';
import NumberCardNode, { NumberCardNodeOptions } from './NumberCardNode.js';
import NumberSuiteCommonPreferences from '../../common/model/NumberSuiteCommonPreferences.js';
import CountingCommonConstants from '../../../../counting-common/js/common/CountingCommonConstants.js';
import { combineOptions } from '../../../../phet-core/js/optionize.js';

type SelfOptions = {
symbolType?: SymbolType | null;
number?: number | null;
};
export type CardNodeOptions = SelfOptions;

//TODO https://github.com/phetsims/number-suite-common/issues/29 add comments
class CardCreatorNode extends Node {

public constructor( screenView: LabScreenView<NumberSuiteCommonPreferences>,
Expand All @@ -34,25 +36,25 @@ class CardCreatorNode extends Node {
super();

let iconNode: Node;
const iconOptions = {
includeDragListener: false,
dragBoundsProperty: screenView.symbolCardBoundsProperty,
homePosition: Vector2.ZERO
};

if ( options.symbolType ) {
assert && assert( !options.number, 'symbolType and number cannot both be provided' );

iconNode = new SymbolCardNode( {
symbolType: options.symbolType,
includeDragListener: false,
dragBoundsProperty: screenView.symbolCardBoundsProperty,
homePosition: Vector2.ZERO
} );
iconNode = new SymbolCardNode( combineOptions<SymbolCardNodeOptions>( {
symbolType: options.symbolType
}, iconOptions ) );
}
else {
assert && assert( options.number, 'symbolType or number must be provided' );

iconNode = new NumberCardNode( {
number: options.number!,
includeDragListener: false,
dragBoundsProperty: screenView.objectCountingAreaBoundsProperty,
homePosition: Vector2.ZERO
} );
iconNode = new NumberCardNode( combineOptions<NumberCardNodeOptions>( {
number: options.number!
}, iconOptions ) );
}

iconNode.addInputListener( DragListener.createForwardingListener( ( event: PressListenerEvent ) => {
Expand Down Expand Up @@ -92,30 +94,30 @@ class CardCreatorNode extends Node {
}
};

const cardNodeOptions = {
dragBoundsProperty: screenView.symbolCardBoundsProperty,
dropListener: dropListener,
homePosition: globalOrigin
};

if ( options.symbolType ) {
assert && assert( !options.number, 'symbolType and number cannot both be provided' );

countProperty = contentToCountPropertyMap.get( options.symbolType )!;
assert && assert( countProperty, 'countProperty for inequality symbol not found: ' + options.symbolType );

cardNode = new SymbolCardNode( {
symbolType: options.symbolType,
dragBoundsProperty: screenView.symbolCardBoundsProperty,
dropListener: dropListener,
homePosition: globalOrigin
} );
cardNode = new SymbolCardNode( combineOptions<SymbolCardNodeOptions>( {
symbolType: options.symbolType
}, cardNodeOptions ) );
}
else {
assert && assert( options.number, 'symbolType or number must be provided' );

countProperty = contentToCountPropertyMap.get( options.number! )!;

cardNode = new NumberCardNode( {
number: options.number!,
dragBoundsProperty: screenView.numberCardBoundsProperty,
dropListener: dropListener,
homePosition: globalOrigin
} );
cardNode = new NumberCardNode( combineOptions<NumberCardNodeOptions>( {
number: options.number!
}, cardNodeOptions ) );
}

countProperty.value++;
Expand Down
23 changes: 11 additions & 12 deletions js/lab/view/LabScreenView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ import type SymbolType from './SymbolType.js';
import Multilink from '../../../../axon/js/Multilink.js';
import NumberSuiteCommonPreferences from '../../common/model/NumberSuiteCommonPreferences.js';

const TEN_FRAME_CREATOR_PANEL_LEFT = 143;
const CREATOR_NODE_SPACING = 18;

class LabScreenView<T extends NumberSuiteCommonPreferences> extends ScreenView {
private readonly model: LabModel;

Expand Down Expand Up @@ -67,10 +70,6 @@ class LabScreenView<T extends NumberSuiteCommonPreferences> extends ScreenView {
this.pieceLayer = new Node();
const backgroundDragTargetNode = new Rectangle( this.layoutBounds ); // see CountingAreaNode for doc

//TODO https://github.com/phetsims/number-suite-common/issues/29 make file constants?
const tenFrameCreatorPanelLeft = 143;
const creatorNodeSpacing = 18;

this.numberCardCreatorCarousel = new NumberCardCreatorCarousel( this );
this.numberCardCreatorCarousel.centerX = this.layoutBounds.centerX;
this.addChild( this.numberCardCreatorCarousel );
Expand All @@ -79,7 +78,7 @@ class LabScreenView<T extends NumberSuiteCommonPreferences> extends ScreenView {
this.symbolCardCreatorPanel = new SymbolCardCreatorPanel( model, this, symbolTypes );

this.tenFrameCreatorPanel = new TenFrameCreatorPanel( model, this );
this.tenFrameCreatorPanel.left = tenFrameCreatorPanelLeft;
this.tenFrameCreatorPanel.left = TEN_FRAME_CREATOR_PANEL_LEFT;
this.addChild( this.tenFrameCreatorPanel );

this.numberCardBoundsProperty = new DerivedProperty( [ this.visibleBoundsProperty ], visibleBounds => {
Expand Down Expand Up @@ -159,11 +158,11 @@ class LabScreenView<T extends NumberSuiteCommonPreferences> extends ScreenView {

preferences.showLabOnesProperty.link( showLabOnes => {
if ( showLabOnes ) {
this.tenFrameCreatorPanel.left = tenFrameCreatorPanelLeft;
this.tenFrameCreatorPanel.left = TEN_FRAME_CREATOR_PANEL_LEFT;
}
else {
this.model.onesCountingArea.reset();
this.tenFrameCreatorPanel.left = tenFrameCreatorPanelLeft + hideOnesCountingAreaNodeAdjustment;
this.tenFrameCreatorPanel.left = TEN_FRAME_CREATOR_PANEL_LEFT + hideOnesCountingAreaNodeAdjustment;
}
this.onesCountingAreaNode.visible = showLabOnes;
} );
Expand All @@ -177,11 +176,11 @@ class LabScreenView<T extends NumberSuiteCommonPreferences> extends ScreenView {
this.ballCountingAreaNode.countingObjectCreatorPanel, this.onesCountingAreaNode.countingObjectCreatorPanel ],
( tenFrameCreatorNodeProxy, dogCreatorNodeProxy, appleCreatorNodeProxy, butterflyCreatorNodeProxy,
ballsCreatorNodeProxy, onesCreatorNodeProxy ) => {
dogCreatorNodeProxy.left = tenFrameCreatorNodeProxy.right + creatorNodeSpacing;
appleCreatorNodeProxy.left = dogCreatorNodeProxy.right + creatorNodeSpacing;
butterflyCreatorNodeProxy.left = appleCreatorNodeProxy.right + creatorNodeSpacing;
ballsCreatorNodeProxy.left = butterflyCreatorNodeProxy.right + creatorNodeSpacing;
onesCreatorNodeProxy.left = ballsCreatorNodeProxy.right + creatorNodeSpacing;
dogCreatorNodeProxy.left = tenFrameCreatorNodeProxy.right + CREATOR_NODE_SPACING;
appleCreatorNodeProxy.left = dogCreatorNodeProxy.right + CREATOR_NODE_SPACING;
butterflyCreatorNodeProxy.left = appleCreatorNodeProxy.right + CREATOR_NODE_SPACING;
ballsCreatorNodeProxy.left = butterflyCreatorNodeProxy.right + CREATOR_NODE_SPACING;
onesCreatorNodeProxy.left = ballsCreatorNodeProxy.right + CREATOR_NODE_SPACING;
} );

this.countingObjectTypeToCountingAreaNode = new Map();
Expand Down
1 change: 0 additions & 1 deletion js/lab/view/SymbolCardNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { Text } from '../../../../scenery/js/imports.js';
import numberSuiteCommon from '../../numberSuiteCommon.js';
import CardNode, { CardNodeOptions } from './CardNode.js';

//TODO https://github.com/phetsims/number-suite-common/issues/29 This should be in its own file, not exported as a type here.
export type SymbolType = '<' | '=' | '>' | '+' | '-';
type SelfOptions = {
symbolType: SymbolType;
Expand Down

0 comments on commit 850a7ac

Please sign in to comment.