Page Index Toggle Pages: 1 [2] 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) Node Edit Mode through F2 ! (Read 15038 times)
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #15 - Nov 12th, 2019 at 5:29am
Print Post  
Hi,

Is there any way to cancel the edit? ie after nodeTextEdited, based on some validation, I need to retain the previous text value.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Node Edit Mode through F2 !
Reply #16 - Nov 12th, 2019 at 8:56am
Print Post  
Hi,

You could restore it from eventArgs.getOldText(); Alternatively you could replace the DiagramItem.prototype.setEditedText(newText) method and call the original only if your validation logic accepts the new text.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #17 - Nov 15th, 2019 at 8:25am
Print Post  
Hi,

When the node enters the edit mode, I need to select all the text. I tried like this. Is this the right way?

diagram.addEventListener(Events.enterInplaceEditMode, function (sender, args)
{
        var control = args.getControl();
        control.selectionStart = 0;
        control.selectionEnd = control.textLength;
});

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Node Edit Mode through F2 !
Reply #18 - Nov 15th, 2019 at 11:05am
Print Post  
Hi,

You could as well call textarea's select() method -
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #19 - Nov 15th, 2019 at 11:16am
Print Post  
It works, Thank you  Smiley
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #20 - Nov 15th, 2019 at 12:48pm
Print Post  
Hi,

I've set font to the node like below,

node.setFont(new Font("Arial", 12));

I tried the same for the textarea, but didn't work. May I know how to do this?

diagram.addEventListener(Events.enterInplaceEditMode, function (sender, args)
{
        var control = args.getControl();
        //control.setFont(new Font("Arial", 12));
        control.style.fontFamily = "Arial"
        control.style.fontSize = 12
});

Regards,
Kannan
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Node Edit Mode through F2 !
Reply #21 - Nov 18th, 2019 at 11:00am
Print Post  
Hi,

You must specify the unit for CSS assignments to work -

control.style.fontSize = "24pt";

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #22 - Dec 11th, 2019 at 1:07pm
Print Post  
Hi,

This works fine. But instead of subscribing to document, is it possible to subscribe key down event like this,

    this.canvas.nativeElement.addEventListener("keydown", (args) => {
      this.handleKeyDown(args);
    });

Regards,
Kannan

Lyubo wrote on Sep 20th, 2019 at 5:40am:
Hi,

This works in my test:
Code (Javascript)
Select All
document.onkeydown = function (e)
{
    var diagram = Diagram.find('diagram');

    if (e.keyCode == 113)
    {
        if (diagram.getActiveItem())
        {
            var item = diagram.getActiveItem();
            diagram.beginEdit(item);
        }
    }
}; 



Regards,
Lyubo
MindFusion

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Node Edit Mode through F2 !
Reply #23 - Dec 12th, 2019 at 11:15am
Print Post  
Hi,

Is there any particular reason why you want to add your handler to the canvas element as opposed to document/window? The canvas DOM element is not designed to listen for keyboard input, so subscribing to a keydown event won't work out of the box.

Regards,
Lyubo
MindFusion

  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #24 - Dec 12th, 2019 at 1:36pm
Print Post  
Hi,

     In my application, I've two component, one left side and other right side. One has canvas and another has tree view. I want to edit canvas node when it is selected and want to edit tree node when it is selected. I added document.onkeydown on both the component. So when F2 is pressed, both the code is called. Want to avoid this.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Node Edit Mode through F2 !
Reply #25 - Dec 12th, 2019 at 1:40pm
Print Post  
In addition to the above, if you want to receive the keydown events only when the diagram has focus, you can add your handler to the div overlay the diagram component creates. You can obtain a reference to it via id - it's id represents the diagram's canvas ID with "_focusable" appended to it, or via the diagram.focusDiv reference. Or you can check for the source element in your global document.keydown event handler.

