(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5 (Read 3989 times)
danesh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Oct 11th, 2021 at 2:08pm
Print Post  
Hi,

I am trying to use webpack 5 with mindfusion js however when trying to use mindfusion with ES6 import, variables such as mdiag and diagram are in some cases undefined. This is causing bugs with rendering as it is not allowing the rendering of handles on nodes and is also causing artefacts when moving nodes.

Am I missing something? or can mindfusion be used with a project that uses webpack?

Thank you
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #1 - Oct 12th, 2021 at 11:38am
Print Post  
Hi,

Upcoming V4 release is entirely ES6-module based (https://mindfusion.eu/Forum/YaBB.pl?num=1631794657) and seems to work fine with webpack 5 as below -

Code
Select All
{
  "name": "typescript-webpack-diagram-sample",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --config webpack.js --hot --open"
  },
  "dependencies": {
    "@mindfusion/diagramming":"latest"
  },
  "devDependencies": {
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "ts-loader": "^9.2.6",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1"
  }
}


We should release this in a couple of weeks.

Our V3 npm package kind of only adapts the namespaced API to modules and used to work fine with older webpack versions last time we tried. If you won't be upgrading to V4, you could either revert to older webpack, or load the diagramming scripts separately and use the API through the global MindFusion namespace object.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
danesh
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #2 - Oct 19th, 2021 at 12:53pm
Print Post  
Hi, thankyou I see, as of now we are not using the diagramming library through npm at all. We have been downloading the source code and building the script files manually. Do you think this may be the problem or am I missing something?

Is there a way to expose the library to the webpack bundle when using the script files like we do below?

<!-- MindFusion scripts -->
     <script src="./3rd-party/diagramming/MindFusion.Common.js"></script>
     <script src="./3rd-party/diagramming/MindFusion.Diagramming.js"></script>

<!-- Webpacks bundle -->
<script src="./bundle.js"></script>


Eventually we will end up going to v4 and using the npm packages but for now we are still using the 2 script files which are compiled.

Kind regards
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #3 - Oct 19th, 2021 at 1:11pm
Print Post  
Hi,

When you build the scripts yourself, do they work correctly with our sample projects if you overwrite the scripts files there? I.e. without using webpack? If they work as standalone files but fail when bundled, you should be able to define them as externals so webpack skips processing them, and load them as standalone scripts as in the samples.

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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #4 - Oct 19th, 2021 at 3:07pm
Print Post  
Hi,

Should I try the scripts with the v4 samples that are linked below? Currently my scripts worked before I started implementing webpack into the project. If you could point me to a sample project that I could also try them with, thanks.

If you dont mind me asking could you please provide an example of how I would implement the local script file with webpack externals please. Is it like something below?

Code
Select All
externals: {
        './3rd-party/diagramming/MindFusion.Diagramming.js': 'MindFusion'
    }


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


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #5 - Oct 20th, 2021 at 7:18am
Print Post  
Actually externals works only for module imports, so with version 3 you'd be able to apply it only if also using the NPM module wrappers. Try the CopyWebpackPlugin for your standalone script files -

https://webpack.js.org/plugins/copy-webpack-plugin/

Code
Select All
const CopyPlugin = require("copy-webpack-plugin");
...
plugins: [
    ...,
    new CopyPlugin({
        patterns: [
            { from: './mindfusion/MindFusion.Common.js', to: './mindfusion' },
            { from: './mindfusion/MindFusion.Diagramming.js', to: './mindfusion' }
        ],
    })
]


and then load the scripts from where they get copied -

Code
Select All
<script src="mindfusion/MindFusion.Common.js"></script>
<script src="mindfusion/MindFusion.Diagramming.js"></script>


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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #6 - Oct 21st, 2021 at 11:24am
Print Post  
Hi, thankyou

I have now done this and I get weird behaviour with the diagram which is not present before using webpack. In demo 1 you can see how the diagram behaves accordingly in a non-webpack build. In demo 2 which is a webpack build you can see that there are weird artefacts coming from the node when moving it.

Do you know why this may be?

Demo 1: Working behaviour - No webpack



Demo 2: Broken behaviour - With webpack (mindfusion files loaded as seperate scripts)


Kind regards
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #7 - Oct 21st, 2021 at 12:41pm
Print Post  
Hi,

Your webpack example displays a shadow and the other one does not (or has smaller shadow offsets). They should behave the same if you copy shadow values from one to the other. In second gif it seems the node reports smaller repaint rectangle than one necessary to repaint the shadow. Are you using any custom getRepaintBounds code?

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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #8 - Oct 26th, 2021 at 9:36am
Print Post  
Hi

Thank you for helping with this issue, this seemed to be as a result of passing NaN to the diagram.setAdjustmentHandlesSize function.

Is there a similar function to getRepaintBounds for the selection rectangle which is drawn when you drag and select? This also has some artefacts when it is drawn too.

Thank you
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #9 - Oct 26th, 2021 at 10:04am
Print Post  
Hi,

Drawing that rectangle is done in drawInteraction method of CreateSelectionController.js; From what I can see it's drawing using all hard-coded values, and maybe influenced only by measureUnit. Does your application set a different unit than default millimeter?

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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #10 - Oct 26th, 2021 at 11:03am
Print Post  
Hi,

Thank you, no we do not change the measure unit currently. using the getMeasureUnit function it returns 6 which is Millimeter in MindFusion.Drawing.GraphicsUnit.

One weird thing I do notice is that, the selection rectangle artefacts only come on my first display which is 3840 x 2400. However my second display which is a 1920 x 1080 monitor does not show artefacts.

I dont know if display resolution can cause this issue but this seems to be the case in my situation.

I do have 2 custom behaviour classes for nodes and the diagram. I can share these with you in a private message if that would help?

Kind regards
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #11 - Oct 26th, 2021 at 3:00pm
Print Post  
Hi,

We don't have that hires display to test right now, we'll try to procure one in next days. Since you are building from code, you could try invalidating larger rectangle in selection controller's code meanwhile, e.g. multiply this pixel variable, used to adjust selection frame, by two or three -

Code
Select All
var sw = GraphicsUnit.getPixel(diagram.measureUnit);


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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #12 - Oct 26th, 2021 at 3:45pm
Print Post  
Hi

Thankyou very much, this worked for me, I had to multiply by 10. Another thing I noticed is when I changed

this.selectionRect.pen = 'gray';

to

this.selectionRect.pen = 'transparent';

this made the border around the selection rectangle transparent but also removed the issue where artefacts were showing.

I will use your solution for now as this has worked for me and lets me keep the border around the rectangle too.

Thank you very much.
Danesh
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3152
Joined: Oct 19th, 2005
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #13 - Oct 26th, 2021 at 4:14pm
Print Post  
Hi,

Does it look like selection is casting a shadow too and leaving traces as in your gif with shapenodes? We might not be clearing the canvas shadows state correctly and affecting selection drawing, but not sure why that would be visible only on 3K resolution.

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


I Love MindFusion!

Posts: 19
Joined: Aug 9th, 2021
Re: using MindFusion.Common.js and MindFusion.Diagramming.js with webpack 5
Reply #14 - Oct 27th, 2021 at 9:05am
Print Post  
Hi,

It does not look like selection is casting a shadow. I have attached an image below from steps recorder which shows the selection rectangle, to me it looks like there is no shadow. There is a lot of artefacts being left behind though, this was fixed with the fix that you provided for me.

Could it be maybe the zoom factor or diagram scale which can cause this too?

Thank you
Danesh
« Last Edit: Oct 27th, 2021 at 10:19am by danesh »  
ArtefactsInSelection.png ( 133 KB | 85 Downloads )
ArtefactsInSelection.png
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