ashleydavis / angularjs-flowchart Goto Github PK

First of all, thanks for your work on this Ashley.

I'm playing around with this, and when I try to drag or connect any of the nodes, I get this error:

Raven: Exception  TypeError: undefined is not a function
    at Object.release (http://localhost:9000/assets/lib/AngularJS-FlowChart/flowchart/mouse_capture_service.js:97:13)
    at Object.acquire (http://localhost:9000/assets/lib/AngularJS-FlowChart/flowchart/mouse_capture_service.js:68:9)
    at Object.startDrag (http://localhost:9000/assets/lib/AngularJS-FlowChart/flowchart/dragging_service.js:92:17)
    at k.FlowChartController.$scope.connectorMouseDown (http://localhost:9000/assets/lib/AngularJS-FlowChart/flowchart/flowchart_directive.js:357:12)
    at http://localhost:9000/assets/lib/angular/angular.min.js:176:141
    at http://localhost:9000/assets/lib/angular/angular.min.js:193:165
    at k.$eval (http://localhost:9000/assets/lib/angular/angular.min.js:112:319)
    at k.$apply (http://localhost:9000/assets/lib/angular/angular.min.js:113:48)
    at SVGGElement.<anonymous> (http://localhost:9000/assets/lib/angular/angular.min.js:193:147)
    at SVGGElement.n.event.dispatch (http://localhost:9000/assets/lib/jquery/dist/jquery.min.js:3:6404) undefined 

Any ideas why?

I'm using the following:

• Angular 1.2.19
• jQuery 2.1.1

Thanks!

Hi @ashleydavis,
In your README file, you refer to an article from www.codeproject.com where the code and article are under MIT license.
In this repository (Github), there is no direct reference to any license so NO LICENSE is applied (https://choosealicense.com/no-permission/)

If the MIT license shall be applied, could you add the LICENSE file here please ?
Thanks

I'm looking for the best way to convert the overall layout from a horizontal one to a vertical one (where nodes have connectors at the top and bottom).

Seems like most (if not all of the changes) need to be made in flowchart_viewmodel.js with functions like flowchart.computeConnectorPos and flowchart.computeConnectorY. Any other things I should be aware of before I dive in? Thanks!

I have an issue with the function inside flowchart_directive.js

`//
// Hit test and retreive node and connector that was hit at the specified coordinates.
//
this.checkForHit = function (mouseOverElement, whichClass) {

	//
	// Find the parent element, if any, that is a connector.
	//
	var hoverElement = this.searchUp(this.jQuery(mouseOverElement), whichClass);
	if (!hoverElement) {
		return null;
	}

	return hoverElement.scope();
};`

hoverElement.scope() may return false if debug mode is not turned on.

AngularJS documentation states that in order for us to access element.scope() we must have debugging on.
In a production application this may not be a viable solution, due to the fact that a production system may not be deployed in "debug" mode for X reason.

https://docs.angularjs.org/api/ng/function/angular.element

I am still looking for an alternative to this but feel free to fix it or I will try to send a pull request.

Thank you.

bower install angular-flowchart
bower angular-flowchart#* not-cached git://github.com/tobiasoberrauch/angular-flowchart.git#*
bower angular-flowchart#* resolve git://github.com/tobiasoberrauch/angular-flowchart.git#*
bower angular-flowchart#* ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/tobiasoberrauch/angular-flowchart.git", exit code of #128 fatal: remote error: Repository not found.

I want to override the handleNodeClicked action in my controller, how can I do that?

How to check node had connected with other node?

Whats the project license???

it gives this following error when I try to run in Chrome.

Error: [$compile:tpload] Failed to load template: flowchart/flowchart_template.html (HTTP status: -1 )
http://errors.angularjs.org/1.4.7/$compile/tpload?p0=flowchart%2Fflowchart_template.html&p1=-1&p2=
    at angular.js:68
    at handleError (angular.js:17676)
    at processQueue (angular.js:14745)
    at angular.js:14761
    at Scope.$eval (angular.js:15989)
    at Scope.$digest (angular.js:15800)
    at Scope.$apply (angular.js:16097)
    at bootstrapApply (angular.js:1660)
    at Object.invoke (angular.js:4478)
    at doBootstrap (angular.js:1658)

lines 13 ：var $element = document;

var $element = $(document);

Hi,
How can i change the style of path from curved path into straight path and the path is auto avoid node drag section

Wonderful project!
In the article in code project you list the zooming and panning as a future improvement. Wondering whether there is a zoom/pan solution for now in the flowchart project?
Thanks.

Hello

I get this error on angular 1.4.7

function($scope, $element, $attrs, mouseCapture is not using explicit annotation and cannot be invoked in strict mode

This is not an issue, May i know how to use this in Angular 2+ projects ?

Hi,

when dragging nodes with the mouse in IE10 I get the Error
SVG4601: SVG Path data has incorrect format and could not be completely parsed

The problem and its solution is described here https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY.

So function 'translateCoordinates' in flowchart_directive.js should look like this:

this.translateCoordinates = function(x, y, evt) {
    var svg_elem =  $element.get(0);
    var matrix = svg_elem.getScreenCTM();
    var point = svg_elem.createSVGPoint();
    //point.x = x - evt.view.scrollX;
    //point.y = y - evt.view.scrollY;
    point.x = x - evt.view.pageXOffset;
    point.y = y - evt.view.pageYOffset;
    return point.matrixTransform(matrix.inverse());
};

Hi @ashleydavis ,

I was trying to display arrows on the path indicating direction from the source node to destination node. However, I am stuck on this and couldn't figure out the solution. Please let me know if that's possible and how?

Looking forward to your reply.

Thanks!

Hi,

The code as is does not allow you to enter "a" into the JSON model on the left and to select all nodes you must hold down "a" and then press "ctrl". This is due to the keycodes for "a" and "ctrl" in app.js being switched.

However, when the keycode values are swapped, pressing ctrl-a selects all the text on the LHS as well as selecting all nodes.

I have tested this in both Chrome and IE 11.

Cheers

I’m running into some issues using it within the context of an existing angular app. Attached a screenshot of the errors I get below. I think it has something to do with scope as when I launch your repo, it works perfectly. However, when I include it within mine, I get errors and the chart gets the class ‘ng-isolate-scope’.

Nonetheless, the chart still populates but I can't drag anything around or change anything. The chartViewModel is also accessible via Angular scope from Chrome.

Here's a gist of my code: https://gist.github.com/Audace/98a7aab47a4531c107668991d7b7d783

Any idea what's happening or how to best debug?

Cheers,
Will

Update 1: The chart-json-edit directive doesn't work. No changes reflected on chart from editing the JSON.

I am running my application on IIS express via Visual Studio. When I navigate to index.html I receive the above error. What do I need to do to the configuration for the application to register the flowchart template?

It seems that node.js (which I've never used) have removed path.exists() and replaced with fs.exists().

As as result the sample server fails to run when using the latest node.js download. Changing the one reference in server.js rrom path.exists to fs.exists fixes this problem.

i adready do follow this 8d1b564 but notthing happen... the output still connect with another output and input can too...
And can we make 1 node only connect to 1 other node?.

As show in the picture, each rect shows on the right side is referenced to a json format data in the left side.
Is it possible to add a “ng-click” event on each rect and then trigger the related json data in the left side? (each rect represents a “$scope.chartViewModel.nodes[i]”).