Toggle if icon is clicked with ctrl.

Fixes #9

src/UiItems.js

@@ -34,7 +34,7 @@ const enabled = (props: ControlUI, state: State) => {
 const getValue = (topic: string, val: string) =>
   Config.topics[topic].values[val];
 
-const onSwitch = (topic: string, props: ControlUI, state: State) =>
+export const onSwitch = (topic: string, props: ControlUI, state: State) =>
   (x, toggled: boolean) => {
     if (state.mqtt != null) {
       state.mqtt.publish(Config.topics[topic].command,
@@ -43,8 +43,7 @@ const onSwitch = (topic: string, props: ControlUI, state: State) =>
     }
   };
 
-export const toggle = (state: State, props: ControlUI) => {
-  const toggled = (() => {
+export const isToggled = (state: State, props: ControlUI) => {
   const val = state.values[props.topic];
   if (props.toggled != null) {
     return props.toggled(val.internal == null ? val.actual : val.internal,
@@ -52,14 +51,16 @@ export const toggle = (state: State, props: ControlUI) => {
   } else {
     return val.internal === R.propOr("on", "on", props);
   }
-  })();
+}
+
+export const toggle = (state: State, props: ControlUI) => {
   return (
     <ListItem>
       {props.icon && <ListItemIcon><Icon>{props.icon}</Icon></ListItemIcon>}
       <ListItemText primary={props.text} />
       <ListItemSecondaryAction>
         <Switch label={props.text}
-          checked={toggled}
+          checked={isToggled(state,props)}
           onChange={onSwitch(props.topic, props, state)}
           disabled={!(enabled(props, state))} />
       </ListItemSecondaryAction>

src/index.jsx

@@ -77,7 +77,7 @@ class app extends React.Component<{state: State, classes: Object}> {
             </Drawer>
           </div>
         </MuiThemeProvider>
-        <SpaceMap width={1000} height={700} image="rzl.png" zoom={0.1} state={state} />
+        <SpaceMap width={1000} height={700} image="rzl.png" zoom={0} state={state} />
       </div>
     );
   }

src/map.js

@@ -31,9 +31,10 @@ const Markers = (props) => R.values(R.mapObjIndexed((el,key) => (
     icon={Leaflet.divIcon(
       {
         html: iconHtml(el, props.state),
-        iconSize: Leaflet.point(32,32)
+        iconSize: Leaflet.point(32,32),
+        iconAnchor: Leaflet.point(16,16)
       })}
-    onClick={() => store.dispatch({type: Actions.CHANGE_UI, payload: key})}>
+    onClick={(e) => store.dispatch({type: Actions.CHANGE_UI, payload: key, toggle: e.originalEvent.ctrlKey})}>
   </Marker>
 ), R.propOr({}, "controls", Config)));
 

src/state.js

@@ -3,6 +3,7 @@ import R from "ramda";
 import { createStore } from "redux";
 import Config from "./config";
 import { keyOf } from "./util";
+import { onSwitch, isToggled } from "./UiItems";
 
 export const Actions = Object.freeze({
   MQTT_CONNECT: "CONNECT",
@@ -55,7 +56,16 @@ const handleEvent = (state: State = initState, action: StateAction) => {
   return match(action.type, {
     [Actions.MQTT_CONNECT   ]: R.merge(state, { mqtt: action.payload }),
     [Actions.MQTT_MESSAGE   ]: onMessage(state, action),
-    [Actions.CHANGE_UI      ]: R.merge(state, { uiOpened: action.payload }),
+    [Actions.CHANGE_UI      ]: (() => {
+      const control = Config.controls[action.payload];
+      if (action.toggle && control.ui.length > 0 && control.ui[0].type == "toggle") {
+        const props = control.ui[0];
+        onSwitch(props.topic, props, state)(null, !isToggled(state, props));
+        return state;
+      } else {
+        return R.merge(state, { uiOpened: action.payload });
+      }
+    })(),
     [null]: state
   });
 }