@adcops/autocore-react 3.0.21 → 3.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/components/BlocklyEditor.d.ts +1 -0
  2. package/dist/components/BlocklyEditor.js +1 -1
  3. package/dist/components/TextInput.d.ts +2 -1
  4. package/dist/components/TextInput.js +1 -1
  5. package/dist/components/ValueInput.d.ts +2 -1
  6. package/dist/components/ValueInput.js +1 -1
  7. package/dist/hooks/adsHooks.d.ts +1 -1
  8. package/dist/hooks/adsHooks.js +1 -1
  9. package/dist/hooks/useScaledValue.js +1 -1
  10. package/package.json +1 -1
  11. package/src/components/BlocklyEditor.tsx +12 -5
  12. package/src/components/TextInput.tsx +6 -3
  13. package/src/components/ValueInput.tsx +6 -4
  14. package/src/hooks/adsHooks.tsx +9 -3
  15. package/src/hooks/useScaledValue.tsx +11 -7
package/dist/components/BlocklyEditor.d.ts CHANGED
@@ -70,6 +70,7 @@ interface BlocklyEditorState {
70
70
  * a parent container with this class name for auto-sizing to work!
71
71
  */
72
72
  parentWidth: number;
73
+ initialXmlLoaded: boolean;
73
74
  }
