(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › Convert from Javascript to Angular
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Convert from Javascript to Angular (Read 2219 times)
alukes
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 61
Joined: Jul 1st, 2011
Convert from Javascript to Angular
Jan 21st, 2021 at 4:45am
Print Post  
How do I convert these statements from Javascript to Angular? I would like to do it in the correct Angular way.

function onNodeSelected(sender, args)
{
     var node;
     if (diagram.getSelection().nodes.length > 0)
           node = diagram.getSelection().nodes[0];
     if (node && node.getStyle() !== undefined)
     {
           var style = node.getStyle();
           if (style.getFontName())
                 $('#fontName').val(style.getFontName());
           else
                 $('#fontName').val('Verdana');
           if (style.getFontSize())
                 $('#fontSize').val(style.getFontSize());
           else
                 $('#fontSize').val('3');
           $("#fontName").selectmenu("refresh");
           $("#fontSize").selectmenu("refresh");
     }
     else
     {
           $('#fontName').val('Verdana');
           $('#fontSize').val('3');
           $("#fontName").selectmenu("refresh");
           $("#fontSize").selectmenu("refresh");
     }
}


Thanks in advance
 
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Convert from Javascript to Angular
Reply #1 - Jan 21st, 2021 at 1:15pm
Print Post  
Do you mean binding your UI elements to selected node's properties? We aren't sure that will work with our current get/set functions. We'll be changing the API to use modern JS properties instead of get/set functions for version 4 release later this year. Then you should be able to set the selected node as a scope for some angular sub/view and bind directly to node's properties. Until then you could probably create intermediate objects for binding (e.g. ViewModel object from MVVM) and make their property getter/setters just delegate to wrapped DiagramItem's get/set functions.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
alukes
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 61
Joined: Jul 1st, 2011
Re: Convert from Javascript to Angular
Reply #2 - Jan 21st, 2021 at 11:29pm
Print Post  
I am not familiar with how to do the temporary solution. Could you provide a sample I could build on?

Thanks
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Convert from Javascript to Angular
Reply #3 - Jan 22nd, 2021 at 5:24pm
Print Post  
E.g. define this wrapper for item styles in SelectedStyle.ts:

Code
Select All
import * as MindFusion from 'diagram-library';

import DiagramItem = MindFusion.Diagramming.DiagramItem;
import Style = MindFusion.Diagramming.Style;

export class BaseStyle
{
	get fontName()
	{
		return "Verdana";
	}

	set fontName(value)
	{
	}
}

export class SelectedStyle extends BaseStyle
{
	constructor(private item: DiagramItem)
	{
		super()
	}

	get fontName()
	{
		var style = this.item.getStyle();
		if (style != null)
			return style.getFontName();

		return "Verdana";
	}

	set fontName(value)
	{
		var style = this.item.getStyle();
		if (style == null)
		{
			style = new Style();
			this.item.setStyle(style);
		}
		style.setFontName(value);
		this.item.invalidate();
	}
}


then in your component's template and code:

Code
Select All
<span>"Font name: "</span>
<input [(ngModel)]="selectedStyle.fontName" placeholder="font name"/>

<diagram-view
    (onNodeSelected)="onNodeSelected($event)"
....
import { SelectedStyle, BaseStyle } from './SelectedStyle';

export class MyApp implements OnInit
{
    selectedStyle: BaseStyle = new BaseStyle();

    onNodeSelected(event)
    {
        this.selectedStyle = new SelectedStyle(event.args.getNode());
    }
    ....


Regards,
Slavcho
  
Back to top
 
IP Logged
 
alukes
Junior Member
**
Offline


I love YaBB 1G - SP1!

Posts: 61
Joined: Jul 1st, 2011
Re: Convert from Javascript to Angular
Reply #4 - Feb 2nd, 2021 at 5:25am
Print Post  
I entered the code with no errors, but I wonder how to reference #formName and #fontSize
I tried this: <input [(ngModel)]="#fontName"> but get a parser error.

If this is difficult I am ok with making the toolbar invisible until rev 4 comes out.  I don't know how hard that would be.

Thanks


if (style.getFontName()) {
$("#fontName").val(style.getFontName());
} else {
$("#fontName").val("Verdana");
}
if (style.getFontSize()) {
$("#fontSize").val(style.getFontSize());
} else {
$("#fontSize").val("3");
}


("#fontName").on ("selectmenuchange", function () {
  this.diagram.startCompositeOperation();
  for (let i = 0; i < this.diagram.getSelection().items.length; i++) {
      let item = this.diagram.getSelection().items[i];
      let change = new this.ChangeItemCommand(this.diagram, item);

      let style = item.getStyle();
      if (!style) {
          style = new this.Style();
          item.setStyle(style);
      }

      style.setFontName(this.value);
      item.invalidate();

      this.diagram.executeCommand(change);
  }
  this.diagram.commitCompositeOperation();
});
« Last Edit: Feb 2nd, 2021 at 6:47am by alukes »  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: Convert from Javascript to Angular
Reply #5 - Feb 2nd, 2021 at 7:35am
Print Post  
Quote:
I tried this: <input [(ngModel)]="#fontName"> but get a parser error.


That # symbol is the id selector from css / jquery? I 'm not sure you can use it in angular binding expression unless it's for binding to another html element by id. You'd want just "fontName" instead if you have defined a fontName property in your component, or "selectedStyle.fontName" as in our test code above if you define your properties in a separate wrapper object accessible via "selectedStyle" field / property.

Then you'd also need to add fontSize (and other properties you need shown in toolbar) to the Style.ts classes above, shouldn't be difficult using the fontName property as a template.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge