blocks.js

// Copyright (c) 2014-21 Walter Bender
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the The GNU Affero General Public
// License as published by the Free Software Foundation; either
// version 3 of the License, or (at your option) any later version.
//
// You should have received a copy of the GNU Affero General Public
// License along with this library; if not, write to the Free Software
// Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA

/*
   global

   BACKWARDCOMPATIBILIYDICT, COLLAPSIBLES, DEFAULTACCIDENTAL,
   DEFAULTBLOCKSCALE, DEFAULTDRUM, DEFAULTEFFECT, DEFAULTFILTER,
   DEFAULTFILTERTYPE, DEFAULTINTERVAL, DEFAULTINVERT, DEFAULTMODE,
   DEFAULTNOISE, DEFAULTOSCILLATORTYPE, DEFAULTTEMPERAMENT,
   DEFAULTVOICE, INLINECOLLAPSIBLES, NATURAL, NUMBERBLOCKDEFAULT,
    SPECIALINPUTS, STANDARDBLOCKHEIGHT, STRINGLEN, TEXTWIDTH,
    WESTERN2EISOLFEGENAMES, WIDENAMES, addTemperamentToDictionary,
   Block, closeBlkWidgets, createjs, delayExecution, DEFAULTCHORD,
   deleteTemperamentFromList, getDrumSynthName, getNoiseName,
   getNoiseSynthName, getTemperamentsList, getTextWidth,
   getVoiceSynthName, i18nSolfege, last, MathUtility, mixedNumber,
   piemenuBlockContext, prepareMacroExports, ProtoBlock,
    setOctaveRatio, splitScaleDegree, splitSolfege, updateTemperaments,
    docById, define
*/

/*
   Global locations
   - js/activity.js
        createjs
   - js/block.js
        Block
   - js/piemenus.js
        piemenuBlockContext
   - js/protoblocks.js
        ProtoBlock 
   - js/utils/mathutils.js
        MathUtility
   - js/utils/utils.js
        _, last, closeBlkWidgets, mixedNumber, prepareMacroExports,
        getTextWidth, delayExecution
   - js/utils/musicutils.js
        addTemperamentToDictionary,
        getDrumSynthName, getNoiseName, getNoiseSynthName,
        getTemperamentsList, getVoiceSynthName, i18nSolfege,
        setOctaveRatio, splitScaleDegree, splitSolfege,
        updateTemperaments
*/
/**
 * Minimum distance (squared) between two docks required before
 * connecting them.
 */
const MINIMUMDOCKDISTANCE = 400;

/** Soft limit on the number of blocks in a single stack. */
const LONGSTACK = 300;

/** Special value flags to uniquely identify these media blocks. */
const CAMERAVALUE = "##__CAMERA__##";
const VIDEOVALUE = "##__VIDEO__##";

const NOTEBLOCKS = ["newnote", "osctime"];
const PITCHBLOCKS = ["pitch", "steppitch", "hertz", "pitchnumber", "nthmodalpitch", "playdrum"];

const ALLOWED_CONNECTIONS = new Set([
    "vspaceout:vspacein",
    "vspacein:vspaceout",
    "in:out",
    "out:in",
    "in:vspaceout",
    "vspaceout:in",
    "out:vspacein",
    "vspacein:out",
    "numberin:numberout",
    "numberin:anyout",
    "numberout:numberin",
    "anyout:numberin",
    "textin:textout",
    "textin:anyout",
    "textout:textin",
    "anyout:textin",
    "booleanout:booleanin",
    "booleanin:booleanout",
    "mediain:mediaout",
    "mediaout:mediain",
    "mediain:textout",
    "textout:mediain",
    "filein:fileout",
    "fileout:filein",
    "casein:caseout",
    "caseout:casein",
    "vspaceout:casein",
    "casein:vspaceout",
    "vspacein:caseout",
    "caseout:vspacein",
    "solfegein:anyout",
    "solfegein:solfegeout",
    "solfegein:textout",
    "solfegein:noteout",
    "solfegein:scaledegreeout",
    "solfegein:numberout",
    "anyout:solfegein",
    "solfegeout:solfegein",
    "textout:solfegein",
    "noteout:solfegein",
    "scaledegreeout:solfegein",
    "numberout:solfegein",
    "notein:solfegeout",
    "notein:scaledegreeout",
    "notein:textout",
    "notein:noteout",
    "solfegeout:notein",
    "scaledegreeout:notein",
    "textout:notein",
    "noteout:notein",
    "pitchout:anyin",
    "gridout:anyin",
    "anyin:textout",
    "anyin:mediaout",
    "anyin:numberout",
    "anyin:anyout",
    "anyin:fileout",
    "anyin:solfegeout",
    "anyin:scaledegreeout",
    "anyin:noteout",
    "textout:anyin",
    "mediaout:anyin",
    "numberout:anyin",
    "anyout:anyin",
    "fileout:anyin",
    "solfegeout:anyin",
    "scaledegreeout:anyin",
    "noteout:anyin"
]);

/**
 * Blocks holds the list of blocks and most of the block-associated
 * methods, since most block manipulations are inter-block.
 */

/**
 * The class for managing the collection of blocks
 * @public
 * @returns {void}
 */