74
75
  /**
75
76
  * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
package/dist/components/BlocklyEditor.js CHANGED
@@ -1 +1 @@
1
- import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{pythonGenerator}from"blockly/python";import{BlocklyWorkspace}from"react-blockly";import React from"react";import"./BlocklyEditor.css";export class BlocklyEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"ref",{enumerable:!0,configurable:!0,writable:!0,value:React.createRef()}),Object.defineProperty(this,"updateParentSize",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(this.ref.current){let e=0,n=0,t=this.ref.current.parentElement;for(;null!=t&&(e=t.offsetWidth,n=t.offsetHeight,!(t.className.indexOf("blockly-container")>=0));)t=t.parentElement;e<300&&(e=300),n<300&&(n=300),this.setState({parentWidth:.9*e+this.props.widthAdjustment,parentHeight:.9*n+this.props.heightAdjustment})}}}),Object.defineProperty(this,"onWorkspaceChanged",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const n=pythonGenerator.workspaceToCode(e);this.setState({code:n}),void 0!==this.props.onWorkspaceChanged&&null!==this.props.onWorkspaceChanged&&this.props.onWorkspaceChanged(),void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(n)}}),Object.defineProperty(this,"setXml",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({xml:e}),void 0!==this.props.onXmlChanged&&null!==this.props.onXmlChanged&&this.props.onXmlChanged(e)}}),Object.defineProperty(this,"onInject",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),this.state={name:"",xml:"",code:"",parentWidth:0,parentHeight:0}}componentDidMount(){this.updateParentSize(),window.addEventListener("resize",this.updateParentSize)}componentDidUpdate(e){}componentWillUnmount(){window.removeEventListener("resize",this.updateParentSize)}render(){return _jsx(_Fragment,{children:_jsx(BlocklyWorkspace,{className:"fill-height",toolboxConfiguration:this.props.toolbox,initialXml:this.props.initialXml,onWorkspaceChange:this.onWorkspaceChanged,onXmlChange:this.setXml,onInject:this.onInject,workspaceConfiguration:{grid:{spacing:20,length:3,colour:"#ccc",snap:!0}}})})}}Object.defineProperty(BlocklyEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{initialXml:void 0,widthAdjustment:0,heightAdjustment:0,onWorkspaceChanged:void 0,onXmlChanged:void 0,onCodeChanged:void 0}});export default BlocklyEditor;export const createCustomToolbox=(e,n)=>{const t="\x3c!-- END: Built-in Blockly Blocks //--\x3e",a=StandardToolbox.indexOf("\x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e"),l=StandardToolbox.indexOf(t);if(-1===a||-1===l)throw new Error("Could not find markers in standard toolbox");return StandardToolbox.slice(0,a)+(e||"")+StandardToolbox.slice(a,l+39)+(n||"")+StandardToolbox.slice(l+39+1)};export const StandardToolbox='\n <xml id="toolbox" style="display: none">\n \x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e\n <category name="Logic" categorystyle="logic_category">\n <block type="controls_if"></block>\n <block type="logic_compare"></block>\n <block type="logic_operation"></block>\n <block type="logic_negate"></block>\n <block type="logic_boolean"></block>\n <block type="logic_null" disabled="true"></block>\n <block type="logic_ternary"></block>\n </category>\n <category name="Loops" categorystyle="loop_category">\n <block type="controls_repeat_ext">\n <value name="TIMES">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n </block>\n <block type="controls_repeat" disabled="true"></block>\n <block type="controls_whileUntil"></block>\n <block type="controls_for">\n <value name="FROM">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="TO">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n <value name="BY">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n <block type="controls_forEach"></block>\n <block type="controls_flow_statements"></block>\n </category>\n <category name="Math" categorystyle="math_category">\n <block type="math_number" gap="32">\n <field name="NUM">123</field>\n </block>\n <block type="math_arithmetic">\n <value name="A">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="B">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n <block type="math_single">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">9</field>\n </shadow>\n </value>\n </block>\n <block type="math_trig">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">45</field>\n </shadow>\n </value>\n </block>\n <block type="math_constant"></block>\n <block type="math_number_property">\n <value name="NUMBER_TO_CHECK">\n <shadow type="math_number">\n <field name="NUM">0</field>\n </shadow>\n </value>\n </block>\n <block type="math_round">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">3.1</field>\n </shadow>\n </value>\n </block>\n <block type="math_on_list"></block>\n <block type="math_modulo">\n <value name="DIVIDEND">\n <shadow type="math_number">\n <field name="NUM">64</field>\n </shadow>\n </value>\n <value name="DIVISOR">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n </block>\n <block type="math_constrain">\n <value name="VALUE">\n <shadow type="math_number">\n <field name="NUM">50</field>\n </shadow>\n </value>\n <value name="LOW">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="HIGH">\n <shadow type="math_number">\n <field name="NUM">100</field>\n </shadow>\n </value>\n </block>\n <block type="math_random_int">\n <value name="FROM">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="TO">\n <shadow type="math_number">\n <field name="NUM">100</field>\n </shadow>\n </value>\n </block>\n <block type="math_random_float"></block>\n <block type="math_atan2">\n <value name="X">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="Y">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n </category>\n <category name="Text" categorystyle="text_category">\n <block type="text"></block>\n <block type="text_multiline"></block>\n <block type="text_join"></block>\n <block type="text_append">\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_length">\n <value name="VALUE">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_isEmpty">\n <value name="VALUE">\n <shadow type="text">\n <field name="TEXT"></field>\n </shadow>\n </value>\n </block>\n <block type="text_indexOf">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n <value name="FIND">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_charAt">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n </block>\n <block type="text_getSubstring">\n <value name="STRING">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n </block>\n <block type="text_changeCase">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_trim">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_count">\n <value name="SUB">\n <shadow type="text"></shadow>\n </value>\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_replace">\n <value name="FROM">\n <shadow type="text"></shadow>\n </value>\n <value name="TO">\n <shadow type="text"></shadow>\n </value>\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_reverse">\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <label text="Input/Output:" web-class="ioLabel"></label>\n <block type="text_print">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_prompt_ext">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n </category>\n <category name="Lists" categorystyle="list_category">\n <block type="lists_create_with">\n <mutation items="0"></mutation>\n </block>\n <block type="lists_create_with"></block>\n <block type="lists_repeat">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">5</field>\n </shadow>\n </value>\n </block>\n <block type="lists_length"></block>\n <block type="lists_isEmpty"></block>\n <block type="lists_indexOf">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_getIndex">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_setIndex">\n <value name="LIST">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_getSublist">\n <value name="LIST">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_split">\n <value name="DELIM">\n <shadow type="text">\n <field name="TEXT">,</field>\n </shadow>\n </value>\n </block>\n <block type="lists_sort"></block>\n <block type="lists_reverse"></block>\n </category>\n <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>\n <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>\n\n \x3c!-- END: Built-in Blockly Blocks //--\x3e\n\n </xml>\n';
1
+ import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{pythonGenerator}from"blockly/python";import{BlocklyWorkspace}from"react-blockly";import React from"react";import"./BlocklyEditor.css";export class BlocklyEditor extends React.Component{constructor(e){super(e),Object.defineProperty(this,"ref",{enumerable:!0,configurable:!0,writable:!0,value:React.createRef()}),Object.defineProperty(this,"updateParentSize",{enumerable:!0,configurable:!0,writable:!0,value:()=>{if(this.ref.current){let e=0,n=0,t=this.ref.current.parentElement;for(;null!=t&&(e=t.offsetWidth,n=t.offsetHeight,!(t.className.indexOf("blockly-container")>=0));)t=t.parentElement;e<300&&(e=300),n<300&&(n=300),this.setState({parentWidth:.9*e+this.props.widthAdjustment,parentHeight:.9*n+this.props.heightAdjustment})}}}),Object.defineProperty(this,"onWorkspaceChanged",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const n=pythonGenerator.workspaceToCode(e);this.setState({code:n}),void 0!==this.props.onWorkspaceChanged&&null!==this.props.onWorkspaceChanged&&this.props.onWorkspaceChanged(),void 0!==this.props.onCodeChanged&&null!==this.props.onCodeChanged&&this.props.onCodeChanged(n)}}),Object.defineProperty(this,"setXml",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.props.onXmlChanged&&this.props.onXmlChanged(e),this.setState({xml:e,initialXmlLoaded:!0})}}),Object.defineProperty(this,"onInject",{enumerable:!0,configurable:!0,writable:!0,value:e=>{}}),this.state={name:"",xml:"",code:"",parentWidth:0,parentHeight:0,initialXmlLoaded:!1}}componentDidMount(){this.updateParentSize(),window.addEventListener("resize",this.updateParentSize)}componentDidUpdate(e){}componentWillUnmount(){window.removeEventListener("resize",this.updateParentSize)}render(){return _jsx(_Fragment,{children:_jsx(BlocklyWorkspace,{className:"fill-height",toolboxConfiguration:this.props.toolbox,initialXml:this.props.initialXml,onWorkspaceChange:this.onWorkspaceChanged,onXmlChange:this.setXml,onInject:this.onInject,workspaceConfiguration:{grid:{spacing:20,length:3,colour:"#ccc",snap:!0}}})})}}Object.defineProperty(BlocklyEditor,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{initialXml:void 0,widthAdjustment:0,heightAdjustment:0,onWorkspaceChanged:void 0,onXmlChanged:void 0,onCodeChanged:void 0}});export default BlocklyEditor;export const createCustomToolbox=(e,n)=>{const t="\x3c!-- END: Built-in Blockly Blocks //--\x3e",a=StandardToolbox.indexOf("\x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e"),l=StandardToolbox.indexOf(t);if(-1===a||-1===l)throw new Error("Could not find markers in standard toolbox");return StandardToolbox.slice(0,a)+(e||"")+StandardToolbox.slice(a,l+39)+(n||"")+StandardToolbox.slice(l+39+1)};export const StandardToolbox='\n <xml id="toolbox" style="display: none">\n \x3c!-- BEGIN: Built-in Blockly Blocks //--\x3e\n <category name="Logic" categorystyle="logic_category">\n <block type="controls_if"></block>\n <block type="logic_compare"></block>\n <block type="logic_operation"></block>\n <block type="logic_negate"></block>\n <block type="logic_boolean"></block>\n <block type="logic_null" disabled="true"></block>\n <block type="logic_ternary"></block>\n </category>\n <category name="Loops" categorystyle="loop_category">\n <block type="controls_repeat_ext">\n <value name="TIMES">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n </block>\n <block type="controls_repeat" disabled="true"></block>\n <block type="controls_whileUntil"></block>\n <block type="controls_for">\n <value name="FROM">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="TO">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n <value name="BY">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n <block type="controls_forEach"></block>\n <block type="controls_flow_statements"></block>\n </category>\n <category name="Math" categorystyle="math_category">\n <block type="math_number" gap="32">\n <field name="NUM">123</field>\n </block>\n <block type="math_arithmetic">\n <value name="A">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="B">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n <block type="math_single">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">9</field>\n </shadow>\n </value>\n </block>\n <block type="math_trig">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">45</field>\n </shadow>\n </value>\n </block>\n <block type="math_constant"></block>\n <block type="math_number_property">\n <value name="NUMBER_TO_CHECK">\n <shadow type="math_number">\n <field name="NUM">0</field>\n </shadow>\n </value>\n </block>\n <block type="math_round">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">3.1</field>\n </shadow>\n </value>\n </block>\n <block type="math_on_list"></block>\n <block type="math_modulo">\n <value name="DIVIDEND">\n <shadow type="math_number">\n <field name="NUM">64</field>\n </shadow>\n </value>\n <value name="DIVISOR">\n <shadow type="math_number">\n <field name="NUM">10</field>\n </shadow>\n </value>\n </block>\n <block type="math_constrain">\n <value name="VALUE">\n <shadow type="math_number">\n <field name="NUM">50</field>\n </shadow>\n </value>\n <value name="LOW">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="HIGH">\n <shadow type="math_number">\n <field name="NUM">100</field>\n </shadow>\n </value>\n </block>\n <block type="math_random_int">\n <value name="FROM">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="TO">\n <shadow type="math_number">\n <field name="NUM">100</field>\n </shadow>\n </value>\n </block>\n <block type="math_random_float"></block>\n <block type="math_atan2">\n <value name="X">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n <value name="Y">\n <shadow type="math_number">\n <field name="NUM">1</field>\n </shadow>\n </value>\n </block>\n </category>\n <category name="Text" categorystyle="text_category">\n <block type="text"></block>\n <block type="text_multiline"></block>\n <block type="text_join"></block>\n <block type="text_append">\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_length">\n <value name="VALUE">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_isEmpty">\n <value name="VALUE">\n <shadow type="text">\n <field name="TEXT"></field>\n </shadow>\n </value>\n </block>\n <block type="text_indexOf">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n <value name="FIND">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_charAt">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n </block>\n <block type="text_getSubstring">\n <value name="STRING">\n <block type="variables_get">\n <field name="VAR">text</field>\n </block>\n </value>\n </block>\n <block type="text_changeCase">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_trim">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_count">\n <value name="SUB">\n <shadow type="text"></shadow>\n </value>\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_replace">\n <value name="FROM">\n <shadow type="text"></shadow>\n </value>\n <value name="TO">\n <shadow type="text"></shadow>\n </value>\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <block type="text_reverse">\n <value name="TEXT">\n <shadow type="text"></shadow>\n </value>\n </block>\n <label text="Input/Output:" web-class="ioLabel"></label>\n <block type="text_print">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n <block type="text_prompt_ext">\n <value name="TEXT">\n <shadow type="text">\n <field name="TEXT">abc</field>\n </shadow>\n </value>\n </block>\n </category>\n <category name="Lists" categorystyle="list_category">\n <block type="lists_create_with">\n <mutation items="0"></mutation>\n </block>\n <block type="lists_create_with"></block>\n <block type="lists_repeat">\n <value name="NUM">\n <shadow type="math_number">\n <field name="NUM">5</field>\n </shadow>\n </value>\n </block>\n <block type="lists_length"></block>\n <block type="lists_isEmpty"></block>\n <block type="lists_indexOf">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_getIndex">\n <value name="VALUE">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_setIndex">\n <value name="LIST">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_getSublist">\n <value name="LIST">\n <block type="variables_get">\n <field name="VAR">list</field>\n </block>\n </value>\n </block>\n <block type="lists_split">\n <value name="DELIM">\n <shadow type="text">\n <field name="TEXT">,</field>\n </shadow>\n </value>\n </block>\n <block type="lists_sort"></block>\n <block type="lists_reverse"></block>\n </category>\n <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>\n <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>\n\n \x3c!-- END: Built-in Blockly Blocks //--\x3e\n\n </xml>\n';
package/dist/components/TextInput.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from "react";
2
+ import { InputTextProps } from 'primereact/inputtext';
2
3
  import { EventEmitterContext } from "../core/EventEmitterContext.js";
3
4
  import { KeyFilterType } from "primereact/keyfilter";
4
5
  /**
5
6
  * Properties of the component.
6
7
  */
