How to ungroup elements in Snap SVG - svg

I am using Snap SVG to build an editor.
I have a group tag with some transform.
I want to ungroup the group. I tried adding the elements in the group to parent with a for loop, but the transforms are not working as expected in the ungrouped elements.
Can anybody tell me a way to ungroup elements?
Please find the JS Bin here.
https://jsbin.com/jinita/edit?js,output
Here when I drag the black rectangle, the entire group also moves.
When I drop it, I try to ungroup it, but the transforms are not applying for the group.
PS: I can't call drag() on the group element

The code is a bit confusing, as it looks like you are trying to add a group to itself, but I may be misunderstanding it. I have amended it slightly and selected the group by ID, just to know its the correct one, rather than css selectors.
jsfiddle
The key part I amended for the transforms is this line...
item.transform( g.transform().localMatrix.toTransformString() )
Edit: In this case, you can probably shorten it further to
item.transform( g.transform() )
This makes sure that we are getting the group transform at time of removing from the group, and convert it using toTransformString() (I'm not sure thats entirely necessarily, but often seems to eliminate oddities).
Edit: After the question has been amended slightly, it may be that you actually want the full matrix applying in which case it would be ...
item.transform( item.transform().globalMatrix.toTransformString() )
jsbin

Related

nested collapsible container in drawio?

I'm wondering if it's possible to nest collapsible containers? In the picture below I have a container containing various lists of text organised in "sections"; it'd be great to be able to collapse the sections individually as well.
Related query, since I'm creating those boxes programmatically – is it possible to create the text content programmatically and not need to position them with absolute y positions? With the user interface I can just add a new text box and it automatically stacks below the current one, and the container expands. If I create those with a script it seems I need to provide the y positions and sizes myself.
you could try adding a new container for every section (as shown in the attachment) and check if it suits your needs. I created a simple test diagram, it could be improved visually.
nested containers

FreeCAD removing object indicators after fusion / union

I have 2 Objects that I have combined with the union/fusion control
The result is as expected, but now I would like to remove the remaining lines of the separate objects (at least in my view).
I understand the underlying principle of the stacking object tree and its good to have them still all available as single entities, but I would like to hide what would not be seen in reality also in my view.
Any takers?
Thanks
For anyone who's interested I found the solution. The view property dialog allows you to change the document window setting to "shaded" which hides the lines.

Load SVG files in Fabric.js without grouping

I am having an issue loading certain SVG files in Fabric.js without grouping its elements.
The screenshots on how the file is displayed on the canvas with and without grouping are shown. The used SVG file is part of the Fabric.js' SVG test collection used at http://fabricjs.com/test/svg_import:
With grouping:
Without grouping:
Both screenshots correspond to what it results when using the Fabric.js' kitchensink. However, I obtain the same results when writing my own program.
I have tried other files and they are shown with no problems whether the grouping is performed or not. Because of this, I suppose the distortions observed for this file on the non grouped version are due to some SVG elements (transformations or groups, perhaps?) that are not very well handled by the library's SVG parser.
Is it possible to avoid this issue under certain conditions? If so, what kind of SVG elements should be avoided to prevent files from presenting this problem?
This is a well known "missing feature" in fabric.js
https://github.com/kangax/fabric.js/issues/1520
The library is not handling very good the object with a "transformMatrix" property set.
the "transformMatrix" property comes from parsing the transform attribute of the elements and the parents elements.
Normally the objects are grouped in a pathGroup object that is capable of handling the transforMatrix and give a correct rendering with the downside effect the objects cannot be moved individually or rotated/scaled.
There is a work in progress about this feature (by me) to solve this but is not complete yet.
You can download and try my branch here:
https://github.com/asturur/fabric.js/tree/experimentalCBox
Is not perfect yet but is gonna be inserted in future fabric version to fix this issue.

Using ContainerList with ImageDownloadService

I was referring to this code here. This suffices my need but I need to display the contents in 2 columns instead of 1. Hence, I thought of using a ContainerList with grid layout. The problem here is that the boolean initListModel(List cmp) is not getting called for the containerList.
I also tried to dynamically add the ContainerList but am having problems while using it with ImageDownloadService, the way it was used in case of List. It would be great if anyone could provide me with any sample code to get along

How to create the LWUIT 3D carousel

Do anyone know on how to create 3d carousel effect in LWUIT?. Can anyone explain me with a sample program on how to implement?.
First of all, I'm considering you want to use Lists, that's the most sensible way to do it, isn't is?
The first thing you want to know is this List.setFixedSelection(List.FIXED_CENTER), and that's the easy part. Tha method makes the list scroll around the middle displayed element, it's to say, it will add the carousel effect.
The difficult part comes when adding the 3D. First ad all, you should have a look to this article, if you haven't done it yet. It's compulsory to understand how LWUIT Lists work and what you can do (and how) with them. Basically you would need to implement a ListCellRenderer and specially the getListCellRendererComponent(List list, Object value, int index, boolean isSelected), there you would have to add the corresponding logic to detect where the list element is going to be painted, and play with the Styles to set shadows, gradients, or whatever you want.
And I'm sorry but I don't have any sample for you, maybe you can have a look at Shai's Blog, I don't know whether there is that specific sample, but there are a lot of them.
Good luck and regards.

Resources