I need a solution to resolve the over lapping issue with joint js links.
For example
Image1
to
Image2
I'm implementing a process flow diagram in JointJS where the user can delete elements as well as add new ones, and re-link things in a variety of orderings. The graph is using the auto-layout features of the joint.layout.DirectedGraph library with Dagre to re-organize the graph each time something is deleted, added, unlinked or re-linked. One odd issue has cropped up and I'm not sure yet how to handle it.
Say I have a "fork" process with two out ports, one on each side, and a single in port at the top. Depending on the ordering of the elements in the array, the auto layout can sometimes place the child element of the left-hand port to the right of the child element of the right-hand port, so the resulting links are crossed.
Is there some straightforward way to influence the rank ordering in the layout?
I have tried the below soluiton
joint.layout.DirectedGraph.layout(this.graph, {
setLinkVertices: true,
ranker: 'longer-path',
rankDir: 'TB',
dagre: dagre,
rankSep: parseInt(70, 10),
edgeSep: parseInt(30, 10),
marginX: 100,
marginY: 270
});
Related
Think of an RPG game where you might need to present a list of buttons. A user might enter a room where they have to select from a series of options (buttons). Is there a type of container/panel that would show clickable buttons horizontally, but wrap if needed?
The best analogy I can think of to picture the situation is, Imagine needing to click on an item in a backpack, but each item is potentially a different width. (I can make them all the same height but the width then varies)
.---[My Backpack]------.
| aaa bbb cccc ddd |
| ee fff g |
| |
| |
`----------------------'
(The options come from a database, so its unknown at compile time how many options might be in a room, so I am going to need to programmatically add options.)
The very bottom of this godot document introduces custom container layouts, but it's unclear to me how this would work in practice
Flow container for Godot 3.5 or newer
Godot 3.5 (currently in beta) introduces HFlowContainer and VFlowContainer that will serve the propuse described.
The HFlowContainer will fill a row and when they overflow, it will add a new row and continue there. The VFlowContainer will work on a similar fashion but with columns.
Flow containers before Godot 3.5
For older versions of Godot you can use the HFlowContainer addon which you can find it in the asset library (here). Note that there is no VFlowContainer counterpart.
As everything on the asset library it is free and open source, so feel free to read the code and modify it, which can be serve as starting point if you want to make your own custom Container.
Making your own custom Container
The gist of making a custom Container is that it must position its children.
For that effect you react to NOTIFICATION_SORT_CHILDREN in the _notification method. You might also want to react to NOTIFICATION_RESIZED.
You can have a method - which I'll call layout - that you call when you get the notifications:
func _notification(what):
if what == NOTIFICATION_SORT_CHILDREN:
layout()
And also call layout from the setters (setget) of the properties that define how the Container must organize its children. To call layout from anywhere other than _notification, you might want to use call_deferred("layout") to prevent any possible re-layout loops from hanging or crashing the game.
The layout method would iterate over the visible children Controls and use get_combined_minimum_size to figure out their size.
Something like this:
func layout() -> void:
# …
for child in get_children():
var control := child as Control
if not is_instance_valid(control) or not control.visible:
continue
var size := control.get_combined_minimum_size()
# …
Then using that information compute the position and size for the children Controls. When there is room for the Controls to grow, you may want to split it among them according to their size_flags_stretch_ratio.
Once you have the position and size for a Control decided, use fit_child_in_rect to position them, which will take into account grow and size flags.
Thus - barring the simplest Containers - you will need to iterate over the children Controls twice. And for that you might find useful to have an auxiliary data structure to temporarily store them.
I just started out with Phaser.
I have a simple sprite in the middle of the screen, and whenever I click the sprite, I emit a particle at the clicked x,y coordinates.
My problem is that the particles are generated behind the sprite. I have tried setting z on the sprite to 1 and the emitter to 1000 without luck.
What am I missing?
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(sender, pointer){
emitter.emitX = pointer.x;
emitter.emitY = pointer.y;
emitter.emitParticle();
}, this);
http://phaser.io/sandbox/cxBVeHrx
EDIT
My actual code is based on the Phaser-ES6-Boilerplate. Even though BdRs answer solves the issue in the sandbox code, I'm not able to utilize this in my real code.
I have uploaded both the code and a running example. Hopefully someone can tell me where I have screwed things up...
Separate Phaser items don't have a z-order, instead it just depends on the order you create and add them to game. Each new sprite or emitter or group etc. will be displayed on top of all previously added items.
So, simply changing your code to something like this should work.
// first the sprite
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
// then the particles in front of sprite
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
// then maybe text in front of particles and sprite
var mytest = game.add.bitmapText(10, 20, 'myfont', 'Level 1', 16);
// etc.
Btw sprites do have a .z value but that only used when it's part of a Phaser.Group, it will then be used as the display z-order but only within that group of sprites.
By default, phaser will not sort objects that get added to any group, it will just render them in the order that they get added. In your case, you can just add the emitter to the group after you add the sprite (the group in this case is the 'game' object).
Of course, having to add objects in the drawing order is not ideal, and if you need to have them sorted dynamically, not possible.
Another way is you can sort objects within a group using the 'sort' function, in which you give it the name of a parameter to sort by, and you sort whenever you need to (in some cases, in the Update callback).
Sorting every frame can be a performance hit though, especially if you have a lot of objects. Another way you could go about this is by adding groups, sorting those groups in draw order (think of them like layers), and then adding objects to those groups in any order. Any group that needs sorting within itself you can sort as well. This way, you can choose to have (for example) a background layer not needing to be sorted but everything added to that layer will be behind every other layer.
Good answers from everybody, but you are missing that every GameObject has a depth property which serves exactly the z-index purpose. This way you do not need to rely on the order of objects creation.
There is also an official
example.
Hope this helps.
Is there a way to specify a layout for children of a PolylineConnection?
I want to add several Labels to a PolylineConnection at ConnectionLocator.MIDDLE without the use of a container figure for the labels.
Both PolylineConnection and Label have EditParts, and the label's model objects are children of the polyline connection's model objects.
Ideally I want to add all label children of a polyline to ConnectionLocator.MIDDLE in a ToolbarLayout...
What you are trying to do is mix two layouts: on the first hand you want to use a ConnectionLocator.MIDDLE to locate the figures, but on the other hand you want to have the figures at this location to have their own layout.
The only solution you have is to create a figure that uses a ToolbarLayout and locate it in the Polyline using the ConnectionLocator
I've found a way to achieve what I wanted:
Very generally, the first child must be added at ConnectionLocator.MIDDLE, and the rest of the children relative to the child before them with the help of RelativeLocator like this (line would be in a loop over all figure children in connection's edit part):
figure.add(childFigure,
new RelativeLocator((IFigure) figureChildren.get(currentIndex - 1),
0.5,
1.7);
I've written a blog post with more details.
I have been trying to find an example or some hints on how to create an app that I could drag, resize, rotate images onto a UIView and then save the individual pieces (including their size, rotation and placement) and the entire UIView into CoreData. Kind of like the omnigraffle app.
Any tutorials, examples or anything on any piece of the app would be greatly appreciated.
for dragging a view
http://www.cocoacontrols.com/platforms/ios/controls/tkdragview
for roting a view http://www.cocoacontrols.com/platforms/ios/controls/ktonefingerrotationgesturerecognizer
for resizing a view
http://www.cocoacontrols.com/platforms/ios/controls/spuserresizableview
What respects to core data, its actually pretty straightforward just, gather the classes in one view, see the properties you need to save, and the new one you will need for your app and thats it.
Like:
Object Canvas containing a many relationship to morphlingViews wich contain all the properties as center, color, width, height, angle, UIPath (if you plan to create custom shapes) layer position (so it gets drawn correctly) and if you plan to connect the views as omnigraffle add a many realtionship to self (in morphlingViews) so you can take the center of different morphlingViews and add a simple line between them. (and a string if you plan to add drawInRect method to allow users to write in the objects, then it will be a good idea to add the text properties as well).
You can also add Quartz Composer drawing styles properties to the object, as shadow, shadowColor, shadowOffset, or add patterColor to add resizable background.
I've a layer with multiple markers with rather big icons, so they overlap. Via the list on the side of the map users can select a marker and the map will pan (and zoom) to it. But it will still be behind some other makers.
How do I get a individual makers z-index and set it? I would be useful to get the highest used z-index and just add one. (another solution is to add the total number of markers to the z-index)
The markers (or features) are in a myLib.features array. The console doesn't show any z-index type functions.
I can't find a appropriate example or api function for this.
EDIT:
I found this example: http://dev.openlayers.org/examples/ordering.html
I don't really understand it. Somehow the created feature takes the next z-index given by the layer via somekind of symbolizer. I have no idea how to work this static sort into a dynamic one.
Try this:
First of all, make sure you are using a OpenLayers.Layer.Vector layer, not a OpenLayers.Layer.Markers layer. Apparently the Markers layer is old news and all new development is done in the Vector layer. It has more features. (I wasted a pile of time with the Markers layer myself).
Then, each of your markers needs to be a OpenLayers.Feature.Vector object. The constructor takes three arguments, the third of which is called the style. The style is where you set your image attributes, the background shadow, the mouse-over text, and the z-index, which has the property name "graphicZIndex". I think that's what you're looking for.
http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.OpenLayers.Feature.Vector.style
Add your "markers" (which are Vector's) to your Vector layer with the addFeatures function. And just ignore the "options" argument.
http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.addFeatures
I found that example page too, and I found it confusing too. It was setting all the markers' styles in the Vector layer's constructor (as default values to be used if the marker style was omitted) instead of the marker's constructor. I think it makes more sense to set the marker style in the marker constructor.
To change the style in real-time, take one of your OpenLayers.Feature.Vector markers, called "marker" and do this. And let's call the Vector Layer "layer".
marker.style.graphicZIndex = 13;
layer.redraw();