class Blocks {
    constructor(activity) {
        this.activity = activity;
        this.storage = this.activity.storage;
        this.trashcan = this.activity.trashcan;
        this.turtles = this.activity.turtles;
        this.boundary = this.activity.boundary;
        this.macroDict = this.activity.macroDict;

        /** Did the user right click? */
        this.stageClick = false;

        /** We keep a list of stacks in the trash. */
        this.trashStacks = [];

        /** When true, checkBounds() calls are suppressed until
         *  _endDeferCheckBounds() runs one final check. */
        this._deferCheckBounds = false;

        /** We keep a dictionary for the proto blocks, */
        this.protoBlockDict = {};
        /** and a list of the blocks we create. */
        this.blockList = [];

        this.blockArt = {};
        this.blockCollapseArt = {};

        /** Track the time with mouse down. */
        this.mouseDownTime = 0;
        this.longPressTimeout = null;

        /** Paste offset is used to ensure pasted blocks don't overlap. */
        this.pasteDx = 0;
        this.pasteDy = 0;

        /** What did we select? */
        this.selectedStack = null;
        /** and a copy of the selected stack for pasting. */
        this.selectedBlocksObj = null;

        /**
         * If we somehow have a malformed block database (for example,
         * from importing a corrupted datafile, we need to avoid infinite
         * loops while crawling the block list.
         */
        this._loopCounter = 0;
        this._sizeCounter = 0;
        this._searchCounter = 0;

        /** Which block, if any, is highlighted? */
        this.highlightedBlock = null;
        /** Which block, if any, is active? */
        this.activeBlock = null;
        /** Are the blocks visible? */
        this.visible = true;
        /** The group of blocks being dragged or moved together */
        this.dragGroup = [];
        /** The blocks at the tops of stacks */
        this.stackList = [];
        /** The blocks that need expanding */
        this._expandablesList = [];
        /** Number of blocks to load */
        this._loadCounter = 0;
        /**
         * Stacks of blocks that need adjusting as blocks are repositioned
         * due to expanding and contracting or insertion into the flow.
         */
        this._adjustTheseDocks = [];
        /** Blocks that need collapsing after load. */
        this.blocksToCollapse = [];
        /** Arg blocks that need expanding after load. */
        this._checkTwoArgBlocks = [];
        /** Arg clamp blocks that need expanding after load. */
        this._checkArgClampBlocks = [];
        /** Clamp blocks that need expanding after load. */
        this.clampBlocksToCheck = [];
        /** Blocks that don't run when clicked. */
        this.noRunBlocks = [];

        this._homeButtonContainers = [];
        this.blockScale = DEFAULTBLOCKSCALE;

        /** We need to know if we are processing a copy or save stack command. */
        this.inLongPress = false;
        this.customTemperamentDefined = false;

        // Flag to track a block's movement to avoid drag-to-select functionality while moving a block
        this.isBlockMoving = false;

        this.selectionModeOn = false;

        this.selectedBlocks = [];

        // --- Performance: drag interaction optimizations ---
        // rAF-debounced checkBounds to avoid O(n) iteration on every block move
        this._checkBoundsScheduled = false;
        // Cached drag group computed once on mousedown, reused during pressmove
        this._cachedDragGroup = null;
        // Cached top-block map for moveAllBlocksExcept edge-scroll
        this._topBlockCache = null;
        // Throttle timestamp for edge-scroll calls
        this._lastEdgeScrollTime = 0;

        /**
         * We stage deletion of prototype action blocks on the palette so
         * as to avoid palette refresh race conditions.
         */
        this.deleteActionTimeout = 0;

        /**
         * Returns the long press status
         * @public
         * @returns this.inLongPress
         */
        this.getLongPressStatus = () => {
            return this.inLongPress;
        };

        /**
         * Sets long press status to false
         * @public
         * @returns {void}
         */
        this.clearLongPress = () => {
            this.inLongPress = false;
        };

        /**
         * Change the scale of the blocks (and the protoblocks on the palette).
         * @param - scale -new variable
         * @public
         * @returns {void}
         */
        this.setBlockScale = async scale => {
            console.debug("New block scale is " + scale);
            this.blockScale = scale;

            let palette;
            /** Regenerate all of the artwork at the new scale. */
            for (const block of this.blockList) {
                block.resize(scale);
            }

            this.findStacks();
            for (const stack in this.stackList) {
                this.adjustDocks(this.stackList[stack], true);
            }

            /** Make sure trash is still hidden. */
            for (const block of this.blockList) {
                if (block.trash) {
                    block.hide();
                }
            }

            /** We reset the protoblock scale on the palettes, but don't */
            /** modify the palettes themselves. */
            for (palette in this.activity.palettes.dict) {
                for (const blk in this.activity.palettes.dict[palette].protoList) {
                    this.activity.palettes.dict[palette].protoList[blk].scale = scale;
                }
            }

            /** Force a refresh. */
            await delayExecution(100);
            this.activity.refreshCanvas();
        };

        /**
         * Extract the blocks
         * @public
         * @returns {void}
         */
        this.extract = () => {
            if (this.activeBlock != null) {
                /** Don't extract silence blocks. */
                if (this.blockList[this.activeBlock].name !== "rest2") {
                    this._extractBlock(this.activeBlock, true);
                }
            }
        };

        /**
         * Pull a block from a stack, then readjust the docks.
         * @param - blk - blocks
         * @param - adjustDock - new variable
         * @private
         * @returns {void}
         */
        this._extractBlock = async (blk, adjustDock) => {
            /** Remove a single block from within a stack. */
            const blkObj = this.blockList[blk];

            const firstConnection = blkObj.connections[0];
            let connectionIdx;

            if (!SPECIALINPUTS.includes(blkObj.name)) {
                const clampList = [];
                this.findNestedClampBlocks(blk, clampList);

                let lastConnection = last(blkObj.connections);

                if (firstConnection != null) {
                    connectionIdx = this.blockList[firstConnection].connections.indexOf(blk);
                } else {
                    connectionIdx = null;
                }

                blkObj.connections[0] = null;

                if (lastConnection != null) {
                    /** Is it a hidden block? Keep it attached. */
                    if (
                        this.blockList[lastConnection].name === "hidden" ||
                        this.blockList[lastConnection].name === "hiddennoflow"
                    ) {
                        lastConnection = last(this.blockList[lastConnection].connections);

                        this.blockList[last(blkObj.connections)].connections[
                            this.blockList[last(blkObj.connections)].connections.length - 1
                        ] = null;
                    } else {
                        blkObj.connections[blkObj.connections.length - 1] = null;
                    }

                    if (lastConnection != null) {
                        this.blockList[lastConnection].connections[0] = firstConnection;
                    }
                }

                if (firstConnection != null) {
                    this.blockList[firstConnection].connections[connectionIdx] = lastConnection;
                }

                this.moveStackRelative(blk, 4 * STANDARDBLOCKHEIGHT, 0);
                this.blockMoved(blk);

                if (adjustDock && firstConnection != null) {
                    this.adjustDocks(firstConnection, true);
                    if (clampList.length > 0) {
                        this.clampBlocksToCheck = clampList;
                        this.adjustExpandableClampBlock();
                    }
                }
            } else {
                if (firstConnection != null) {
                    connectionIdx = this.blockList[firstConnection].connections.indexOf(blk);
                    this.blockList[firstConnection].connections[connectionIdx] = null;
                    blkObj.connections[0] = null;
                }

                this.moveStackRelative(blk, 4 * STANDARDBLOCKHEIGHT, 0);
                this.blockMoved(blk);
            }
        };

        /**
         * Find the y position of the bottom-most block
         * @public
         * @returns maxy
         */
        this.bottomMostBlock = () => {
            let maxy = -1000;
            for (const block of this.blockList) {
                if (block.container.y > maxy) {
                    maxy = block.container.y;
                }
            }

            return maxy;
        };

        /**
         * Toggle state of collapsible blocks, except for note blocks,
         * which are handled separately.
         * @public
         * @returns {void}
         */
        this.toggleCollapsibles = () => {
            let allCollapsed = true;
            let someCollapsed = false;
            for (const myBlock of this.blockList) {
                if (["newnote", "interval", "osctime"].includes(myBlock.name)) {
                    continue;
                }

                if (COLLAPSIBLES.includes(myBlock.name) && !myBlock.trash) {
                    if (myBlock.collapsed) {
                        someCollapsed = true;
                    } else {
                        allCollapsed = false;
                    }
                }
            }

            if (allCollapsed || !someCollapsed) {
                /**
                 * If all blocks are collapsed, uncollapse them all.
                 * If any blocks are collapsed, collapse them all.
                 */
                for (const myBlock of this.blockList) {
                    if (["newnote", "interval", "osctime"].includes(myBlock.name)) {
                        continue;
                    }

                    if (COLLAPSIBLES.includes(myBlock.name) && !myBlock.trash) {
                        myBlock.collapseToggle();
                    }
                }
            } else {
                /** If no blocks are collapsed, collapse them all. */
                for (const myBlock of this.blockList) {
                    if (["newnote", "interval", "osctime"].includes(myBlock.name)) {
                        continue;
                    }

                    if (COLLAPSIBLES.includes(myBlock.name) && !myBlock.trash) {
                        if (!myBlock.collapsed) {
                            myBlock.collapseToggle();
                        }
                    }
                }
            }
        };

        /**
         * We need to access the go-home button and boundary.
         * @param - setHomeContainers
         * @param - boundary
         * @public
         * @returns this
         */
        this.setHomeContainers = (setContainers, boundary) => {
            this._setHomeButtonContainers = setContainers;
            this.boundary = boundary;
            return this;
        };

        /**
         * Is this an action block?
         * @param - name - block name
         * @private
         * @returns boolean
         */
        this._actionBlock = name => {
            return ["do", "doArg", "calc", "calcArg"].includes(name);
        };

        /**
         * Is this a named action block?
         * @param - name - block name
         * @private
         * @returns boolean
         */
        this._namedActionBlock = name => {
            return ["nameddo", "nameddoArg", "namedcalc", "namedcalcArg"].includes(name);
        };

        /**
         * Adjust the dock positions of all blocks in the current drag group.
         * @private
         * @returns {void}
         */
        this._adjustBlockPositions = () => {
            if (this.dragGroup.length < 2) {
                return;
            }

            this.adjustDocks(this.dragGroup[0], true);
        };

        /**
         * Adjust the size of the clamp in an expandable block when
         * block are inserted into (or removed from) the child flow.
         * This is a common operation for start and action blocks,
         * but also for repeat, forever, if, etc.
         * @public
         * @returns {void}
         */
        this.adjustExpandableClampBlock = () => {
            if (this.clampBlocksToCheck.length === 0) {
                return;
            }

            const that = this;
            const obj = this.clampBlocksToCheck.pop();
            const blk = obj[0];
            const clamp = obj[1];

            const myBlock = this.blockList[blk];

            if (myBlock.isArgFlowClampBlock() || myBlock.isLeftClampBlock()) {
                /** Make sure myBlock is a clamp block. */
            } else if (myBlock.isArgBlock() || myBlock.isTwoArgBlock()) {
                return;
            } else if (myBlock.isArgClamp()) {
                /** We handle ArgClamp blocks elsewhere. */
                this._adjustArgClampBlock([blk]);
            }

            /**
             * Adjusts the clamp size
             * @param - blk - block number
             * @param - myBlock - block
             * @param - clamp (1 or 2)?
             * @private
             * @returns {void}
             */
            const __clampAdjuster = (blk, myBlock, clamp) => {
                /**
                 * First we need to count up the number of (and size of) the
                 * blocks inside the clamp; The child flow is usually the
                 * second-to-last argument.
                 */
                let c;
                if (myBlock.isArgFlowClampBlock() || myBlock.isLeftClampBlock()) {
                    c = 1; /** 0: outie; and 1: child flow */
                } else if (clamp === 0) {
                    c = myBlock.connections.length - 2;
                } else {
                    /** top clamp in if-then-else */
                    c = myBlock.connections.length - 3;
                }

                that._sizeCounter = 0;
                let childFlowSize = 1;
                if (c > 0 && myBlock.connections[c] != null) {
                    this._sizeCounter = 0;
                    childFlowSize = Math.max(that._getStackSize(myBlock.connections[c]), 1);
                }

                /** Adjust the clamp size to match the size of the child flow. */
                const plusMinus = childFlowSize - myBlock.clampCount[clamp];
                if (plusMinus !== 0) {
                    if (!(childFlowSize === 0 && myBlock.clampCount[clamp] === 1)) {
                        myBlock.updateSlots(clamp, plusMinus);
                    }
                }

                /** Recurse through the list. */
                if (that.clampBlocksToCheck.length > 0) {
                    that.adjustExpandableClampBlock();
                }
            };

            __clampAdjuster(blk, myBlock, clamp);
        };

        /**
         * Returns depth of nesting, which is used to rank order the
         * blocks when adjusting their sizes.
         * @param - blk - block number
         * @private
         * @returns depth
         */
        this._getNestingDepth = blk => {
            let rank = 0;
            while (blk !== null) {
                blk = this.insideExpandableBlock(blk);
                rank += 1;
            }
            return rank;
        };

        /**
         * Return the block size in units of standard block size.
         * @param - blk - block number
         * @private
         * @returns block size
         */
        this._getBlockSize = blk => {
            const myBlock = this.blockList[blk];
            /** Special case for collapsed note blocks. */
            if (["newnote", "interval", "osctime"].includes(myBlock.name) && myBlock.collapsed) {
                return 1;
            }

            return myBlock.size;
        };

        /**
         * Adjust the slot sizes of arg clamps.
         * @param - argBlocksToCheck -new variable
         * @private
         * @returns {void}
         */
        this._adjustArgClampBlock = argBlocksToCheck => {
            if (argBlocksToCheck.length === 0) {
                return;
            }
            const blk = argBlocksToCheck.pop();
            const myBlock = this.blockList[blk];
            let update = false;

            /** Which connection do we start with? */
            let ci;
            if (myBlock.isArgumentLikeBlock()) {
                ci = 2;
            } else {
                ci = 1;
            }

            /** Get the current slot list. */
            const slotList = myBlock.argClampSlots;

            /** Determine the size of each argument. */
            for (let i = 0; i < slotList.length; i++) {
                const c = myBlock.connections[ci + i];
                let size = 1; /** Minimum size */
                if (c != null) {
                    size = Math.max(this._getBlockSize(c), 1);
                }

                if (slotList[i] !== size) {
                    slotList[i] = size;
                    update = true;
                }
            }

            if (update) {
                myBlock.updateArgSlots(slotList);
            }
        };

        /**
         * We also adjust the size of twoarg blocks. It is similar to how
         * we adjust clamps, but enough different that it is in its own function.
         * @param - argBlocksToCheck - a list of blocks that need to be
                                       checked for changes to their clamp sizes.
         * @private
         * @returns {void}
         */
        this._adjustExpandableTwoArgBlock = argBlocksToCheck => {
            if (argBlocksToCheck.length === 0) {
                return;
            }

            const blk = argBlocksToCheck.pop();
            const myBlock = this.blockList[blk];

            /** Determine the size of the first argument. */
            const c = myBlock.connections[1];
            let firstArgumentSize = 1; /** Minimum size */
            if (c != null) {
                firstArgumentSize = Math.max(this._getBlockSize(c), 1);
            }

            /** Expand/contract block by plusMinus. */
            const plusMinus = firstArgumentSize - myBlock.clampCount[0];
            if (plusMinus !== 0) {
                if (!(firstArgumentSize === 0)) {
                    myBlock.updateSlots(0, plusMinus);
                }
            }
        };

        /**
         * Add or remove the vspace blocks
         * @param - blk - block number
         * @private
         * @returns void
         */
        this._addRemoveVspaceBlock = blk => {
            const myBlock = this.blockList[blk];

            const c = myBlock.connections[myBlock.connections.length - 2];
            let secondArgumentSize = 1;
            if (c != null) {
                secondArgumentSize = Math.max(this._getBlockSize(c), 1);
            }

            const that = this;

            /**
             * Checks the number of VSpace blocks are below the block we are checking against
             * @param - blk - block number
             * @private
             * @returns number of vspace blocks found below this block
             */
            const __howManyVSpaceBlocksBelow = blk => {
                const nextBlock = last(that.blockList[blk].connections);
                if (nextBlock && that.blockList[nextBlock].name === "vspace") {
                    return 1 + __howManyVSpaceBlocksBelow(nextBlock);
                    /** Recurse until it isn't a vspace */
                }
                return 0;
            };

            const vSpaceCount = __howManyVSpaceBlocksBelow(blk);
            if (secondArgumentSize < vSpaceCount + 1) {
                /** Remove a vspace block */
                const n = Math.abs(secondArgumentSize - vSpaceCount - 1);
                for (let i = 0; i < n; i++) {
                    const lastConnection = myBlock.connections.length - 1;
                    const vspaceBlock = this.blockList[myBlock.connections[lastConnection]];
                    const nextBlockIndex = vspaceBlock.connections[1];
                    myBlock.connections[lastConnection] = nextBlockIndex;
                    if (nextBlockIndex != null) {
                        this.blockList[nextBlockIndex].connections[0] = blk;
                    }
                    vspaceBlock.connections = [null, null];
                    vspaceBlock.trash = true;
                    vspaceBlock.hide();
                }
            } else if (secondArgumentSize > vSpaceCount + 1) {
                /** Add vspace blocks */

                /**
                 * Adjusts the docks of the blocks connected to the vspace block
                 * @param - args - [this block, the next block, the vspace block
                 * @private
                 * @returns {void}
                 */
                const __vspaceAdjuster = args => {
                    let thisBlock = args[0];
                    let nextBlock = args[1];
                    const vspace = args[2];
                    const i = args[3];
                    const n = args[4];
                    let newPos;

                    const vspaceBlock = that.blockList[vspace];
                    const lastDock = last(thisBlock.docks);
                    const dx = lastDock[0] - vspaceBlock.docks[0][0];
                    const dy = lastDock[1] - vspaceBlock.docks[0][1];
                    /** Math.floor(thisBlock.container.x + dx + 0.5); */
                    vspaceBlock.container.x = thisBlock.container.x + dx;
                    /** Math.floor(thisBlock.container.y + dy + 0.5); */
                    vspaceBlock.container.y = thisBlock.container.y + dy;
                    vspaceBlock.connections[0] = thisBlock.blockIndex;
                    vspaceBlock.connections[1] = nextBlock;
                    thisBlock.connections[thisBlock.connections.length - 1] = vspace;
                    if (nextBlock) {
                        that.blockList[nextBlock].connections[0] = vspace;
                    }

                    if (i + 1 < n) {
                        newPos = that.blockList.length;
                        thisBlock = last(that.blockList);
                        nextBlock = last(thisBlock.connections);
                        that._makeNewBlockWithConnections(
                            "vspace",
                            newPos,
                            [null, null],
                            __vspaceAdjuster,
                            [thisBlock, nextBlock, newPos, i + 1, n]
                        );
                    }
                };

                this._makeNewBlockWithConnections(
                    "vspace",
                    this.blockList.length,
                    [null, null],
                    __vspaceAdjuster,
                    [
                        myBlock,
                        last(myBlock.connections),
                        this.blockList.length,
                        0,
                        secondArgumentSize - vSpaceCount - 1
                    ]
                );
            }
        };

        /**
         * Calculate the sum of the sizes of all the blocks a stack.
         * @param - blk - block number
         * @private
         * @returns int
         */
        this._getStackSize = blk => {
            /** How many block units in this stack? */
            let size = 0;
            this._sizeCounter += 1;
            if (this._sizeCounter > this.blockList.length * 2) {
                console.debug(
                    "Infinite loop encountered detecting size of expandable block? " + blk
                );
                return size;
            }

            if (blk == null) {
                return size;
            }

            const myBlock = this.blockList[blk];
            if (myBlock == null) {
                console.debug("Something very broken in _getStackSize.");
            }

            let c;
            let csize;
            let cblk;

            if (myBlock.isClampBlock()) {
                c = myBlock.connections.length - 2;
                csize = 0;
                if (c > 0) {
                    cblk = myBlock.connections[c];
                    if (cblk != null) {
                        csize = this._getStackSize(cblk);
                    }

                    if (csize === 0) {
                        size = 1; /** minimum of 1 slot in clamp */
                    } else {
                        size = csize;
                    }
                }

                if (myBlock.isDoubleClampBlock()) {
                    c = myBlock.connections.length - 3;
                    csize = 0;
                    if (c > 0) {
                        cblk = myBlock.connections[c];
                        if (cblk != null) {
                            csize = this._getStackSize(cblk);
                        }

                        if (csize === 0) {
                            size += 1; /** minimum of 1 slot in clamp */
                        } else {
                            size += csize;
                        }
                    }
                }

                /** add top and bottom of clamp */
                size += myBlock.size;
            } else {
                size = myBlock.size;
            }

            /** If the note value block is collapsed, spoof size. */
            if (this.blocksToCollapse.indexOf(blk) != -1) {
                size = 1;
            } else if (
                ["newnote", "interval", "osctime"].includes(myBlock.name) &&
                myBlock.collapsed
            ) {
                size = 1;
            }

            /** check on any connected block */
            if (myBlock.connections.length > 1) {
                cblk = last(myBlock.connections);
                if (cblk != null) {
                    size += this._getStackSize(cblk);
                }
            }

            return size;
        };

        /**
         * Given a block, adjust the dock position of all its connections.
         * @param - blk - block
         * @param - resetLoopCounter (to prevent infinite loops in the
                                      case the connections are broken).
         * @public
         * @returns {void}
         */
        this.adjustDocks = (blk, resetLoopCounter) => {
            const myBlock = this.blockList[blk];

            /** For when we come in from makeBlock */
            if (resetLoopCounter != null) {
                this._loopCounter = 0;
            }

            /**
             * These checks are to test for malformed data. All blocks
             * should have connections.
             */
            if (myBlock == null) {
                console.debug("Saw a null block: " + blk);
                return;
            }

            if (myBlock.connections == null) {
                console.debug("Saw a block with null connections: " + blk);
                return;
            }

            if (myBlock.connections.length === 0) {
                console.debug("Saw a block with [] connections: " + blk);
                return;
            }

            /** Value blocks only have one dock. */
            if (myBlock.docks.length === 1) {
                return;
            }

            this._loopCounter += 1;
            if (this._loopCounter > this.blockList.length * 2) {
                console.debug(
                    "Infinite loop encountered while adjusting docks: " + blk + " " + this.blockList
                );
                return;
            }

            /** Walk through each connection except the parent block; the
             * exception being the parent block of boolean 2arg blocks,
             * since the dock[0] position can change; and only check the
             * last connection of collapsed blocks.
             */
            let start = 1;
            if (myBlock.isTwoArgBooleanBlock()) {
                start = 0;
            } else if (myBlock.isInlineCollapsible() && myBlock.collapsed) {
                start = myBlock.connections.length - 1;
            }

            for (let c = start; c < myBlock.connections.length; c++) {
                /** Get the dock position for this connection. */
                const bdock = myBlock.docks[c];

                /** Find the connecting block. */
                const cblk = myBlock.connections[c];
                /** Nothing connected here so continue to the next connection. */
                if (cblk === null) {
                    continue;
                }

                /** Another database integrity check. */
                if (this.blockList[cblk] === null) {
                    console.debug("This is not good: we encountered a null block: " + cblk);
                    continue;
                }

                /** Find the dock position in the connected block. */
                let foundMatch = false;
                let matchingBlock;
                for (
                    matchingBlock = 0;
                    matchingBlock < this.blockList[cblk].connections.length;
                    matchingBlock++
                ) {
                    if (this.blockList[cblk].connections[matchingBlock] === blk) {
                        foundMatch = true;
                        break;
                    }
                }

                /** Yet another database integrity check. */
                if (!foundMatch) {
                    console.debug(
                        "Did not find match for " +
                            myBlock.name +
                            " (" +
                            blk +
                            ") and " +
                            this.blockList[cblk].name +
                            " (" +
                            cblk +
                            ")"
                    );

                    console.debug(myBlock.connections);

                    console.debug(this.blockList[cblk].connections);
                    break;
                }

                const cdock = this.blockList[cblk].docks[matchingBlock];
                let dx;
                let dy;
                let nx;
                let ny;
                if (c > 0) {
                    dx = bdock[0] - cdock[0];
                    if (myBlock.isInlineCollapsible() && myBlock.collapsed) {
                        /** If the block is collapsed, determine the new dock position. */
                        const n = myBlock.docks.length;
                        const dd = myBlock.docks[n - 1][1] - myBlock.docks[n - 2][1];
                        dy = bdock[1] - dd - cdock[1];
                    } else {
                        dy = bdock[1] - cdock[1];
                    }

                    if (myBlock.container == null) {
                        console.debug("Does this ever happen any more?");
                    } else {
                        nx = myBlock.container.x + dx;
                        ny = myBlock.container.y + dy;
                    }

                    this._moveBlock(cblk, nx, ny);
                } else {
                    dx = cdock[0] - bdock[0];
                    dy = cdock[1] - bdock[1];
                    nx = this.blockList[cblk].container.x + dx;
                    ny = this.blockList[cblk].container.y + dy;
                    this._moveBlock(blk, nx, ny);
                }

                if (c > 0) {
                    /** Recurse on connected blocks. */
                    this.adjustDocks(cblk, true);
                }
            }
        };

        /**
         * Add an action name whenever the user removes the name from
           an action block.  Add a box name whenever the user removes
           the name from a storein block.  Add a Silence block
           whenever the user removes all the blocks from a Note block.
           Add an octave(number) block whenever user removes an octave block.
         * @param - parentblk - new variable
         * @param - oldBlock - old block
         * @param - skipOldBlock
         * @public
         * @returns {void}
         */
        this.addDefaultBlock = (parentblk, oldBlock, skipOldBlock) => {
            if (parentblk == null) {
                return;
            }

            let cblk;
            const that = this;
            if (this.blockList[parentblk].name === "action") {
                cblk = this.blockList[parentblk].connections[1];
                if (cblk == null) {
                    /**
                     * Update Palette
                     * @param - args - arguments
                     * @public
                     * @returns {void}
                     */
                    const postProcess = args => {
                        const parentblk = args[0];
                        const oldBlock = args[1];

                        const blk = that.blockList.length - 1;
                        that.blockList[parentblk].connections[1] = blk;
                        that.blockList[blk].value = that.findUniqueActionName(_("action"));
                        let label = that.blockList[blk].value;
                        if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                            label = label.substr(0, STRINGLEN) + "...";
                        }

                        that.blockList[blk].text.text = label;
                        that.blockList[blk].container.updateCache();

                        if (that.blockList[blk].value !== that.blockList[oldBlock].value) {
                            const metadata = that.actionMetadata(parentblk);
                            that.newNameddoBlock(
                                that.blockList[blk].value,
                                metadata.hasReturn,
                                metadata.hasArgs
                            );
                            const blockPalette = that.activity.palettes.dict["action"];
                            for (let b = 0; b < blockPalette.protoList.length; b++) {
                                const protoblock = blockPalette.protoList[b];
                                if (
                                    protoblock.name === "nameddo" &&
                                    protoblock.defaults[0] === that.blockList[oldBlock].value
                                ) {
                                    setTimeout(() => {
                                        blockPalette.remove(
                                            protoblock,
                                            that.blockList[oldBlock].value
                                        );
                                        delete that.protoBlockDict[
                                            "myDo_" + that.blockList[oldBlock].value
                                        ];
                                        /** that.activity.palettes.hide(); */
                                        that.activity.palettes.updatePalettes("action");
                                        /** that.activity.palettes.show(); */
                                    }, 50); /** 500 */

                                    break;
                                }
                            }

                            that.renameNameddos(
                                that.blockList[oldBlock].value,
                                that.blockList[blk].value
                            );
                            if (skipOldBlock) {
                                that.renameDos(
                                    that.blockList[oldBlock].value,
                                    that.blockList[blk].value,
                                    oldBlock
                                );
                            } else {
                                that.renameDos(
                                    that.blockList[oldBlock].value,
                                    that.blockList[blk].value
                                );
                            }
                        }

                        that.adjustDocks(parentblk, true);
                    };

                    this._makeNewBlockWithConnections("text", 0, [parentblk], postProcess, [
                        parentblk,
                        oldBlock
                    ]);
                }
            } else if (this.blockList[parentblk].name === "temperament1") {
                cblk = this.blockList[parentblk].connections[1];
                if (cblk == null) {
                    const postProcess = args => {
                        const parentblk = args[0];
                        const oldBlock = args[1];

                        const blk = that.blockList.length - 1;
                        that.blockList[parentblk].connections[1] = blk;

                        that.blockList[blk].value = that.blockList[oldBlock].value;

                        that.blockList[blk].text.text = that.blockList[oldBlock].text.text;
                        that.blockList[blk].container.updateCache();

                        that.adjustDocks(parentblk, true);
                    };

                    this._makeNewBlockWithConnections("text", 0, [parentblk], postProcess, [
                        parentblk,
                        oldBlock
                    ]);
                }
            } else if (this.blockList[parentblk].name === "pitch") {
                cblk = this.blockList[parentblk].connections[2];
                if (cblk == null) {
                    /**
                     * Adjust Docks
                     * @param - args - arguments
                     * @public
                     * @returns {void}
                     */
                    const postProcess = args => {
                        const parentblk = args[0];
                        const oldBlock = args[1];
                        const blk = this.blockList.length - 1;

                        this.blockList[parentblk].connections[2] = blk;

                        const octave = this.blockList[oldBlock].value;
                        this.blockList[blk].value = octave;

                        this.blockList[blk].text.text = octave.toString();
                        /** Make sure text is on top. */
                        const z = this.blockList[blk].container.children.length - 1;
                        this.blockList[blk].container.setChildIndex(this.blockList[blk].text, z);
                        this.blockList[blk].container.updateCache();

                        this.adjustDocks(parentblk, true);
                    };

                    this._makeNewBlockWithConnections("number", 0, [parentblk], postProcess, [
                        parentblk,
                        oldBlock
                    ]);
                }

                const oblk = this.blockList[parentblk].connections[1];
                if (oblk == null) {
                    /**
                     * Adjust Docks
                     * @param - args - arguments
                     * @public
                     * @returns {void}
                     */
                    const postProcess = args => {
                        const parentblk = args[0];
                        const value = args[1];

                        const blk = this.blockList.length - 1;

                        this.blockList[parentblk].connections[1] = blk;

                        const pitch = value;
                        this.blockList[blk].value = pitch;
                        if (this.blockList[blk].name === "eastindiansolfege") {
                            const obj = splitSolfege(pitch);
                            let label = WESTERN2EISOLFEGENAMES[obj[0]];
                            const attr = obj[1];
                            if (attr !== "♮") {
                                label += attr;
                            }
                            this.blockList[blk].text.text = label;
                        } else {
                            this.blockList[blk].text.text = pitch.toString();
                        }
                        /** Make sure text is on top. */
                        const z = this.blockList[blk].container.children.length - 1;
                        this.blockList[blk].container.setChildIndex(this.blockList[blk].text, z);
                        this.blockList[blk].container.updateCache();

                        this.adjustDocks(parentblk, true);
                    };

                    let newBlockName = "solfege";
                    let newBlockValue = "sol";
                    switch (this.blockList[oldBlock].name) {
                        case "eastindiansolfege":
                            newBlockName = this.blockList[oldBlock].name;
                            newBlockValue = "sol";
                            break;
                        case "scaledegree2":
                            newBlockName = this.blockList[oldBlock].name;
                            newBlockValue = "5";
                            break;
                        case "notename":
                            newBlockName = this.blockList[oldBlock].name;
                            newBlockValue = "G";
                            break;
                        default:
                            break;
                    }

                    this._makeNewBlockWithConnections(newBlockName, 0, [parentblk], postProcess, [
                        parentblk,
                        newBlockValue
                    ]);
                }
            } else if (this.blockList[parentblk].name === "storein") {
                cblk = this.blockList[parentblk].connections[1];
                if (cblk == null) {
                    /**
                     * Adjust Docks
                     * @param - args - arguments
                     * @public
                     * @returns {void}
                     */
                    const postProcess = args => {
                        const parentblk = args[0];
                        /** const oldBlock = args[1]; */

                        const blk = that.blockList.length - 1;
                        that.blockList[parentblk].connections[1] = blk;
                        that.blockList[blk].value = _("box");
                        let label = that.blockList[blk].value;
                        if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                            label = label.substr(0, STRINGLEN) + "...";
                        }
                        that.blockList[blk].text.text = label;
                        that.blockList[blk].container.updateCache();

                        that.adjustDocks(parentblk, true);
                    };

                    this._makeNewBlockWithConnections("text", 0, [parentblk], postProcess, [
                        parentblk,
                        oldBlock
                    ]);
                }
            } else if (NOTEBLOCKS.includes(this.blockList[parentblk].name)) {
                cblk = this.blockList[parentblk].connections[2];
                if (cblk == null) {
                    const newVspaceBlock = this.makeBlock("vspace", "__NOARG__");
                    this.blockList[parentblk].connections[2] = newVspaceBlock;
                    this.blockList[newVspaceBlock].connections[0] = parentblk;
                    const newSilenceBlock = this.makeBlock("rest2", "__NOARG__");
                    this.blockList[newSilenceBlock].connections[0] = newVspaceBlock;
                    this.blockList[newSilenceBlock].connections[1] = null;
                    this.blockList[newVspaceBlock].connections[1] = newSilenceBlock;
                } else if (
                    this.blockList[cblk].name === "vspace" &&
                    this.blockList[cblk].connections[1] == null
                ) {
                    const newSilenceBlock = this.makeBlock("rest2", "__NOARG__");
                    this.blockList[newSilenceBlock].connections[0] = cblk;
                    this.blockList[newSilenceBlock].connections[1] = null;
                    this.blockList[cblk].connections[1] = newSilenceBlock;
                }
            }
        };

        /**
         * Remove any pitch blocks from a Note block if Silent block is inserted.
         * Deprecated since we do not allow silence blocks to be dragged.
         * @param - thisBlock -new variable
         * @private
         * @returns {void}
         */
        this._deletePitchBlocks = thisBlock => {
            /** Find the top of the stack */
            let c = this.blockList[thisBlock].connections[0];
            if (c === null) {
                console.debug("Silence block was not inside a note block");
            }

            let counter = 0;

            while (true) {
                if (NOTEBLOCKS.includes(this.blockList[c].name)) {
                    break;
                }

                thisBlock = c;
                c = this.blockList[c].connections[0];
                if (c === null) {
                    console.debug("Silence block was not inside a note block");
                    break;
                }

                counter += 1;
                if (counter > this.blockList.length) {
                    console.debug("Connection loop???");
                    break;
                }
            }

            counter = 0;
            while (thisBlock != null) {
                if (this.blockList[thisBlock].connections.length < 2) {
                    console.debug("value block encountered??? " + thisBlock);
                    break;
                }

                const nextBlock = last(this.blockList[thisBlock].connections);
                if (PITCHBLOCKS.includes(this.blockList[thisBlock].name)) {
                    this._extractBlock(thisBlock, false);
                } else if (["flat", "sharp"].includes(this.blockList[thisBlock].name)) {
                    /** The pitch block might be inside a sharp or flat block. */
                    const b = this.blockList[thisBlock].connections[1];
                    if (this._blockInStack(b, PITCHBLOCKS)) {
                        this._extractBlock(thisBlock, false);
                    }
                }

                thisBlock = nextBlock;

                counter += 1;
                if (counter > this.blockList.length) {
                    console.debug("Connection loop???");
                    break;
                }
            }
        };

        /**
         * Deletes the next default element: either a Pitch block or a Silent block.
         * @param - thisBlock
         * @public
         * @returns {void}
         */
        this.deleteNextDefault = thisBlock => {
            if (thisBlock == undefined) {
                return;
            }

            let thisBlockobj = this.blockList[thisBlock];

            // Do not remove the silence block if the user places a block just over it.
            if (
                thisBlockobj?.name === "vspace" &&
                this.blockList[thisBlockobj.connections[1]]?.name === "rest2" &&
                this.blockList[thisBlockobj.connections[0]]?.name === "vspace"
            ) {
                return;
            }

            thisBlockobj = this.blockList[thisBlock];

            // Do not remove the silence block if only vspace blocks are added before the silence block.

            let block = thisBlockobj;
            while (block?.name == "vspace") {
                if (block?.name != "vspace") {
                    break;
                }
                block = this.blockList[block.connections[0]];
                if (block?.name == "newnote") {
                    return;
                }
            }

            if (thisBlockobj.name === "rest2") {
                this._deletePitchBlocks(thisBlock);
            } else {
                /**
                 * Remove the Silence block from a Note block if another
                 * block is inserted anywhere above the silence block.
                 */
                if (thisBlockobj && thisBlockobj.connections.length === 1) {
                    console.debug("Value block encountered? " + thisBlockobj.name);
                    return;
                }

                while (last(thisBlockobj.connections) != null) {
                    const lastc = thisBlockobj.connections.length - 1;
                    const i = thisBlockobj.connections[lastc];
                    if (this.blockList[i].name === "rest2") {
                        const silenceBlock = i;
                        const silenceBlockobj = this.blockList[silenceBlock];
                        silenceBlockobj.hide();
                        silenceBlockobj.trash = true;
                        thisBlockobj.connections[lastc] = silenceBlockobj.connections[1];
                        break;
                    } else {
                        thisBlockobj = this.blockList[i];
                    }
                }
            }
        };

        /**
         * Remove the Silence block from a Note block if another block
           is inserted anywhere after the Silence block.
         * @param - thisBlock -new variable
         * @public
         * @returns {void}
         */
        this.deletePreviousDefault = thisBlock => {
            let thisBlockobj = this.blockList[thisBlock];

            // Do not remove the silence block if only a vspace block is inserted after the silence block.
            if (
                this.blockList[thisBlockobj.connections[0]]?.name === "rest2" &&
                this.blockList[thisBlock]?.name === "vspace"
            ) {
                return thisBlockobj.connections[0];
            }

            if (this._blockInStack(thisBlock, ["rest2"])) {
                this._deletePitchBlocks(thisBlock);
                return this.blockList[thisBlock].connections[0];
            } else {
                while (thisBlockobj.connections[0] != null) {
                    const i = thisBlockobj.connections[0];
                    if (NOTEBLOCKS.includes(this.blockList[i].name)) {
                        break;
                    } else if (this.blockList[i].name === "rest2") {
                        const silenceBlock = i;
                        const silenceBlockobj = this.blockList[silenceBlock];
                        silenceBlockobj.hide();
                        silenceBlockobj.trash = true;

                        for (
                            let c = 0;
                            c < this.blockList[silenceBlockobj.connections[0]].connections.length;
                            c++
                        ) {
                            if (
                                this.blockList[silenceBlockobj.connections[0]].connections[c] ===
                                silenceBlock
                            ) {
                                this.blockList[silenceBlockobj.connections[0]].connections[c] =
                                    thisBlockobj.blockIndex;
                                break;
                            }
                        }

                        thisBlockobj.connections[0] = silenceBlockobj.connections[0];
                        break;
                    } else {
                        thisBlockobj = this.blockList[i];
                    }
                }

                return thisBlockobj.connections[0];
            }
        };

        /**
         * To make everything cleaner, use this function to reinit widget
         *  when its widget windows is open.
         */
        this.reInitWidget = async (topBlock, timeout) => {
            await delayExecution(timeout);
            if (!this.blockList[topBlock].trash) {
                this.activity.logo.runLogoCommands(topBlock);
            }
        };

        /**
         * Handle connections when blocks are moved.
         * @param - thisBlock -new variable
         * @public
         * @returns {void}
         */
        this.blockMoved = async thisBlock => {
            /**
             * When a block is moved, we have to check the following:
             * (0) Is it inside of a expandable block?
             *     Is it connected to a collapsed block?
             *     Is it an arg inside an arg clamp?
             * (1) Is it an arg block connected to a two-arg block?
             * (2) Disconnect its connection[0];
             * (3) Look for a new connection;
             *     Is it potentially an arg inside an arg clamp?
             * (4) Is it an arg block connected to a 2-arg block?
             * (5) Is it a pitch block being inserted or removed from
             *     a Note clamp? In which case, we may have to remove
             *     or add a silence block.
             * (6) Is it the name of an action block? In which case we
             *     need to check to see if we need to rename it.
             * (7) Is it the name of a storein block? In which case we
             *     need to check to see if we need to add a palette entry.
             * (8) Is it a case or default block? We need to make sure that
             *     they are inside a switch block.
             * (9) And we need to recheck if it inside of a expandable block.
             */
            const initialTopBlock = this.findTopBlock(thisBlock);
            /** Find any containing expandable blocks. */
            this.clampBlocksToCheck = [];
            if (thisBlock == null) {
                console.debug("blockMoved called with null block.");
                return;
            }

            let blk = this.insideExpandableBlock(thisBlock);
            let expandableLoopCounter = 0;

            let parentblk = null;
            if (blk != null) {
                parentblk = blk;
            }

            let actionCheck = false;

            while (blk != null) {
                expandableLoopCounter += 1;
                if (expandableLoopCounter > 2 * this.blockList.length) {
                    console.debug("Infinite loop encountered checking for expandables?");
                    break;
                }

                if (this.blockList[blk].name === "ifthenelse") {
                    this.clampBlocksToCheck.push([blk, 0]);
                    this.clampBlocksToCheck.push([blk, 1]);
                } else {
                    this.clampBlocksToCheck.push([blk, 0]);
                }
                blk = this.insideExpandableBlock(blk);
            }

            this._checkTwoArgBlocks = [];
            const checkArgBlocks = [];
            const myBlock = this.blockList[thisBlock];
            if (myBlock == null) {
                console.debug("null block found in blockMoved method: " + thisBlock);
                return;
            }

            const c = myBlock.connections[0];
            let cBlock;
            if (c != null) {
                cBlock = this.blockList[c];
            }

            /** If it is an arg block, where is it coming from? */
            if (myBlock.isArgBlock() && c != null) {
                /**
                 * We care about twoarg (2arg) blocks with
                 * connections to the first arg;
                 */
                if (this.blockList[c].isTwoArgBlock() || this.blockList[c].isArgClamp()) {
                    if (cBlock.connections[1] === thisBlock) {
                        this._checkTwoArgBlocks.push(c);
                    }
                } else if (
                    (this.blockList[c].isArgBlock() && this.blockList[c].isExpandableBlock()) ||
                    this.blockList[c].isArgClamp()
                ) {
                    if (cBlock.connections[1] === thisBlock) {
                        this._checkTwoArgBlocks.push(c);
                    }
                }
            }

            /** Get widget window's title */
            const widgetTitle = document.getElementsByClassName("wftTitle");

            /** Disconnect from connection[0] (both sides of the connection). */
            if (c != null) {
                /** Disconnect both ends of the connection. */
                for (let i = 1; i < cBlock.connections.length; i++) {
                    if (cBlock.connections[i] === thisBlock) {
                        cBlock.connections[i] = null;
                        break;
                    }
                }

                myBlock.connections[0] = null;
                this.raiseStackToTop(thisBlock);

                /**
                 * Check if we are disconnecting blocks from widget blocks;
                 * then reinit if widget windows is open.
                 */
                let lockInit = false;
                for (let x = 0; x < widgetTitle.length; x++) {
                    if (lockInit === false) {
                        switch (widgetTitle[x].innerHTML) {
                            case "oscilloscope":
                            case "tempo":
                            case "rhythm maker":
                            case "pitch slider":
                            case "pitch staircase":
                            case "status":
                            case "phrase maker":
                            case "lego bricks":
                            case "custom mode":
                            case "music keyboard":
                            case "pitch drum":
                            case "meter":
                            case "temperament":
                            case "timbre":
                                lockInit = true;
                                if (
                                    this.blockList[initialTopBlock].protoblock.staticLabels[0] ===
                                    widgetTitle[x].innerHTML
                                ) {
                                    this.reInitWidget(initialTopBlock, 1500);
                                }
                                break;
                        }
                    }
                }
            }

            /** Look for a new connection. */
            const x1 = myBlock.container.x + myBlock.docks[0][0];
            const y1 = myBlock.container.y + myBlock.docks[0][1];

            /** Find the nearest dock; if it is close enough, make the connection. */
            let newBlock = null;
            let newConnection = null;
            let min = (MINIMUMDOCKDISTANCE / DEFAULTBLOCKSCALE) * this.blockScale;
            const blkType = myBlock.docks[0][2];

            /** Is the added block above or below? */
            let insertAfterDefault = true;

            for (let b = 0; b < this.blockList.length; b++) {
                /** Don't connect to yourself. */
                if (b === thisBlock) {
                    continue;
                }

                /** Don't connect to a collapsed block. */
                if (this.blockList[b].inCollapsed) {
                    continue;
                }

                if (COLLAPSIBLES.includes(this.blockList[b].name)) {
                    if (!INLINECOLLAPSIBLES.includes(this.blockList[b].name)) {
                        if (this.blockList[b].collapsed) {
                            continue;
                        }
                    }
                }

                /** Don't connect to a block in the trash. */
                if (this.blockList[b].trash) {
                    continue;
                }

                /** Does this every happen? Or is there always a hidden block below? */

                let start = 1;
                if (this.blockList[b].isInlineCollapsible() && this.blockList[b].collapsed) {
                    /** Only try docking to last connection of inline collapsed blocks. */
                    start = this.blockList[b].connections.length - 1;
                }

                const ILLEGAL_BOUNCE_DIST = 400; // squared distance (20px)
                let bounced = false;

                for (let i = start; i < this.blockList[b].connections.length; i++) {
                    /**
                     * When converting from Python projects to JS format,
                     * sometimes extra null connections are added. We need
                     * to ignore them.
                     */
                    if (i === this.blockList[b].docks.length) {
                        break;
                    }

                    if (
                        i === this.blockList[b].connections.length - 1 &&
                        this.blockList[b].connections[i] != null &&
                        this.blockList[this.blockList[b].connections[i]].isNoHitBlock()
                    ) {
                        /**
                         * Don't break the connection between a block and
                         * a hidden block below it.
                         */
                        continue;
                    } else if (
                        ["backward", "status"].includes(this.blockList[b].name) &&
                        i === 1 &&
                        this.blockList[b].connections[1] != null &&
                        this.blockList[this.blockList[b].connections[1]].isNoHitBlock()
                    ) {
                        /**
                         * Don't break the connection between a backward
                         * block and a hidden block attached to its clamp.
                         */
                        continue;
                    } else if (
                        this.blockList[b].name === "action" &&
                        i === 2 &&
                        this.blockList[b].connections[2] != null &&
                        this.blockList[this.blockList[b].connections[2]].isNoHitBlock()
                    ) {
                        /**
                         * Don't break the connection between an action
                         * block and a hidden block attached to its clamp.
                         */
                        continue;
                    }

                    /** Look for available connections. */
                    if (this._testConnectionType(blkType, this.blockList[b].docks[i][2])) {
                        const x2 = this.blockList[b].container.x + this.blockList[b].docks[i][0];
                        const y2 = this.blockList[b].container.y + this.blockList[b].docks[i][1];
                        const dist = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1);
                        if (dist < min) {
                            newBlock = b;
                            newConnection = i;
                            min = dist;
                        }
                    } else {
                        // Bounce away from illegal connection if the distance was small.
                        if (!myBlock.isDragging) {
                            const x2 =
                                this.blockList[b].container.x + this.blockList[b].docks[i][0];
                            const y2 =
                                this.blockList[b].container.y + this.blockList[b].docks[i][1];

                            const dx = x2 - x1;
                            const dy = y2 - y1;
                            const dist = dx * dx + dy * dy;

                            if (!bounced && dist < ILLEGAL_BOUNCE_DIST) {
                                console.debug("cannot connect these two block types");

                                const distance = Math.sqrt(dist) || 0.0001;
                                const bounceFactor = 60;

                                // Snap back first
                                if (myBlock.lastGoodX !== undefined) {
                                    myBlock.container.x = myBlock.lastGoodX;
                                    myBlock.container.y = myBlock.lastGoodY;
                                }

                                // Directional push away from illegal dock based on block type
                                if (myBlock.isArgBlock()) {
                                    // Arg blocks bounce to the right
                                    myBlock.container.x += bounceFactor;
                                } else {
                                    // Flow blocks bounce below and to the right
                                    myBlock.container.x += bounceFactor * 0.7;
                                    myBlock.container.y += bounceFactor;
                                }

                                bounced = true;
                            }
                        }
                    }
                }
            }

            if (newBlock != null) {
                const n = this._countBlocksInStack(this.findTopBlock(newBlock));
                if (n > LONGSTACK) {
                    this.activity.errorMsg(_("Consider breaking this stack into parts."));
                }

                /** We found a match. */
                myBlock.connections[0] = newBlock;
                const connection = this.blockList[newBlock].connections[newConnection];
                let bottom;

                if (connection == null) {
                    if (this.blockList[newBlock].isArgClamp()) {
                        /** If it is an arg clamp, we may have to adjust the slot size. */
                        if (this.blockList[newBlock].isArgumentLikeBlock() && newConnection === 1) {
                            /** pass */
                        } else if (
                            ["doArg", "nameddoArg"].includes(this.blockList[newBlock].name) &&
                            newConnection === this.blockList[newBlock].connections.length - 1
                        ) {
                            /** pass */
                        } else {
                            /** Get the size of the block we are inserting adding. */

                            const size = this._getBlockSize(thisBlock);
                            /** Get the current slot list. */
                            const slotList = this.blockList[newBlock].argClampSlots;
                            let si = newConnection - 1;
                            /** Which slot is this block in? */
                            if (this.blockList[newBlock].isArgumentLikeBlock()) {
                                si = newConnection - 2;
                            }

                            if (slotList[si] !== size) {
                                slotList[si] = size;
                                this.blockList[newBlock].updateArgSlots(slotList);
                            }
                        }
                    }
                } else {
                    /**
                     * Three scenarios in which we may be overriding an
                     * existing connection:
                     * (1) if it is an argClamp, add a new slot below the
                     *     current block;
                     * (2) if it is an arg block, replace it; or
                     * (3) if it is a flow block, insert it into the flow.
                     * A few corner cases: Whenever we connect (or disconnect)
                     * from an action block (c[1] arg), we need to ensure we have
                     * a unique action name; Whenever we connect to a newnote
                     * block (c[2] flow), we need to ensure we have either a silence
                     * block or a pitch block. And if we are connecting to a
                     * storein block, we need to ensure that there is a palette
                     * entry for the new namedbox.
                     */
                    insertAfterDefault = false;
                    if (this.blockList[newBlock].isArgClamp()) {
                        if (this.blockList[newBlock].isArgumentLikeBlock() && newConnection === 1) {
                            /**
                             * If it is the action name then treat it like
                             * a standard replacement.
                             */
                            this.blockList[connection].connections[0] = null;
                            this.findDragGroup(connection);
                            for (let c = 0; c < this.dragGroup.length; c++) {
                                this.moveBlockRelative(this.dragGroup[c], 40, 40);
                            }
                        } else if (
                            ["doArg", "nameddoArg"].includes(this.blockList[newBlock].name) &&
                            newConnection === this.blockList[newBlock].connections.length - 1
                        ) {
                            /** If it is the bottom of the flow, insert as usual. */
                            bottom = this.findBottomBlock(thisBlock);
                            this.blockList[connection].connections[0] = bottom;
                            this.blockList[bottom].connections[
                                this.blockList[bottom].connections.length - 1
                            ] = connection;
                        } else {
                            /**
                             * Move the block in the current slot down one
                             * slot (cascading and creating a new slot if
                             * necessary).
                             */
                            /** Get the size of the block we are inserting adding. */
                            const size = this._getBlockSize(thisBlock);

                            /** Get the current slot list. */
                            const slotList = this.blockList[newBlock].argClampSlots;
                            /** Which slot is this block in? */
                            const ci = this.blockList[newBlock].connections.indexOf(connection);
                            let si = ci - 1;
                            if (this.blockList[newBlock].isArgumentLikeBlock()) {
                                si = ci - 2;
                            }

                            const emptySlot = null;
                            let emptyConnection = null;
                            /** Is there an empty slot below? */
                            for (let emptySlot = si; emptySlot < slotList.length; emptySlot++) {
                                if (
                                    this.blockList[newBlock].connections[ci + emptySlot - si] ==
                                    null
                                ) {
                                    emptyConnection = ci + emptySlot - si;
                                    break;
                                }
                            }

                            if (emptyConnection == null) {
                                slotList.push(1);
                                if (this.blockList[newBlock].name !== "makeblock") {
                                    this._newLocalArgBlock(slotList.length);
                                }

                                emptyConnection = ci + emptySlot - si;
                                this.blockList[newBlock].connections.push(null);

                                /** Slide everything down one slot. */
                                for (let i = slotList.length - 1; i > si + 1; i--) {
                                    slotList[i] = slotList[i - 1];
                                }

                                for (
                                    let i = this.blockList[newBlock].connections.length - 1;
                                    i > ci + 1;
                                    i--
                                ) {
                                    this.blockList[newBlock].connections[i] =
                                        this.blockList[newBlock].connections[i - 1];
                                }
                            }
                            /** The new block is added below the current connection... */
                            newConnection += 1;
                            /** Set its slot size too. */
                            slotList[si + 1] = size;

                            this.blockList[newBlock].updateArgSlots(slotList);
                        }
                    } else if (myBlock.isArgBlock()) {
                        this.blockList[connection].connections[0] = null;

                        /** If we are replacing a number block, put it in the trash */
                        if (this.blockList[connection].name === "number") {
                            this.sendStackToTrash(this.blockList[connection]);
                        } else {
                            this.findDragGroup(connection);
                            for (let c = 0; c < this.dragGroup.length; c++) {
                                this.moveBlockRelative(this.dragGroup[c], 40, 40);
                            }
                        }

                        /** We need to rename the action stack. */
                        if (this.blockList[newBlock].name === "action") {
                            actionCheck = true;

                            if (myBlock.value !== this.blockList[connection].value) {
                                /**
                                 * Temporarily disconnect to ensure we don't
                                 * find myBlock when looking for a unique name.
                                 */
                                const c = myBlock.connections[0];
                                myBlock.connections[0] = null;
                                let name = this.findUniqueActionName(myBlock.value);
                                myBlock.connections[0] = c;

                                if (name !== myBlock.value) {
                                    myBlock.value = name;
                                    let label = name;
                                    if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                                        label = label.substr(0, STRINGLEN) + "...";
                                    }
                                    myBlock.text.text = label;
                                    myBlock.container.updateCache();
                                }

                                await delayExecution(75);
                                /**
                                 * A previously disconnected name may have left
                                 * an entry in the palette we need to remove.
                                 */
                                name = this.blockList[connection].value;
                                if (this.protoBlockDict["myDo_" + name] != undefined) {
                                    delete this.protoBlockDict["myDo_" + name];
                                    this.activity.palettes.dict["action"].hideMenu(true);
                                }

                                const metadata = this.actionMetadata(newBlock);
                                this.newNameddoBlock(
                                    myBlock.value,
                                    metadata.hasReturn,
                                    metadata.hasArgs
                                );
                                const blockPalette = this.activity.palettes.dict["action"];
                                for (let b = 0; b < blockPalette.protoList.length; b++) {
                                    const protoblock = blockPalette.protoList[b];
                                    if (
                                        protoblock.name === "nameddo" &&
                                        protoblock.staticLabels[0] ===
                                            this.blockList[connection].value
                                    ) {
                                        await delayExecution(50);
                                        blockPalette.remove(
                                            protoblock,
                                            this.blockList[connection].value
                                        );
                                        delete this.protoBlockDict[
                                            "myDo_" + this.blockList[connection].value
                                        ];
                                        this.activity.palettes.hide();
                                        this.activity.palettes.updatePalettes("action");

                                        await delayExecution(500);
                                        this.activity.palettes.show();
                                        break;
                                    }
                                }

                                this.renameNameddos(
                                    this.blockList[connection].value,
                                    myBlock.value
                                );
                                this.renameDos(this.blockList[connection].value, myBlock.value);
                            }
                        } else if (this.blockList[newBlock].name === "storein") {
                            /** We may need to add new storein and namedo blocks to the palette. */
                            if (newConnection === 1 && myBlock.value !== "box") {
                                /** this.newStoreinBlock(myBlock.value); */
                                this.newStorein2Block(myBlock.value);
                                this.newNamedboxBlock(myBlock.value);
                                await delayExecution(50);
                                this.activity.palettes.updatePalettes("boxes");
                            }
                        }
                    } else if (myBlock.protoblock.style === "argclamparg") {
                        /** We don't need to do anything special with argclamparg blocks. */
                        /** console.debug("skipping argclamparg"); */
                    } else if (!this.blockList[thisBlock].isArgFlowClampBlock()) {
                        bottom = this.findBottomBlock(thisBlock);
                        this.blockList[connection].connections[0] = bottom;
                        this.blockList[bottom].connections[
                            this.blockList[bottom].connections.length - 1
                        ] = connection;
                    } else {
                        console.debug("HOW DID WE GET HERE?");
                    }
                }

                this.blockList[newBlock].connections[newConnection] = thisBlock;

                /**
                 * Remove the silence block (if it is present) after
                 * adding a new block inside of a note block.
                 */
                if (
                    this._insideNoteBlock(thisBlock) != null &&
                    this.blockList[thisBlock].connections.length > 1
                ) {
                    /** If blocks are inserted above the silence block. */
                    if (insertAfterDefault) {
                        newBlock = this.deletePreviousDefault(thisBlock);
                    } else if (bottom) {
                        this.deleteNextDefault(bottom);
                    }
                }

                /** If we attached a name to an action block, see if we need to rename it. */
                if (this.blockList[newBlock].name === "action" && !actionCheck) {
                    // Is there already another action block with this name?
                    for (let b = 0; b < this.blockList.length; b++) {
                        if (b === newBlock) {
                            continue;
                        }

                        if (this.blockList[b].name === "action") {
                            if (this.blockList[b].connections[1] != null) {
                                if (
                                    this.blockList[this.blockList[b].connections[1]].value ===
                                    this.blockList[thisBlock].value
                                ) {
                                    this.blockList[thisBlock].value = this.findUniqueActionName(
                                        this.blockList[thisBlock].value
                                    );
                                    let label = this.blockList[thisBlock].value;
                                    if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                                        label = label.substr(0, STRINGLEN) + "...";
                                    }
                                    this.blockList[thisBlock].text.text = label;
                                    this.blockList[thisBlock].container.updateCache();
                                    const metadata = this.actionMetadata(b);
                                    this.newNameddoBlock(
                                        this.blockList[thisBlock].value,
                                        metadata.hasReturn,
                                        metadata.hasArgs
                                    );
                                    this.setActionProtoVisibility(false);
                                }
                            }
                        }
                    }
                }

                this.adjustDocks(newBlock, true);
                /** TODO: some graphical feedback re new connection? */

                /** Check if top block is one of the widget blocks. */
                let lockInit = false;
                if (c === null) {
                    for (let i = 0; i < widgetTitle.length; i++) {
                        const that = this;
                        if (lockInit === false) {
                            let newTopBlock;
                            switch (widgetTitle[i].innerHTML) {
                                case "oscilloscope":
                                case "tempo":
                                case "rhythm maker":
                                case "pitch slider":
                                case "pitch staircase":
                                case "status":
                                case "phrase maker":
                                case "lego bricks":
                                case "custom mode":
                                case "music keyboard":
                                case "pitch drum":
                                case "meter":
                                case "temperament":
                                case "timbre":
                                    lockInit = true;
                                    newTopBlock = that.findTopBlock(thisBlock);
                                    if (
                                        this.blockList[newTopBlock].protoblock.staticLabels[0] ==
                                        widgetTitle[i].innerHTML
                                    ) {
                                        this.reInitWidget(newTopBlock, 1500);
                                    }
                                    break;
                            }
                        }
                    }
                }
            }

            /** If it is an arg block, where is it coming from? */
            if (myBlock.isArgumentLikeBlock() && newBlock != null) {
                const parentBlock = this.blockList[newBlock];

                // Find which connection index this block is attached to
                const connectionIndex = parentBlock.connections.indexOf(thisBlock);

                // Guard against invalid index (can happen during drag/undo/intermediate states)
                if (connectionIndex !== -1) {
                    // Ask the parent block what type of layout update it needs for this connection
                    const updateType = parentBlock.getLayoutUpdateType(connectionIndex);

                    if (updateType === "ARG") {
                        if (!this._checkTwoArgBlocks.includes(newBlock)) {
                            this._checkTwoArgBlocks.push(newBlock);
                        }
                    } else if (updateType === "FLOW") {
                        if (!checkArgBlocks.includes(newBlock)) {
                            checkArgBlocks.push(newBlock);
                        }
                    }
                }
            }

            this.addDefaultBlock(parentblk, thisBlock, actionCheck);

            /**
             * Put block adjustments inside a slight delay to make the
             * addition/subtraction of vspace and changes of block shape
             * appear less abrupt (and it can be a little racy).
             * If we changed the contents of a arg block, we may need a vspace.
             */
            if (checkArgBlocks.length > 0) {
                for (let i = 0; i < checkArgBlocks.length; i++) {
                    this._addRemoveVspaceBlock(checkArgBlocks[i]);
                }
            }

            /** If we changed the contents of a two-arg block, we need to adjust it. */
            if (this._checkTwoArgBlocks.length > 0) {
                this._adjustExpandableTwoArgBlock(this._checkTwoArgBlocks);
            }

            /** First, adjust the docks for any blocks that may have had a vspace added. */
            for (let i = 0; i < checkArgBlocks.length; i++) {
                this.adjustDocks(checkArgBlocks[i], true);
            }

            /** Next, recheck if the connection is inside of a expandable block. */
            blk = this.insideExpandableBlock(thisBlock);
            expandableLoopCounter = 0;
            while (blk != null) {
                /** Extra check for malformed data. */
                expandableLoopCounter += 1;
                if (expandableLoopCounter > 2 * this.blockList.length) {
                    console.debug("Infinite loop checking for expandables?");

                    console.debug(this.blockList);
                    break;
                }

                if (this.blockList[blk].name === "ifthenelse") {
                    this.clampBlocksToCheck.push([blk, 0]);
                    this.clampBlocksToCheck.push([blk, 1]);
                } else {
                    this.clampBlocksToCheck.push([blk, 0]);
                }

                blk = this.insideExpandableBlock(blk);
            }
            this.isBlockMoving = false;
            this.adjustExpandableClampBlock();
            this.activity.refreshCanvas();

            if (this.activity.turtles.running()) {
                this.activity.logo.doStopTurtles();
                const stopBtn = document.getElementById("stop");
                if (stopBtn) stopBtn.style.color = "white";
            }
        };

        /**
         * Test for a valid connection between two dock types.
         * @param - type1 - dock type 1
         * @param - type2 - dock type 2
         * @private
         * @returns boolean
         */
        this._testConnectionType = (type1, type2) => {
            /** Can these two blocks dock? */
            return ALLOWED_CONNECTIONS.has(type1 + ":" + type2);
        };

        /**
         * Ensure that all the blocks are where they are supposed to be.
         * @public
         * @returns {void}
         */
        this.updateBlockPositions = () => {
            for (const [blk, block] of this.blockList.entries()) {
                this._moveBlock(blk, block.container.x, block.container.y);
            }
        };

        /**
         * Move all the blocks to the top layer of the block container.
         * @public
         * @returns {void}
         */
        this.bringToTop = () => {
            this._adjustTheseStacks = [];

            for (const [blk, myBlock] of this.blockList.entries()) {
                if (myBlock.connections[0] == null) {
                    this._adjustTheseStacks.push(blk);
                }
            }

            for (let blk = 0; blk < this._adjustTheseStacks.length; blk++) {
                this.raiseStackToTop(this._adjustTheseStacks[blk]);
            }

            this.activity.refreshCanvas();
        };

        /**
         * Checks the bounds to ensure blocks are "home".
         * @public
         * @returns {void}
         */
        this.checkBounds = () => {
            if (this._deferCheckBounds) return;

            let onScreen = true;
            for (const block of this.blockList) {
                if (block.connections[0] == null) {
                    if (block.offScreen(this.boundary)) {
                        this.activity.setHomeContainers(true);
                        /** Just highlight the button. */
                        /** this.boundary.show(); */
                        onScreen = false;
                        break;
                    }
                }
            }

            if (onScreen) {
                this.activity.setHomeContainers(false);
                this.boundary.hide();
            }
        };

        /**
         * Schedule a bounds check on the next animation frame.
         * Coalesces multiple calls per frame into a single O(n) scan.
         * @public
         * @returns {void}
         */
        this.scheduleCheckBounds = () => {
            if (this._checkBoundsScheduled) {
                return;
            }
            this._checkBoundsScheduled = true;
            requestAnimationFrame(() => {
                this._checkBoundsScheduled = false;
                this.checkBounds();
            });
        };

        /**
         * Move a block to a specified position and check the docks afterward.
         * @public
         * @returns{void}
         */
        this.moveBlock = (blk, x, y) => {
            this._moveBlock(blk, x, y);
            this.adjustDocks(blk, true);
        };

        /**
         * Move a block (and its label) to x, y.
         * @param - blk - block
         * @param - x - x position
         * @param - y - y position
         * @public
         * @returns {void}
         */
        this._moveBlock = (blk, x, y) => {
            const myBlock = this.blockList[blk];
            if (myBlock.container != null) {
                /** Round position so font renders clearly. */
                myBlock.container.x = Math.floor(x + 0.5);
                myBlock.container.y = Math.floor(y + 0.5);

                this.checkBounds();
            } else {
                console.debug("No container yet for block " + myBlock.name);
            }
        };

        /**
         * Relative move of a block (and its label) by dx, dy
         * @param - blk - block
         * @param - dx - updated x position
         * @param - dy - updated y position
         * @public
         * @returns {void}
         */
        this.moveBlockRelative = (blk, dx, dy) => {
            this.inLongPress = false;
            this.isBlockMoving = true;
            const myBlock = this.blockList[blk];
            if (myBlock.container != null) {
                myBlock.container.x += dx;
                myBlock.container.y += dy;

                this.checkBounds();
            } else {
                console.debug("No container yet for block " + myBlock.name);
            }
        };

        /**
         * Move a block by dx, dy without running checkBounds.
         * Used during drag operations where checkBounds is deferred
         * to a single rAF-scheduled call at the end of the frame.
         * @param - blk - block index
         * @param - dx - delta x
         * @param - dy - delta y
         * @public
         * @returns {void}
         */
        this.moveBlockRelativeBatched = (blk, dx, dy) => {
            this.inLongPress = false;
            this.isBlockMoving = true;
            const myBlock = this.blockList[blk];
            if (myBlock.container != null) {
                myBlock.container.x += dx;
                myBlock.container.y += dy;
            }
        };

        /**
         * Moves the blocks in a stack to a new position.
         * @param blk - block
         * @param dx - x position
         * @param dy - y position
         * @public
         * @returns {void}
         */
        this.moveStackRelative = (blk, dx, dy) => {
            this.findDragGroup(blk);
            if (this.dragGroup.length > 0) {
                for (let b = 0; b < this.dragGroup.length; b++) {
                    this.moveBlockRelative(this.dragGroup[b], dx, dy);
                }
            }
        };

        /**
         * Moves all blocks except given stack
         * @param blk - exception block (the block object, not index)
         * @param dx - delta x
         * @param dy - delta y
         * @public
         * @returns {void}
         */
        this.moveAllBlocksExcept = (blk, dx, dy) => {
            // Build top-block cache if not available.
            // The cache maps each block index to its top block index,
            // avoiding repeated O(depth) findTopBlock walks.
            if (this._topBlockCache == null) {
                this._topBlockCache = new Map();
                for (let i = 0; i < this.blockList.length; i++) {
                    this._topBlockCache.set(i, this.findTopBlock(i));
                }
            }

            const blkIdx = this.blockList.indexOf(blk);
            const excludeTop = blkIdx >= 0 ? this._topBlockCache.get(blkIdx) : -1;

            for (let i = 0; i < this.blockList.length; i++) {
                if (this._topBlockCache.get(i) !== excludeTop) {
                    this.moveBlockRelativeBatched(i, dx, dy);
                }
            }

            // Single deferred bounds check instead of one per block
            this.scheduleCheckBounds();
        };

        /**
         * Update the block labels.
         * When we create new blocks, we may not have assigned the value yet.
         * @param - blk - block
         * @public
         * @returns {void}
         */
        this.updateBlockText = blk => {
            const myBlock = this.blockList[blk];
            let maxLength = 8;
            if (myBlock.text == null) {
                return;
            }

            let label;
            let obj;
            let attr;
            switch (myBlock.name) {
                case "loadFile":
                    try {
                        label = myBlock.value[0].toString();
                    } catch (e) {
                        label = _("open file");
                    }
                    maxLength = 10;
                    break;
                case "audiofile":
                    try {
                        if (myBlock.value[0] === null) {
                            label = _("audio file");
                        } else {
                            label = myBlock.value[0].toString();
                            if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                                label = label.substr(0, STRINGLEN) + "...";
                            }
                        }
                    } catch (e) {
                        label = _("audio file");
                    }
                    break;
                case "solfege":
                    if (myBlock.value === null) myBlock.value = "sol";
                    obj = splitSolfege(myBlock.value);
                    label = i18nSolfege(obj[0]);
                    attr = obj[1];
                    if (attr !== NATURAL) {
                        label += attr;
                    }
                    break;
                case "scaledegree2":
                    if (myBlock.value === null) myBlock.value = "4";
                    obj = splitScaleDegree(myBlock.value);
                    label = obj[0];
                    attr = obj[1];
                    if (attr !== NATURAL) {
                        label += attr;
                    }
                    break;
                case "customNote":
                    label = _(myBlock.value);
                    break;
                case "eastindiansolfege":
                    if (myBlock.value === null) myBlock.value = "sol";
                    obj = splitSolfege(myBlock.value);
                    label = WESTERN2EISOLFEGENAMES[obj[0]];
                    attr = obj[1];
                    if (attr !== NATURAL) {
                        label += attr;
                    }
                    break;
                case "modename":
                    if (myBlock.value === null) {
                        myBlock.value = DEFAULTMODE;
                    }
                    label = _(myBlock.value); /** + ' ' + getModeNumbers(myBlock.value); */
                    break;
                case "chordname":
                    if (myBlock.value === null) {
                        myBlock.value = DEFAULTCHORD;
                    }
                    label = _(myBlock.value);
                    break;
                case "accidentalname":
                case "intervalname":
                    if (myBlock.value === null) {
                        switch (myBlock.name) {
                            case "accidentalname":
                                myBlock.value = DEFAULTACCIDENTAL;
                                break;
                            case "intervalname":
                                myBlock.value = DEFAULTINTERVAL;
                                break;
                        }
                    }
                    obj = myBlock.value.split(" ");
                    label = _(obj[0]) + " " + obj[1];
                    break;
                case "grid":
                    label = _(myBlock.value);
                    break;
                case "filtertype":
                case "drumname":
                case "effectsname":
                case "voicename":
                case "oscillatortype":
                case "invertmode":
                    if (myBlock.value === null) {
                        switch (myBlock.name) {
                            case "filtertype":
                                myBlock.value = DEFAULTFILTERTYPE;
                                break;
                            case "drumname":
                                myBlock.value = DEFAULTDRUM;
                                break;
                            case "effectsname":
                                myBlock.value = DEFAULTEFFECT;
                                break;
                            case "voicename":
                                myBlock.value = DEFAULTVOICE;
                                break;
                            case "oscillatortype":
                                myBlock.value = DEFAULTOSCILLATORTYPE;
                                break;
                            case "invertmode":
                                myBlock.value = DEFAULTINVERT;
                                break;
                        }
                    }
                    label = _(myBlock.value);
                    break;
                case "noisename":
                    label = getNoiseName(myBlock.value);
                    break;
                case "temperamentname":
                    // eslint-disable-next-line no-case-declarations
                    const temperaments = getTemperamentsList();
                    label = _(temperaments[0][1]); /** equal by default */
                    for (let i = 0; i < temperaments.length; i++) {
                        if (temperaments[i][1] === myBlock.value) {
                            if (temperaments[i][0].length === 0) {
                                label = temperaments[i][2];
                            } else {
                                label = temperaments[i][0];
                            }
                            break;
                        }
                    }
                    break;
                case "wrapmode":
                    if (myBlock.value === "on") {
                        label = _("on2");
                    } else {
                        label = _("off");
                    }
                    break;
                case "boolean":
                    if (myBlock.value) {
                        label = _("true");
                    } else {
                        label = _("false");
                    }
                    break;
                default:
                    if (myBlock.value == null) {
                        label = "";
                    } else if (typeof myBlock.value !== "string") {
                        label = myBlock.value.toString();
                    } else {
                        label = myBlock.value;
                    }
                    break;
            }

            if (!WIDENAMES.includes(myBlock.name) && label.length > maxLength) {
                label = label.substr(0, maxLength - 1) + "...";
            }

            myBlock.text.text = label;

            /** Make sure text is on top. */
            const z = myBlock.container.children.length - 1;
            myBlock.container.setChildIndex(myBlock.text, z);

            if (myBlock.loadComplete) {
                myBlock.container.updateCache();
            } else {
                console.debug("Load not yet complete for (" + blk + ") " + myBlock.name);
            }
        };

        /**
         * Find the top block in the stack.
         * @param - blk - block
         * @public
         * @returns blk
         */
        this.findTopBlock = blk => {
            /** Find the top block in a stack. */
            if (blk == null) {
                return null;
            }

            let myBlock = this.blockList[blk];
            if (myBlock.connections == null) {
                return blk;
            }

            if (myBlock.connections.length === 0) {
                return blk;
            }

            /** Test for corrupted-connection scenario. */
            if (
                myBlock.connections.length > 1 &&
                myBlock.connections[0] != null &&
                myBlock.connections[0] === last(myBlock.connections)
            ) {
                console.debug(
                    "WARNING: CORRUPTED BLOCK DATA. Block " +
                        myBlock.name +
                        " (" +
                        blk +
                        ") is connected to the same block " +
                        this.blockList[myBlock.connections[0]].name +
                        " (" +
                        myBlock.connections[0] +
                        ") twice."
                );
                return blk;
            }

            let topBlockLoop = 0;
            while (myBlock.connections[0] != null) {
                topBlockLoop += 1;
                if (topBlockLoop > 2 * this.blockList.length) {
                    /** Could happen if the block data is malformed. */

                    console.debug("infinite loop finding topBlock?");
                    if (myBlock.garbage) {
                        console.debug(myBlock.blockIndex + " " + myBlock.name);
                    }
                    break;
                }
                blk = myBlock.connections[0];
                myBlock = this.blockList[blk];
            }

            return blk;
        };

        /**
         * Checks if two blocks are of the same flow generation.
         * @param - firstblk
         * @param - childblk
         * @public
         * @returns boolean
         */
        this.sameGeneration = (firstBlk, childBlk) => {
            if (firstBlk == null || childBlk == null) {
                return false;
            }

            if (firstBlk === childBlk) {
                return true;
            }

            let myBlock = this.blockList[firstBlk];
            if (myBlock.connections == null) {
                return false;
            }

            if (myBlock.connections.length === 0) {
                return false;
            }

            let bottomBlockLoop = 0;
            while (last(myBlock.connections) != null) {
                bottomBlockLoop += 1;
                if (bottomBlockLoop > 2 * this.blockList.length) {
                    /** Could happen if the block data is malformed. */

                    console.debug("infinite loop finding bottomBlock?");
                    break;
                }
                const blk = last(myBlock.connections);
                myBlock = this.blockList[blk];
                if (blk === childBlk) {
                    return true;
                }
            }

            return false;
        };

        /**
         * Check if there is a block type in any of the stacks.
         * @param - thisBlock - new variable
         * @param - names - names of blocks
         * @private
         * @returns boolean
         */
        this._blockInStack = (thisBlock, names) => {
            /** Is there a block of any of these names in this stack? */
            let counter = 0;
            while (thisBlock != null) {
                if (names.includes(this.blockList[thisBlock].name)) {
                    return true;
                }

                if (this.blockList[thisBlock].connections.length > 1) {
                    thisBlock = last(this.blockList[thisBlock].connections);
                } else {
                    thisBlock = null;
                }

                /** Just in case there is a loop in the block list. */
                counter += 1;
                if (counter > this.blockList.length) {
                    console.debug("infinite loop finding block name in stack");
                    break;
                }
            }

            return false;
        };

        /**
         * Find the bottom block in the stack.
         * @param - blk - block
         * @public
         * @returns blk
         */
        this.findBottomBlock = blk => {
            /** Find the bottom block in a stack. */
            if (blk == null) {
                return null;
            }

            let myBlock = this.blockList[blk];
            if (myBlock.connections == null) {
                return blk;
            }

            if (myBlock.connections.length === 0) {
                return blk;
            }

            let bottomBlockLoop = 0;
            while (last(myBlock.connections) != null) {
                bottomBlockLoop += 1;
                if (bottomBlockLoop > 2 * this.blockList.length) {
                    /** Could happen if the block data is malformed. */

                    console.debug("infinite loop finding bottomBlock?");
                    break;
                }
                blk = last(myBlock.connections);
                myBlock = this.blockList[blk];
            }

            return blk;
        };

        /**
         * Count all the blocks in the stack starting from blk.
         * @param - blk - block
         * @private
         * c = 0
         * @returns c
         */
        this._countBlocksInStack = blk => {
            let c = 0;
            if (blk !== null) {
                c += 1;

                for (let i = 1; i < this.blockList[blk].connections.length; i++) {
                    c += this._countBlocksInStack(this.blockList[blk].connections[i]);
                }
            }

            return c;
        };

        /**
         * Find any block with null in its first connection.
         * Push them onto the stackList.
         * @public
         * @returns {void}
         */
        this.findStacks = () => {
            this.stackList = [];
            for (let i = 0; i < this.blockList.length; i++) {
                if (this.blockList[i].connections[0] == null) {
                    this.stackList.push(i);
                }
            }
        };

        /**
         * Find any clamp blocks.
         * @private
         * @returns {void}
         */
        this._findClamps = () => {
            this._expandablesList = [];
            this.findStacks(); /** We start by finding the stacks */
            for (let i = 0; i < this.stackList.length; i++) {
                this._searchCounter = 0;
                this._searchForExpandables(this.stackList[i]);
            }

            this._searchForArgFlow();
        };

        /**
         * Find any expandable arg blocks.
         * @public
         * @returns {void}
         */
        this._findTwoArgs = () => {
            this._expandablesList = [];
            for (let i = 0; i < this.blockList.length; i++) {
                if (this.blockList[i].isArgBlock() && this.blockList[i].isExpandableBlock()) {
                    this._expandablesList.push(i);
                } else if (this.blockList[i].isTwoArgBlock()) {
                    this._expandablesList.push(i);
                }
            }
        };

        /**
         * Search for argument flow blocks.
         * @private
         * @returns{void}
         */
        this._searchForArgFlow = () => {
            for (const [blk, block] of this.blockList.entries()) {
                if (block.isArgFlowClampBlock()) {
                    this._searchCounter = 0;
                    this._searchForExpandables(blk);
                    this._expandablesList.push(blk);
                }
            }
        };

        /**
         * Search for expandable blocks below blk in stack.
         * @param - blk - block
         * @private
         * @returns {void}
         */
        this._searchForExpandables = blk => {
            let c;
            while (
                blk != null &&
                this.blockList[blk] != null &&
                !this.blockList[blk].isValueBlock()
            ) {
                /** More checks for malformed or corrupted block data. */
                this._searchCounter += 1;
                if (this._searchCounter > 2 * this.blockList.length) {
                    console.debug(
                        "infinite loop searching for Expandables? " + this._searchCounter
                    );

                    console.debug(blk + " " + this.blockList[blk].name);
                    break;
                }

                if (this.blockList[blk].isClampBlock()) {
                    this._expandablesList.push(blk);
                    c = this.blockList[blk].connections.length - 2;
                    this._searchForExpandables(this.blockList[blk].connections[c]);
                    if (this.blockList[blk].name === "ifthenelse") {
                        /** search top clamp too */
                        c = 2;
                        this._searchForExpandables(this.blockList[blk].connections[c]);
                    }
                } else if (this.blockList[blk].isArgClamp()) {
                    this._expandablesList.push(blk);
                }

                if (this.blockList[blk].connections.length > 1) {
                    blk = last(this.blockList[blk].connections);
                } else {
                    /** A value block only connects back to its parent, so end the search here. */
                    blk = null;
                }
            }
        };

        /**
         * Expand two-arg blocks as needed.
         * @private
         * @returns {void}
         */
        this._expandTwoArgs = () => {
            this._findTwoArgs();
            this._adjustExpandableTwoArgBlock(this._expandablesList);
            this.activity.refreshCanvas();
        };

        /**
         * Expand expandable clamp blocks as needed.
         * @private
         * @returns {void}
         */
        this._expandClamps = () => {
            this._findClamps();
            this.clampBlocksToCheck = [];
            for (let i = 0; i < this._expandablesList.length; i++) {
                if (this.blockList[this._expandablesList[i]].name === "ifthenelse") {
                    this.clampBlocksToCheck.push([this._expandablesList[i], 0]);
                    this.clampBlocksToCheck.push([this._expandablesList[i], 1]);
                } else {
                    this.clampBlocksToCheck.push([this._expandablesList[i], 0]);
                }
            }

            this.adjustExpandableClampBlock();
            this.activity.refreshCanvas();
        };

        /**
         * Some blocks, e.g., sensor blocks for Butia, change their
           appearance depending upon if they have been enabled or
           disabled. If they have, change their disabled status
         * @param - name
         * @param - flag
         * @public
         * @returns {void}
         */
        this.changeDisabledStatus = (name, flag) => {
            for (const myBlock of this.blockList) {
                if (myBlock.name === name) {
                    myBlock.protoblock.disabled = flag;
                    myBlock.regenerateArtwork(false);
                }
            }
        };

        /**
         * Unhighlight all blocks.
         * @public
         * @returns {void}
         */
        this.unhighlightAll = () => {
            for (const [blk] of this.blockList.entries()) {
                this.unhighlight(blk);
            }
        };

        /**
         * Unhighlight a block
         * @public
         * return {void}
         */
        this.unhighlight = blk => {
            if (!this.visible) {
                return;
            }

            let thisBlock = blk;
            if (blk === null) {
                thisBlock = this.highlightedBlock;
            }

            if (thisBlock !== null) {
                this.blockList[thisBlock].unhighlight();
            }

            if (this.highlightedBlock === thisBlock) {
                this.highlightedBlock = null;
            }
        };

        /**
         * Highlight a block
         * @param - blk - block
         * @param - unhighlight - new variable
         * @public
         * @returns {void}
         */
        this.highlight = (blk, unhighlight) => {
            if (!this.visible) {
                return;
            }

            if (blk !== null) {
                if (unhighlight) {
                    this.unhighlight(null);
                }
                this.blockList[blk].highlight();
                this.highlightedBlock = blk;
            }
        };

        /**
         * Hide all of the blocks.
         * @public
         * return {void}
         */
        this.hide = () => {
            for (const block of this.blockList) {
                block.hide();
            }
            this.visible = false;
        };

        /**
         * Show all the blocks.
         * @public
         * return {void}
         */
        this.show = () => {
            for (const block of this.blockList) {
                block.show();
            }
            this.visible = true;
        };

        /**
         * Make a new block with connections
         * @param - name - new variable
         * @param - blockOffset - new variable
         * @param - connections
         * @param - postProcess
         * @param - postProcessArg - Post process Argument
         * @private
         * @returns {void}
         */
        this._makeNewBlockWithConnections = (
            name,
            blockOffset,
            connections,
            postProcess,
            postProcessArg
        ) => {
            const myBlock = this.makeNewBlock(name, postProcess, postProcessArg);
            if (myBlock === null) {
                console.debug("could not make block " + name);
                return;
            }

            for (let c = 0; c < connections.length; c++) {
                if (c === myBlock.docks.length) {
                    break;
                }
                if (connections[c] == null) {
                    myBlock.connections.push(null);
                } else {
                    myBlock.connections.push(connections[c] + blockOffset);
                }
            }
        };

        /**
         * Create new block
         * @param - name
         * @param - postProcess
         * @param - postProcessArg
         * @public
         * @returns {void}
         */
        this.makeNewBlock = (name, postProcess, postProcessArg) => {
            /**
             * Create a new block
             */
            if (this.protoBlockDict[name] == null) {
                console.debug("makeNewBlock: no prototype for " + name);
                return null;
            }

            /** Deprecated: If we drag in a synth block, we need to load the synth. */
            if (["sine", "sawtooth", "triangle", "square"].includes(name)) {
                this.activity.logo.synth.loadSynth(0, name);
            }

            if (
                [
                    "namedbox",
                    "nameddo",
                    "namedcalc",
                    "nameddoArg",
                    "namedcalcArg",
                    "outputtools"
                ].includes(name)
            ) {
                this.blockList.push(new Block(this.protoBlockDict[name], this, postProcessArg[1]));
            } else if (name === "namedarg") {
                this.blockList.push(
                    new Block(this.protoBlockDict[name], this, "arg " + postProcessArg[1])
                );
            } else {
                this.blockList.push(new Block(this.protoBlockDict[name], this));
            }

            if (last(this.blockList) == null) {
                /** Should never happen */

                console.debug("failed to make protoblock for " + name);
                return null;
            }

            /** We copy the dock because expandable blocks modify it. */
            const myBlock = last(this.blockList);
            // Cache the block's index for O(1) lookups instead of
            // O(N) blockList.indexOf() scans.
            myBlock.blockIndex = this.blockList.length - 1;
            myBlock.copySize();

            /** We may need to do some postProcessing to the block */
            myBlock.postProcess = postProcess;
            myBlock.postProcessArg = postProcessArg;

            /** We need a container for the block graphics. */
            myBlock.container = new createjs.Container();
            this.activity.blocksContainer.addChild(myBlock.container);
            myBlock.container.snapToPixelEnabled = true;
            myBlock.container.x = 0;
            myBlock.container.y = 0;

            /** and we need to load the images into the container. */
            myBlock.imageLoad();
            return myBlock;
        };

        /**
         * Make new blocks from proto block, which is called from Palettes
         * @param - name
         * @param - arg - argument
         * @public
         * @returns {void}
         */
        this.makeBlock = (name, arg) => {
            let postProcess;
            const that = this;
            postProcess = args => {
                const thisBlock = args[0];
                const value = args[1];
                that.blockList[thisBlock].value = value;
                switch (that.blockList[thisBlock].name) {
                    case "drumname":
                    case "effectsname":
                    case "voicename":
                    case "oscillatortype":
                    case "invertmode":
                    case "filtertype":
                    case "noisename":
                        that.blockList[thisBlock].text.text = _(value);
                        break;
                    case "temperamentname":
                        // eslint-disable-next-line no-case-declarations
                        const temperaments = getTemperamentsList();
                        that.blockList[thisBlock].text.text = _(temperaments[0][1]);
                        for (let i = 0; i < temperaments.length; i++) {
                            if (temperaments[i][1] === value) {
                                that.blockList[thisBlock].text.text = temperaments[i][0];
                                break;
                            }
                        }
                        break;
                    case "wrapmode":
                        if (value === "on") {
                            that.blockList[thisBlock].text.text = _("on2");
                        } else {
                            that.blockList[thisBlock].text.text = _("off");
                        }
                        break;
                    case "boolean":
                        if (value) {
                            that.blockList[thisBlock].text.text = _("true");
                        } else {
                            that.blockList[thisBlock].text.text = _("false");
                        }
                        break;
                    default:
                        that.blockList[thisBlock].text.text = value;
                        break;
                }

                that.blockList[thisBlock].container.updateCache();
            };

            let postProcessArg = null;
            let thisBlock = this.blockList.length;
            if (name === "start") {
                postProcess = thisBlock => {
                    that.blockList[thisBlock].value = that.turtles.getTurtleCount();
                    that.turtles.addTurtle(that.blockList[thisBlock]);
                };

                postProcessArg = thisBlock;
            } else if (name === "outputtools") {
                postProcess = args => {
                    that.blockList[thisBlock].value = null;
                    that.blockList[thisBlock].privateData = args[1];
                };
                postProcessArg = [thisBlock, arg];
            } else if (name === "text") {
                postProcessArg = [thisBlock, _("text")];
            } else if (name === "boolean") {
                postProcessArg = [thisBlock, true];
            } else if (name === "solfege") {
                postProcessArg = [thisBlock, "sol"];
            } else if (name === "scaledegree2") {
                postProcessArg = [thisBlock, "5"];
            } else if (name === "customNote") {
                const len = this.activity.logo.synth.startingPitch.length;
                postProcessArg = [
                    thisBlock,
                    this.activity.logo.synth.startingPitch.substring(0, len - 1) + "(+0%)"
                ];
            } else if (name === "notename") {
                postProcessArg = [thisBlock, "G"];
            } else if (name === "drumname") {
                postProcessArg = [thisBlock, DEFAULTDRUM];
            } else if (name === "effectsname") {
                postProcessArg = [thisBlock, DEFAULTEFFECT];
            } else if (name === "filtertype") {
                postProcessArg = [thisBlock, DEFAULTFILTER];
            } else if (name === "oscillatortype") {
                postProcessArg = [thisBlock, DEFAULTOSCILLATORTYPE];
            } else if (name === "voicename") {
                postProcessArg = [thisBlock, DEFAULTVOICE];
            } else if (name === "noisename") {
                postProcessArg = [thisBlock, DEFAULTNOISE];
            } else if (name === "eastindiansolfege") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    that.blockList[b].text.text = WESTERN2EISOLFEGENAMES[v];
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, "sol"];
            } else if (name === "modename") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    that.blockList[b].text.text = v;
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, DEFAULTMODE];
            } else if (name === "chordname") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    that.blockList[b].text.text = v;
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, DEFAULTCHORD];
            } else if (name === "accidentalname") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    const o = v.split(" ");
                    that.blockList[b].text.text = _(o[0]) + " " + o[1];
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, DEFAULTACCIDENTAL];
            } else if (name === "intervalname") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    const o = v.split(" ");
                    that.blockList[b].text.text = _(o[0]) + " " + o[1];
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, DEFAULTINTERVAL];
            } else if (name === "temperamentname") {
                postProcessArg = [thisBlock, DEFAULTTEMPERAMENT];
            } else if (name === "invertmode") {
                postProcessArg = [thisBlock, DEFAULTINVERT];
            } else if (name === "number") {
                postProcess = args => {
                    const b = args[0];
                    const v = Number(args[1]);
                    that.blockList[b].value = v;
                    that.blockList[b].text.text = v.toString();
                    that.blockList[b].container.updateCache();
                };

                postProcessArg = [thisBlock, NUMBERBLOCKDEFAULT];
            } else if (name === "loudness" || name === "pitchness") {
                postProcess = () => {
                    that.activity.logo.initMediaDevices();
                };
            } else if (name === "media") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = v;
                    if (v == null) {
                        that.blockList[b].image = "images/load-media.svg";
                    } else {
                        that.blockList[b].image = null;
                    }
                };

                postProcessArg = [thisBlock, null];
            } else if (name === "camera") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = CAMERAVALUE;
                    if (v == null) {
                        that.blockList[b].image = "images/camera.svg";
                    } else {
                        that.blockList[b].image = null;
                    }
                };

                postProcessArg = [thisBlock, null];
            } else if (name === "video") {
                postProcess = args => {
                    const b = args[0];
                    const v = args[1];
                    that.blockList[b].value = VIDEOVALUE;
                    if (v == null) {
                        that.blockList[b].image = "images/video.svg";
                    } else {
                        that.blockList[b].image = null;
                    }
                };

                postProcessArg = [thisBlock, null];
            } else if (name === "loadFile") {
                postProcess = args => {
                    that.updateBlockText(args[0]);
                };

                postProcessArg = [thisBlock, null];
            } else if (
                [
                    "storein2",
                    "namedbox",
                    "nameddo",
                    "namedcalc",
                    "nameddoArg",
                    "namedcalcArg",
                    "namedarg"
                ].includes(name)
            ) {
                postProcess = args => {
                    that.blockList[thisBlock].value = null;
                    that.blockList[thisBlock].privateData = args[1];
                };

                postProcessArg = [thisBlock, arg];
            } else if (name === "newnote") {
                postProcess = () => {};
                postProcessArg = [thisBlock, null];
            } else {
                postProcess = null;
            }

            let protoFound = false;
            for (const proto in that.protoBlockDict) {
                if (that.protoBlockDict[proto].name === name) {
                    if (arg === "__NOARG__") {
                        that.makeNewBlock(proto, postProcess, postProcessArg);
                        protoFound = true;
                        break;
                    } else if (that.protoBlockDict[proto].defaults[0] === arg) {
                        that.makeNewBlock(proto, postProcess, postProcessArg);
                        protoFound = true;
                        break;
                    } else if (
                        [
                            "namedbox",
                            "nameddo",
                            "namedcalc",
                            "nameddoArg",
                            "namedcalcArg",
                            "namedarg"
                        ].includes(name)
                    ) {
                        if (that.protoBlockDict[proto].defaults[0] === undefined) {
                            that.makeNewBlock(proto, postProcess, postProcessArg);
                            protoFound = true;
                            break;
                        }
                    } else if (name === "storein2") {
                        postProcess = args => {
                            const c = that.blockList[thisBlock].connections[0];
                            if (args[1] === _("store in box")) {
                                that.blockList[c].privateData = _("box");
                            } else {
                                that.blockList[c].privateData = args[1];
                                if (args[1] === "box1") {
                                    that.blockList[c].overrideName = _("box1");
                                } else if (args[1] === "box2") {
                                    that.blockList[c].overrideName = _("box2");
                                } else {
                                    that.blockList[c].overrideName = args[1];
                                }
                                that.blockList[c].regenerateArtwork(false);
                            }
                        };

                        postProcessArg = [thisBlock, arg];

                        that.makeNewBlock(proto, postProcess, postProcessArg);
                        protoFound = true;
                        break;
                    } else if (name === "outputtools") {
                        if (that.protoBlockDict[proto].defaults[0] === undefined) {
                            that.makeNewBlock(proto, postProcess, postProcessArg);
                            protoFound = true;
                            break;
                        }
                    }
                }
            }

            if (!protoFound) {
                console.debug(name + " not found!!");
            }

            const blk = this.blockList.length - 1;
            const myBlock = this.blockList[blk];
            for (let i = 0; i < myBlock.docks.length; i++) {
                myBlock.connections.push(null);
            }

            /** Attach default args if any */
            const cblk = blk + 1;
            for (let i = 0; i < myBlock.protoblock.defaults.length; i++) {
                let value = myBlock.protoblock.defaults[i];

                if (myBlock.name === "action") {
                    /** Make sure we don't make two actions with the same name. */
                    value = this.findUniqueActionName(_("action"));
                    if (value !== _("action")) {
                        const metadata = this.actionMetadata(blk);
                        this.newNameddoBlock(value, metadata.hasReturn, metadata.hasArgs);
                        /** this.activity.palettes.hide(); */
                        this.activity.palettes.updatePalettes("action");
                        /** this.activity.palettes.show(); */
                    }
                }

                thisBlock = this.blockList.length;
                if (myBlock.docks.length > i && myBlock.docks[i + 1][2] === "anyin") {
                    if (value == null) {
                        console.debug("cannot set default value");
                    } else if (typeof value === "string") {
                        postProcess = args => {
                            const b = args[0];
                            const v = args[1];
                            that.blockList[b].value = v;
                            let l = value.toString();
                            if (
                                !WIDENAMES.includes(that.blockList[b].name) &&
                                getTextWidth(l, "bold 20pt Sans") > TEXTWIDTH
                            ) {
                                l = l.substr(0, STRINGLEN) + "...";
                            }
                            that.blockList[b].text.text = l;
                            that.blockList[b].container.updateCache();
                        };

                        this.makeNewBlock("text", postProcess, [thisBlock, value]);
                    } else {
                        postProcess = args => {
                            const b = args[0];
                            const v = Number(args[1]);
                            that.blockList[b].value = v;
                            that.blockList[b].text.text = v.toString();
                        };

                        this.makeNewBlock("number", postProcess, [thisBlock, value]);
                    }
                } else if (myBlock.docks[i + 1][2] === "textin") {
                    postProcess = args => {
                        const b = args[0];
                        const v = args[1];
                        that.blockList[b].value = v;
                        let l = v.toString();
                        if (
                            !WIDENAMES.includes(that.blockList[b].name) &&
                            getTextWidth(l, "bold 20pt Sans") > TEXTWIDTH
                        ) {
                            l = l.substr(0, STRINGLEN) + "...";
                        }
                        that.blockList[b].text.text = l;
                    };

                    this.makeNewBlock("text", postProcess, [thisBlock, value]);
                } else if (myBlock.docks[i + 1][2] === "solfegein") {
                    postProcess = args => {
                        const b = args[0];
                        const v = args[1];
                        that.blockList[b].value = v;
                        const label = i18nSolfege(v.toString());
                        that.blockList[b].text.text = label;
                    };

                    this.makeNewBlock("solfege", postProcess, [thisBlock, value]);
                } else if (myBlock.docks[i + 1][2] === "notein") {
                    postProcess = args => {
                        const b = args[0];
                        const v = args[1];
                        that.blockList[b].value = v;
                        const label = v.toString();
                        that.blockList[b].text.text = label;
                    };

                    this.makeNewBlock("notename", postProcess, [thisBlock, value]);
                } else if (myBlock.docks[i + 1][2] === "mediain") {
                    postProcess = args => {
                        const b = args[0];
                        const v = args[1];
                        that.blockList[b].value = v;
                        if (v != null) {
                            /** loadThumbnail(that, thisBlock, null); */
                        }
                    };

                    this.makeNewBlock("media", postProcess, [thisBlock, value]);
                } else if (myBlock.docks[i + 1][2] === "filein") {
                    postProcess = blk => {
                        that.updateBlockText(blk);
                    };
                    this.makeNewBlock("loadFile", postProcess, thisBlock);
                } else {
                    postProcess = args => {
                        const b = args[0];
                        const v = args[1];
                        that.blockList[b].value = v;
                        that.blockList[b].text.text = v.toString();
                    };

                    this.makeNewBlock("number", postProcess, [thisBlock, value]);
                }

                const myConnectionBlock = this.blockList[cblk + i];
                myConnectionBlock.connections = [blk];
                myConnectionBlock.value = value;
                myBlock.connections[i + 1] = cblk + i;
            }

            /** Generate and position the block bitmaps and labels */
            this.updateBlockPositions();
            this.adjustDocks(blk, true);
            this.activity.refreshCanvas();

            return blk;
        };

        /**
         * Create the drag group from the blocks connected to blk.
         * @param - blk - block
         * @public
         * @returns {void}
         */
        this.findDragGroup = blk => {
            if (blk == null) {
                console.debug("null block passed to findDragGroup");
                return;
            }

            this.dragLoopCounter = 0;
            this.dragGroup = [];
            this._calculateDragGroup(blk);
        };

        /**
         * Cache the drag group for a block. Call on mousedown so the
         * expensive tree traversal runs once, not on every pressmove.
         * @param - blk - block index
         * @public
         * @returns {void}
         */
        this.cacheDragGroup = blk => {
            this.findDragGroup(blk);
            this._cachedDragGroup = this.dragGroup.slice();
        };

        /**
         * Invalidate the cached drag group (call on pressup/mouseout).
         * @public
         * @returns {void}
         */
        this.clearCachedDragGroup = () => {
            this._cachedDragGroup = null;
        };

        /**
         * Invalidate the top-block cache (call when blocks are
         * added, removed, or connections change).
         * @public
         * @returns {void}
         */
        this.invalidateTopBlockCache = () => {
            this._topBlockCache = null;
        };

        /**
         * Give a block, find all the blocks connected to it.
         * @param - blk - block
         * @private
         * @returns {void}
         */
        this._calculateDragGroup = blk => {
            this.dragLoopCounter += 1;
            if (this.dragLoopCounter > this.blockList.length) {
                console.debug(
                    "Maximum loop counter exceeded in calculateDragGroup... this is bad. " + blk
                );
                return;
            }

            if (blk == null) {
                console.debug("null block passed to calculateDragGroup");
                return;
            }

            const myBlock = this.blockList[blk];
            /** If this happens, something is really broken. */
            if (myBlock == null) {
                console.debug("null block encountered... this is bad. " + blk);
                return;
            }

            /** As before, does these ever happen? */
            if (myBlock.connections == null) {
                this.dragGroup = [blk];
                return;
            }

            /** Some malformed blocks might have no connections. */
            if (myBlock.connections.length === 0) {
                this.dragGroup = [blk];
                return;
            }

            this.dragGroup.push(blk);

            for (let c = 1; c < myBlock.connections.length; c++) {
                const cblk = myBlock.connections[c];
                if (cblk != null) {
                    /** Recurse */
                    this._calculateDragGroup(cblk);
                }
            }
        };

        /**
         * Set protoblock visibility on the Action palette.
         * @param - state
         * @public
         * @returns {void}
         */
        this.setActionProtoVisibility = state => {
            /** By default, the nameddo protoblock is hidden. */
            const actionsPalette = this.activity.palettes.dict["action"];
            let stateChanged = false;
            for (let blockId = 0; blockId < actionsPalette.protoList.length; blockId++) {
                const block = actionsPalette.protoList[blockId];
                if ("nameddo" === block.name && block.defaults.length === 0) {
                    if (block.hidden === state) {
                        block.hidden = !state;
                        stateChanged = true;
                    }
                }
            }

            /** Force an update if the name has changed. */
            if (stateChanged) {
                /** this.activity.palettes.hide(); */
                this.activity.palettes.updatePalettes("action");
                /** this.activity.palettes.show(); */
            }
        };

        /**
         * Find a unique custom name for an Action block.
         * @param - name
         * @public
         * @returns {void}
         */
        this.findUniqueActionName = (name, actionBlk) => {
            /** If we have a stack named 'action', make the protoblock visible. */
            if (name === _("action")) {
                this.setActionProtoVisibility(true);
            }

            /** Make sure we don't make two actions with the same name. */
            // Use Set for O(1) lookup instead of Array.includes() O(n)
            const actionNames = new Set();
            for (const block of this.blockList) {
                if ((block.name === "text" || block.name === "string") && !block.trash) {
                    const c = block.connections[0];
                    if (
                        c !== null &&
                        this.blockList[c].name === "action" &&
                        !this.blockList[c].trash
                    ) {
                        if (actionBlk !== c) {
                            actionNames.add(block.value);
                        }
                    }
                }
            }

            let i = 1;
            let value = name;
            while (actionNames.has(value)) {
                value = name + i.toString();
                i += 1;
            }

            return value;
        };

        /**
         * Finds a unique custom name for custom mode block.
         * @param - name - new variable
         * @public
         * @returns value
         */
        this.findUniqueCustomName = name => {
            // Use Set for O(1) lookup instead of Array.includes() O(n)
            const noteNames = new Set();
            for (const block of this.blockList) {
                if (block.name === "text" && !block.trash) {
                    const c = block.connections[0];
                    if (
                        c != null &&
                        this.blockList[c].name === "pitch" &&
                        !this.blockList[c].trash
                    ) {
                        noteNames.add(block.value);
                    }
                }
            }

            let i = 1;
            let value = name;
            while (noteNames.has(value)) {
                value = name + i.toString();
                i += 1;
            }
            return value;
        };

        /**
         * Finds a unique custom name for temperament block.
         * @param - name - new variable
         * @public
         * @returns value
         */
        this.findUniqueTemperamentName = name => {
            // Use Set for O(1) lookup instead of Array.includes() O(n)
            const temperamentNames = new Set();
            for (const block of this.blockList) {
                if (block.name === "text" && !block.trash) {
                    const c = block.connections[0];
                    if (
                        c != null &&
                        this.blockList[c].name === "temperament1" &&
                        !this.blockList[c].trash
                    ) {
                        temperamentNames.add(block.value);
                    }
                }
            }

            let i = 1;
            let value = name;
            while (temperamentNames.has(value)) {
                value = name + i.toString();
                i += 1;
            }
            return value;
        };

        /**
         * Make sure we initialize any drum with a URL name.
         * @private
         * @returns {void}
         */
        this._findDrumURLs = () => {
            for (const block of this.blockList) {
                if (block.name === "text" || block.name === "string") {
                    const c = block.connections[0];
                    if (
                        c != null &&
                        ["playdrum", "setdrum", "playnoise", "setvoice"].includes(
                            this.blockList[c].name
                        )
                    ) {
                        if (block.value.slice(0, 4) === "http") {
                            this.activity.logo.synth.loadSynth(0, block.value);
                        }
                    }
                }
            }
        };

        /**
         * Rename the block boxes.
         * @param - oldName - old name of boxes
         * @param - newName - new variable
         * @public
         * return {void}
         */
        this.renameBoxes = (oldName, newName) => {
            if (oldName === newName || oldName === _("box")) {
                return;
            }

            // Collect blocks to update for batched cache update
            const blocksToUpdate = [];
            for (const block of this.blockList) {
                if (block.name === "text") {
                    const c = block.connections[0];
                    if (c != null && this.blockList[c].name === "box") {
                        if (block.value === oldName) {
                            block.value = newName;
                            block.text.text = newName;
                            blocksToUpdate.push(block);
                        }
                    }
                }
            }

            // Batch update caches using requestAnimationFrame
            if (blocksToUpdate.length > 0) {
                requestAnimationFrame(() => {
                    for (const block of blocksToUpdate) {
                        try {
                            block.container.updateCache();
                        } catch (e) {
                            console.debug(e);
                        }
                    }
                });
            }
        };

        /**
         * Rename Storedin boxes.
         * @param - oldName - old name of boxes
         * @param - newName - new variable
         * @public
         * return {void}
         */
        this.renameStoreinBoxes = (oldName, newName) => {
            if (oldName === newName || oldName === _("box")) {
                return;
            }

            // Collect blocks to update for batched cache update
            const blocksToUpdate = [];
            for (const block of this.blockList) {
                if (block.name === "text") {
                    const c = block.connections[0];
                    if (c != null && this.blockList[c].name === "storein") {
                        if (block.value === oldName) {
                            block.value = newName;
                            block.text.text = newName;
                            blocksToUpdate.push(block);
                        }
                    }
                } else if (block.name === "storein2") {
                    if (block.privateData === oldName) {
                        block.privateData = newName;
                        if (newName === "box1") {
                            block.overrideName = _("box1");
                        } else if (newName === "box2") {
                            block.overrideName = _("box2");
                        } else {
                            block.overrideName = newName;
                        }
                        block.regenerateArtwork();
                        blocksToUpdate.push(block);
                    }
                }
            }

            // Batch update caches using requestAnimationFrame
            if (blocksToUpdate.length > 0) {
                requestAnimationFrame(() => {
                    for (const block of blocksToUpdate) {
                        try {
                            block.container.updateCache();
                        } catch (e) {
                            console.debug(e);
                        }
                    }
                });
            }
        };

        /**
         * Rename Storedin2 boxes.
         * @param - oldName - old name of boxes
         * @param - newName - new variable
         * @public
         * return {void}
         */
        this.renameStorein2Boxes = (oldName, newName) => {
            if (oldName === newName || oldName === _("box")) {
                return;
            }

            // Collect blocks to update for batched cache update
            const blocksToUpdate = [];
            for (const block of this.blockList) {
                if (block.name === "storein2") {
                    if (block.privateData === oldName) {
                        block.privateData = newName;
                        if (newName === "box1") {
                            block.overrideName = _("box1");
                        } else if (newName === "box2") {
                            block.overrideName = _("box2");
                        } else {
                            block.overrideName = newName;
                        }
                        block.regenerateArtwork();
                        blocksToUpdate.push(block);
                    }
                }
            }

            // Batch update caches using requestAnimationFrame
            if (blocksToUpdate.length > 0) {
                requestAnimationFrame(() => {
                    for (const block of blocksToUpdate) {
                        try {
                            block.container.updateCache();
                        } catch (e) {
                            console.debug(e);
                        }
                    }
                });
            }
        };

        /**
         * Rename Named boxes.
         * @param - oldName - old name of boxes
         * @param - newName - new variable
         * @public
         * return {void}
         */
        this.renameNamedboxes = (oldName, newName) => {
            if (oldName === newName || oldName === _("box")) {
                return;
            }

            // Collect blocks to update for batched cache update
            const blocksToUpdate = [];
            for (const block of this.blockList) {
                if (block.name === "namedbox") {
                    if (block.privateData === oldName) {
                        block.privateData = newName;
                        if (newName === "box1") {
                            block.overrideName = _("box1");
                        } else if (newName === "box2") {
                            block.overrideName = _("box2");
                        } else {
                            block.overrideName = newName;
                        }
                        block.regenerateArtwork();
                        /** Update label... */
                        blocksToUpdate.push(block);
                    }
                }
            }

            // Batch update caches using requestAnimationFrame
            if (blocksToUpdate.length > 0) {
                requestAnimationFrame(() => {
                    for (const block of blocksToUpdate) {
                        try {
                            block.container.updateCache();
                        } catch (e) {
                            console.debug(e);
                        }
                    }
                });
            }
        };

        /**
         * Rename Do blocks.
         * @param - oldName - old name of boxes
         * @param - newName - new variable
         * @public
         * return {void}
         */
        this.renameDos = (oldName, newName, skipBlock) => {
            if (oldName === newName) {
                return;
            }

            /** Update the blocks, do->oldName should be do->newName */
            /** Named dos are modified in a separate function below. */
            for (const blk in this.blockList) {
                if (blk === skipBlock) {
                    continue;
                }

                const myBlock = this.blockList[blk];
                const blkParent = this.blockList[myBlock.connections[0]];
                if (blkParent == null) {
                    continue;
                }

                if (
                    ![
                        "do",
                        "calc",
                        "doArg",
                        "calcArg",
                        "action",
                        "offbeatdo",
                        "onbeatdo",
                        "listen"
                    ].includes(blkParent.name)
                ) {
                    continue;
                }

                if (
                    (blkParent.name === "onbeatdo" || blkParent.name === "listen") &&
                    blkParent.connections.indexOf(blk) !== 2
                ) {
                    continue;
                }

                const blockValue = myBlock.value;
                if (blockValue === oldName) {
                    myBlock.value = newName;
                    let label = myBlock.value;
                    if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                        label = label.substr(0, STRINGLEN) + "...";
                    }
                    myBlock.text.text = label;
                    myBlock.container.updateCache();
                }
            }
        };

        /**
         * Renames Named do blocks.
         * @param oldName
         * @param newName - new variable
         * @private
         * @returns 'do', 'doArg', 'calc', 'calcArg
         */
        this.renameNameddos = (oldName, newName) => {
            if (oldName === newName) {
                return;
            }

            /** Update the blocks, do->oldName should be do->newName */
            for (const blk in this.blockList) {
                if (
                    ["nameddo", "namedcalc", "nameddoArg", "namedcalcArg"].includes(
                        this.blockList[blk].name
                    )
                ) {
                    if (this.blockList[blk].privateData === oldName) {
                        this.blockList[blk].privateData = newName;
                        let label = newName;
                        if (getTextWidth(label, "bold 20pt Sans") > TEXTWIDTH) {
                            label = label.substr(0, STRINGLEN) + "...";
                        }

                        this.blockList[blk].overrideName = label;
                        this.blockList[blk].regenerateArtwork();
                    }
                }
            }

            /** Update the palette */
            const actionsPalette = this.activity.palettes.dict["action"];
            let nameChanged = false;
            for (let blockId = 0; blockId < actionsPalette.protoList.length; blockId++) {
                const block = actionsPalette.protoList[blockId];
                if (
                    ["nameddo", "namedcalc", "nameddoArg", "namedcalcArg"].indexOf(block.name) !==
                        -1 /** && block.defaults[0] !== _('action') */ &&
                    block.defaults[0] === oldName
                ) {
                    block.defaults[0] = newName;
                    nameChanged = true;
                }
            }

            /** Force an update if the name has changed. */
            if (nameChanged) {
                /** this.activity.palettes.hide(); */
                this.activity.palettes.updatePalettes("action");
                /** this.activity.palettes.show(); */
            }
        };

        /**
         * Make a new Storein block.
         * @param - name - new variable
         * @public
         * @returns {void}
         * Deprecated -- there is no need to add this block to the palette. The
         * short-from storein2 block covers all of the use cases.
         */
        this.newStoreinBlock = name => {
            if (name == null) {
                console.debug("null name passed to newStoreinBlock");
                return;
            } else if (name == undefined) {
                console.debug("undefined name passed to newStoreinBlock");
                return;
            } else if ("myStorein_" + name in this.protoBlockDict) {
                /** console.debug(name + ' already in palette'); */
                return;
            }

            /** console.debug('new storein block ' + name); */
            const myStoreinBlock = new ProtoBlock("storein");
            this.protoBlockDict["myStorein_" + name] = myStoreinBlock;
            myStoreinBlock.palette = this.activity.palettes.dict["boxes"];
            myStoreinBlock.defaults.push(name);
            myStoreinBlock.defaults.push(NUMBERBLOCKDEFAULT);
            myStoreinBlock.staticLabels.push(_("store in"), _("name"), _("value"));
            myStoreinBlock.adjustWidthToLabel();
            myStoreinBlock.twoArgBlock();
            myStoreinBlock.dockTypes[1] = "anyin";
            myStoreinBlock.dockTypes[2] = "anyin";

            if (name !== "box") {
                /** Add the new block to the top of the palette. */
                this.activity.palettes.dict["boxes"].add(myStoreinBlock, true);
            }
        };

        /**
         * Make a new Storein2 block.
         * @param - name - new variable
         * @public
         * return {void}
         */
        this.newStorein2Block = name => {
            if (name == null) {
                console.debug("null name passed to newStorein2Block");
                return;
            } else if (name == undefined) {
                console.debug("undefined name passed to newStorein2Block");
                return;
            } else if ("yourStorein2_" + name in this.protoBlockDict) {
                return;
            }

            const myStorein2Block = new ProtoBlock("storein2");
            this.protoBlockDict["yourStorein2_" + name] = myStorein2Block;
            myStorein2Block.palette = this.activity.palettes.dict["boxes"];
            myStorein2Block.defaults.push(name);
            myStorein2Block.staticLabels.push(name);
            myStorein2Block.adjustWidthToLabel();
            myStorein2Block.oneArgBlock();
            myStorein2Block.dockTypes[1] = "anyin";

            if (name !== "box") {
                /** Add the new block to the top of the palette. */
                this.activity.palettes.dict["boxes"].add(myStorein2Block, true);
            }
        };

        /**
         * Make a new Named Box block.
         * @param - name - new variable
         * @public
         * return {void}
         */
        this.newNamedboxBlock = name => {
            if (name == null) {
                console.debug("null name passed to newNamedboxBlock");
                return;
            } else if (name == undefined) {
                console.debug("undefined name passed to newNamedboxBlock");
                return;
            } else if ("myBox_" + name in this.protoBlockDict) {
                return;
            }

            const myBoxBlock = new ProtoBlock("namedbox");
            this.protoBlockDict["myBox_" + name] = myBoxBlock;
            myBoxBlock.palette = this.activity.palettes.dict["boxes"];
            myBoxBlock.defaults.push(name);
            myBoxBlock.staticLabels.push(name);
            myBoxBlock.parameterBlock();
            if (name === "box") {
                return;
            }

            /** Add the new block to the top of the palette. */
            myBoxBlock.palette.add(myBoxBlock, true);
        };

        /**
         * Make a new Local Arg block.
         * @param - blk - block
         * @private
         * @returns {void}
         */
        this._newLocalArgBlock = async name => {
            /** name === 1, 2, 3, ... */
            const blkname = "arg_" + name;
            if ("myArg_" + blkname in this.protoBlockDict) {
                return;
            }

            const myNamedArgBlock = new ProtoBlock("namedarg");
            this.protoBlockDict["myArg_" + blkname] = myNamedArgBlock;
            myNamedArgBlock.palette = this.activity.palettes.dict["action"];
            myNamedArgBlock.defaults.push(name);
            myNamedArgBlock.staticLabels.push("arg " + name);
            myNamedArgBlock.parameterBlock();

            if (blkname === "arg_1") {
                return;
            }

            myNamedArgBlock.palette.add(myNamedArgBlock, true);

            /** Force regeneration of palette after adding new block. */
            /** Add delay to avoid race condition. */
            await delayExecution(100);
            this.activity.palettes.updatePalettes("action");
        };

        /**
         * Remove any unneeded Named Do blocks.
         * @param - name
         * @private
         * @returns {void}
         */
        this._removeNamedoEntries = name => {
            /** Delete any old palette entries. */

            /** console.debug('DELETE: removing old palette entries for ' + name); */
            if (this.protoBlockDict["myDo_" + name]) {
                this.protoBlockDict["myDo_" + name].hide = true;
                delete this.protoBlockDict["myDo_" + name];
            } else if (this.protoBlockDict["myCalc_" + name]) {
                this.protoBlockDict["myCalc_" + name].hide = true;
                delete this.protoBlockDict["myCalc_" + name];
            } else if (this.protoBlockDict["myDoArg_" + name]) {
                this.protoBlockDict["myDoArg_" + name].hide = true;
                delete this.protoBlockDict["myDoArg_" + name];
            } else if (this.protoBlockDict["myCalcArg_" + name]) {
                this.protoBlockDict["myCalcArg_" + name].hide = true;
                delete this.protoBlockDict["myCalcArg_" + name];
            }
        };

        /**
         * Depending upon the form of the associated action block, we
           want to add a named do, a named calc, a named do w/args, or
           a named calc w/args.
         * @param - name
         * @param - hasReturn
         * @param - hasArgs
         * @public
         * @returns boolean
         */
        this.newNameddoBlock = (name, hasReturn, hasArgs) => {
            if (name === _("action")) {
                /** 'action' already has its associated palette entries. */
                return false;
            }

            if (hasReturn && hasArgs) {
                return this.newNamedcalcArgBlock(name);
            } else if (!hasReturn && hasArgs) {
                return this.newNameddoArgBlock(name);
            } else if (hasReturn && !hasArgs) {
                return this.newNamedcalcBlock(name);
            } else if (this.protoBlockDict["myDo_" + name] === undefined) {
                const myDoBlock = new ProtoBlock("nameddo");
                this.protoBlockDict["myDo_" + name] = myDoBlock;
                myDoBlock.palette = this.activity.palettes.dict["action"];
                myDoBlock.defaults.push(name);
                myDoBlock.staticLabels.push(name);
                myDoBlock.zeroArgBlock();
                myDoBlock.palette.add(myDoBlock, true);
                this.activity.palettes.updatePalettes();
                return true;
            }

            return false;
        };

        /**
         * Make a new Named Calc block.
         * @param - name -new variable
         * @public
         * @returns boolean
         */
        this.newNamedcalcBlock = name => {
            if (this.protoBlockDict["myCalc_" + name] === undefined) {
                const myCalcBlock = new ProtoBlock("namedcalc");
                this.protoBlockDict["myCalc_" + name] = myCalcBlock;
                myCalcBlock.palette = this.activity.palettes.dict["action"];
                myCalcBlock.defaults.push(name);
                myCalcBlock.staticLabels.push(name);
                myCalcBlock.zeroArgBlock();
                /** Add the new block to the top of the palette. */
                myCalcBlock.palette.add(myCalcBlock, true);
                return true;
            }

            return false;
        };

        /**
         * Make a new Named Do Arg block.
         * @param - name - new variable
         * @public
         * return boolean
         */
        this.newNameddoArgBlock = name => {
            if (this.protoBlockDict["myDoArg_" + name] === undefined) {
                const myDoArgBlock = new ProtoBlock("nameddoArg");
                this.protoBlockDict["myDoArg_" + name] = myDoArgBlock;
                myDoArgBlock.palette = this.activity.palettes.dict["action"];
                myDoArgBlock.defaults.push(name);
                myDoArgBlock.staticLabels.push(name);
                myDoArgBlock.zeroArgBlock();
                /** Add the new block to the top of the palette. */
                myDoArgBlock.palette.add(myDoArgBlock, true);
                return true;
            }

            return false;
        };

        /**
         * Make a new Named Calc Arg block.
         * @param - name - new variable
         * @public
         * return boolean
         */
        this.newNamedcalcArgBlock = name => {
            if (this.protoBlockDict["myCalcArg_" + name] === undefined) {
                const myCalcArgBlock = new ProtoBlock("namedcalcArg");
                this.protoBlockDict["myCalcArg_" + name] = myCalcArgBlock;
                myCalcArgBlock.palette = this.activity.palettes.dict["action"];
                myCalcArgBlock.defaults.push(name);
                myCalcArgBlock.staticLabels.push(name);
                myCalcArgBlock.zeroArgBlock();
                /** Add the new block to the top of the palette. */
                myCalcArgBlock.palette.add(myCalcArgBlock, true);
                return true;
            }

            return false;
        };

        this._insideArgClamp = blk => {
            /** Returns a containing arg clamp block or null */
            if (this.blockList[blk] == null) {
                /** race condition? */

                console.debug("null block in blockList? " + blk);
                return null;
            } else if (this.blockList[blk].connections[0] == null) {
                return null;
            } else {
                const cblk = this.blockList[blk].connections[0];
                if (this.blockList[cblk].isArgClamp()) {
                    return cblk;
                } else {
                    return null;
                }
            }
        };

        /**
         * Return a list of containing clamp blocks or []
         * @param - blk - block
         * @param - clampList
         * @public
         * @returns list of clamp blocks
         */
        this.findNestedClampBlocks = (blk, clampList) => {
            if (this.blockList[blk] == null) {
                console.debug("null block in blockList? " + blk);
                return [];
            } else if (this.blockList[blk].connections[0] == null) {
                /** We reached the end, so return the list. */
                return clampList;
            } else {
                /** If we find a clamp block, add it to the list. */
                const cblk = this.blockList[blk].connections[0];
                if (this.blockList[cblk].isClampBlock()) {
                    if (this.blockList[cblk].isDoubleClampBlock()) {
                        /** Just check them both. */
                        clampList.push([cblk, 0]);
                        clampList.push([cblk, 1]);
                    } else {
                        clampList.push([cblk, 0]);
                    }
                }

                /** Keep looking. */
                return this.findNestedClampBlocks(cblk, clampList);
            }
        };

        /**
         * Return a containing expandable block or null.
         * @param - blk - block
         * @public
         * @returns expandable block
         */
        this.insideExpandableBlock = blk => {
            if (this.blockList[blk] == null) {
                /** race condition? */

                console.debug("null block in blockList? " + blk);
                return null;
            } else if (this.blockList[blk].connections[0] == null) {
                return null;
            } else {
                const cblk = this.blockList[blk].connections[0];
                if (this.blockList[cblk].isExpandableBlock()) {
                    /** If it is the last connection, keep searching. */
                    if (
                        this.blockList[cblk].isArgFlowClampBlock() ||
                        this.blockList[cblk].isLeftClampBlock()
                    ) {
                        return cblk;
                    } else if (blk === last(this.blockList[cblk].connections)) {
                        return this.insideExpandableBlock(cblk);
                    } else {
                        return cblk;
                    }
                } else {
                    return this.insideExpandableBlock(cblk);
                }
            }
        };

        /**
         * Return a note block or null.
         * @param - blk - block
         * @public
         * @returns note block
         */
        this._insideNoteBlock = blk => {
            if (this.blockList[blk] == null) {
                console.debug("null block in blockList? " + blk);
                return null;
            } else if (this.blockList[blk].connections[0] == null) {
                return null;
            } else {
                const cblk = this.blockList[blk].connections[0];
                if (this.blockList[cblk].isExpandableBlock()) {
                    if (this.blockList[blk].name === "forever") {
                        if (this._isConnectedToNoteValue(cblk)) {
                            this.activity.errorMsg(
                                _(
                                    "Forever loop detected inside a note value block. Unexpected things may happen."
                                )
                            );
                            return null;
                        }
                    }
                    /** If it is the last connection, keep searching. */
                    if (blk === last(this.blockList[cblk].connections)) {
                        return this._insideNoteBlock(cblk);
                    } else if (blk === this.blockList[cblk].connections[1]) {
                        /** Connection 1 of a note block is not inside the clamp. */
                        return null;
                    } else {
                        if (NOTEBLOCKS.includes(this.blockList[cblk].name)) {
                            return cblk;
                        } else {
                            return null;
                        }
                    }
                } else {
                    return this._insideNoteBlock(cblk);
                }
            }
        };

        this._isConnectedToNoteValue = blk => {
            if (NOTEBLOCKS.includes(this.blockList[blk].name)) {
                return true;
            } else if (this.blockList[blk].connections[0] == null) {
                return false;
            } else {
                const cblk = this.blockList[blk].connections[0];
                return this._isConnectedToNoteValue(cblk);
            }
        };

        /**
         * Find an instance of a block type by name.
         * @param - blkName
         * @public
         * @returns boolean
         */
        this.findBlockInstance = blkName => {
            /** Returns true if block of name blkName is loaded. */
            for (const blk in this.blockList) {
                if (this.blockList[blk].name === blkName && !this.blockList[blk].trash) {
                    return true;
                }
            }

            return false;
        };

        /**
         * Return the first containing Note block, if any.
         * @param - blk - block
         * @public
         * @returns null or collapsible block
         */
        this.insideInlineCollapsibleBlock = blk => {
            if (blk === null) {
                return null;
            }

            const c0 = this.blockList[blk].connections[0];
            if (c0 === null) {
                return null;
            }

            /**
             * If we are connected to a note block arg or child flow,
             * return the note block. If we are connected to the flow, we
             * are not inside, so keep looking.
             */
            if (
                this.blockList[c0].isInlineCollapsible() &&
                blk !== last(this.blockList[c0].connections)
            ) {
                return c0;
            }

            return this.insideInlineCollapsibleBlock(c0);
        };

        /**
         * Return first Note block found.
         * @param - blk - block
         * @public
         * @returns note block
         */
        this.findNoteBlock = blk => {
            if (blk === null) {
                return null;
            }

            if (this.blockList[blk].name === "newnote") {
                return blk;
            }

            let c = last(this.blockList[blk].connections);
            if (this.blockList[blk].isClampBlock()) {
                const n = this.blockList[blk].connections.length - 2;
                c = this.blockList[blk].connections[n];
            }

            return this.findNoteBlock(c);
        };

        /**
         * Return first Interval block found.
         * @param - blk - block
         * @public
         * @returns null or blk
         */
        this.findNestedIntervalBlock = blk => {
            if (blk === null) {
                return null;
            }

            if (this.blockList[blk].name === "interval") {
                return blk;
            }

            let c = last(this.blockList[blk].connections);
            if (this.blockList[blk].isClampBlock()) {
                const n = this.blockList[blk].connections.length - 2;
                c = this.blockList[blk].connections[n];
            }

            return this.findNestedIntervalBlock(c);
        };

        /**
         * Returns first Pitch block found.
         * @param - blk - block
         * @public
         * @returns null or blk
         */
        this.findFirstPitchBlock = blk => {
            if (blk === null) {
                return null;
            }

            if (PITCHBLOCKS.includes(this.blockList[blk].name)) {
                return blk;
            } else if (this.blockList[blk].name === "rest2") {
                return blk;
            }

            const c = last(this.blockList[blk].connections);
            return this.findFirstPitchBlock(c);
        };

        /**
         * Return octave associated with Pitch block.
         * @param - blk - block
         * @public
         * @returns 4
         */
        this.findPitchOctave = blk => {
            if (blk === null) {
                return 4;
            }

            if (
                [
                    "pitch",
                    "setpitchnumberoffset",
                    "invert1",
                    "tofrequency",
                    "nthmodalpitch"
                ].includes(this.blockList[blk].name)
            ) {
                const oblk = this.blockList[blk].connections[2];
                if (oblk === null) {
                    return 4;
                } else if (this.blockList[oblk].name === "number") {
                    return this.blockList[oblk].value;
                } else {
                    return 4;
                }
            } else {
                return 4;
            }
        };

        /**
         * Set octave associated with Pitch block.
         * @param - blk - block
         * @param - octave
         * @public
         * @returns {void}
         */
        this.setPitchOctave = (blk, octave) => {
            if (blk === null) {
                return;
            }

            if (
                [
                    "pitch",
                    "setpitchnumberoffset",
                    "invert1",
                    "tofrequency",
                    "nthmodalpitch"
                ].includes(this.blockList[blk].name)
            ) {
                const oblk = this.blockList[blk].connections[2];
                if (oblk !== null && this.blockList[oblk].name === "number") {
                    const thisBlock = this.blockList[oblk];
                    thisBlock.value = octave;
                    thisBlock.text.text = octave.toString();

                    /** Make sure text is on top. */
                    const z = thisBlock.container.children.length - 1;
                    thisBlock.container.setChildIndex(thisBlock.text, z);
                    thisBlock.container.updateCache();
                }
            }
        };

        /**
         * Check if a Number block used as a modifier in an Interval block.
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.intervalModifierNumber = blk => {
            if (blk === null) {
                return false;
            }

            const myBlock = this.blockList[blk];
            const pblk = myBlock.connections[0];
            /** Are we connected to a plus block? */
            if (
                myBlock.name === "number" &&
                pblk !== null &&
                this.blockList[pblk].name === "plus"
            ) {
                /** Is the plus block connected to an interval block? */
                const c = this.blockList[pblk].connections[0];
                if (c === null) {
                    return false;
                }

                if (
                    ![
                        "interval",
                        "setscalartransposition",
                        "semitoneinterval",
                        "settransposition"
                    ].includes(this.blockList[c].name)
                ) {
                    return false;
                }

                return true;
            }

            return false;
        };

        /**
         * Check if a Number block is being used as multipicant with a
           Mode-length block.
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.octaveModifierNumber = blk => {
            if (blk === null) {
                return false;
            }

            const myBlock = this.blockList[blk];
            const mblk = myBlock.connections[0];
            /** Are we connected to a multiply block? */
            if (
                myBlock.name === "number" &&
                mblk !== null &&
                this.blockList[mblk].name === "multiply"
            ) {
                let cblk = this.blockList[mblk].connections[1];
                if (this.blockList[mblk].connections[1] === blk) {
                    cblk = this.blockList[mblk].connections[2];
                }

                if (this.blockList[cblk].name === "modelength") {
                    return true;
                }

                /** Special case: 1 / 12 */
                if (this.blockList[cblk].name === "number" && this.blockList[cblk].value === 12) {
                    return true;
                }
            }

            return false;
        };

        /**
         * Check if a Number block is used as a note value denominator argument.
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.noteValueNumber = (blk, c) => {
            if (blk === null) {
                return false;
            }

            const myBlock = this.blockList[blk];
            const dblk = myBlock.connections[0];
            /** Are we connected to a divide block? */
            if (
                myBlock.name === "number" &&
                dblk !== null &&
                this.blockList[dblk].name === "divide"
            ) {
                /** Are we the denominator (c == 2) or numerator (c == 1)? */
                if (this.blockList[dblk].connections[c] === blk) {
                    /** Is the divide block connected to a note value block? */
                    const cblk = this.blockList[dblk].connections[0];
                    if (cblk !== null) {
                        /** Is it the first or second arg? */
                        switch (this.blockList[cblk].name) {
                            case "newnote":
                            case "pickup":
                            case "tuplet4":
                            case "newstaccato":
                            case "newslur":
                            case "elapsednotes2":
                                if (this.blockList[cblk].connections[1] === dblk) {
                                    return true;
                                }
                                return false;
                            case "meter":
                                this.blockList[blk]._check_meter_block = cblk;
                                if (this.blockList[cblk].connections[2] === dblk) {
                                    return true;
                                }
                                return false;
                            case "setbpm3":
                            case "setbpm2":
                            case "setmasterbpm2":
                            case "stuplet":
                            case "rhythm2":
                            case "newswing2":
                            case "vibrato":
                            case "neighbor":
                            case "neighbor2":
                                if (this.blockList[cblk].connections[2] === dblk) {
                                    return true;
                                }
                                return false;
                            default:
                                return false;
                        }
                    }
                }
            }

            return false;
        };

        /**
         * Return the Number block value being used as a note value
           denominator argument.
         * @param - blk - block
         * @public
         * @returns 1
         */
        this.noteValueValue = blk => {
            if (blk === null) {
                return 1;
            }

            const myBlock = this.blockList[blk];
            const dblk = myBlock.connections[0];
            /** We are connected to a divide block. */
            /** Is the divide block connected to a note value block? */
            let cblk = this.blockList[dblk].connections[0];
            if (cblk !== null) {
                /** Is it the first or second arg? */
                switch (this.blockList[cblk].name) {
                    case "newnote":
                    case "pickup":
                    case "tuplet4":
                    case "newstaccato":
                    case "newslur":
                    case "elapsednotes2":
                        if (this.blockList[cblk].connections[1] === dblk) {
                            cblk = this.blockList[dblk].connections[2];
                            return this.blockList[cblk].value;
                        }
                        return 1;
                    case "meter":
                        this.blockList[blk]._check_meter_block = cblk;
                        if (this.blockList[cblk].connections[2] === dblk) {
                            if (this.blockList[cblk].connections[1] === dblk) {
                                cblk = this.blockList[dblk].connections[2];
                                return this.blockList[cblk].value;
                            }
                            return 1;
                        }
                        return 1;
                    case "setbpm3":
                    case "setbpm2":
                    case "setmasterbpm2":
                    case "stuplet":
                    case "rhythm2":
                    case "newswing2":
                    case "vibrato":
                    case "neighbor":
                    case "neighbor2":
                        if (this.blockList[cblk].connections[2] === dblk) {
                            if (this.blockList[cblk].connections[1] === dblk) {
                                cblk = this.blockList[dblk].connections[2];
                                return this.blockList[cblk].value;
                            }
                            return 1;
                        }
                        return 1;
                    default:
                        return 1;
                }
            }

            return 1;
        };

        /**
         * Check if a Number block being used as an octave argument?
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.octaveNumber = blk => {
            if (blk === null) {
                return false;
            }

            const myBlock = this.blockList[blk];
            if (
                myBlock.connections[0] !== null &&
                [
                    "pitch",
                    "setpitchnumberoffset",
                    "invert1",
                    "tofrequency",
                    "nthmodalpitch"
                ].includes(this.blockList[myBlock.connections[0]].name) &&
                this.blockList[myBlock.connections[0]].connections[2] === blk
            ) {
                return true;
            }

            if (
                myBlock.connections[0] !== null &&
                this.blockList[myBlock.connections[0]].name === "customsample" &&
                this.blockList[myBlock.connections[0]].connections[3] === blk
            ) {
                return true;
            }

            return false;
        };

        /**
         * Check if the meter block note value changed, update the BPM block.
         * @param - blk - block
         * @public
         * @returns void
         */
        this.meter_block_changed = blk => {
            if (blk === null || this.blockList[blk].name !== "meter") {
                return;
            }

            /** Get the numerator and denominator of the meter divide block */
            let dblk = this.blockList[blk].connections[2];
            if (dblk === null || this.blockList[dblk].name !== "divide") {
                return;
            }

            const c1 = this.blockList[dblk].connections[1];
            if (c1 === null || this.blockList[c1].name !== "number") {
                return;
            }

            const c1v = this.blockList[c1].value;
            const c2 = this.blockList[dblk].connections[2];
            if (c2 === null || this.blockList[c2].name !== "number") {
                return;
            }

            const c2v = this.blockList[c2].value;
            for (let i = 0; i < this.blockList.length; i++) {
                if (["setbpm3", "setmasterbpm2"].includes(this.blockList[i].name)) {
                    const bn = this.blockList[i].connections[1];
                    if (bn === null || this.blockList[bn].name !== "number") {
                        continue;
                    }

                    let bnv = this.blockList[bn].value;

                    dblk = this.blockList[i].connections[2];
                    if (dblk === null || this.blockList[dblk].name !== "divide") {
                        continue;
                    }

                    const b1 = this.blockList[dblk].connections[1];
                    if (b1 === null || this.blockList[b1].name !== "number") {
                        continue;
                    }

                    const b1v = this.blockList[b1].value;

                    const b2 = this.blockList[dblk].connections[2];
                    if (b2 === null || this.blockList[b2].name !== "number") {
                        continue;
                    }

                    const b2v = this.blockList[b2].value;
                    bnv *= ((b1v * c2v) / b2v) * c1v;

                    this.blockList[bn].value = bnv;
                    this.updateBlockText(bn);
                    this.blockList[b1].value = c1v;
                    this.updateBlockText(b1);
                    this.blockList[b2].value = c2v;
                    this.updateBlockText(b2);
                }
            }
        };

        /**
         *  Auto-select stack for copying -- no need to actually click on
            the copy button.
         * @public
         * @returns {void}
         */
        this.prepareStackForCopy = () => {
            if (this.activeBlock == null) {
                this.activity.errorMsg(_("There is no block selected."));

                console.debug("No active block to copy.");
                return;
            }

            this.selectedStack = this.activeBlock;

            /** Copy the selectedStack. */
            this.selectedBlocksObj = JSON.parse(JSON.stringify(this._copyBlocksToObj(false)));

            /** Reset paste offset. */
            this.pasteDx = 0;
            this.pasteDy = 0;
        };

        /**
         * Triggers the long press of keys and clears timeout.
         * @public
         * @returns {void}
         */
        this.triggerLongPress = () => {
            if (this.longPressTimeout != null) {
                clearTimeout(this.longPressTimeout);
                this.longPressTimeout = null;
            }

            this.inLongPress = true;
            piemenuBlockContext(this.blockList[this.activeBlock]);
        };

        /**
         * Copy a stack of blocks by creating a blockObjs and pasting.
         * @public
         * @returns {void}
         */
        this.pasteStack = () => {
            if (this.selectedStack == null) {
                return;
            }

            /** First, hide the palettes as they will need updating. */
            for (const name in this.activity.palettes.dict) {
                this.activity.palettes.dict[name].hideMenu(true);
            }

            /** Reposition the paste location relative to the stage position. */
            if (this.selectedBlocksObj != null) {
                if (docById("helpfulWheelDiv").style.display !== "none") {
                    this.selectedBlocksObj[0][2] =
                        docById("helpfulWheelDiv").offsetLeft +
                        240 -
                        this.activity.blocksContainer.x;
                    this.selectedBlocksObj[0][3] =
                        docById("helpfulWheelDiv").offsetTop +
                        130 -
                        this.activity.blocksContainer.y;

                    docById("helpfulWheelDiv").style.display = "none";
                } else {
                    this.selectedBlocksObj[0][2] =
                        175 - this.activity.blocksContainer.x + this.pasteDx;
                    this.selectedBlocksObj[0][3] =
                        75 - this.activity.blocksContainer.y + this.pasteDy;
                    this.pasteDx += 21;
                    this.pasteDy += 21;
                }
                this.loadNewBlocks(this.selectedBlocksObj);
                this.activity.__tick();
            }
        };

        /**
         * Save a stack of blocks to local storage and the 'myblocks'
           palette by creating a blockObjs.
         * @public
         * @returns {void}
         */
        this.saveStack = () => {
            console.debug(this.selectedStack);
            if (this.selectedStack === null) {
                return;
            }

            const blockObjs = this._copyBlocksToObj(true);
            /**
             * If the first block is an action block, the its first
             * connection is the block containing its label.
             */
            let name = "---";
            if (["temperament1", "definemode", "action"].includes(blockObjs[0][1])) {
                const nameBlk = blockObjs[0][4][1];
                if (nameBlk == null) {
                    console.debug("action not named... skipping");
                } else {
                    if (typeof blockObjs[nameBlk][1][1] === "string") {
                        name = blockObjs[nameBlk][1][1];
                    } else if (typeof blockObjs[nameBlk][1][1] === "number") {
                        name = blockObjs[nameBlk][1][1].toString();
                    } else {
                        name = blockObjs[nameBlk][1][1]["value"];
                    }
                }
            } else {
                /** Look for "show", "turtleshell", or "customsample". */
                for (let i = 0; i < blockObjs.length; i++) {
                    if (["show", "turtleshell", "customsample"].includes(blockObjs[i][1])) {
                        switch (blockObjs[i][1]) {
                            case "show":
                                name =
                                    _("Show").toLowerCase() + "-" + MathUtility.doRandom(0, 1000);
                                break;
                            case "turtleshell":
                                name = _("avatar") + "-" + MathUtility.doRandom(0, 1000);
                                break;
                            case "sample":
                                name = _("sample") + "-" + MathUtility.doRandom(0, 1000);
                                break;
                            default:
                                name = blockObjs[i][1] + "-" + MathUtility.doRandom(0, 1000);
                                break;
                        }
                        break;
                    }
                }
            }

            this.storage.macros = prepareMacroExports(name, blockObjs, this.macroDict);
            this.addToMyPalette(name);
            this.activity.palettes.updatePalettes("myblocks");
        };

        /**
         * Copies the Block to objects.
         * @public
         * @returns blockObj
         */
        this._copyBlocksToObj = saveStack => {
            /** If saveStack then don't override media or audiofile blocks. */
            const blockObjs = [];
            const blockMap = {};
            let x;
            let y;

            this.findDragGroup(this.selectedStack);
            for (let b = 0; b < this.dragGroup.length; b++) {
                const myBlock = this.blockList[this.dragGroup[b]];
                if (b === 0) {
                    x = 75 - this.activity.blocksContainer.x;
                    y = 75 - this.activity.blocksContainer.y;
                } else {
                    x = 0;
                    y = 0;
                }

                let blockItem;
                if (myBlock.isValueBlock()) {
                    switch (myBlock.name) {
                        case "media":
                        case "audiofile":
                            if (saveStack) {
                                blockItem = [b, [myBlock.name, { value: myBlock.value }], x, y, []];
                            } else {
                                blockItem = [b, [myBlock.name, null], x, y, []];
                            }
                            break;
                        case "namedbox":
                        case "namedarg":
                            blockItem = [
                                b,
                                [myBlock.name, { value: myBlock.privateData }],
                                x,
                                y,
                                []
                            ];
                            break;
                        default:
                            blockItem = [b, [myBlock.name, { value: myBlock.value }], x, y, []];
                            break;
                    }
                } else if (
                    [
                        "storein2",
                        "nameddo",
                        "namedcalc",
                        "nameddoArg",
                        "namedcalcArg",
                        "outputtools"
                    ].includes(myBlock.name)
                ) {
                    blockItem = [b, [myBlock.name, { value: myBlock.privateData }], x, y, []];
                } else {
                    blockItem = [b, myBlock.name, x, y, []];
                }

                blockMap[this.dragGroup[b]] = b;
                blockObjs.push(blockItem);
            }

            for (let b = 0; b < this.dragGroup.length; b++) {
                const myBlock = this.blockList[this.dragGroup[b]];
                for (let c = 0; c < myBlock.connections.length; c++) {
                    if (myBlock.connections[c] === null) {
                        blockObjs[b][4].push(null);
                    } else {
                        blockObjs[b][4].push(blockMap[myBlock.connections[c]]);
                    }
                }
            }

            return blockObjs;
        };

        /**
         * On the palette we store the macro as a basic block.
         * @param - name
         * @param - obj - object
         * @public
         * @returns {void}
         */
        this.addToMyPalette = name => {
            const myBlock = new ProtoBlock("macro_" + name);
            const blkName = "macro_" + name;
            this.protoBlockDict[blkName] = myBlock;

            console.debug("Adding " + name + " to myblocks palette");
            if (!("myblocks" in this.activity.palettes.dict)) {
                this.activity.palettes.add("myblocks");
            }

            myBlock.palette = this.activity.palettes.dict["myblocks"];
            myBlock.zeroArgBlock();
            myBlock.staticLabels.push(_(name));
            this.protoBlockDict[blkName].palette.add(this.protoBlockDict[blkName]);
        };

        /**
         * Returns true if block of name blkName is loaded.
         * @param - blkName - block name
         * @public
         * @returns boolean
         */
        this.findBlockInstance = blkName => {
            for (const blk in this.blockList) {
                if (this.blockList[blk].name === blkName && !this.blockList[blk].trash) {
                    return true;
                }
            }
            return false;
        };

        /**
         * Load new blocks.
         * @param - blockObj - Block Objects
         * @public
         * return {void}
         */
        this.loadNewBlocks = blockObjs => {
            /**
             * Playback Queue has been deprecated, but some old projects
             * may still have playback blocks appended, which we will
             * remove.
             */
            let playbackQueueStartsHere = null;
            for (let b = 0; b < blockObjs.length; b++) {
                const blkData = blockObjs[b];
                /** Check for deprecated playbackQueue */
                if (typeof blkData[1] === "number") {
                    playbackQueueStartsHere = b;
                    break;
                }
            }

            if (playbackQueueStartsHere !== null) {
                console.debug("Removing deprecated playback queue from project");
                blockObjs.splice(
                    playbackQueueStartsHere,
                    blockObjs.length - playbackQueueStartsHere
                );
            }

            /** Check for blocks connected to themselves, */
            /** and for action blocks not connected to text blocks. */
            for (let b = 0; b < blockObjs.length; b++) {
                const blkData = blockObjs[b];

                for (const c in blkData[4]) {
                    if (blkData[4][c] === blkData[0]) {
                        console.debug("Circular connection in block data: " + blkData);

                        console.debug("Punting loading of new blocks!");

                        console.debug(blockObjs);
                        return;
                    }
                }
            }

            /** We'll need a list of existing storein and action names. */
            const currentActionNames = [];
            const currentStoreinNames = [];
            for (let b = 0; b < this.blockList.length; b++) {
                if (this.blockList[b].trash) {
                    continue;
                }

                if (this.blockList[b].name === "action") {
                    if (this.blockList[b].connections[1] != null) {
                        currentActionNames.push(
                            this.blockList[this.blockList[b].connections[1]].value
                        );
                    }
                } else if (this.blockList[b].name === "storein") {
                    if (this.blockList[b].connections[1] != null) {
                        currentStoreinNames.push(
                            this.blockList[this.blockList[b].connections[1]].value
                        );
                    }
                }
            }

            /** We need to track two-arg blocks in case they need expanding. */
            this._checkTwoArgBlocks = [];

            /** And arg clamp blocks in case they need expanding. */
            this._checkArgClampBlocks = [];

            /** Don't make duplicate action names. */
            /** Add a palette entry for any new storein blocks. */
            const stringValues = {}; /** label: [blocks with that label] */
            const actionNames = {}; /** action block: label block */
            const storeinNames = {}; /** storein block: label block */
            const doNames = {}; /** do block: label block, nameddo block value */

            /** widget, note, action, and start blocks that need to be collapsed. */
            this.blocksToCollapse = [];

            /** Scan for any new action and storein blocks to identify */
            /** duplicates. We also need to track start and action blocks */
            /** that may need to be collapsed. */
            let name;
            for (let b = 0; b < blockObjs.length; b++) {
                const blkData = blockObjs[b];
                /** blkData[1] could be a string or an object. */
                if (typeof blkData[1] === "string") {
                    name = blkData[1];
                } else {
                    name = blkData[1][0];
                }

                if (!(name in this.protoBlockDict)) {
                    switch (name) {
                        case "hat":
                            name = "action";
                            break;
                        case "string":
                            name = "text";
                            break;
                        default:
                            console.debug("skipping " + name);
                            continue;
                    }
                }

                if (["arg", "twoarg"].includes(this.protoBlockDict[name].style)) {
                    if (this.protoBlockDict[name].expandable) {
                        this._checkTwoArgBlocks.push(this.blockList.length + b);
                    }
                }

                if (
                    ["clamp", "argclamp", "argclamparg", "doubleclamp", "argflowclamp"].includes(
                        this.protoBlockDict[name].style
                    )
                ) {
                    this._checkArgClampBlocks.push(this.blockList.length + b);
                }

                let key;
                switch (name) {
                    case "text":
                        key = blkData[1][1];
                        if (stringValues[key] === undefined) {
                            stringValues[key] = [];
                        }
                        stringValues[key].push(b);
                        break;
                    case "action":
                    case "hat":
                        if (blkData[4][1] != null) {
                            actionNames[b] = blkData[4][1];
                        }
                        break;
                    case "storein":
                        if (blkData[4][1] != null) {
                            storeinNames[b] = blkData[4][1];
                        }
                        break;
                    case "nameddo":
                    case "namedcalc":
                    case "nameddoArg":
                    case "namedcalcArg":
                        doNames[b] = blkData[1][1]["value"];
                        break;
                    case "do":
                    case "stack":
                        if (blkData[4][1] != null) {
                            doNames[b] = blkData[4][1];
                        }
                        break;
                    default:
                        break;
                }

                if (COLLAPSIBLES.includes(name)) {
                    if (
                        typeof blkData[1] === "object" &&
                        blkData[1].length > 1 &&
                        typeof blkData[1][1] === "object" &&
                        "collapsed" in blkData[1][1]
                    ) {
                        if (blkData[1][1]["collapsed"]) {
                            this.blocksToCollapse.push(this.blockList.length + b);
                        }
                    }
                }
            }

            let updatePalettes = false;
            /** Make sure new storein names have palette entries. */
            for (const b in storeinNames) {
                const blkData = blockObjs[storeinNames[b]];
                if (!currentStoreinNames.includes(blkData[1][1])) {
                    if (typeof blkData[1][1] === "string") {
                        name = blkData[1][1];
                    } else {
                        name = blkData[1][1]["value"];
                    }

                    /** this.newStoreinBlock(name); */
                    this.newStorein2Block(name);
                    this.newNamedboxBlock(name);
                    updatePalettes = true;
                }
            }

            /** Make sure action names are unique. */
            for (const b in actionNames) {
                /** Is there a proto do block with this name? If so, find a */
                /** new name. */
                /** Name = the value of the connected label. */
                const blkData = blockObjs[actionNames[b]];
                if (typeof blkData[1][1] === "string") {
                    name = blkData[1][1];
                } else {
                    name = blkData[1][1]["value"];
                }

                /** If we have a stack named 'action', make the protoblock visible. */
                if (name === _("action")) {
                    this.setActionProtoVisibility(true);
                }

                const oldName = name;
                let i = 1;
                while (currentActionNames.includes(name)) {
                    name = oldName + i.toString();
                    i += 1;
                    /** Should never happen... but just in case. */
                    if (i > this.blockList.length) {
                        console.debug("Could not generate unique action name.");
                        break;
                    }
                }

                /** Add this name to the list so we don't repeat it. */
                currentActionNames.push(name);

                if (oldName !== name) {
                    /** Change the name of the action... */

                    console.debug("action " + oldName + " is being renamed " + name);
                    blkData[1][1] = { value: name };
                }

                /** and any do blocks */
                let blkName;
                for (const d in doNames) {
                    const thisBlkData = blockObjs[d];
                    if (typeof thisBlkData[1] === "string") {
                        blkName = thisBlkData[1];
                    } else {
                        blkName = thisBlkData[1][0];
                    }
                    if (["nameddo", "namedcalc", "nameddoArg", "namedcalcArg"].includes(blkName)) {
                        if (thisBlkData[1][1]["value"] === oldName) {
                            thisBlkData[1][1] = { value: name };
                        }
                    } else {
                        const doBlkData = blockObjs[doNames[d]];
                        if (typeof doBlkData[1][1] === "string") {
                            if (doBlkData[1][1] === oldName) {
                                doBlkData[1][1] = name;
                            }
                        } else {
                            if (doBlkData[1][1]["value"] === oldName) {
                                doBlkData[1][1] = { value: name };
                            }
                        }
                    }
                }
            }

            if (updatePalettes) {
                this.activity.palettes.updatePalettes("action");
            }

            /**
             * This section of the code attempts to repair imported
             * code. For example, it adds missing hidden blocks and
             * convert old-style notes to new-style notes.
             */
            const blockObjsLength = blockObjs.length;
            let extraBlocksLength = 0;
            let len;

            for (let b = 0; b < blockObjsLength; b++) {
                if (typeof blockObjs[b][1] === "object") {
                    name = blockObjs[b][1][0];
                } else {
                    name = blockObjs[b][1];
                }

                switch (name) {
                    case "arpeggio":
                    case "articulation":
                    case "backward":
                    case "crescendo":
                    case "drift":
                    case "duplicatenotes":
                    case "interval":
                    case "invert1":
                    case "fill":
                    case "flat":
                    case "hollowline":
                    case "multiplybeatfactor":
                    case "note":
                    case "newnote":
                    case "newslur":
                    case "newstaccato":
                    case "newswing":
                    case "newswing2":
                    case "osctime":
                    case "pluck":
                    case "ratiointerval":
                    case "rhythmicdot":
                    case "semitoneinterval":
                    case "setbpm":
                    case "setnotevolume2":
                    case "setratio":
                    case "setscalartransposition":
                    case "settransposition":
                    case "setvoice":
                    case "sharp":
                    case "skipnotes":
                    case "slur":
                    case "staccato":
                    case "swing":
                    case "tie":
                    case "tuplet2":
                    case "vibrato":
                        len = blockObjs[b][4].length;
                        if (last(blockObjs[b][4]) == null) {
                            /** If there is no next block, add a hidden block; */

                            console.debug(
                                "last connection of " + name + " is null: adding hidden block"
                            );

                            console.debug(blockObjs[b][4]);
                            blockObjs[b][4][len - 1] = blockObjsLength + extraBlocksLength;
                            blockObjs.push([
                                blockObjsLength + extraBlocksLength,
                                "hidden",
                                0,
                                0,
                                [b, null]
                            ]);
                            extraBlocksLength += 1;
                        } else {
                            const nextBlock = blockObjs[b][4][len - 1];
                            let nextName;
                            if (typeof blockObjs[nextBlock][1] === "object") {
                                nextName = blockObjs[nextBlock][1][0];
                            } else {
                                nextName = blockObjs[nextBlock][1];
                            }

                            if (nextName !== "hidden") {
                                console.debug(
                                    "last connection of " +
                                        name +
                                        " is " +
                                        nextName +
                                        ": adding hidden block"
                                );
                                /** If the next block is not a hidden block, add one. */
                                blockObjs[b][4][len - 1] = blockObjsLength + extraBlocksLength;
                                blockObjs[nextBlock][4][0] = blockObjsLength + extraBlocksLength;
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "hidden",
                                    0,
                                    0,
                                    [b, nextBlock]
                                ]);
                                extraBlocksLength += 1;
                            }
                        }

                        if (["note", "slur", "staccato", "swing"].includes(name)) {
                            /** We need to convert to newnote style: */
                            /** (1) add a vspace to the start of the clamp of a note block. */
                            const clampBlock = blockObjs[b][4][2];
                            blockObjs[b][4][2] = blockObjsLength + extraBlocksLength;
                            if (clampBlock == null) {
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "vspace",
                                    0,
                                    0,
                                    [b, null]
                                ]);
                            } else {
                                blockObjs[clampBlock][4][0] = blockObjsLength + extraBlocksLength;
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "vspace",
                                    0,
                                    0,
                                    [b, clampBlock]
                                ]);
                            }

                            extraBlocksLength += 1;

                            /** (2) switch the first connection to divide 1 / arg. */
                            const argBlock = blockObjs[b][4][1];
                            blockObjs[b][4][1] = blockObjsLength + extraBlocksLength;
                            if (argBlock == null) {
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "divide",
                                    0,
                                    0,
                                    [
                                        b,
                                        blockObjsLength + extraBlocksLength + 1,
                                        blockObjsLength + extraBlocksLength + 2
                                    ]
                                ]);
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength + 1,
                                    ["number", { value: 1 }],
                                    0,
                                    0,
                                    [blockObjsLength + extraBlocksLength]
                                ]);
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength + 2,
                                    ["number", { value: 1 }],
                                    0,
                                    0,
                                    [blockObjsLength + extraBlocksLength]
                                ]);
                                extraBlocksLength += 3;
                            } else {
                                blockObjs[argBlock][4][0] = blockObjsLength + extraBlocksLength;
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "divide",
                                    0,
                                    0,
                                    [b, blockObjsLength + extraBlocksLength + 1, argBlock]
                                ]);
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength + 1,
                                    ["number", { value: 1 }],
                                    0,
                                    0,
                                    [blockObjsLength + extraBlocksLength]
                                ]);
                                extraBlocksLength += 2;
                            }

                            /** (3) create a "newnote" block instead. */
                            if (typeof blockObjs[b][1] === "object") {
                                blockObjs[b][1][0] = "new" + name;
                            } else {
                                blockObjs[b][1] = "new" + name;
                            }
                        }
                        break;
                    case "action":
                        /**
                         * Ensure that there is a hidden block as the first
                         * block in the child flow (connection 2) of an action
                         * block (required to make the backward block function
                         * properly).
                         */
                        len = blockObjs[b][4].length;
                        if (blockObjs[b][4][2] == null) {
                            /** If there is no child flow block, add a hidden block; */

                            console.debug(
                                "last connection of " + name + " is null: adding hidden block"
                            );
                            blockObjs[b][4][2] = blockObjsLength + extraBlocksLength;
                            blockObjs.push([
                                blockObjsLength + extraBlocksLength,
                                "hidden",
                                0,
                                0,
                                [b, null]
                            ]);
                            extraBlocksLength += 1;
                        } else {
                            const nextBlock = blockObjs[b][4][2];
                            let nextName;
                            if (typeof blockObjs[nextBlock][1] === "object") {
                                nextName = blockObjs[nextBlock][1][0];
                            } else {
                                nextName = blockObjs[nextBlock][1];
                            }

                            if (nextName !== "hidden") {
                                console.debug(
                                    "last connection of " +
                                        name +
                                        " is " +
                                        nextName +
                                        ": adding hidden block"
                                );
                                /** If the next block is not a hidden block, add one. */
                                blockObjs[b][4][2] = blockObjsLength + extraBlocksLength;
                                blockObjs[nextBlock][4][0] = blockObjsLength + extraBlocksLength;
                                blockObjs.push([
                                    blockObjsLength + extraBlocksLength,
                                    "hidden",
                                    0,
                                    0,
                                    [b, nextBlock]
                                ]);
                                extraBlocksLength += 1;
                            }
                        }
                        break;
                    default:
                        break;
                }
            }

            /** Append to the current set of blocks. */
            this._adjustTheseStacks = [];
            this._adjustTheseDocks = [];
            this._loadCounter = blockObjs.length;

            // Preload audio samples for instruments used in this project (background task)
            if (this.activity && this.activity.logo && this.activity.logo.synth) {
                this.activity.logo.synth.preloadProjectSamples(blockObjs);
            }

            /** We add new blocks to the end of the block list. */
            const blockOffset = this.blockList.length;
            const firstBlock = this.blockList.length;

            /**
             * Chunked block-loading: yield to the main thread every ~50ms
             * so the browser can paint and remain interactive during
             * large-project loads.  Each chunk processes CHUNK_SIZE blocks
             * synchronously, then schedules the next chunk via setTimeout(0).
             */
            const CHUNK_SIZE = 20;
            const totalBlocks = this._loadCounter;
            let bIndex = 0;

            const processChunk = () => {
                const chunkEnd = Math.min(bIndex + CHUNK_SIZE, totalBlocks);
                for (let b = bIndex; b < chunkEnd; b++) {
                    this._processOneBlock(b, blockObjs, blockOffset, firstBlock);
                }
                bIndex = chunkEnd;
                if (bIndex < totalBlocks) {
                    setTimeout(processChunk, 0);
                }
            };

            processChunk();
        };

        /**
         * Processes a single block object during load.  Extracted from
         * the former monolithic for-loop inside loadNewBlocks so the
         * loop can be chunked across frames.
         * @private
         */
        this._processOneBlock = (b, blockObjs, blockOffset, firstBlock) => {
            {
                const thisBlock = blockOffset + b;
                const blkData = blockObjs[b];
                let blkInfo;

                if (typeof blkData[1] === "object") {
                    if (blkData[1].length === 1) {
                        blkInfo = [blkData[1][0], { value: null }];
                    } else if (["number", "string"].includes(typeof blkData[1][1])) {
                        blkInfo = [blkData[1][0], { value: blkData[1][1] }];
                        if (COLLAPSIBLES.includes(blkData[1][0])) {
                            blkInfo[1]["collapsed"] = false;
                        }
                    } else {
                        blkInfo = blkData[1];
                    }
                } else {
                    blkInfo = [blkData[1], { value: null }];
                    if (COLLAPSIBLES.includes(blkData[1])) {
                        blkInfo[1]["collapsed"] = false;
                    }
                }

                let name = blkInfo[0];
                let value;
                let text;
                if (blkInfo[1] == null) {
                    value = null;
                    text = "";
                } else {
                    value = blkInfo[1]["value"];
                    text = blkInfo[1]["text"];
                    if (text == null) {
                        text = "";
                    }
                }

                if (name in BACKWARDCOMPATIBILIYDICT) {
                    name = BACKWARDCOMPATIBILIYDICT[name];
                }

                const that = this;

                if (this.findBlockInstance("temperament1")) {
                    this.customTemperamentDefined = true;
                }

                let postProcess;
                /** A few special cases. */
                switch (name) {
                    case "start":
                        blkData[4][0] = null;
                        blkData[4][2] = null;
                        postProcess = args => {
                            const thisBlock = args[0];
                            const blkInfo = args[1];
                            that.blockList[thisBlock].value = that.turtles.getTurtleCount();
                            that.turtles.addTurtle(that.blockList[thisBlock], blkInfo);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blkInfo[1]]
                        );
                        break;
                    case "action":
                    case "hat":
                        blkData[4][0] = null;
                        blkData[4][3] = null;
                        this._makeNewBlockWithConnections(
                            "action",
                            blockOffset,
                            blkData[4],
                            null,
                            null
                        );
                        break;
                    case "temperament1":
                        postProcess = args => {
                            const value = args[1];
                            let customName = "custom";
                            if (value.customName !== undefined) {
                                customName = value.customName;
                            }
                            if (value.customTemperamentNotes !== undefined) {
                                deleteTemperamentFromList(customName);
                                addTemperamentToDictionary(
                                    customName,
                                    value.customTemperamentNotes
                                );
                                updateTemperaments();
                            }
                            /** Is this correct? */
                            if (value.startingPitch !== undefined) {
                                that.activity.logo.synth.startingPitch = value.startingPitch;
                            }
                            if (value.octaveSpace !== undefined) {
                                setOctaveRatio(value.octaveSpace);
                            }
                            that.activity.logo.customTemperamentDefined = true;
                            that.protoBlockDict["custompitch"].hidden = false;
                            that.activity.palettes.updatePalettes("pitch");
                        };
                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blkInfo[1]]
                        );
                        break;
                    case "storein2":
                        /** Named boxes and dos need private data. */
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;
                            that.blockList[thisBlock].value = null;
                            if (value === "box1") {
                                that.blockList[thisBlock].overrideName = _("box1");
                            } else if (value === "box2") {
                                that.blockList[thisBlock].overrideName = _("box2");
                            } else {
                                that.blockList[thisBlock].overrideName = value;
                            }
                            that.blockList[thisBlock].regenerateArtwork();
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "namedbox":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;

                            if (value === "box1") {
                                that.blockList[thisBlock].overrideName = _("box1");
                            } else if (value === "box2") {
                                that.blockList[thisBlock].overrideName = _("box2");
                            } else {
                                that.blockList[thisBlock].overrideName = value;
                            }

                            that.blockList[thisBlock].value = null;
                            that.blockList[thisBlock].regenerateArtwork();
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "namedarg":
                    case "namedcalc":
                    case "nameddo":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;
                            that.blockList[thisBlock].value = null;
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "doArg":
                        /** Arg clamps may need extra slots added. */
                        postProcess = args => {
                            const thisBlock = args[0];
                            const extraSlots = args[1].length - 4;
                            if (extraSlots > 0) {
                                const slotList = that.blockList[thisBlock].argClampSlots;
                                for (let i = 0; i < extraSlots; i++) {
                                    slotList.push(1);
                                    that._newLocalArgBlock(slotList.length);
                                    that.blockList[thisBlock].connections.push(null);
                                }
                                that.blockList[thisBlock].updateArgSlots(slotList);
                                for (let i = 0; i < args[1].length; i++) {
                                    if (args[1][i] != null) {
                                        that.blockList[thisBlock].connections[i] =
                                            args[1][i] + firstBlock;
                                    } else {
                                        that.blockList[thisBlock].connections[i] = args[1][i];
                                    }
                                }
                            }
                            that._checkArgClampBlocks.push(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "doArg",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blkData[4]]
                        );
                        break;
                    case "nameddoArg":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;
                            that.blockList[thisBlock].value = null;
                            const extraSlots = args[2].length - 3;
                            if (extraSlots > 0) {
                                const slotList = that.blockList[thisBlock].argClampSlots;
                                for (let i = 0; i < extraSlots; i++) {
                                    slotList.push(1);
                                    that._newLocalArgBlock(slotList.length);
                                    that.blockList[thisBlock].connections.push(null);
                                }
                                that.blockList[thisBlock].updateArgSlots(slotList);
                                for (let i = 0; i < args[2].length; i++) {
                                    if (args[2][i] != null) {
                                        that.blockList[thisBlock].connections[i] =
                                            args[2][i] + firstBlock;
                                    } else {
                                        that.blockList[thisBlock].connections[i] = args[2][i];
                                    }
                                }
                            }
                            that._checkArgClampBlocks.push(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "nameddoArg",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value, blkData[4]]
                        );
                        break;
                    case "calcArg":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const extraSlots = args[1].length - 3;
                            if (extraSlots > 0) {
                                const slotList = that.blockList[thisBlock].argClampSlots;
                                for (let i = 0; i < extraSlots; i++) {
                                    slotList.push(1);
                                    that._newLocalArgBlock(slotList.length);
                                    that.blockList[thisBlock].connections.push(null);
                                }
                                that.blockList[thisBlock].updateArgSlots(slotList);
                                for (let i = 0; i < args[1].length; i++) {
                                    if (args[1][i] != null) {
                                        that.blockList[thisBlock].connections[i] =
                                            args[1][i] + firstBlock;
                                    } else {
                                        that.blockList[thisBlock].connections[i] = args[1][i];
                                    }
                                }
                            }
                            that._checkArgClampBlocks.push(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "calcArg",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blkData[4]]
                        );
                        break;
                    case "namedcalcArg":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;
                            that.blockList[thisBlock].value = null;
                            const extraSlots = args[2].length - 2;
                            if (extraSlots > 0) {
                                const slotList = that.blockList[thisBlock].argClampSlots;
                                for (let i = 0; i < extraSlots; i++) {
                                    slotList.push(1);
                                    that._newLocalArgBlock(slotList.length);
                                    that.blockList[thisBlock].connections.push(null);
                                }
                                that.blockList[thisBlock].updateArgSlots(slotList);
                                for (let i = 0; i < args[2].length; i++) {
                                    if (args[2][i] != null) {
                                        that.blockList[thisBlock].connections[i] =
                                            args[2][i] + firstBlock;
                                    } else {
                                        that.blockList[thisBlock].connections[i] = args[2][i];
                                    }
                                }
                            }
                            that._checkArgClampBlocks.push(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "namedcalcArg",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value, blkData[4]]
                        );
                        break;
                    case "makeblock":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const extraSlots = args[1].length - 3;
                            if (extraSlots > 0) {
                                const slotList = that.blockList[thisBlock].argClampSlots;
                                for (let i = 0; i < extraSlots; i++) {
                                    slotList.push(1);
                                    that.blockList[thisBlock].connections.push(null);
                                }
                                that.blockList[thisBlock].updateArgSlots(slotList);
                                for (let i = 0; i < args[1].length; i++) {
                                    if (args[1][i] != null) {
                                        that.blockList[thisBlock].connections[i] =
                                            args[1][i] + firstBlock;
                                    } else {
                                        that.blockList[thisBlock].connections[i] = args[1][i];
                                    }
                                }
                            }
                            that._checkArgClampBlocks.push(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "makeblock",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blkData[4]]
                        );
                        break;
                    /** Value blocks need a default value set. */
                    case "number":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = Number(value);
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "outputtools":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].privateData = value;
                            that.blockList[thisBlock].overrideName = value;
                        };

                        this._makeNewBlockWithConnections(
                            "outputtools",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, blockObjs[b][1][1].value]
                        );
                        break;
                    case "text":
                    case "solfege":
                    case "scaledegree2":
                    case "customNote":
                    case "eastindiansolfege":
                    case "notename":
                    case "modename":
                    case "chordname":
                    case "temperamentname":
                    case "invertmode":
                    case "filtertype":
                    case "oscillatortype":
                    case "accidentalname":
                    case "intervalname":
                    case "grid":
                    case "boolean":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = value;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "drumname":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = value;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );

                        /** Load the synth for this drum */
                        if (value === null) value = DEFAULTDRUM;
                        that.activity.logo.synth.loadSynth(0, getDrumSynthName(value));
                        break;
                    case "effectsname":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = value;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );

                        /** Load the synth for this drum */
                        if (value === null) value = DEFAULTEFFECT;
                        that.activity.logo.synth.loadSynth(0, getDrumSynthName(value));
                        break;
                    case "voicename":
                        postProcess = args => {
                            const thisBlock = args[0];
                            let value = args[1];
                            if (["simple 1", "simple 2", "simple 3", "simple 4"].includes(value)) {
                                value = "sine";
                            }

                            that.blockList[thisBlock].value = value;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );

                        /** Load the synth for this voice */
                        try {
                            if (value === null) {
                                value = DEFAULTVOICE;
                            }
                            this.activity.logo.synth.loadSynth(0, getVoiceSynthName(value));
                        } catch (e) {
                            console.debug(e);
                        }
                        break;
                    case "noisename":
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = value;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );

                        /** Load the synth for this noise */
                        try {
                            if (value === null) {
                                value = DEFAULTNOISE;
                            }
                            this.activity.logo.synth.loadSynth(0, getNoiseSynthName(value));
                        } catch (e) {
                            console.debug(e);
                        }
                        break;
                    case "loudness":
                    case "pitchness":
                        this._makeNewBlockWithConnections(name, blockOffset, blkData[4], null, []);
                        this.activity.logo.initMediaDevices();
                        break;
                    case "media":
                        /** Load a thumbnail into a media blocks. */
                        postProcess = args => {
                            const thisBlock = args[0];
                            const value = args[1];
                            that.blockList[thisBlock].value = value;
                            if (value != null) {
                                /** Load artwork onto media block. */
                                that.blockList[thisBlock].loadThumbnail(null);
                            }
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "camera":
                        postProcess = args => {
                            const thisBlock = args[0];
                            /** const value = args[1]; */
                            that.blockList[thisBlock].value = CAMERAVALUE;
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "video":
                        postProcess = args => {
                            const thisBlock = args[0];
                            /** const value = args[1]; */
                            that.blockList[thisBlock].value = VIDEOVALUE;
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;

                    /** Define some constants for backward compatibility with Python projects. */
                    case "red":
                    case "black":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 0;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "white":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 100;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "orange":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 10;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "yellow":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 20;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "green":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 40;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "blue":
                        postProcess = thisBlock => {
                            that.blockList[thisBlock].value = 70;
                            that.updateBlockText(thisBlock);
                        };

                        this._makeNewBlockWithConnections(
                            "number",
                            blockOffset,
                            blkData[4],
                            postProcess,
                            thisBlock
                        );
                        break;
                    case "loadFile":
                        postProcess = args => {
                            that.blockList[args[0]].value = args[1];
                            that.updateBlockText(args[0]);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "wrapmode":
                        postProcess = args => {
                            that.blockList[args[0]].value = args[1];
                            that.updateBlockText(args[0]);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    case "audiofile":
                        postProcess = args => {
                            that.blockList[args[0]].value = args[1];
                            that.updateBlockText(args[0]);
                        };

                        this._makeNewBlockWithConnections(
                            name,
                            blockOffset,
                            blkData[4],
                            postProcess,
                            [thisBlock, value]
                        );
                        break;
                    default:
                        /** Check that name is in the proto list */
                        if (!(name in this.protoBlockDict) || this.protoBlockDict[name] == null) {
                            const postProcessUnknownBlock = args => {
                                /** save original block name */
                                that.blockList[args[0]].privateData = args[1];
                            };

                            let newName = name;

                            /** Substitute a NOP block for an unknown block. */
                            const n = blkData[4].length;
                            /** Try to figure out if it is a flow or an arg block. */
                            let flowBlock = true;
                            /** Is the first connection attached to a flow block? */
                            const c = blkData[4][0];
                            if (c !== null) {
                                const cc = blockObjs[c][4].indexOf(b);
                                if (typeof blockObjs[c][1] === "string") {
                                    if (this.protoBlockDict[blockObjs[c][1]] !== undefined) {
                                        if (
                                            this.protoBlockDict[blockObjs[c][1]].dockTypes[cc] !==
                                            "in"
                                        ) {
                                            flowBlock = false;
                                        }
                                    }
                                } else {
                                    if (this.protoBlockDict[blockObjs[c][1][0]] !== undefined) {
                                        if (
                                            this.protoBlockDict[blockObjs[c][1][0]].dockTypes[
                                                cc
                                            ] !== "in"
                                        ) {
                                            flowBlock = false;
                                        }
                                    }
                                }
                            } else {
                                /** Or the last connection attached to a flow block? */
                                const c = last(blkData[4]);
                                if (c !== null) {
                                    const cc = blockObjs[c][4].indexOf(b);
                                    if (typeof blockObjs[c][1] === "string") {
                                        if (this.protoBlockDict[blockObjs[c][1]] !== undefined) {
                                            if (
                                                this.protoBlockDict[blockObjs[c][1]].dockTypes[
                                                    cc
                                                ] !== "out"
                                            ) {
                                                flowBlock = false;
                                            }
                                        } else {
                                            if (
                                                this.protoBlockDict[blockObjs[c][1][0]] !==
                                                undefined
                                            ) {
                                                if (
                                                    this.protoBlockDict[blockObjs[c][1][0]]
                                                        .dockTypes[cc] !== "out"
                                                ) {
                                                    flowBlock = false;
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            if (flowBlock) {
                                console.debug(n + ": substituting nop flow block for " + name);
                            } else {
                                console.debug(n + ": substituting nop arg block for " + name);
                            }

                            /** We cover the common cases here. */
                            switch (n) {
                                case 1:
                                    newName = "nopValueBlock";
                                    break;
                                case 2:
                                    if (flowBlock) {
                                        newName = "nopZeroArgBlock";
                                    } else {
                                        newName = "nopOneArgMathBlock";
                                    }
                                    break;
                                case 3:
                                    if (flowBlock) {
                                        newName = "nopOneArgBlock";
                                    } else {
                                        newName = "nopTwoArgMathBlock";
                                    }
                                    break;
                                case 4:
                                    newName = "nopTwoArgBlock";
                                    break;
                                case 5:
                                default:
                                    if (n > 5) {
                                        console.debug("WARNING: arg count exceed.");
                                    }
                                    newName = "nopThreeArgBlock";
                                    break;
                            }

                            this._makeNewBlockWithConnections(
                                newName,
                                blockOffset,
                                blkData[4],
                                postProcessUnknownBlock,
                                [thisBlock, name]
                            );
                        } else {
                            this._makeNewBlockWithConnections(name, blockOffset, blkData[4], null);
                        }
                        break;
                }

                if (thisBlock === this.blockList.length - 1) {
                    if (this.blockList[thisBlock].connections[0] == null) {
                        this.blockList[thisBlock].container.x = blkData[2];
                        this.blockList[thisBlock].container.y = blkData[3];
                        this._adjustTheseDocks.push(thisBlock);
                        if (blkData[4][0] == null) {
                            this._adjustTheseStacks.push(thisBlock);
                        }
                        if (
                            blkData[2] < 0 ||
                            blkData[3] < 0 ||
                            blkData[2] > this.activity.canvas.width ||
                            blkData[3] > this.activity.canvas.height
                        ) {
                            this.activity.setHomeContainers(true);
                        }
                    }
                }
            }
        };

        /**
         * If all the blocks are loaded, we can make the final adjustments.
         * @param - name
         * @public
         * @returns {void}
         */
        this.cleanupAfterLoad = async () => {
            this._loadCounter -= 1;
            if (this._loadCounter > 0) {
                return;
            }

            this._findDrumURLs();

            this.updateBlockPositions();

            this._cleanupStacks();

            for (let i = 0; i < this.blocksToCollapse.length; i++) {
                this.blockList[this.blocksToCollapse[i]].collapseToggle();
            }

            this.blocksToCollapse = [];

            this.activity.refreshCanvas();

            /** Do a final check on the action and boxes palettes. */
            let updatePalettes = false;
            for (const blk in this.blockList) {
                if (!this.blockList[blk].trash && this.blockList[blk].name === "action") {
                    const myBlock = this.blockList[blk];
                    const c = myBlock.connections[1];
                    if (c != null && this.blockList[c].value !== _("action")) {
                        const metadata = this.actionMetadata(blk);
                        if (
                            this.newNameddoBlock(
                                this.blockList[c].value,
                                metadata.hasReturn,
                                metadata.hasArgs
                            )
                        ) {
                            updatePalettes = true;
                        }
                    }
                }
            }

            if (updatePalettes) {
                this.activity.palettes.updatePalettes("action");
            }

            updatePalettes = false;
            for (const blk in this.blockList) {
                if (!this.blockList[blk].trash && this.blockList[blk].name === "storein") {
                    const myBlock = this.blockList[blk];
                    const c = myBlock.connections[1];
                    if (c != null && this.blockList[c].value !== _("box")) {
                        const name = this.blockList[c].value;
                        if (name !== null) {
                            /** Is there an old block with this name still around? */
                            if (
                                this.protoBlockDict["myStorein_" + name] == undefined ||
                                this.protoBlockDict["yourStorein2_" + name] == undefined
                            ) {
                                /** this.newStoreinBlock(this.blockList[c].value); */
                                this.newStorein2Block(this.blockList[c].value);
                                this.newNamedboxBlock(this.blockList[c].value);
                                updatePalettes = true;
                            }
                        }
                    }
                }
            }

            document.body.style.cursor = "default";
            document.getElementById("load-container").style.display = "none";
            // Stop the loading animation interval to prevent CPU waste
            if (this.activity.stopLoadAnimation) {
                this.activity.stopLoadAnimation();
            }
            const myCustomEvent = new Event("finishedLoading");
            document.dispatchEvent(myCustomEvent);
        };

        /**
         * Cleanup the stacks after load.
         * @private
         * @returns {void}
         */
        this._cleanupStacks = () => {
            /** Sort the blocks from inside to outside. */
            let blocksToCheck = [];
            for (let b = 0; b < this._checkArgClampBlocks.length; b++) {
                const bb = this._checkArgClampBlocks[b];
                blocksToCheck.push([bb, this._getNestingDepth(bb), "1arg"]);
            }

            for (let b = 0; b < this._checkTwoArgBlocks.length; b++) {
                const bb = this._checkTwoArgBlocks[b];
                blocksToCheck.push([bb, this._getNestingDepth(bb), "2arg"]);
            }

            blocksToCheck = blocksToCheck.sort((a, b) => {
                return a[1] - b[1];
            });

            blocksToCheck = blocksToCheck.reverse();

            for (let i = 0; i < blocksToCheck.length; i++) {
                if (blocksToCheck[i][2] === "1arg") {
                    this._adjustArgClampBlock([blocksToCheck[i][0]]);
                } else {
                    this._adjustExpandableTwoArgBlock([blocksToCheck[i][0]]);
                }
            }

            for (let blk = 0; blk < this._adjustTheseDocks.length; blk++) {
                this.adjustDocks(this._adjustTheseDocks[blk], true);
                /** blockBlocks._expandTwoArgs(); */
                this._expandClamps();
            }

            for (let blk = 0; blk < this._adjustTheseStacks.length; blk++) {
                this.raiseStackToTop(this._adjustTheseStacks[blk]);
            }
        };

        /**
         * Look for Return and Arg blocks in an action stack.
         * @param - blk - block
         * @public
         * @returns { hasReturn: boolean, hasArgs: boolean }
         */
        this.actionMetadata = blk => {
            if (this.blockList[blk].name !== "action") {
                return { hasReturn: false, hasArgs: false };
            }
            this.findDragGroup(blk);
            let hasReturn = false;
            let hasArgs = false;
            for (let b = 0; b < this.dragGroup.length; b++) {
                const name = this.blockList[this.dragGroup[b]].name;
                if (name === "return") {
                    hasReturn = true;
                } else if (name === "arg" || name === "namedarg") {
                    hasArgs = true;
                }
                if (hasReturn && hasArgs) {
                    break;
                }
            }
            return { hasReturn, hasArgs };
        };

        /**
         * Look for a Return block in an action stack.
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.actionHasReturn = blk => this.actionMetadata(blk).hasReturn;

        /**
         * Look for an Arg block in an action stack.
         * @param - blk - block
         * @public
         * @returns boolean
         */
        this.actionHasArgs = blk => this.actionMetadata(blk).hasArgs;

        /**
         * Move the stack associated with blk to the top.
         * @param - blk - block
         * @public
         * @returns {void}
         */
        this.raiseStackToTop = blk => {
            const topBlk = this.findTopBlock(blk);
            this.findDragGroup(topBlk);

            let z = this.activity.blocksContainer.children.length - 1;
            for (let b = 0; b < this.dragGroup.length; b++) {
                this.activity.blocksContainer.setChildIndex(
                    this.blockList[this.dragGroup[b]].container,
                    z
                );
                z -= 1;
            }

            this.activity.refreshCanvas();
        };

        /**
         * Deletes an Action block
         * @param - myblock - new variable
         * @public
         * @returns {void}
         */
        this.deleteActionBlock = async myBlock => {
            const actionArg = this.blockList[myBlock.connections[1]];
            if (actionArg) {
                const actionName = actionArg.value;
                /** Look for any "orphan" action blocks. */
                for (const blk in this.blockList) {
                    const thisBlock = this.blockList[blk];

                    /** We are only interested in do and nameddo blocks. */
                    if (
                        ![
                            "nameddo",
                            "namedcalcArg",
                            "nameddoArg",
                            "do",
                            "calc",
                            "calcArg",
                            "doArg"
                        ].includes(thisBlock.name)
                    ) {
                        continue;
                    }

                    /** Make sure it is not connected. */
                    if (thisBlock.connections[0] !== null) {
                        continue;
                    }

                    if (thisBlock.name !== "calc") {
                        if (last(thisBlock.connections) !== null) {
                            continue;
                        }
                    }

                    if (thisBlock.name === "calcArg") {
                        if (thisBlock.connections[2] !== null) {
                            continue;
                        }
                    }

                    if (thisBlock.name === "doArg") {
                        if (thisBlock.connections[2] !== null) {
                            continue;
                        }
                    }

                    if (thisBlock.name === "namedcalcArg") {
                        if (thisBlock.connections[1] !== null) {
                            continue;
                        }
                    }

                    let argBlock;
                    let blockValue;
                    switch (thisBlock.name) {
                        case "doArg":
                        case "calcArg":
                        case "calc":
                        case "do":
                            if (thisBlock.connections[1] !== null) {
                                argBlock = this.blockList[thisBlock.connections[1]];
                                blockValue = argBlock.value;
                            }
                            break;
                        case "nameddoArg":
                        case "namedcalcArg":
                        case "nameddo":
                            argBlock = null;
                            blockValue = thisBlock.privateData;
                            break;
                    }

                    if (blockValue === actionName) {
                        thisBlock.trash = true;
                        if (argBlock !== null) {
                            argBlock.hide();
                            argBlock.trash = true;
                        }
                    }
                }

                /** Delete action blocks from action palette. */
                /** Use a timeout to avoid palette refresh race condition. */
                this.deleteActionTimeout += 50;
                const timeout = this.deleteActionTimeout;
                await delayExecution(timeout);
                this.deleteActionTimeout -= 50;
                this.activity.palettes.removeActionPrototype(actionName);
            }
        };

        /**
         * Send a stack of blocks to the trash.
         * @param - myBlock
         * @public
         * @returns {void}
         */
        this.sendStackToTrash = myBlock => {
            /** First, hide the palettes as they may need updating. */
            for (const name in this.activity.palettes.dict) {
                this.activity.palettes.dict[name].hideMenu(true);
            }

            this.activity.refreshCanvas();

            const thisBlock = myBlock.blockIndex;

            /** Add this block to the list of blocks in the trash so we can undo this action. */
            this.trashStacks.push(thisBlock);

            // Cap the undo history to prevent unbounded memory growth.
            // Keep the 100 most recent trashed stacks.
            const MAX_TRASH_UNDO = 100;
            if (this.trashStacks.length > MAX_TRASH_UNDO) {
                this.trashStacks = this.trashStacks.slice(-MAX_TRASH_UNDO);
            }

            /** Disconnect block. */
            const parentBlock = myBlock.connections[0];
            if (parentBlock != null) {
                for (const c in this.blockList[parentBlock].connections) {
                    if (this.blockList[parentBlock].connections[c] === thisBlock) {
                        this.blockList[parentBlock].connections[c] = null;
                        break;
                    }
                }
                const parentExpandableBlk = this.insideExpandableBlock(thisBlock);
                myBlock.connections[0] = null;

                /** Add default block if user deletes all blocks from */
                /** inside the note block. */
                this.addDefaultBlock(parentExpandableBlk, thisBlock);
            }

            if (myBlock.name === "start" || myBlock.name === "drum") {
                const turtle = myBlock.value;
                if (turtle != null) {
                    console.debug("putting turtle " + turtle + " in the trash");
                    const comp = this.turtles.turtleList[turtle].companionTurtle;
                    if (comp) {
                        this.turtles.turtleList[comp].inTrash = true;
                        this.turtles.turtleList[comp].container.visible = false;
                        this.turtles.turtleList[turtle].inTrash = true;
                        this.turtles.turtleList[turtle].container.visible = false;
                    } else {
                        this.turtles.turtleList[turtle].inTrash = true;
                        this.turtles.turtleList[turtle].container.visible = false;
                    }
                }
            } else if (myBlock.name === "action") {
                if (!myBlock.trash) {
                    this.deleteActionBlock(myBlock);
                }
            }

            /** Put the drag group in trash. */
            this.findDragGroup(thisBlock);
            for (let b = 0; b < this.dragGroup.length; b++) {
                const blk = this.dragGroup[b];
                this.blockList[blk].trash = true;
                this.blockList[blk].hide();

                // Free the backing canvas memory for trashed blocks.
                // Each cached block holds a bitmap canvas (~0.5-2 MB).
                if (this.blockList[blk].container) {
                    this.blockList[blk].container.uncache();
                }

                // Clean up SVG art strings for trashed blocks to free memory.
                if (this.blockArt[blk]) {
                    delete this.blockArt[blk];
                }
                if (this.blockCollapseArt[blk]) {
                    delete this.blockCollapseArt[blk];
                }

                const title = this.blockList[blk].protoblock.staticLabels[0];
                closeBlkWidgets(_(title));
                this.activity.refreshCanvas();
            }

            /** Adjust the stack from which we just deleted blocks. */
            if (parentBlock != null) {
                const topBlk = this.findTopBlock(parentBlock);
                this.findDragGroup(topBlk);

                /** We need to track two-arg blocks in case they need expanding. */
                this._checkTwoArgBlocks = [];

                /** And arg clamp blocks in case they need expanding. */
                this._checkArgClampBlocks = [];

                for (let b = 0; b < this.dragGroup.length; b++) {
                    const blk = this.dragGroup[b];
                    const myBlock = this.blockList[blk];
                    if (myBlock.isTwoArgBlock()) {
                        this._checkTwoArgBlocks.push(blk);
                    } else if (
                        (myBlock.isArgBlock() && myBlock.isExpandableBlock()) ||
                        myBlock.isArgClamp()
                    ) {
                        this._checkTwoArgBlocks.push(blk);
                    } else if (
                        [
                            "clamp",
                            "argclamp",
                            "argclamparg",
                            "doubleclamp",
                            "argflowclamp"
                        ].includes(myBlock.protoblock.style)
                    ) {
                        this._checkArgClampBlocks.push(blk);
                    }
                }

                this._cleanupStacks();
                this.activity.refreshCanvas();
            }
            this.activity.refreshCanvas();
            this.activity.trashcan.stopHighlightAnimation();
            document.getElementById("hideContents").click();
        };

        /***
         * Clears all the blocks, updates the cache and refreshes the canvas.
         *
         * @returns {void}
         */
        this.clearParameterBlocks = () => {
            for (const blk in this.blockList) {
                if (this.blockList[blk].protoblock.parameter && this.blockList[blk].text !== null) {
                    /** The audiofile block label is handled in block.js */
                    if (this.blockList[blk].name === "audiofile") {
                        continue;
                    }
                    this.blockList[blk].text.text = "";
                    this.blockList[blk].container.updateCache();
                }
            }
            this.activity.refreshCanvas();
        };

        /**
         * Updates the label on parameter blocks.
         *
         * @param logo
         * @param turtle
         * @param blk
         * @returns {void}
         */
        this.updateParameterBlock = (logo, turtle, blk) => {
            const name = this.blockList[blk].name;

            if (this.blockList[blk].protoblock.parameter && this.blockList[blk].text !== null) {
                let value = 0;

                if (typeof this.blockList[blk].protoblock.updateParameter === "function") {
                    value = this.blockList[blk].protoblock.updateParameter(logo, turtle, blk);
                } else {
                    if (name in logo.evalParameterDict) {
                        eval(logo.evalParameterDict[name]);
                    } else {
                        return;
                    }
                }

                // Comprehensive safety check for all value types
                if (value === null || value === undefined) {
                    this.blockList[blk].text.text = "";
                } else if (typeof value === "string") {
                    if (value.length > 6) {
                        value = value.substr(0, 5) + "...";
                    }
                    this.blockList[blk].text.text = value;
                } else if (name === "divide") {
                    this.blockList[blk].text.text = mixedNumber(value);
                } else {
                    // Safe toString conversion
                    try {
                        this.blockList[blk].text.text = value.toString();
                    } catch (error) {
                        console.warn("Error converting value to string:", value, error);
                        this.blockList[blk].text.text = "";
                    }
                }

                this.blockList[blk].container.updateCache();
                this.activity.refreshCanvas();
            }
        };

        /**
         * Changes a property according to a block name and a value.
         *
         * @param logo
         * @param blk
         * @param value
         * @param turtle
         * @returns {void}
         */
        this.blockSetter = (logo, blk, value, turtle) => {
            if (typeof this.blockList[blk].protoblock.setter === "function") {
                this.blockList[blk].protoblock.setter(logo, value, turtle, blk);
            } else {
                if (this.blockList[blk].name in logo.evalSetterDict) {
                    eval(logo.evalSetterDict[this.blockList[blk].name]);
                } else {
                    throw new Error();
                }
            }
        };

        /***
         * Hides all the blocks.
         *
         * @returns {void}
         */
        this.hideBlocks = () => {
            this.activity.palettes.hide();
            this.hide();
            this.activity.refreshCanvas();
        };

        /***
         * Shows all the blocks.
         *
         * @returns {void}
         */
        this.showBlocks = () => {
            this.activity.palettes.show();
            this.show();
            this.bringToTop();
            this.activity.refreshCanvas();
        };

        this.setSelection = selection => {
            this.selectionModeOn = selection;
        };

        this.setSelectionToActivity = selection => {
            this.activity.setSelectionMode(selection);
        };

        this.unhighlightSelectedBlocks = (blk, selection) => {
            this.blockList[blk].unhighlightSelectedBlocks(blk, selection);
        };

        this.setSelectedBlocks = blocks => {
            this.selectedBlocks = blocks;
        };

        /**
         * Checks if coordinates intersect with any block
         * @public
         * @param {number} x - The x coordinate to check
         * @param {number} y - The y coordinate to check
         * @returns {boolean} True if coordinates intersect with a block
         */
        this.isCoordinateOnBlock = function (x, y) {
            return this.blockList.some(block => {
                if (block.trash) return false;

                const blockX = block.container.x;
                const blockY = block.container.y;
                return (
                    x >= blockX &&
                    x <= blockX + block.width &&
                    y >= blockY &&
                    y <= blockY + block.height
                );
            });
        };
    }
}
// Export Blocks
if (typeof define === "function" && define.amd) {
    define([], function () {
        return Blocks;
    });
}

if (typeof module !== "undefined" && module.exports) {
    module.exports = Blocks;
}

if (typeof window !== "undefined") {
    window.Blocks = Blocks;
}