I am having trouble getting my GoJS Diagram to scale properly initially by setting the initialAutoScale property on the Diagram object as so:
myDiagram.initialAutoScale = go.Diagram.Uniform;
however, I AM able to set the fixed auto scale value like this, although it is not the behavior I want (does not allow ctrl-scroll zoom after initialization):
myDiagram.autoScale = go.Diagram.Uniform;
Admittedly, I am controlling and managing the GoJs Diagram from an Angular controller, which I understand is not the recommended way to use GoJS with Angular. That said, I am working with a short schedule on a web application that is much bigger than the piece I am currently working on and it is the best for the project if I CAN make it work within the controller construct.
Given that, I would love a recommendation for a fix, but also would very much appreciate any feedback regarding why autoScale might've worked while initialAutoScale doesn't, how initialAutoScale works and why in particular it might be angry with my Angular controller implementation, why else initialAutoScale wouldn't be happy, or any other ideas for a workaround.
I am happy to post more code as it is helpful. Thanks for any help!
Diagram.initialAutoScale determines the scale of the diagram after the Diagram.model has been replaced. So if you have set initialAutoScale: go.Diagram.Uniform, for example, then after you have replaced the Diagram.model with a new Model, the Diagram.scale will eventually be set so that the whole Diagram.documentBounds can be seen in the viewport.
If you do not replace the diagram's model, this property has no effect.
Setting Diagram.autoScale to go.Diagram.Uniform basically results in a call to Diagram.zoomToFit whenever there is a change to the document bounds or the viewport size or scale or scrollbar visibility or any other state which affects what is shown and where.
See http://gojs.net/latest/intro/initialView.html for more discussion.
Related
So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.
From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.
It's currently in the dev branch of three.js: the pull request.
Is there a way to turn debugging on or some command to show us rendering problems when using famo.us?
Log statements would be helpful or any other way of telling us what is going when the app is being rendered.
EDIT: Here are the rendering problems I have seen so far
1- Layout is inconsistent across browsers (Not even talking about IE yet!!!!).
Safari 7.02:
Chrome35:
Android Firefox 29:
2- Scrolling with famo.us is basically screwed.
I have 3 main sections my app (website):
Header (which is a ScrollContainer with 4 surfaces).
Footer (Which is a ScrollContainer with 1 surface).
Content (2 ScrollContainers on the left side and 2 ScrollContainers inside a Deck component on the right side. Each text/paragraph is a surface in its respective ScrollContainer).
Now, if you go to my app, you will notice that the scrolling is screwed and I have no idea why! I don't even know how I can debug this mess.
P.S: The code is left un-minified and with comments on purpose.
But wait there is more. Scrolling is confusing to the user as the user has no idea that this view is scrollable because no scrollbars are visible. You can even see that on the famo.us demo page. Go and try to scroll :). The only way you can scroll is if you go to the left side of the page ...
3- The Deck component seem to arrange the cards randomly on initial load based on the browser! As if things aren't already screwed enough. See screenshot below:
Chrome35 Desktop renders the green card first:
FF29 Desktop renders the red card first:
With all the above issues. I have no idea how to fix them or why they are happening.
List of things that will help me as a developer debug problems with famo.us:
Enable some debug logging when using components.
Throw JS errors when using components incorrectly.
Warn me about potential layout problems if using components with known issues.
Have better documentation. I basically read your code base to understand how to use something because the famo.us docs is not adding much value without having examples whereas your open source code does.
More articles talking about layout and page structure. This is a fundamental thing. If we can't get this right, there is no point playing with animations on a page that is not viewable correctly!
I have also noticed that FF29 on Desktop lags when I interact with the Deck of cards whereas on Chrome it doesn't. So backing up your 60fps claim across devices would be a good start. Show us performance metrics and comparisons to prove that claim.
I really want to use famo.us and I will hopefully contribute some fixes if I get some time but this is currently how I feel about famo.us.
Yes, it would be great if there was something that gave more info. Like a famoushint or something. I use jshint that at least helps with the common JavaScript errors.
Also, this has saved me a few times as well. http://famo.us/guides/pitfalls
But I agree it is a little buggy at this point, I've been having trouble with the Scrollview.
Currently there are no render specific debugging tools in Famo.us..
There are a couple of things I do when I run into problems..
1) Use javascripts 'debugger' command to stop the execution of the code and inspect the environment..
debugger;
2) Use a class that you can easily search in the surface you want to inspect. This class would contain no style but be unique enough to be used as an identifier to find the element quickly within the DOM tree.
var suspiciousSurface = new Surface({
size:[200,200],
classes: ['my-debug-class']
});
Hope this helps!
a famo.us app is fundamentally a javascript app, so the same techniques apply http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today
About the rendering, it is OK to inspect the DOM. If your scene is not too complex, you can quickly figure out which DIV your surfaces map to.
You can also outline a particular surface as #johntraver suggests, or also outline all the surfaces : in you CSS, add :
.famous-surface {
border: solid black 1px;
}
I was wondering if there is a way of defining custom images as data-point.
For a LineGraph there is a pointSize property which sets the size of data points. (Not surprisingly).
This property can also be overridden with the series property in which you can also define a custom color.
Nonetheless, I can't see anything that would allow custom markers.
To make my question absolutely clear:
This is what I am going for: Image with an example
Two ideal solutions
Setting a property to a datapoint with class name and defining a picture for this class name in css. (to me it seems impossible since these are SVG graphics)
Adding an extra column with data-marker image source.
Although these seem perfect in theory I have no idea how to go about implementing them.
A less perfect solution could be extracting point position from SVG and using JavaScript to dynamically position divs with images (this seems very unelegant and prone to bugs)
Alternatively please recommend a js charting library that would be free and had support for such functionality.
Edit:
In the meantime I found a very good and quite inexpensive (60$ per website license) library that covers this functionality : Highcharts library But the original question is still open.
I'm trying to figure out how to highlight a line (series) in Highcharts from an element that's not related to the Chart object in any way.
I went through the documentation, and don't really see a way of achieving this. I can get into the series elements using the series.get(id).
Seems like there are no methods that can be helpful - http://www.highcharts.com/ref/#series-object
Any ideas if that's even possible?
After a lot of digging and testing, I've managed to get this working - still not sure if this is the best way (probably not).
Chart.series.get(someId).graph.attr('stroke-width', '5')
Unfortunately, this is just getting into the actual DOM element and changing the value of the property of a single element, so if you need to change the stroke width, and the styles of the markers on this line, you'd have to loop through all elements, and apply changes manually.
UPDATE: Ok, there's a better way
But this is using the private API, so if the library changes thins, your code will not work:
Chart.series.get(someId).onMouseOver() and Chart.series.get(someId).onMouseOut().
This actually fires the defined hover-state.