Working with layers

[IonuDragomir1]

Hello, I have noticed that when I double click on some graphical objects, in the left upper side screen it appears "[Layer 1] > SHE_a3b804e4-5146417a" as you can see in the bellow image. In other SCADA software, like WinCC, working with layers offers a lot of benefits as shown in the following screenshot: This feature would be useful to manage a GUI with many graphical objects. I have some questions about this topic.

1. What is the purpose of Layer1 in Fuxa?
2. Do you think it's possible to add on Fuxa working with layers as SVG -Edit offers the possibility of layering?

[feifeiheweiwei]

Hi, I also encountered the same problem，after I double-click the icon, the color of the icon turns black and cannot be changed back, Do you know how to change the icon back?

[IonuDragomir1]

To get out of layer mode, you have to double click on working area. Hopefully this feature will be updated.

[w8w8w8]

in svgeditor , I get some HTML code like this:

<div id="sidepanels">
    <se-text id="sidepanel_handle" title="ui.panel_action" text="ui.panel"></se-text>
    <div id="sidepanel_content">
        <div id="layerpanel">
            <se-text id="layersLabel" text="layers.layers"></se-text>
            <fieldset id="layerbuttons">
                <se-button id="layer_new" title="layers.new" size="small" src="new.svg"></se-button>
                <se-button id="layer_delete" title="layers.del" size="small" src="delete.svg"></se-button>
                <se-button id="layer_rename" title="layers.rename" size="small" src="text.svg"></se-button>
                <se-button id="layer_up" title="layers.move_up" size="small" src="go_up.svg"></se-button>
                <se-button id="layer_down" title="layers.move_down" size="small" src="go_down.svg"></se-button>
                <se-button id="layer_moreopts" title="common.more_opts" size="small" src="context_menu.svg">
                </se-button>
            </fieldset>
            <table id="layerlist">
                <tr class="layer">
                    <td class="layervis"></td>
                    <td class="layername">Layer 1</td>
                </tr>
            </table>
            <se-select id="selLayerNames" title="layers.move_selected" label="layers.move_elems_to" options="Layer 1"
                values="layer1" value="layer1" disabled="disabled">
            </se-select>
        </div>
    </div>
</div>

but I can not find how to add js code , like layer.Init() , and so on

I think muset be change "fuxa-editor.min.js" , add some code

populateLayers(); or updateCanvas();

and the file is it open source ?

[unocelli]

Hi, yes, the svg-editor should be able to manage the layers, we should plan how to manage the settings.

[IonuDragomir1]

Hi, The easiest workaround should be like in svgedit (code: https://github.com/SVG-Edit/svgedit ; demo: https://svgedit.netlify.app/editor/index.html). On the provided demo link, from right part can be extended the panel which contains the layers. There the user can: create, delete, edit layer's name, move layer up or down, duplicate layer, merge layer. Another important feature which svgedit doesn't have, but SCADA software like WINCC has is the layer hiding. It's very important this feature especially when a screen has multiple graphical objects (unnecessary objects should be able to be hidden while working on a certain object and then display back the entire screen by activating back a layer) .

[unocelli]

Hi, I understand, but our goal with fuxa is to simplify the creation of small and medium-sized projects, the feature could be added later but for the moment it is not a priority.