samreid
commented
1 year ago This implementation is working OK:
```diff
Subject: [PATCH] Update API files, see https://github.com/phetsims/scenery-phet/issues/793
---
Index: main/studio/js/PhetioElementView.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/main/studio/js/PhetioElementView.ts b/main/studio/js/PhetioElementView.ts
--- a/main/studio/js/PhetioElementView.ts (revision 4651e5748f6e86526c2e3b25d7723a4cea2a3e22)
+++ b/main/studio/js/PhetioElementView.ts (date 1673814289164)
@@ -462,7 +462,7 @@
*/
const creators: Record = {
- ObjectIO( phetioElement ) {
+ ObjectIO( phetioElement: PhetioElement, phetioElementView: PhetioElementView ) {
const div = document.createElement( 'div' );
div.id = window.phetio.PhetioIDUtils.getDOMElementID( phetioElement.phetioID );
@@ -803,110 +803,7 @@
studio.typesHandler.phetioTypes[ phetioElement.typeName ].parameterTypes,
[ 'BooleanIO', 'StringIO', 'NullableIO', 'NullableIO' ]
).length === 0 ) {
-
- const MAX_ROWS = 30;
- const MAX_COLS = 100;
- const MIN_COLS = 20; // default for most browsers
-
- const setterContainer = document.createElement( 'div' );
-
- const getValueButton = document.createElement( 'button' );
- getValueButton.innerHTML = 'Get Value ↓';
- getValueButton.style.marginRight = '10px';
- getValueButton.addEventListener( 'click', () => getValueFunction() );
- setterContainer.appendChild( getValueButton );
-
- const setValueButton = document.createElement( 'button' );
- setValueButton.innerHTML = 'Set Value ↑';
- setValueButton.style.marginRight = '10px';
- setValueButton.addEventListener( 'click', () => {
- const jsonValue = getTextAreaAsJSON();
- if ( jsonValue !== PHET_IO_ELEMENT_NON_JSON_MARKER ) {
- phetioElementView.invoke( phetioElement.phetioID, 'setValue', [ jsonValue ] );
- }
- } );
- setterContainer.appendChild( setValueButton );
-
- const copyCodeButton = document.createElement( 'button' );
- copyCodeButton.innerHTML = 'Copy Set Value Code';
- copyCodeButton.title = 'Copy to clipboard a line of code that invokes this customization on phetioClient.';
- copyCodeButton.addEventListener( 'click', async () => {
-
- const copyText = async () => {
-
- const jsonValue = getTextAreaAsJSON();
- if ( jsonValue !== PHET_IO_ELEMENT_NON_JSON_MARKER ) {
-
- const setValueCommand = `phetioClient.invoke( '${phetioElement.phetioID}', 'setValue', [ ${JSON.stringify( jsonValue, null, 2 )} ] );`;
- await navigator.clipboard.writeText( setValueCommand );
- }
- };
-
- // If there isn't anything in the text box, use the current value by getting it first.
- if ( textarea.value.trim().length === 0 ) {
- getValueFunction( copyText );
- }
- else {
- await copyText();
- }
- } );
- setterContainer.appendChild( copyCodeButton );
-
- setterContainer.appendChild( document.createElement( 'br' ) );
-
- const textarea = document.createElement( 'textarea' );
- textarea.rows = 1;
-
- setterContainer.appendChild( textarea );
-
- // This text is used to ensure that we don't continue with setting the value if JSON is invalid.
- const PHET_IO_ELEMENT_NON_JSON_MARKER = 'INVALID MARKER STRING';
-
- const getTextAreaAsJSON = () => {
- try {
- let value = textarea.value.trim();
-
- // ".1" is not valid JSON, so hack it out to 0.1!
- if ( value.startsWith( '.' ) && !isNaN( parseFloat( value ) ) ) {
- value = `0${value}`;
- }
- return JSON.parse( value );
- }
- catch( e ) {
- alert( `Invalid JSON value: ${textarea.value}` );
- return PHET_IO_ELEMENT_NON_JSON_MARKER;
- }
- };
-
- // Callback may be undefined
- const getValueFunction = ( callback?: () => void ) => {
- phetioElementView.invoke( phetioElement.phetioID, 'getValue', [], value => {
- const formatted = JSON.stringify( value, null, 2 );
- const rowsCols = getRowsCols( formatted );
-
- // Before setting rows/cols again, make sure that any user-input resizing is removed
- textarea.style.removeProperty( 'width' );
- textarea.style.removeProperty( 'height' );
-
- textarea.value = formatted;
- textarea.rows = Math.min( MAX_ROWS, rowsCols.rows );
- textarea.cols = Math.min( MAX_COLS, Math.max( MIN_COLS, rowsCols.cols + 1 ) );
- callback && callback();
- } );
- };
-
- // Resize rows based on the input provided, this will cancel out whatever the current height is (if user changed it)
- textarea.addEventListener( 'input', () => {
- const rowsCols = getRowsCols( textarea.value );
- if ( rowsCols.rows <= MAX_ROWS ) {
-
- // Before setting rows/cols again, make sure that any user-input resizing is removed
- textarea.style.removeProperty( 'height' );
- textarea.rows = rowsCols.rows;
- }
- } );
-
- div.appendChild( setterContainer );
+ showGetSetButtons( phetioElement, phetioElementView, div );
}
return div;
@@ -1003,7 +900,7 @@
if ( creators[ typeName ] ) {
return creators[ typeName ];
}
- else if ( allTypes[ typeName ].parameterTypes ) {
+ else if ( allTypes[ typeName ].parameterTypes && allTypes[ typeName ].parameterTypes!.length > 0 ) {
// parametric types look like PropertyIO, map them to "PropertyIO" to see if there is a creator for
// the general, non-parameterized type.
@@ -1014,7 +911,125 @@
}
}
+ // TODO: What if the IOType has getValue/setValue/getValidationError, but its parent class is supposed to add more functions?, see https://github.com/phetsims/circuit-construction-kit-common/issues/929
+ if (
+ allTypes[ typeName ].methods.getValue &&
+ allTypes[ typeName ].methods.setValue &&
+ allTypes[ typeName ].methods.getValidationError ) {
+ return ( phetioElement, phetioElementView ) => {
+ const div = creators.ObjectIO( phetioElement, phetioElementView );
+ showGetSetButtons( phetioElement, phetioElementView, div );
+ return div;
+ };
+ }
+
return getCreator( allTypes[ typeName ].supertype!, allTypes );
};
+function showGetSetButtons( phetioElement: PhetioElement, phetioElementView: PhetioElementView, div: HTMLElement ): void {
+ const MAX_ROWS = 30;
+ const MAX_COLS = 100;
+ const MIN_COLS = 20; // default for most browsers
+
+ const setterContainer = document.createElement( 'div' );
+
+ const getValueButton = document.createElement( 'button' );
+ getValueButton.innerHTML = 'Get Value ↓';
+ getValueButton.style.marginRight = '10px';
+ getValueButton.addEventListener( 'click', () => getValueFunction() );
+ setterContainer.appendChild( getValueButton );
+
+ const setValueButton = document.createElement( 'button' );
+ setValueButton.innerHTML = 'Set Value ↑';
+ setValueButton.style.marginRight = '10px';
+ setValueButton.addEventListener( 'click', () => {
+ const jsonValue = getTextAreaAsJSON();
+ if ( jsonValue !== PHET_IO_ELEMENT_NON_JSON_MARKER ) {
+ phetioElementView.invoke( phetioElement.phetioID, 'setValue', [ jsonValue ] );
+ }
+ } );
+ setterContainer.appendChild( setValueButton );
+
+ const copyCodeButton = document.createElement( 'button' );
+ copyCodeButton.innerHTML = 'Copy Set Value Code';
+ copyCodeButton.title = 'Copy to clipboard a line of code that invokes this customization on phetioClient.';
+ copyCodeButton.addEventListener( 'click', async () => {
+
+ const copyText = async () => {
+
+ const jsonValue = getTextAreaAsJSON();
+ if ( jsonValue !== PHET_IO_ELEMENT_NON_JSON_MARKER ) {
+
+ const setValueCommand = `phetioClient.invoke( '${phetioElement.phetioID}', 'setValue', [ ${JSON.stringify( jsonValue, null, 2 )} ] );`;
+ await navigator.clipboard.writeText( setValueCommand );
+ }
+ };
+
+ // If there isn't anything in the text box, use the current value by getting it first.
+ if ( textarea.value.trim().length === 0 ) {
+ getValueFunction( copyText );
+ }
+ else {
+ await copyText();
+ }
+ } );
+ setterContainer.appendChild( copyCodeButton );
+
+ setterContainer.appendChild( document.createElement( 'br' ) );
+
+ const textarea = document.createElement( 'textarea' );
+ textarea.rows = 1;
+
+ setterContainer.appendChild( textarea );
+
+ // This text is used to ensure that we don't continue with setting the value if JSON is invalid.
+ const PHET_IO_ELEMENT_NON_JSON_MARKER = 'INVALID MARKER STRING';
+
+ const getTextAreaAsJSON = () => {
+ try {
+ let value = textarea.value.trim();
+
+ // ".1" is not valid JSON, so hack it out to 0.1!
+ if ( value.startsWith( '.' ) && !isNaN( parseFloat( value ) ) ) {
+ value = `0${value}`;
+ }
+ return JSON.parse( value );
+ }
+ catch( e ) {
+ alert( `Invalid JSON value: ${textarea.value}` );
+ return PHET_IO_ELEMENT_NON_JSON_MARKER;
+ }
+ };
+
+ // Callback may be undefined
+ const getValueFunction = ( callback?: () => void ) => {
+ phetioElementView.invoke( phetioElement.phetioID, 'getValue', [], value => {
+ const formatted = JSON.stringify( value, null, 2 );
+ const rowsCols = getRowsCols( formatted );
+
+ // Before setting rows/cols again, make sure that any user-input resizing is removed
+ textarea.style.removeProperty( 'width' );
+ textarea.style.removeProperty( 'height' );
+
+ textarea.value = formatted;
+ textarea.rows = Math.min( MAX_ROWS, rowsCols.rows );
+ textarea.cols = Math.min( MAX_COLS, Math.max( MIN_COLS, rowsCols.cols + 1 ) );
+ callback && callback();
+ } );
+ };
+
+ // Resize rows based on the input provided, this will cancel out whatever the current height is (if user changed it)
+ textarea.addEventListener( 'input', () => {
+ const rowsCols = getRowsCols( textarea.value );
+ if ( rowsCols.rows <= MAX_ROWS ) {
+
+ // Before setting rows/cols again, make sure that any user-input resizing is removed
+ textarea.style.removeProperty( 'height' );
+ textarea.rows = rowsCols.rows;
+ }
+ } );
+
+ div.appendChild( setterContainer );
+}
+
export default PhetioElementView;
Index: main/circuit-construction-kit-common/js/model/Circuit.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/main/circuit-construction-kit-common/js/model/Circuit.ts b/main/circuit-construction-kit-common/js/model/Circuit.ts
--- a/main/circuit-construction-kit-common/js/model/Circuit.ts (revision cb18ce3b099a3f9217d372ec79af24ecc73522c5)
+++ b/main/circuit-construction-kit-common/js/model/Circuit.ts (date 1673674841671)
@@ -50,6 +50,10 @@
import TEmitter from '../../../axon/js/TEmitter.js';
import OrIO from '../../../tandem/js/types/OrIO.js';
import IntentionalAny from '../../../phet-core/js/types/IntentionalAny.js';
+import IOType from '../../../tandem/js/types/IOType.js';
+import StringIO from '../../../tandem/js/types/StringIO.js';
+import VoidIO from '../../../tandem/js/types/VoidIO.js';
+import PhetioObject from '../../../tandem/js/PhetioObject.js';
// constants
const SNAP_RADIUS = 30; // For two vertices to join together, they must be this close, in view coordinates
@@ -79,7 +83,7 @@
type Pair = { v1: Vertex; v2: Vertex };
-export default class Circuit {
+export default class Circuit extends PhetioObject {
private readonly viewTypeProperty: Property;
public readonly addRealBulbsProperty: Property;
private readonly blackBoxStudy: boolean;
@@ -152,6 +156,12 @@
public constructor( viewTypeProperty: Property, addRealBulbsProperty: Property, tandem: Tandem,
providedOptions: CircuitOptions ) {
+ super( {
+ tandem: tandem,
+ phetioType: CircuitStateIO,
+ phetioState: false
+ } );
+
this.viewTypeProperty = viewTypeProperty;
this.addRealBulbsProperty = addRealBulbsProperty;
@@ -1546,7 +1556,7 @@
}
// only works in unbuilt mode
- private toString(): string {
+ public override toString(): string {
return this.circuitElements.map( c => c.constructor.name ).join( ', ' );
}
@@ -1564,4 +1574,44 @@
}
}
+const CircuitStateIO = new IOType( 'CircuitStateIO', {
+ valueType: Circuit,
+ methods: {
+ getValue: {
+ returnType: StringIO,
+ parameterTypes: [],
+ implementation: function( this: Circuit ) {
+ const state = phet.phetio.phetioEngine.phetioStateEngine.getState();
+ const prunedState = _.pickBy( state, ( value, key ) => key.startsWith( this.phetioID ) );
+ return JSON.stringify( prunedState, null, 2 );
+ },
+ documentation: 'Gets the current value.'
+ },
+ getValidationError: {
+ returnType: NullableIO( StringIO ),
+ parameterTypes: [ StringIO ],
+ implementation: function( value ) {
+ try {
+ JSON.parse( value );
+ }
+ catch( e: IntentionalAny ) {
+ return e.message;
+ }
+ return null;
+ },
+ documentation: 'Checks to see if a proposed value is valid. Returns the first validation error, or null if the value is valid.'
+ },
+
+ setValue: {
+ returnType: VoidIO,
+ parameterTypes: [ StringIO ],
+ documentation: 'hello',
+ implementation: function( state: string ) {
+ const test = JSON.parse( state );
+ phet.phetio.phetioEngine.phetioStateEngine.setState( test, Tandem.ROOT );
+ }
+ }
+ }
+} );
+
circuitConstructionKitCommon.register( 'Circuit', Circuit );
\ No newline at end of file
```
The proposed approach utilizes the existing interface for PhET-iO statefulness and makes use of the PhET-iO Group. This allows for ease of maintenance through migration engines. However, there is some complexity in that it currently does not allow for creating a circuit in the first screen and then loading it in the second screen. Additionally, it saves the entire state of the circuit, including the selected circuit element, which may or may not be desired.
Also, it relies on the setting of partial state, which is used in other places such as gravity and orbits for restoring scenes, but is not very widely used.
arouinfar
matthew-blackman
There isn’t any clear way for clients to populate specific circuits into the play area. They can get/set state, but that is the state for the ENTIRE sim, not just the circuit elements. We would probably want to do something similar for the tracks in ESP. Model.circuit or model.circuit.circuitElements could have a “Copy Set Value Code” button so instructional designers could extract the appropriate command to be used later in the wrapper.
We are not proposing a change that is visible in PhET brand or creating a circuit language that is human-readable.
Example use case: A client should be able to add custom buttons to load specific circuits, eg 'SERIES CIRCUIT' and 'PARALLEL CIRCUIT'. In creating the invoke statements that these buttons would trigger, the client should be able to copy/paste from studio using model.circuit or model.circuit.circuitElemnents.
@samreid and I discussed that we will not be able to leverage the preexisting get/set interface that works for axon properties, and may need to either 1) build a similar UI to appear within studio or 2) rely on PhET-iO clients running a command in the dev tools.
This is related to https://github.com/phetsims/circuit-construction-kit-common/issues/151, and the conversation was reopened during review of https://github.com/phetsims/circuit-construction-kit-common/issues/917