Git Product home page Git Product logo

Comments (8)

rudinesurya avatar rudinesurya commented on May 30, 2024 4

I am trying to implement this now, I removed left click condition from the window panning and create another functions to listen when left click is performed in the window area and while not selecting any nodes.

How can I draw a rect in the canvas ?

`

    #region Window Selecting

    static Vector2 startSelectionPos;

    [EventHandlerAttribute(EventType.MouseDown, priority = 105)] // Priority over hundred to make it call after the GUI
    private static void HandleWindowSelectionStart(NodeEditorInputInfo inputInfo)
    {
        if (GUIUtility.hotControl > 0)
            return; // GUI has control

        NodeEditorState state = inputInfo.editorState;
        if (inputInfo.inputEvent.button == 0 && state.focusedNode == null)
        { // Left clicked on the empty canvas -> Start the selection process
            state.boxSelecting = true;
            Debug.Log("box selecting start");
            startSelectionPos = inputInfo.inputPos;
        }
    }

    [EventHandlerAttribute(EventType.MouseDrag)]
    private static void HandleWindowSelection(NodeEditorInputInfo inputInfo)
    {
        NodeEditorState state = inputInfo.editorState;
        if (state.boxSelecting)
        {
            Debug.Log("box selecting");

            Rect handleRect = new Rect();

            handleRect.min = startSelectionPos;
            handleRect.max = inputInfo.inputPos;

            //handleRect.position += state.zoomPanAdjust + state.panOffset;

            GUI.Box(handleRect, GUIContent.none);


            NodeEditor.RepaintClients();
        }
    }

    [EventHandlerAttribute(EventType.MouseDown)]
    [EventHandlerAttribute(EventType.MouseUp)]
    private static void HandleWindowSelectionEnd(NodeEditorInputInfo inputInfo)
    {
        if (inputInfo.editorState.boxSelecting)
        {
            Debug.Log("box selecting end");

            inputInfo.editorState.boxSelecting = false;
        }
    }

    #endregion

`

from node_editor_framework.

Seneral avatar Seneral commented on May 30, 2024

Hi @rudinesurya, cool that you're working on that. It will be very easy to draw the box, as it would probably need to be unscaled, so you could do that right before starting the scaling in the drawing function. You could also do that in HandleWindowSelection, just add the Repaint EventHandler in that case and also limit further instructions based on the eventType.
Regarding the style, there is an editor style that the editor uses for the selection rect, so it could be used in the editor version atleast (when I'm back home I can search it for you, I've used it in a previous project).
One note though, instead of disabling or replacing the panning controls, it'd be better to use different controls for the multi selection, like Shift or Shift-Left click. Left-click and dragging is simply the best and expected control for panning I think...
Also, there might be issues regarding input when you're at the point where you're able to select ultiple nodes. You would have to search for references of both the active and focusd node and decide if it's apropriate to perform the action on all selected nodes instead. Selected/Active and focused nodes should still be seperate in the editor state though.

from node_editor_framework.

rudinesurya avatar rudinesurya commented on May 30, 2024

I am thinking of similar idea with the group feature. OnWindowSelectionEnd I will add all the nodes within the box into a static list. Then I might need to add another condition to the current drag node function to check if the selected node is inside the list. if it is then drag the whole list. What do you think =)

from node_editor_framework.

rudinesurya avatar rudinesurya commented on May 30, 2024

i think left clicking and dragging is usually used to group select, and middle mouse for panning. I know ue4, playmaker, mecanim uses this.

from node_editor_framework.

Seneral avatar Seneral commented on May 30, 2024

Ok, change panning controls to the middle button.
Yes, it should work similar to this. But don't make it static, remember it has to do with the editor state, so it belongs there. Also shift-click to multi select would be nice. Not only drag, but also other controls have to be adjusted to the multi select if apropriate. I let you decide:)

from node_editor_framework.

wqaetly avatar wqaetly commented on May 30, 2024

I got inspiration from this old man’s speech and completed this multi-box selection function
image
10

This is the core code,
`

    private static void HandleMultipleSelect()
    {
        if (curEditorState.boxSelecting)
        {
            Rect handleRect = new Rect();

            handleRect.min = NodeEditorInputControls.startSelectionPos;
            handleRect.max = Event.current.mousePosition;
            
            GUI.Box(handleRect, GUIContent.none, NodeEditorGUI.nodeBox);

            Rect canvasRect = new Rect();
            Vector2 start = ScreenToCanvasSpace(NodeEditorInputControls.startSelectionPos);
            Vector2 end = ScreenToCanvasSpace(Event.current.mousePosition);

            canvasRect.min = Vector2.Min(start, end);
            canvasRect.max = Vector2.Max(start, end);
            
            curEditorState.selectedNodes.Clear();
            foreach (var node in curNodeCanvas.nodes)
            {
                if (canvasRect.Contains(node.position))
                {
                    curEditorState.selectedNodes.Add(node);
                }
            }
        }
    }

`
Hope it is useful to people who see this issue

As Seneral said, implementing these functions requires a lot of modification of the framework code, so I have no way to mention PR, sorry

If you want to see a more complete sample code, including the implementation of highlighting Node, please go to
A state-synchronized Moba project

from node_editor_framework.

Seneral avatar Seneral commented on May 30, 2024

@wqaetly Thanks, that looks really good. I currently don't have a lot of time working on new features, I am currently focussing on my other project, MakersVR. But I will try implementing it soon.
Contrary to popular bindings (Middle click to pan, left click to multi-select) I'd go with different bindings to preserve the current ones as much as possible. I thought about adding multi-select using shift-left-click (or control-left-click), which resembles the common keybinding for multi-selecting list items. I imagine that would be a lot more clunky, but I don't wan't to break existing user's muscle memory.

from node_editor_framework.

wqaetly avatar wqaetly commented on May 30, 2024

Yes, for example, the function of holding down shift to select multiple Nodes is also very important, because in some cases the Nodes you want to select may be scattered in various places in Canvas
But one thing is very important, that is, the selectedNode field in editorState must be changed to List, and then the logic of dragging, copying, and deleting is handled, so that whether it is frame selection or shift selection, it is easier to implement

from node_editor_framework.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.