7
- interface TextInputProps {
8
+ interface TextInputProps extends Omit<InputTextProps, "prefix"> {
8
9
  /**
9
10
  * The label for the field.
10
11
  */
package/dist/components/TextInput.js CHANGED
@@ -1 +1 @@
1
- import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});
1
+ import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import{InputText}from"primereact/inputtext";import{Button}from"primereact/button";import{EventEmitterContext}from"../core/EventEmitterContext.js";export class TextInput extends React.Component{constructor(t){super(t),Object.defineProperty(this,"validateValue",{enumerable:!0,configurable:!0,writable:!0,value:t=>void 0===this.props.validator||null===this.props.validator||this.props.validator.test(t)}),this.state={entryValue:t.value,isValid:void 0!==t.value&&this.validateValue(t.value),editing:!1}}componentDidMount(){}componentDidUpdate(t){t.value!==this.props.value&&this.setState({entryValue:this.props.value,editing:!1})}onAcceptValue(){void 0!==this.state.entryValue&&this.validateValue(this.state.entryValue)?(this.setState({isValid:!0,editing:!1}),this.props.onValueChanged&&this.props.onValueChanged(this.state.entryValue),void 0!==this.props.dispatchTopic&&this.context.dispatch({topic:this.props.dispatchTopic,payload:this.state.entryValue})):this.setState({isValid:!1})}onResetValue(){this.setState({entryValue:this.props.value,isValid:void 0!==this.props.value&&this.validateValue(this.props.value),editing:!1})}render(){const{prefix:t,...e}=this.props;return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:this.props.label}),void 0!==this.props.prefix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.prefix}),_jsx(InputText,{...e,keyfilter:this.props.keyFilter,placeholder:this.props.placeholder,value:this.state.entryValue,onChange:t=>{this.setState({entryValue:t.target.value,editing:!0})},className:this.state.isValid?"":"p-invalid",onKeyDown:t=>{"Enter"===t.key?this.onAcceptValue():"Escape"===t.key&&this.onResetValue()},disabled:this.props.disabled}),void 0!==this.props.suffix&&_jsx("span",{className:"p-inputgroup-addon",children:this.props.suffix}),_jsx(Button,{icon:"pi pi-check",disabled:this.props.disabled||!this.state.editing,className:"p-button-success",onClick:()=>this.onAcceptValue(),visible:this.state.editing}),_jsx(Button,{icon:"pi pi-times",disabled:this.props.disabled||!this.state.editing,className:"p-button-danger",onClickCapture:()=>this.onResetValue(),visible:this.state.editing})]}),void 0!==this.props.description&&_jsx("small",{children:this.props.description})]})}}Object.defineProperty(TextInput,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(TextInput,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{label:"",value:void 0,keyFilter:void 0,writeTopic:void 0,onValueChanged:void 0,description:void 0,prefix:void 0,suffix:void 0,disabled:!1,dispatchTopic:void 0,placeholder:void 0,validator:void 0}});
package/dist/components/ValueInput.d.ts CHANGED
@@ -47,10 +47,11 @@
47
47
  * to the console when accepted.
