How to make groups invisible but their contents visible in gojs? - javascript

I've followed go.js example (http://gojs.net/latest/intro/layers.html) of using layers and now I want to modify it, so I can assign all groups to the same new layer while keeping the contents of the group in a separate layer. This seems to be working, as I can see, that depending on addLayerBefore or addLayerAfter being called the group overlay is displayed in front or behind the group contents. Now unfortunately, when I set the group layer invisible the group contents also become invisible. This is bad, as my whole idea to put the group and its contents to the separate layers, was in order to be able to add button, that toggle displaying group overlay, while keeping group contents always visible. Is there any way to achieve this functionality?

The easiest way would be to set a group's or layer's opacity to 0, instead of using the visible property of Parts or Layers.
visible has specific rules about hiding other objects, such as a Group's member parts, connected Links, etc. opacity is always only cosmetic.

Related

Select across multiple text elements via rectangular area JS

I don't want to use the device's native text selecting ability, rather I want to replace it with my own method. How can I select text across multiple elements based off of coordinate positions on the page?
Basically, I have the results of Touch clientX/clientYs to make a rectangular area and I want to select all the text contained in that area
I've tried using absolutely-positioned elements and creating a range with those elements as the bounding start and end but it did not work.
I found these two methods that can be used to construct a range that can be added to the window selection.
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint
https://developer.mozilla.org/en-US/docs/Web/API/Document/caretRangeFromPoint

Is it possible to use a DOM element in the same was as a check box in D3?

I'm creating a scatterplot, and have appended 4 rectangles at the top to serve as a colour legend — each of the 4 rectangles is of a specific colour, and corresponds one of the 4 categories of data points.
I'd like users to be able to click on each of these rectangles, like a check box, and thereby fade the opacity of the data points in that category.
Forgive the fact that this is somewhat vague (I've never dealt with this sort of thing before, only mouseover event listeners, so am wondering )— is it possible to use DOM elements, like rectangles, as check marks? Are there any examples of this being used with D3?

KineticJS: make dropped elements be draggable as a Kinetic.Group

Well.. so it's the same problem that I face with Kinetic.Group. I tried several things to make this work, but always the same result: it does not work, and even worse, the basic drag and drop functionality disappears!
I already know how to do this inside one container, the difficulty comes when I try to adapt it to the drag and drop from DOM to container. After the drop, I need the images and shapes to be moved all together. That's why I created a group for each item and made it draggable.
This is the fiddle I'm changing to make the dropped elements in the canvas, be draggable as a whole group (the non-working fiddle) http://jsfiddle.net/gkefk/15/. What is wrong with this code?
PS1: this one is the main functionality of drag and drop http://jsfiddle.net/gkefk/14/ which I'm editing.
PS2: I'm a beginner, so if you find "stupidities" in that code, please report.
A simple guide how to get what you want out of this:
Get rid of jQuery and start over.
1. Create a new Stage
2. Create two layers, one taking up the left half of the Stage, the other the right half.
3. put all your objects on the left side, make them clone-able on mousedown and fire the drag event so you can place them in the other layer on mouse up.
4. if your item is a rectangle - I'm assuming this is a group which is will have children, create a new group, and a rectangle inside it, place it in the right layer on drop.
5. if your item is a house, check for mouse intersection with a rectangle, if mouse is over a rectangle, get the parent of the rectangle on drop (which will be a group), and then place the house in that group, else place in right layer freely.

What are the differences between group and layer in KineticJs

I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences?
The basic difference: Groups are containers while Layers are separators.
Group:
A group is a container for shaped objects inside a layer.
For example, a group might contain both a circle and a rectangle.
A group can be manipulated and all elements within that group are similarly manipulated.
For example, dragging a group will simultaneously drag a circle and rectangle contained in that group.
Layer:
Layers are actually separate canvas elements that are stacked atop each other.
This is similar to the way layers work in Photoshop and Illustrator.
Multiple layers are visible simultaneously.
If objects from different layers overlap, the topmost object displays fully (like z-indexing).
Groups are used to contain multiple items so they can be manipulated as a group--like putting circles and lines into a group to create a "stickman". Moving the group will move all the pieces of the stickman.
Layers are used to separate different items--like having a background layer that doesn't change and a top layer where animation is occurring.
Groups are simply group of elements or objects can be stacked in any way normally within a layer.
Layers are different Canvas area that can be added on the stage stacked over each other.

Can two jcanvas layer masks exist on the same canvas?

Is it possible to create two layer independent layer masks on the same canvas? I've tried, without much success. I suspect it's due to masks affecting layer indexes.
I've highlighted this by enabling masking on mouseover (see here). If you mouseover a layer mask, the other layer masks disappears. If you draw the layer with mask:true as a property only one layer mask will appear. You might be thinking "why not make a separate canvas for each layer mask?" I can't because I intend on using $("canvas").getCanvasImage(); to render the canvas as a composite jpeg (which would be difficult with two canvases).
The end goal would be a canvas split vertically into two panes. Each pane would be filled with an draggable image. Users would move the image in the pane to "crop" it and then render the result as a composite image. This example comes close, but dragging the green box under the right pane creates a deadspace in that pane.
Thanks for you assistance.
Yes, it's now possible with jCanvas. Just be sure to call the restoreCanvas() method whenever you wish to restore a mask, like so:
$("canvas").restoreCanvas({
layer: true
});
Here's an example I made which uses two masks to split the canvas into two panes.

Categories