makaip / mathematix

A nodeblock-based math webapp.
https://makaip.github.io/mathematix/
GNU General Public License v3.0
4 stars 0 forks source link

Bigger nodule hitboxes #6

Open makaip opened 8 months ago

makaip commented 8 months ago

We should probably increase the size of the hitboxes on the nodules like in Blender, where the hitbox extends beyond the bounds of the nodule. This would make it easier for users to drag nodules together, especially on small-screen devices. This can be edited in events.js at lines 1 through 45. I'm not sure how we will expand the hitbox, as the position of the next nodule in a list of nodules depends on the previous nodule.

function isOutputNoduleClicked(nodeBlock, x, y) {
    let noduleClicked = null;
    let noduleClickedIndex = null;

    if (nodeBlock !== null && x !== null && y !== null) {
        for (let index = 0; index < nodeBlock.outputs.length; index++) {
            if (x >= nodeBlock.x + 145 + offsetX &&
                x <= nodeBlock.x + 155 + offsetX &&
                y >= nodeBlock.y + (25 * index) + 50 + offsetY &&
                y <= nodeBlock.y + (25 * index) + 65 + offsetY) {
                    noduleClicked = nodeBlock.outputs[index];
                    noduleClickedIndex = index;
                    break;
                }
        }
        return [noduleClicked, noduleClickedIndex];
    }
}

function isMouseOverNodule(nodeBlock, x, y) {
    let noduleOver = null;
    let noduleOverIndex = null;

    if (nodeBlock !== null && x !== null && y !== null) {
        for (let index = 0; index < nodeBlock.inputs.length; index++) {
            const noduleX = nodeBlock.x + offsetX - 5; // X coordinate of the nodule
            const noduleY = nodeBlock.y + ( -25 * index ) + 200 - 35 + offsetY; // Y coordinate of the nodule

            console.log(noduleX, noduleY);
            const noduleWidth = 10; // Adjust as needed
            const noduleHeight = 10; // Adjust as needed
            if (
                x >= noduleX &&
                x <= noduleX + noduleWidth &&
                y >= noduleY &&
                y <= noduleY + noduleHeight
            ) {
                noduleOver = nodeBlock.inputs[index];
                noduleOverIndex = index;
                break;
            }
        }
        return [noduleOver, noduleOverIndex];
    }
}
AlexanderJCS commented 8 months ago

Working on this now.

AlexanderJCS commented 7 months ago

This task requires a big refactor of the events.js file. Until then I'm going to create a new issue called events.js refactor, and unassign myself

AlexanderJCS commented 7 months ago

Refactor is complete. I looked into this a bit more and the main issue is that it only checks for nodule collision if the parent node block is already selected, effectively reducing the hitbox to only the areas over the parent node block.

Right now it's best not to make any more modifications since the deadline is tonight