48
48
  */
49
49
  import React from 'react';
50
+ import { InputNumberProps } from 'primereact/inputnumber';
50
51
  /**
51
52
  * Properties of the ValueInput component.
52
53
  */
53
- interface ValueInputProps {
54
+ interface ValueInputProps extends Omit<InputNumberProps, 'value'> {
54
55
  /**
55
56
  * The label for the ValueInput field.
56
57
  */
package/dist/components/ValueInput.js CHANGED
@@ -1 +1 @@
1
- import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b})=>{const[h,j]=useState(t),[C,E]=useState(t),[_,S]=useState(t),[g,y]=useState(!1),[N,k]=useState(!1),B=useRef(null),D=useContext(EventEmitterContext);useEffect((()=>{null!==_?(E(_),S(null),k(!1)):t!==C&&(E(t),j(t),y(!1),k(!1))}),[t,C]);const F=()=>{var e;g&&null!==h&&(e=h,void 0!==i&&e>i||void 0!==s&&e<s?k(!0):(E(h),y(!1),b?.(h),k(!1),f&&D.dispatch({topic:f,payload:h})))},I=()=>{g&&(j(null),E(null),y(!1),k(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{ref:B,invalid:N,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:C,onChange:e=>{return t=e.value,g||(S(C),y(!0)),void j(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?F():"Escape"===e.key&&I()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!g,className:"p-button-success",onClick:()=>F(),visible:g,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!g,className:"p-button-danger",onClickCapture:()=>I(),visible:g,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
1
+ import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState,useRef,useEffect,useContext}from"react";import{InputNumber}from"primereact/inputnumber";import{EventEmitterContext}from"../core/EventEmitterContext";import{Button}from"primereact/button";export const ValueInput=({label:e="",value:t=null,min:s,max:i,minPrecision:n=0,maxPrecision:o=3,mode:a="decimal",currency:u="USD",prefix:l,suffix:r,showButtons:c=!1,step:p=1,locale:m="en-US",description:d,disabled:x=!1,dispatchTopic:f,placeholder:v,onValueChanged:b,...h})=>{const[j,C]=useState(t),[E,_]=useState(t),[S,g]=useState(t),[y,N]=useState(!1),[k,B]=useState(!1),D=useRef(null),F=useContext(EventEmitterContext);useEffect((()=>{null!==S?(_(S),g(null),B(!1)):t!==E&&(_(t),C(t),N(!1),B(!1))}),[t,E]);const I=()=>{var e;y&&null!==j&&(e=j,void 0!==i&&e>i||void 0!==s&&e<s?B(!0):(_(j),N(!1),b?.(j),B(!1),f&&F.dispatch({topic:f,payload:j})))},w=()=>{y&&(C(null),_(null),N(!1),B(!1))};return _jsxs("div",{children:[_jsxs("div",{className:"p-inputgroup flex-1",children:[_jsx("span",{className:"p-inputgroup-addon",children:e}),_jsx(InputNumber,{...h,ref:D,invalid:k,min:s,max:i,minFractionDigits:n,maxFractionDigits:o,mode:a,prefix:l,suffix:r,showButtons:c,step:p,placeholder:v,value:E,onChange:e=>{return t=e.value,y||(g(E),N(!0)),void C(t);var t},locale:m,currency:u,onKeyDown:e=>{"Enter"===e.key?I():"Escape"===e.key&&w()},disabled:x}),_jsx(Button,{icon:"pi pi-check",disabled:x||!y,className:"p-button-success",onClick:()=>I(),visible:y,size:"small",autoFocus:!1}),_jsx(Button,{icon:"pi pi-times",disabled:x||!y,className:"p-button-danger",onClickCapture:()=>w(),visible:y,size:"small",autoFocus:!1})]}),d&&_jsx("small",{children:d})]})};export default ValueInput;
package/dist/hooks/adsHooks.d.ts CHANGED
@@ -29,7 +29,7 @@
29
29
  * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
30
30
  * whenever new data is received.
31
31
  */
32
- export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => null;
32
+ export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any) => void>, symbols: Record<string, string>, options?: Record<string, {}>) => null;
33
33
  /**
34
34
  * Custom hook to create a function that sends a specified value to a remote device or server.
35
35
  * This hook abstracts the repetitive logic involved in sending these values,
package/dist/hooks/adsHooks.js CHANGED
@@ -1 +1 @@
1
- import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t)=>{const{invoke:n,subscribe:r,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),u=useRef([]),c=useRef(!0);return useEffect((()=>{c.current=!0;const a=async()=>{for(const[s,o]of Object.entries(t))try{await n("ADS","register_symbol",{symbol_name:o});const t=r(`ADS/${o}`,(t=>{if(c.current){const n=e[s];n&&n(t.value)}}));u.current.push(t)}catch(e){}await n("ADS","refresh",{})};if(o())a();else{let e=r("HUB/connected",(()=>{a(),s(e)}));u.current.push(e)}return()=>{c.current=!1,u.current.forEach((e=>s(e))),u.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}
1
+ import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t,n={})=>{const{invoke:r,subscribe:s,unsubscribe:o,isConnected:u}=useContext(EventEmitterContext),c=useRef([]),a=useRef(!0);return useEffect((()=>{a.current=!0;const i=async()=>{for(const[o,u]of Object.entries(t))try{const t=n[o]?{symbol_name:u,options:n[o]}:{symbol_name:u};await r("ADS","register_symbol",t);const i=s(`ADS/${u}`,(t=>{if(a.current){const n=e[o];n&&n(t.value)}}));c.current.push(i)}catch(e){}await r("ADS","refresh",{})};if(u())i();else{let e=s("HUB/connected",(()=>{i(),o(e)}));c.current.push(e)}return()=>{a.current=!1,c.current.forEach((e=>o(e))),c.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}
package/dist/hooks/useScaledValue.js CHANGED
@@ -1 +1 @@
1
- import{useCallback,useState}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,a=0){const[s,c]=useState(e*t+a);return[s,useCallback((e=>{c(e*t+a)}),[t,a])]}
1
+ import{useCallback,useState,useEffect}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,s=0){const[u,a]=useState(e),[c,l]=useState((()=>e*t+s));useEffect((()=>{l(u*t+s)}),[u,t,s]);return[c,useCallback((e=>{a(e)}),[t,s])]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adcops/autocore-react",
3
- "version": "3.0.21",
3
+ "version": "3.0.23",
4
4
  "description": "A React component library for industrial user interfaces.",
5
5
  "private": false,
6
6
  "type": "module",
package/src/components/BlocklyEditor.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
3
  * Created Date: 2024-03-15 13:21:06
4
4
  * -----
5
- * Last Modified: 2024-03-18 11:31:36
5
+ * Last Modified: 2024-05-17 11:36:58
6
6
  * -----
7
7
  *
8
8
  */
@@ -103,6 +103,9 @@ interface BlocklyEditorState {
103
103
  */
104
104
  parentWidth: number;
105
105
 
106
+
107
+ initialXmlLoaded : boolean;
108
+
106
109
  }
107
110
 
108
111
 
@@ -143,7 +146,8 @@ export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEd
143
146
  xml: '',
144
147
  code: '',
145
148
  parentWidth: 0,
146
- parentHeight: 0
149
+ parentHeight: 0,
150
+ initialXmlLoaded : false
147
151
  };
148
152
 
149
153
  }
@@ -154,7 +158,7 @@ export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEd
154
158
  }
155
159
 
156
160
  componentDidUpdate(prevProps: BlocklyEditorProps) {
157
- prevProps;
161
+ prevProps;
158
162
  // Logic to handle updates in props, if necessary
159
163
  }
160
164
 
@@ -212,10 +216,12 @@ export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEd
212
216
  }