Code (Javascript)
Select All
var diagramFocusDiv = document.getElementById("diagram_focusable"); // canvas.id + _focusable
// or
// var diagramFocusDiv  = diagram.focusDiv as any; // if using TypeScript, as it's an internal field.

diagramFocusDiv.addEventListener("keydown", myKeyDownHandler); 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #26 - Apr 23rd, 2020 at 1:52pm
Print Post  
Hi,

This works fine when the diagram is opened in one tab. In my application, I've added the canvas in a component and loading the component in more than one tab. In that case, this event is raised for only the canvas in the last tab. May I know how to fix this issue? I tried the below methods,

this.canvas.nativeElement.addEventListener("keydown", (args) => {

// This is not called for any canvas
});

var diagramFocusDiv = (this.diagram as any).focusDiv as any;
diagramFocusDiv.addEventListener("keydown", (args) => {

// This is called for only one canvas (the lastly opened)
});

    document.onkeydown = (e) => {

      // This also not works properly
    };

Regards,
Kannan
« Last Edit: Apr 23rd, 2020 at 2:56pm by Kannan Thirumal »  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #27 - Apr 24th, 2020 at 4:59am
Print Post  
Hi,

Also I tried by adding a div element around the canvas like this,

        <div #canvasDivElement
           (click)="onCanvasDivClicked($event)"
           (keydown)="onCanvasDivKeydown($event)">
          <canvas #canvas id="diagram" draggable="true"></canvas>
        </div>

  public onCanvasDivClicked(e: MouseEvent): void {

    var args = e;
  }

  public onCanvasDivKeydown(e: KeyboardEvent): void {

    this.handleKeyDown(e);
  }

    this.canvasDivElement.nativeElement.addEventListener("keydown", (args) => {

      this.handleKeyDown(args); // Not called . . .
    });

Here onCanvasDivClicked is called but onCanvasDivKeydown is not called.

Regards,
Kannan

Kannan Thirumal wrote on Apr 23rd, 2020 at 1:52pm:
Hi,

This works fine when the diagram is opened in one tab. In my application, I've added the canvas in a component and loading the component in more than one tab. In that case, this event is raised for only the canvas in the last tab. May I know how to fix this issue? I tried the below methods,

this.canvas.nativeElement.addEventListener("keydown", (args) => {

// This is not called for any canvas
});

var diagramFocusDiv = (this.diagram as any).focusDiv as any;
diagramFocusDiv.addEventListener("keydown", (args) => {

// This is called for only one canvas (the lastly opened)
});

document.onkeydown = (e) => {

// This also not works properly
};

Regards,
Kannan

  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Node Edit Mode through F2 !
Reply #28 - Apr 24th, 2020 at 5:50am
Print Post  
Hi,

Did you try listening for the keydown event on the diagram's focus div as it's shown in a previous post above? In order for the div to receive key events, it must be focusable and this is achieved by setting a tabindex. Diagram's focus div is already focusable, so you could use that without adding additional elements to your DOM tree. If you have more than one diagram instance, you can identify the different focusable divs by their ids.

Regards,
Lyubo
MindFusion
  
Back to top
 
IP Logged
 
Kannan Thirumal
Senior Member
****
Offline


I Love Mind Fusion Diagram
:-)

Posts: 270
Location: Bangalore, India
Joined: Jan 18th, 2019
Re: Node Edit Mode through F2 !
Reply #29 - Apr 24th, 2020 at 7:29am
Print Post  
Hi Lyubo,

I already tried that. It is coming for one tab not for other tabs.

I too have the below code,

    this.diagram.addEventListener(Event.nodeClicked, (sender, args) => {

      this.handleNodeClicked(args);
    });

    this.diagram.addEventListener(Event.nodeDeleting, (sender, args: NodeEventArgs) => {

      this.handleNodeDeleting(args);
    });

nodeClicked is raised for diagram in both the tabs but nodeDeleting is raised only for the new tab.

Regards,
Kannan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1 [2] 3 
Send TopicPrint