Ok, I already found a way to do what I want. Is there a better/easier way to do this?
I’ve made a test svg file and ended up with this:
My floorplan.yaml now contains the following:
- name: OverView
elements:
- overview_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-visible
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-hidden
- name: Ground Floor
elements:
- ground_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-visible
- id: layer_3
class: layer-hidden
- name: First Floor
elements:
- first_floor_button
action:
domain: class
service: select
data:
elements:
- id: layer_1
class: layer-hidden
- id: layer_2
class: layer-hidden
- id: layer_3
class: layer-visible
Next I’ve added this to the action.service switch in the onElementClick(e) function:
case 'select':
for (let otherElement of action.data.elements) {
let otherSvgElement = $(svg).find(`[id="${otherElement.id}"]`);
let otherSvgElementclass = otherElement.class;
$(otherSvgElement).removeClass().addClass(otherSvgElementclass);
}
break;
This allows me to specifically select which class each element should have when pressing a button. This seems to work, but since this is the first I’ve seen from css I’m not entirely sure that this is an acceptable solution. Does anyone have an issue with this?
-edit- issue 1 found, it refreshes after a while and since they don’t have a default class they are all shown on top of each other
-edit 2- which can be worked around with by adding this as a group:
- name: Defaults
elements:
- overview_button
action:
data:
elements:
- layer_2
- layer_3
default_class: layer-hidden
Not the prettiest, but it seems to work 