213
217
 
214
218
  private setXml = (xml: string) => {
215
- this.setState({ xml: xml });
216
219
 
217
- if (this.props.onXmlChanged !== undefined && this.props.onXmlChanged !== null)
220
+ if (this.props.onXmlChanged) {
218
221
  this.props.onXmlChanged(xml);
222
+ }
223
+
224
+ this.setState({ xml: xml, initialXmlLoaded: true });
219
225
  }
220
226
 
221
227
  private onInject = (workspace: Blockly.WorkspaceSvg) => {
@@ -224,6 +230,7 @@ export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEd
224
230
 
225
231
 
226
232
  render() {
233
+
227
234
  return (
228
235
  <>
229
236
  <BlocklyWorkspace
package/src/components/TextInput.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
3
  * Created Date: 2024-03-20 13:05:42
4
4
  * -----
5
- * Last Modified: 2024-04-27 17:33:46
5
+ * Last Modified: 2024-05-17 10:04:53
6
6
  * -----
7
7
  *
8
8
  */
@@ -10,7 +10,7 @@
10
10
 
11
11
  import React from "react";
12
12
 
13
- import { InputText } from 'primereact/inputtext';
13
+ import { InputText, InputTextProps } from 'primereact/inputtext';
14
14
  import { Button } from "primereact/button";
15
15
 
16
16
  import { EventEmitterContext } from "../core/EventEmitterContext.js";
@@ -19,7 +19,7 @@ import { KeyFilterType } from "primereact/keyfilter";
19
19
  /**
20
20
  * Properties of the component.
21
21
  */
22
- interface TextInputProps {
22
+ interface TextInputProps extends Omit<InputTextProps, "prefix"> {
23
23
 
24
24
  /**
25
25
  * The label for the field.
@@ -211,6 +211,8 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
211
211
 
212
212
  render() {
213
213
 
214
+ const { prefix, ...restProps} = this.props;
215
+
214
216
  return(
215
217
  <div>
216
218
  <div className="p-inputgroup flex-1" >
@@ -223,6 +225,7 @@ export class TextInput extends React.Component<TextInputProps, TextInputState> {
223
225
  </span>
224
226
  }
225
227
  <InputText
228
+ {...restProps}
226
229
  keyfilter={this.props.keyFilter}
227
230
  placeholder={this.props.placeholder}
228
231
  value={this.state.entryValue}
package/src/components/ValueInput.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
3
  * Created Date: 2024-03-20 13:05:42
4
4
  * -----
5
- * Last Modified: 2024-04-30 08:33:37
5
+ * Last Modified: 2024-05-17 10:01:45
6
6
  * -----
7
7
  *
8
8
  */
@@ -58,14 +58,14 @@
58
58
 
59
59
 
60
60
  import React, { useState, useRef, useEffect, useContext } from 'react';
61
- import { InputNumber } from 'primereact/inputnumber';
61
+ import { InputNumber, InputNumberProps } from 'primereact/inputnumber';
62
62
  import { EventEmitterContext } from "../core/EventEmitterContext";
63
63
  import { Button } from 'primereact/button';
64
64
 
65
65
  /**
66
66
  * Properties of the ValueInput component.
67
67
  */
68
- interface ValueInputProps {
68
+ interface ValueInputProps extends Omit<InputNumberProps, 'value'> {
69
69
 
70
70
  /**
71
71
  * The label for the ValueInput field.
@@ -209,7 +209,8 @@ export const ValueInput: React.FC<ValueInputProps> = ({
209
209
  disabled = false,
210
210
  dispatchTopic = undefined,
211
211
  placeholder = undefined,
212
- onValueChanged = undefined
212
+ onValueChanged = undefined,
213
+ ...restProps
213
214
  }) => {
214
215
  const [entryValue, setEntryValue] = useState<number | null>(value);
215
216
  const [currentValue, setCurrentValue] = useState<number | null>(value);
@@ -311,6 +312,7 @@ export const ValueInput: React.FC<ValueInputProps> = ({
311
312
  <div className="p-inputgroup flex-1">
312
313
  <span className="p-inputgroup-addon">{label}</span>
313
314
  <InputNumber
315
+ {...restProps}
314
316
  ref={inputRef}
315
317
  invalid={invalidValue}
316
318
  min={min}
package/src/hooks/adsHooks.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
3
  * Created Date: 2024-04-26 09:04:40
4
4
  * -----
5
- * Last Modified: 2024-04-30 21:32:01
5
+ * Last Modified: 2024-05-17 10:47:22
6
6
  * -----
7
7
  *
8
8
  */
@@ -55,7 +55,11 @@ function sleep(ms: number): Promise<void> {
55
55
  * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
56
56
  * whenever new data is received.
57
57
  */
58
- export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => void>, symbols: Record<string, string>) => {
58
+ export const useAdsRegisterSymbols = (
59
+ setters: Record<string, (value: any) => void>,
60
+ symbols: Record<string, string>,
61
+ options: Record<string, {}> = {},
62
+ ) => {
59
63
  const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
60
64
  const subscriptions = useRef<number[]>([]);
61
65
  const isMounted = useRef(true);
@@ -66,7 +70,9 @@ export const useAdsRegisterSymbols = (setters: Record<string, (value: any) => vo
66
70
  const registerAndSubscribe = async () => {
67
71
  for (const [key, symbolName] of Object.entries(symbols)) {
68
72
  try {
69
- await invoke("ADS", "register_symbol", { symbol_name: symbolName });
73
+ const invokeOptions = options[key] ? { symbol_name: symbolName, options : options[key] } : { symbol_name: symbolName };
74
+ await invoke("ADS", "register_symbol", invokeOptions);
75
+
70
76
  //console.log(`Subscribe... ADS/${symbolName}`);
71
77
  const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
72
78
  if (isMounted.current) {
package/src/hooks/useScaledValue.tsx CHANGED
@@ -2,14 +2,14 @@
2
2
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
3
  * Created Date: 2024-04-30 11:41:59
4
4
  * -----
5
- * Last Modified: 2024-04-30 21:33:42
5
+ * Last Modified: 2024-05-02 15:14:03
6
6
  * -----
7
7
  *
8
8
  */
9
9
 
10
10
 
11
11
 
12
- import { useCallback, useState } from 'react';
12
+ import { useCallback, useState, useEffect } from 'react';
13
13
 
14
14
 
15
15
  export const kMillimeters2Inches: number = 1 / 25.4;
@@ -71,18 +71,22 @@ type UseScaledValueReturn = [number, (newValue: number) => void];
71
71
  * input display accordingly. The user's input is converted back to the base unit before being processed.
72
72
  */
73
73
  export function useScaledValue(initialValue: number, scale: number, offset: number = 0): UseScaledValueReturn {
74
+ const [baseValue, setBaseValue] = useState<number>(initialValue);
75
+ const [displayValue, setDisplayValue] = useState<number>(() => (initialValue * scale) + offset);
74
76
 
75
- const [displayValue, setDisplayValue] = useState<number>(initialValue * scale + offset);
76
-
77
- const handleSetDisplayValue = useCallback((newValue: number) => {
77
+ // Update display value whenever baseValue, scale, or offset changes
78
+ useEffect(() => {
78
79
 
79
80
  // In autocore-react, we multiple to scale incoming values,
80
81
  // divide to scale outgoing values.
81
82
  // This is an INCOMING value, so we multiply.
82
83
 
83
- const newDisplayValue = newValue * scale + offset;
84
- setDisplayValue(newDisplayValue);
84
+ setDisplayValue((baseValue * scale) + offset);
85
+ }, [baseValue, scale, offset]);
85
86
 
87
+ // Function to update baseValue when displayValue changes
88
+ const handleSetDisplayValue = useCallback((newValue: number) => {
89
+ setBaseValue(newValue);
86
90
  }, [scale, offset]);
87
91
 
88
92
  return [displayValue, handleSetDisplayValue];