@adcops/autocore-react 3.0.1 → 3.0.3

package/src/components/BlocklyEditor.tsx

@@ -0,0 +1,598 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-15 13:21:06
+ * -----
+ * Last Modified: 2024-03-18 11:31:36
+ * -----
+ * 
+ */
+
+import Blockly from "blockly";
+import { pythonGenerator } from 'blockly/python';
+
+import { BlocklyWorkspace } from 'react-blockly';
+
+import React from 'react';
+
+import "./BlocklyEditor.css";
+
+
+/**
+ * Properties for the Blockly Editor.
+ */
+interface BlocklyEditorProps {
+    /**
+     * The initial XML representation of the Blockly workspace. Can be undefined 
+     * if the workspace should start empty.
+     */
+    initialXml: string | undefined;
+
+    /**
+     * The configuration definition for the Blockly Toolbox.
+     */
+    toolbox: Blockly.utils.toolbox.ToolboxDefinition;
+
+
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * width of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    widthAdjustment: number;
+
+
+    /**
+     * Allows the parent component to add/subtract from the calculated
+     * height of the BlocklyEditor to account for other components (like a menu, toolbar, switch)
+     * in the view.
+     */
+    heightAdjustment: number;
+
+    /**
+     * Callback fired when the Blockly workspace content changes.
+     * Note: This does not directly reflect changes to the XML or the code.
+     */
+    onWorkspaceChanged?: () => void;
+
+    /**
+     * Callback fired when the XML representation of the workspace changes.
+     * @param xml The updated XML representation of the workspace.
+     */
+    onXmlChanged?: (xml: string) => void;
+
+    /**
+     * Callback fired when the generated code (e.g., Python) changes.
+     * @param code The updated generated code.
+     */
+    onCodeChanged?: (code: string) => void;
+
+}
+
+
+/**
+ * State of the BlocklyEditor
+ */
+interface BlocklyEditorState {
+
+    /**
+     * A name for the Blockly editor, potentially used for identification.
+     */
+    name: string;
+
+    /**
+     * The current XML representation of the workspace.
+     */
+    xml: string;
+
+    /**
+     * The current generated code (e.g., Python).
+     */
+    code: string;
+
+    /**
+     * The height of the first parent container with
+     * classname "blockly-container". It is important to set
+     * a parent container with this class name for auto-sizing to work!
+     */
+    parentHeight: number;
+
+    /**
+     * The width of the first parent container with
+     * classname "blockly-container". It is important to set
+     * a parent container with this class name for auto-sizing to work!
+     */
+    parentWidth: number;
+
+}
+
+
+/**
+ * A view that contains the blockly editor, wrapping the react-blockly BlocklyWorkspace
+ * component. The added value of this BlocklyEditor component is that it will automatically
+ * size to the container, which can be a bit tricky when using blockly.
+ * 
+ * The auto-sizing requires a parent component to have the className "blockly-container". This
+ * should be a component that has a known size roughly the size that you want the BlocklyEditor
+ * to appear. Otherwise, the BlocklyEditor will use the dimentions of the entire window, which usually is
+ * more than you want. 
+ * 
+ * Right now, the editor only supports generating python code, but a feature to specify the
+ * generator for different languages is planned.
+ */
+export class BlocklyEditor extends React.Component<BlocklyEditorProps, BlocklyEditorState> {
+
+    static defaultProps = {
+        initialXml: undefined,
+        widthAdjustment: 0,
+        heightAdjustment: 0,
+        onWorkspaceChanged: undefined,
+        onXmlChanged : undefined,
+        onCodeChanged : undefined  
+    };
+
+    // Explicitly type the ref as a reference to a HTMLDivElement
+    private ref = React.createRef<HTMLDivElement>();
+
+    /**
+     * Constructor
+     */
+    constructor(props: BlocklyEditorProps) {
+        super(props);
+        this.state = {
+            name: '',
+            xml: '',
+            code: '',
+            parentWidth: 0,
+            parentHeight: 0
+        };
+
+    }
+
+    componentDidMount() {
+        this.updateParentSize();
+        window.addEventListener('resize', this.updateParentSize);
+    }
+
+    componentDidUpdate(prevProps: BlocklyEditorProps) {
+        prevProps;
+        // Logic to handle updates in props, if necessary        
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateParentSize);
+    }
+
+
+    updateParentSize = () => {
+
+        if (this.ref.current) {
+
+
+            const parent = this.ref.current.parentElement;
+            let w = 0;
+            let h = 0;
+            let p = parent;
+
+            while (p !== undefined && p !== null) {
+                w = p.offsetWidth;
+                h = p.offsetHeight;
+
+                if (p.className.indexOf("blockly-container") >= 0) {
+                    break;
+                }
+
+                p = p.parentElement;
+            }
+
+            if (w < 300) {
+                w = 300;
+            }
+
+            if (h < 300)
+                h = 300;
+
+            this.setState({
+                parentWidth: (w * 0.9) + this.props.widthAdjustment,
+                parentHeight: (h * 0.9) + this.props.heightAdjustment,
+            });
+        }
+    };
+
+
+
+
+    private onWorkspaceChanged = (workspace: Blockly.WorkspaceSvg | undefined) => {
+        const code = pythonGenerator.workspaceToCode(workspace);
+        this.setState({ code: code });
+        if (this.props.onWorkspaceChanged !== undefined && this.props.onWorkspaceChanged !== null)
+            this.props.onWorkspaceChanged();
+
+        if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
+            this.props.onCodeChanged(code);
+    }
+
+    private setXml = (xml: string) => {
+        this.setState({ xml: xml });
+
+        if (this.props.onXmlChanged !== undefined && this.props.onXmlChanged !== null)
+            this.props.onXmlChanged(xml);
+    }
+
+    private onInject = (workspace: Blockly.WorkspaceSvg) => {
+        workspace;
+    }
+
+
+    render() {
+        return (
+            <>
+                <BlocklyWorkspace
+                    className="fill-height" // you can use whatever classes are appropriate for your app's CSS
+                    toolboxConfiguration={this.props.toolbox} // this must be a JSON toolbox definition
+                    initialXml={this.props.initialXml}
+                    onWorkspaceChange={this.onWorkspaceChanged}
+                    onXmlChange={this.setXml}
+                    onInject={this.onInject}
+                    workspaceConfiguration={{
+                        grid: {
+                            spacing: 20,
+                            length: 3,
+                            colour: "#ccc",
+                            snap: true,
+                        },
+                    }}
+                />
+
+            </>
+
+        )
+    }
+
+
+}
+
+export default BlocklyEditor;
+
+
+/**
+ * Creates a custom Blockly toolbox XML string by inserting additional XML before and after 
+ * the standard Blockly toolbox.
+ * 
+ * @param {string | undefined} xmlBefore - The XML content to be inserted before the built-in Blockly blocks.
+ * @param {string | undefined} xmlAfter - The XML content to be inserted after the built-in Blockly blocks.
+ * @returns {string} The customized toolbox XML string.
+ */
+export const createCustomToolbox = (xmlBefore: string | undefined, xmlAfter: string | undefined): string => {
+
+    // Define markers for the insertion points.
+    const kStartMarker = "<!-- BEGIN: Built-in Blockly Blocks //-->";
+    const kEndMarker = "<!-- END: Built-in Blockly Blocks //-->";
+
+    const beginInsertPoint = StandardToolbox.indexOf(kStartMarker);
+    const endInsertPoint = StandardToolbox.indexOf(kEndMarker);
+
+    if (beginInsertPoint === -1 || endInsertPoint === -1) {
+        throw new Error('Could not find markers in standard toolbox');
+    }
+
+    // Insert xmlBefore right before the begin comment and xmlAfter right after the end comment.
+    const modifiedToolbox =
+        StandardToolbox.slice(0, beginInsertPoint) +
+        (xmlBefore ? xmlBefore : "") +
+        StandardToolbox.slice(beginInsertPoint, endInsertPoint + kEndMarker.length) +
+        (xmlAfter ? xmlAfter : "") +
+        StandardToolbox.slice(endInsertPoint + kEndMarker.length + 1);
+
+    return modifiedToolbox;
+
+}
+
+
+
+
+export const StandardToolbox = `
+    <xml id="toolbox" style="display: none">
+    <!-- BEGIN: Built-in Blockly Blocks //-->
+    <category name="Logic" categorystyle="logic_category">
+        <block type="controls_if"></block>
+        <block type="logic_compare"></block>
+        <block type="logic_operation"></block>
+        <block type="logic_negate"></block>
+        <block type="logic_boolean"></block>
+        <block type="logic_null" disabled="true"></block>
+        <block type="logic_ternary"></block>
+    </category>
+    <category name="Loops" categorystyle="loop_category">
+        <block type="controls_repeat_ext">
+            <value name="TIMES">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="controls_repeat" disabled="true"></block>
+        <block type="controls_whileUntil"></block>
+        <block type="controls_for">
+            <value name="FROM">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="TO">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+            <value name="BY">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="controls_forEach"></block>
+        <block type="controls_flow_statements"></block>
+    </category>
+    <category name="Math" categorystyle="math_category">
+        <block type="math_number" gap="32">
+            <field name="NUM">123</field>
+        </block>
+        <block type="math_arithmetic">
+            <value name="A">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="B">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_single">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">9</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_trig">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">45</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_constant"></block>
+        <block type="math_number_property">
+            <value name="NUMBER_TO_CHECK">
+                <shadow type="math_number">
+                    <field name="NUM">0</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_round">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">3.1</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_on_list"></block>
+        <block type="math_modulo">
+            <value name="DIVIDEND">
+                <shadow type="math_number">
+                    <field name="NUM">64</field>
+                </shadow>
+            </value>
+            <value name="DIVISOR">
+                <shadow type="math_number">
+                    <field name="NUM">10</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_constrain">
+            <value name="VALUE">
+                <shadow type="math_number">
+                    <field name="NUM">50</field>
+                </shadow>
+            </value>
+            <value name="LOW">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="HIGH">
+                <shadow type="math_number">
+                    <field name="NUM">100</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_random_int">
+            <value name="FROM">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="TO">
+                <shadow type="math_number">
+                    <field name="NUM">100</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="math_random_float"></block>
+        <block type="math_atan2">
+            <value name="X">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+            <value name="Y">
+                <shadow type="math_number">
+                    <field name="NUM">1</field>
+                </shadow>
+            </value>
+        </block>
+    </category>
+    <category name="Text" categorystyle="text_category">
+        <block type="text"></block>
+        <block type="text_multiline"></block>
+        <block type="text_join"></block>
+        <block type="text_append">
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_length">
+            <value name="VALUE">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_isEmpty">
+            <value name="VALUE">
+                <shadow type="text">
+                    <field name="TEXT"></field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_indexOf">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+            <value name="FIND">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_charAt">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+        </block>
+        <block type="text_getSubstring">
+            <value name="STRING">
+                <block type="variables_get">
+                    <field name="VAR">text</field>
+                </block>
+            </value>
+        </block>
+        <block type="text_changeCase">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_trim">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_count">
+            <value name="SUB">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_replace">
+            <value name="FROM">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TO">
+                <shadow type="text"></shadow>
+            </value>
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <block type="text_reverse">
+            <value name="TEXT">
+                <shadow type="text"></shadow>
+            </value>
+        </block>
+        <label text="Input/Output:" web-class="ioLabel"></label>
+        <block type="text_print">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="text_prompt_ext">
+            <value name="TEXT">
+                <shadow type="text">
+                    <field name="TEXT">abc</field>
+                </shadow>
+            </value>
+        </block>
+    </category>
+    <category name="Lists" categorystyle="list_category">
+        <block type="lists_create_with">
+            <mutation items="0"></mutation>
+        </block>
+        <block type="lists_create_with"></block>
+        <block type="lists_repeat">
+            <value name="NUM">
+                <shadow type="math_number">
+                    <field name="NUM">5</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="lists_length"></block>
+        <block type="lists_isEmpty"></block>
+        <block type="lists_indexOf">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_getIndex">
+            <value name="VALUE">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_setIndex">
+            <value name="LIST">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_getSublist">
+            <value name="LIST">
+                <block type="variables_get">
+                    <field name="VAR">list</field>
+                </block>
+            </value>
+        </block>
+        <block type="lists_split">
+            <value name="DELIM">
+                <shadow type="text">
+                    <field name="TEXT">,</field>
+                </shadow>
+            </value>
+        </block>
+        <block type="lists_sort"></block>
+        <block type="lists_reverse"></block>
+    </category>
+    <category name="Variables" categorystyle="variable_category" custom="VARIABLE"></category>
+    <category name="Functions" categorystyle="procedure_category" custom="PROCEDURE"></category>
+
+    <!-- END: Built-in Blockly Blocks //-->
+
+    </xml>
+`;
+