Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) ExpandButtonClicked in Angular/typescript (Read 6388 times)
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
ExpandButtonClicked in Angular/typescript
Apr 24th, 2020 at 12:27pm
Print Post  
Hi,

we are using the WPF version of Diagram and are now evaluating a port to Angular. A very central point in our WPF application is handling the ExpandButtonClicked event.
I could not find that event in the Angular/JavaScript version of Diagram. Is it missing or am I just too blind to see it?

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #1 - Apr 24th, 2020 at 2:43pm
Print Post  
Hi,

That event comes from ExpandButtonAction property we have in WPF which is not available in JS version. We'll have this in mind for next release. For time being you could replace MindFusion.Diagramming.ExpandButton.prototype.onClick with your own function that calls your ExpandButtonClicked handler's code. Original onClick looks as shown below.

Regards,
Slavcho
Mindfusion

Code
Select All
onClick: function (mousePosition)
{
	if (!this.hitTest(mousePosition))
		return;

	if (this.node.parent != null)
		this.node.parent.startTotalChange();

	var node = this.node;
	if (node.expanded)
	{
		node.collapse();
		node.parent.raiseTreeCollapsed(node);
	}
	else
	{
		node.expand();
		node.parent.raiseTreeExpanded(node);
	}

	if (this.node.parent != null)
		this.node.parent.commitCompositeOperation();
} 

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #2 - Apr 29th, 2020 at 1:18pm
Print Post  
Hi,

New version here implements built-in diagram.setExpandButtonAction property and Events.expandButtonClicked -
https://www.npmjs.com/package/diagram-library

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #3 - May 4th, 2020 at 12:28pm
Print Post  
Slavcho,

thanks for the quick reply. But the Angular version has not bee updated yet, right?
https://www.npmjs.com/package/diagram-library-angular

Best,
Michael
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #4 - May 4th, 2020 at 2:04pm
Print Post  
Hi Michael,

Angular library should not require a new build; there are changes for ExpandButtonAction only in the core diagramming.js library.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #5 - May 5th, 2020 at 9:14am
Print Post  
Slavcho,

just to understand it correctly:
- I never installed diagram-library directly, I just used "npm install diagram-library-angular"
- "diagram-library-angular" 1.0.1 has a dependency on "diagram-library" 3.4.1 (which in turn depends on "mindfusion-common" 1.1.8)

In order to get your latest diagram-library 3.4.4, I would try to use npm shrinkwrap and maintain the dependencies of "diagram-library-angular" (and "diagram-library") manually? Is that what you suggest?
I then would have to check/change these every time a new "diagram-library-angular" version is released etc. Shocked

Cheers,
Michael
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #6 - May 5th, 2020 at 9:44am
Print Post  
Right, we actually use "diagram-library": "^3.4.0" as dependency of react and vue packages so they work with any newer version of diagramming.js but omitted that in Angular. I guess we'll publish a new angular package too.

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #7 - May 5th, 2020 at 10:23am
Print Post  
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #8 - May 5th, 2020 at 12:18pm
Print Post  
Awesome - that was quick. Will check it out ...
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #9 - May 6th, 2020 at 6:53am
Print Post  
Slavcho,

I tried to follow your suggested approach, but I get error
Property 'ExpandButton' does not exist on type 'typeof Diagramming'.
when doing so.

Also, I find no occurrence of 'ExpandButton' in jsdiag.d.ts.

One thing that I noticed is:
I have
   "diagram-library-angular": "^1.0.2",
in my package.json file. But after an 'npm install' I see the folowing in package.lock.json
   "diagram-library": {
      "version": "3.4.4",
      "resolved": "https://registry.npmjs.org/diagram-library/-/diagram-library-3.4.4.tgz",
      "integrity": "sha512-XpQogRGm0OWv7jEaxC1NEZzKEBSxepGqoE6MWKW97UQ2S5CPWRWW3FFXfA296HYzFl4RNFrs
BVmCrdkh+nfY4Q==",
      "requires": {
        "mindfusion-common": "^1.1.9"
      }
    },
    "diagram-library-angular": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/diagram-library-angular/-/diagram-library-angular-1.
0.2.tgz",
      "integrity": "sha512-C/RTz9v4QQ0cffrFtfNNpNwcxGE7eN4luW27SjlRhFz+e9bSoQJWqMIi1s8MgmKspggsPlHX
R9SdmUyY9Qja2g==",
      "requires": {
        "diagram-library": "^3.4.1"
      }
    },

What I mean is the line
        "diagram-library": "^3.4.1"
which still references the "old" version of diagram library. Not sure if this plays into the problem

Cheers,
Michael
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #10 - May 6th, 2020 at 7:07am
Print Post  
Hi,

I can see following lines in the d.ts file from https://registry.npmjs.org/diagram-library/-/diagram-library-3.4.4.tgz

           /** Gets a value indicating what should happen when a user clicks the +/- button that is displayed near expandable nodes. */
           getExpandButtonAction(): ExpandButtonAction;
           /** Sets a value indicating what should happen when a user clicks the +/- button that is displayed near expandable nodes. */
           setExpandButtonAction(value: ExpandButtonAction): void;
...
           /** Raised if ExpandButtonAction is set to RaiseEvents and the [+/-] button of an Expandable node is clicked. */
           static expandButtonClicked: string;
...
     /** Specifies what action is triggered by the +/ -buttons that are displayed near expandable nodes. */
     enum ExpandButtonAction
     {
           /** Expands or collapses the children of a node in a tree-like diagram and raises the TreeExpanded or TreeCollapsed event. */
           ExpandTreeBranch = 0,
           /** Raises the ExpandButtonClicked event. */
           RaiseEvents = 1
     }

running npm install on the sample projects downloads that d.ts in my test.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #11 - May 6th, 2020 at 7:24am
Print Post  
Hi,

yes, that is true. I can see this as well, but while

   MindFusion.Diagramming.DiagramNode.prototype ...

works and I can find class DiagramNode in jsdiag.d.ts

   MindFusion.Diagramming.ExpandButton.prototype ...

gives compile errors and there is no ExpandButton class etc. in jsdiag.d.ts

Cheers,
Michael
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #12 - May 6th, 2020 at 7:38am
Print Post  
Hi,

It sounds like you are trying to port the JavaScript code from second post above to TypeScript? You shouldn't have to do that now, you should be able to handle expandButtonClicked event directly as you were doing in WPF. The purpose of those npm updates was to add same ExpandButtonAction property and expandButtonClicked event as in WPF version.

Regards,
Slavcho
  
Back to top
 
IP Logged
 
Michael Pfeifer
YaBB Newbies
*
Offline



Posts: 22
Joined: Mar 24th, 2006
Re: ExpandButtonClicked in Angular/typescript
Reply #13 - May 6th, 2020 at 8:03am
Print Post  
Slavcho,

oooooooooooooooh, big mis-understanding. In fact I was trying to do so. Maybe I didn't dare to hope that you would come up with "the real" solution that quickly  Wink Sorry.

I tried now with the new event, but unfortunately was not successful.  I tried to add this in my HTML
   (onExpandButtonClicked)="onNodeExpanded($event)
int the <diagram-view> node.
However my handler is not executed. Also I find no EventEmitter named something like "...expand..." in diagram-library-angular.component.d.ts where I find all the other EventEmitters

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


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: ExpandButtonClicked in Angular/typescript
Reply #14 - May 6th, 2020 at 8:20am
Print Post  
Right, so the event is only accessible through the core library at this time, you should be able to handle it like this -

this.diagram.addEventListener('expandButtonClicked', function(...)
{
});

We'll add a DaigramView binding soon.

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