Save Flow Chart, Icon Integration, Properties

[medeirosvictor]

Hi! First of all, really nice work! It's such an amazing tool.

I'm having some trouble saving the flowchart or exporting the flowchart, a working demo or some example would be very useful.

Can i link a audio file, for example, to a operator (like it was his propertie)?

Another suggestion would be making it appliable to icons maybe.

[sdrdis]

Hi,

Thanks!

You can easily load or save the flowchart, see the Get / Set flowchart data in http://sebastien.drouyer.com/jquery.flowchart-demo/.

But it seems that you are looking for something larger than what the jquery.flowchart.js provides, notably for properties. This plugin is part of a larger project that is still Work In Progress but usable: https://github.com/ultide/ultide. It manages properties.

Thanks,

Sébastien

[medeirosvictor]

Hmmm, i see... I've added some functions to the plugin, suiting my needs ^^ When i'm done with my project i'll send you the new jquery.flowchart.js file so you can analyse it (maybe contribuite).

Now i'm facing another problem, I made a button that deletes only the associated input/output but, when i delete the link and the input/output. How do you suggest i proceed?

Exemple for inputs (the button has a click function that calls this one>):

deleteInput: function(operatorId, operatorData, inputId){ for (var linkId in this.data.links) { if (this.data.links.hasOwnProperty(linkId)) { var currentLink = this.data.links[linkId]; if (currentLink.fromOperator == operatorId || currentLink.toOperator == operatorId) { this._deleteLink(linkId, true); delete this.data.operators[operatorId].internal.properties.inputs["input_" + inputId]; this.refreshData(operatorData); } } } },

p.s: refreshData is a combination of getData and setData // When i do refresh the json content i get some issues like

Uncaught TypeError: Cannot read property 'multiple' of undefined(…)_autoCreateSubConnector @ jquery.flowchart.js:257(anonymous function) @ jquery-ui.min.js:6createLink @ jquery.flowchart.js:247(anonymous function) @ jquery-ui.min.js:6setData @ jquery.flowchart.js:199(anonymous function) @ jquery-ui.min.js:6refreshData @ jquery.flowchart.js:1034(anonymous function) @ jquery-ui.min.js:6createInput @ jquery.flowchart.js:1044(anonymous function) @ jquery-ui.min.js:6(anonymous function) @ jquery-ui.min.js:6each @ jquery.min.js:2each @ jquery.min.js:2e.fn.(anonymous function) @ jquery-ui.min.js:6(anonymous function) @ main.js:113dispatch @ jquery.min.js:3q.handle @ jquery.min.js:3[

Any help is much appreciated, Thank You!

[medeirosvictor]

p.s.2: How did you manage to save the json and the workspaces, so its dynamically saving in the UltIDE?

[sdrdis]

Now i'm facing another problem, I made a button that deletes only the associated input/output but, when i delete the link and the input/output. How do you suggest i proceed?

I am not sure I understand what you are trying to do. Do you want to do something similar to the "Multiple Connector" example ? (Make a connection between Output 1 and Input 3, and then between Output 1 and Input 1...)

If that is not the case, could you explain a bit further your objective ?

p.s.2: How did you manage to save the json and the workspaces, so its dynamically saving in the UltIDE?

I use callbacks, notably the onAfterChange callback. See the readme for all callbacks (starting with on...)

Thanks ! :smile:

[AbdurRehman91]

Hi.I am facing the same issue of saving and loading the flowchart from some resource,e.g from database briefly saying.When saving the flow chart,i can get the whole code(svg) of the flow chart.Now when loading the flowchart on some html page,the whole flowchart gets appears but it is not editable nor draggable. Nothing on the loaded flowchart is editable.Any help in this regard is highly appreciated

[runette]

I suggest you start a new issue for this - does not sound like the same issue. Also explain more clearly what you mean by saving (you should not be saving any SVG) and by editable?

On Thu, 25 Oct 2018 at 08:04, Abdur Rehman [email protected] wrote:

Hi.I am facing the same issue of saving and loading the flowchart from some resource,e.g from database briefly saying.When saving the flow chart,i can get the whole code(svg) of the flow chart.Now when loading the flowchart on some html page,the whole flowchart gets appears but it is not editable nor draggable. Nothing on the loaded flowchart is editable.Any help in this regard is highly appreciated

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sdrdis/jquery.flowchart/issues/27#issuecomment-432938117, or mute the thread https://github.com/notifications/unsubscribe-auth/ACItMySSNrhaCCn7u0WxDCVChx8n3uECks5uoWKLgaJpZM4LRyLm .

[AbdurRehman91]

I think that this issue is similar to this issue thread.Basically what i want is to have a functionality where i can save my work done in flowchart and can load it on some other time and more importantly it should be editable What i have achieved so far is that the work on flow chart can be saved and loaded into svg format.But it is not editable as i guess it is in svg format

[runette]

It sounds like what you need to do is use getData() - which returns a json version of the flowchart that you can store, and then use setData(data) to reinstate the flowchart which is then editable.

You can see this in the get/set data example in the demo - http://sebastien.drouyer.com/jquery.flowchart-demo/

If you want to get more interactive - you can use the onAfterChange callback to save the json flowchart data after any change - so that you always have the most up to date version.

etc etc

Paul

[sdrdis]

@runette has written the correct answer. Thanks!