I have a read-only diagram to visualize some data. My end users would like to "filter" the data such that only a subset of the data may be shown at one time. I realize that I can redraw the whole diagram each time I apply a filter omitting the elements that are not to be shown but I am wondering if there is a way that I can simply "hide" some existing elements dynamically and then subsequently re-show them.
To try and make crystal clear, if this were a web page instead of a diagram, I would draw the analogy of applying the CSS of display: none to elements of my choosing.
You can actually do the same with a JointJS diagram elements/links. For example:
myElement.attr('./display', 'none')
hides the whole SVG group element in which the element is rendered. Note the '.' is a special selector that points to the whole group. If you want to hide only a certain SVG subelement, you can do it similarly, e.g. for the joint.shapes.basic.Rect element, you'd do:
myRect.attr('rect/display', 'none')
This hides only the rectangle (the SVG <rect> element referenced by the tag name rect in the attrs object - that we modify via the attr() method.
Related
Is it possible to get List (or any other component from RV) to render itself like an UL>LI list or specifically like React Bootstraps ListGroup.
Currently I can not see an option to get the outer element (LIST) to render anything other than a DIV.
So my use case is really that each row should be a ListGroupItem (e.g. li with BS classes applied) and the container should be a ListGroup component.
Short answer: No. This is not supported.
Longer answer: List (like Table) uses a Grid internally. In order for windowing to work, Grid needs 2 wrapper elements around its cells. (Check out the source here. I also made a presentation slide about how it works, if you're interested, here.) Lists (ol, ul) only have 1 wrapper element.
If so, how? ... Just for clarity, if there are 2 pixels between a form and object's edges, and I resize the form, I'd like the distance between the form and object to still be 2 pixels after resizing.
Thank you, as always.
There's a few ways to do this but the simplest and most reliable is to script it with a resizeStack handler in your card script:
on resizeStack pWidth,pHeight
put the rect of field "name" into tRect
put pWidth-2 into item 3 of tRect
set the rect of field "name" to tRect
end resizeStack
Monte's answer is dead on if what you are doing is keeping objects in a desired arrangement when resizing the stack window. But if you are wondering how to keep relative positioning while resizing or moving an object or group of objects (you said "form" so I'm assuming that's a group of objects) in a card layout, you simply have to update it in the same code that you use to resize your form or group.
constant kOffset
on resizeMyGroup
-- code for resizing group here
set the left of button "myButton" to the right of group "myForm" + kMargin
set the bottom of button "myButton" to the bottom of group "myForm"
-- etc.
end resizeMyGroup
This is the general approach to maintaining a layout in LiveCode.
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'm playing around with Rebol, and Can't figure out how I can add components from the user back to my layout.
I have a layout that has images, taken from image-urls, linked to articles/videos online. I want to add more images linked to their corresponding articles/videos online, taken from the user as 2 urls (one for the image and one for the article/video).
Do I use a list, add the two links to the list and call the view again using show as the button event? Is there a way to add it without refreshing my whole layout?
You can use a list, but it's a tricky beast. I'll include an example here so that you can evaluate the way it works and if it's right for you.
With a list, you define a layout, then modify the layout dynamically based on some data or other. To illustrate, here's some icons:
icons: [
http://reb4.me/r/html-document.png
http://reb4.me/r/pdf-document.png
http://reb4.me/r/excel-document.png
http://reb4.me/r/word-document.png
http://reb4.me/r/zip-document.png
]
The list style consists of a size, layout and a supply function (and I'm going to zap the edge):
view center-face layout [
across
lst: list 48x240 edge none [image 48x48] supply [
face/image: all [
img: pick icons count
load-image img
]
]
btn "Random" [
icons: random icons
show lst
]
]
Included at the bottom is a button that modifies our data, then redisplays only the list.
Size is 48x240 — list works vertically, calling the supply function (list height / iterative layout height) times. I have five icons, so multiplied the icon height by five.
The [image 48x48] is our iterative layout. Note that we only define one face in this example. Unlike generic layouts, a list layout is created using the layout/tight refinement—you need to be specific if you want alternate spacing.
The supply [...] part is our supply function. This is shorthand for a function that will be created and called to update the list. That function is func [face count index][...] where face is the operative face; count is the position in the list; and index is the face's offset in the iterative layout.
It's key to remember that iterative layout is only created once. As the count increases, you are merely changing the attributes of the faces within that layout.
You only need show the list, not the whole layout.
So from here, you can see the relationship between the data source and the display.
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();