Looking for an event hook for dragging a cell around the graph so I can highlight other cells - jointjs

Imagine I have a graph with some large rectangles on it. I want to drag a circle from the stencil and only allow it to be dropped within a preexisting rectangle. Furthermore, as the user drags the circle around the graph (deciding where to drop it) and the circle enters a rectangle, I want to change the colour of the rectangle.
Basically, circles are only allowed in rectangles and I'd like to highlight the rectangle before the user drops the circle.
Is this possible with jointjs or rappid?

It is possible. There is even a small, well-hidden demo on the JointJS website about exactly this. (https://resources.jointjs.com/docs/jointjs/v2.1/demo/shapes/shapes.devs.html)
You just have to fiddle around with the Paper options:
Set embeddingMode: true if you haven't already, and add the embedding class to the highlights like so (obviously, define some styling in your css for this class):
highlighting: {
'embedding': {
name: 'addClass',
options: {
className: 'highlighted-parent'
}
}
}
Finally, implement validateEmbedding: function(childView, parentView) {} with your own custom rules.

Related

Can you hide a node when not directly above a parent in Godot?

So I have an instanced scene that is supposed to be the child of a colour rect in my tree. I want to randomly generate the nodes, but I also want parts of the view to be cut off if the texture no longer is above the main section. I know you can render nodes below their parents, but I don't know if stopping part of them from rendering is physically possible.
In this image I want the bottom circle to remain the same, but the top circle to not show anything above the dark purple box
This is the node tree in the editor
Is there any way to do this directly, or am I gonna have to use a viewport of some variety?
I believe what you want is to set rect_clip_content to true on the ColorRect (or whatever Control). Making invisible any part of its children outside of it.
From Godot's documentation:
bool rect_clip_content
Enables whether rendering of CanvasItem based children should be clipped to this control's rectangle. If true, parts of a child which would be visibly outside of this control's rectangle will not be rendered.
If what you want is the opposite, perhaps you can use z_index to have something render on top, occluding the parts you don't want visible.
There is also a trick you can use with lights (including 2D lights):
Make a light that matches the area you want things to be visible.
Set a custom material that will be transparent by default, but visible on the light pass. The simpler way to do this is to set the light_mode of the material to "Light Only". You could also do it with a custom shader instead.
Making something disappear with light, in 2D, is impossible. In 3D, you can use flags_use_shadow_to_opacity. That is how you make a shadow catcher.
But, there is one more trick: you can use a mask. This should give you full control of when to show or hide things. So, if none of the above solutions works for you, use a mask. I have an explanation in a different answer. See also: How to crop sprite in a non-rectangular form?.
Mighty Mochi Games recently (2022-03-30) made a compilation of the different approaches in video form: Mask Methods Collection - Godot 3.x - 2D
.

VTK: small cosy in a corner instead of the middle

Is it possible to have the vtkAxesActor small in a corner of the window?
Here is a image of what I currently got and what I would like to have. The colorful axes are the standard axesActor. But I would like the axes in a corner of the window and only there (bottom left in black). They shouldn't move around the window when the view is rotated. Only around their origin.
Is this possible? And if yes, how?
A possible solution is to put the vtkAxesActor into an orientation widget:
widget = vtk.vtkOrientationMarkerWidget()
widget.SetOrientationMarker(axisActor)
widget.SetInteractor(interactor)
widget.SetViewport(0, 0, size, size)
widget.InteractiveOff()
widget.EnabledOn()
The vtkAxesActor location is functional and it's location has a purpose. The anchor point of the AxesActor is the anchor point of the model. This provides context of where any transformations or translations would be calculated from.
Unfortunately the example of the axisActor in the corner you have proposed would only provide context of the orientation of the model and so not part of the standard options.

SVG path - Add and subtract || lasso selection tool in canvas

I want to combine two SVG paths such that
1.Both paths will be there but, at the area of intersection, there will be no strokes.
2.Second path will be excluded and there will be a complete stroke
See image at http://s18.postimg.org/et4m803rd/shape_combinations.jpg
I want similar function also in HTML5 canvas.
The purpose of this scenario is to implement a lasso selection tool (freehand selection) similar to that of photoshop, with Ctrl and Alt options for adding and subtracting selection [ + some other functions ].
What have you tried? This sounds a little bit like a homework assignment.
The first one is easy to replicate. Just draw the two circles with the stroke, then draw them again in the same place without the stroke.
You can achieve the second shape (the "pacman") by drawing a purple circle on the right that is clipped by a circle that is in the same position as the left (black) circle.

What is the proper way of drawing label in OpenGL Viewport?

I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.

How to cut a hole in an SVG rectangle [duplicate]

This question already has answers here:
How can I cut one shape inside another?
(4 answers)
Closed 6 years ago.
So basically as my title says, I want to "cut a hole" in a rect element.
I have two rect elements, one on top of the other. The one on the bottom has a fill colour of white, and the one on the top has a fill colour of grey.
What I want to do is cut a triangle out of the top rect element so that the rect element below shows through.
This svg element is going to be used as an audio button for a media player on a page. In other words, you'll be able to click (or drag) your mouse left/right and the change in audio level will be represented by a change in the width of the rect element on the bottom, which shows through the triangle cut out of the top rect element.
I hope that's not too confusing. :P
Here is a quick mockup of what it should look like: http://forboden.com/coding/s1.png
Here is my code: http://forboden.com/coding/svgClipTest.html
Where am I going wrong here?
You should be able to use the fill-rule: evenodd(default) property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification:
The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).
Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
Concat the path datas of outer shape and inner shapes(holes).
You can cut more holes by concat more hole path data.
This image explain how to cut a hole:
I see that you have it solved already, just wanted to add that if you want something more advanced then it's often quite easy to use a <mask>, see http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg for example.
However, if you can avoid masking and clipping (e.g by just drawing things on top) that usually leads to better performance/user-experience.
Easiest way is to use <path> with the hole, and set pointer-events to none so events can pass through to the <rect> under. Of course there are many other ways to handle events such as wrapping them with a <g> and handling events on it.
You don't need to limit yourself to the basic shapes and use complicated clipping. Make things felxible enough so you can copy&paste path data generated by tools like inkscape.

Resources