highmark-cli 0.0.135 → 0.0.139

package/src/view/div/buttons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+import CloseMenuButton from "../button/closeMenu";
+import FullScreenButton from "../button/fullScreen";
+import ZoomMenuInButton from "../button/zoomMenuIn";
+import ZoomMenuOutButton from "../button/zoomMenuOut";
+
+import { buttonsDivGap } from "../../styles";
+
+class ButtonsDiv extends Element {
+  childElements() {
+    return ([
+
+      <ZoomMenuInButton/>,
+      <CloseMenuButton/>,
+      <ZoomMenuOutButton/>,
+      <FullScreenButton/>
+
+    ]);
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "buttons"
+  };
+}
+
+export default withStyle(ButtonsDiv)`
+
+  gap: ${buttonsDivGap};
+  display: grid;
+  grid-template-rows: min-content min-content;
+  grid-template-columns: min-content min-content;
+  
+`;

package/src/view/div/checkbox/invertColours.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import CheckboxDiv from "../../div/checkbox";
+
+import { areColoursInverted } from "../../../state";
+
+export default class InvertColoursCheckboxDiv extends CheckboxDiv {
+  changeHandler = (event, element) => {
+    const checkboxChecked = this.isCheckboxChecked();
+
+    checkboxChecked ?
+      controller.invertColours() :
+        controller.revertColours();
+  }
+
+  didMount() {
+    const coloursInverted = areColoursInverted();
+
+    coloursInverted ?
+      this.checkCheckbox() :
+        this.uncheckCheckbox();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  static message = "Invert colours";
+
+  static defaultProperties = {
+    className: "invert-colours"
+  };
+}

package/src/view/div/checkbox/restoreNativeGestures.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import CheckboxDiv from "../../div/checkbox";
+
+export default class RestoreNativeGesturesCheckboxDiv extends CheckboxDiv {
+  changeHandler = (event, element) => {
+    const checkboxChecked = this.isCheckboxChecked();
+
+    checkboxChecked ?
+      controller.restoreNativeGestures() :
+        controller.suppressNativeGestures();
+  }
+
+  parentContext() {
+    const checkRestoreNativeGesturesCheckbox = this.checkCheckbox.bind(this), ///
+          uncheckRestoreNativeGesturesCheckbox = this.uncheckCheckbox.bind(this); ///
+
+    return ({
+      checkRestoreNativeGesturesCheckbox,
+      uncheckRestoreNativeGesturesCheckbox
+    });
+  }
+
+  static message = "Restore native gestures";
+
+  static defaultProperties = {
+    className: "restore-native-gestures"
+  };
+}

package/src/view/div/checkbox.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+
+import Span from "../span";
+import Checkbox from "../checkbox";
+
+import { checkboxDivGap } from "../../styles";
+
+class CheckboxDiv extends Element {
+  childElements() {
+    const { message } = this.constructor;
+
+    return ([
+
+      <Checkbox onChange={this.changeHandler} />,
+      <Span>
+        {message}
+      </Span>
+
+    ]);
+  }
+
+  initialise() {
+    this.assignContext();
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "checkbox"
+  };
+}
+
+export default withStyle(CheckboxDiv)`
+  
+  gap: ${checkboxDivGap};
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  justify-content: flex-start;  
+  
+`;

package/src/view/div/checkboxes.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+import InvertColoursCheckboxDiv from "./checkbox/invertColours";
+import RestoreNativeGesturesCheckboxDiv from "./checkbox/restoreNativeGestures";
+
+import { checkboxesDivGap } from "../../styles";
+
+class CheckboxesDiv extends Element {
+  childElements() {
+    return ([
+
+      <InvertColoursCheckboxDiv/>,
+      <RestoreNativeGesturesCheckboxDiv/>
+
+    ]);
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "checkboxes"
+  };
+}
+
+export default withStyle(CheckboxesDiv)`
+
+  gap: ${checkboxesDivGap};
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: flex-start;
+
+`;

package/src/view/div/leaf.js

@@ -1,24 +1,28 @@
 "use strict";
 
-import { Element } from "easy";
-
 import withStyle from "easy-with-style";  ///
 
-import eventMixins from "../../mixins/event";
-import touchMixins from "../../mixins/touch";
+import { Element } from "easy";
+
+import { BACKGROUND_COLOUR } from "../../constants";
 
 class LeafDiv extends Element {
-  wiggle() {
-    this.removeClass("wiggle");
-    this.addClass("wiggle");
-  }
+  getBackgroundColour() {
+    const backgroundColour = this.css(BACKGROUND_COLOUR) || null;
 
-  didMount() {
-    this.enableTouch();
+    return backgroundColour;
   }
 
-  willUnmount() {
-    this.disableTouch();
+  zoom(zoom) {
+    const width = `${100/zoom}%`,
+          transform = `scale(${zoom})`;
+
+    const css = {
+      width,
+      transform
+    };
+
+    this.css(css);
   }
 
   static tagName = "div";
@@ -28,23 +32,11 @@ class LeafDiv extends Element {
   };
 }
 
-Object.assign(LeafDiv.prototype, eventMixins);
-Object.assign(LeafDiv.prototype, touchMixins);
-
 export default withStyle(LeafDiv)`
 
-  width: 100vw;
-  position: absolute;
-  min-height: 100vh;
-  
-  @keyframes wiggle {
-    0% { transform: translateX(-5px); }
-    50% { transform: translateX(5px); }
-    100% { transform: translateX(-5px); }
-  }
+  width: 100%;
+  min-height: 100%;
+  pointer-events: none;
+  transform-origin: top left;
   
-  .wiggle {
-    animation: wiggle 0.5s ease-in-out 1;
-  }
-
 `;

package/src/view/div/menu.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Element from "../element";
+import ButtonsDiv from "../div/buttons";
+import CheckboxesDiv from "../div/checkboxes";
+
+import { GRID, ZOOM_RATIO } from "../../constants";
+import { borderColour, menuDivPadding, backgroundColour } from "../../styles";
+import { getMenuDivZoom as getZoom, setMenuDivZoom as setZoom } from "../../state";
+
+class MenuDiv extends Element {
+  zoomMenuOut() {
+    let zoom = getZoom();
+
+    zoom /= ZOOM_RATIO;
+
+    setZoom(zoom);
+
+    this.updateZoom();
+  }
+
+  zoomMenuIn() {
+    let zoom = getZoom();
+
+    zoom *= ZOOM_RATIO;
+
+    setZoom(zoom);
+
+    this.updateZoom();
+  }
+
+  updateZoom() {
+    const zoom = getZoom(),
+          width = `${100/zoom}%`,
+          transform = `scale(${zoom})`,
+          css = {
+            width,
+            transform
+          };
+
+    this.css(css);
+  }
+
+  show() {
+    const display = GRID;
+
+    this.display(display);
+  }
+
+  openMenu() {
+    this.show();
+  }
+
+  closeMenu() {
+    this.hide();
+  }
+
+  didMount() {
+    this.updateZoom();
+  }
+
+  willUnmount() {
+    ///
+  }
+
+  childElements() {
+    return ([
+
+      <CheckboxesDiv/>,
+      <ButtonsDiv/>
+
+    ]);
+  }
+
+  parentContext() {
+    const context = this.getContext(),
+          openMenu = this.openMenu.bind(this),
+          closeMenu = this.closeMenu.bind(this),
+          zoomMenuIn = this.zoomMenuIn.bind(this),
+          zoomMenuOut = this.zoomMenuOut.bind(this),
+          updateMenuDivZoom = this.updateZoom.bind(this); ///
+
+    return ({
+      ...context,
+      openMenu,
+      closeMenu,
+      zoomMenuIn,
+      zoomMenuOut,
+      updateMenuDivZoom
+    });
+  }
+
+  initialise() {
+    this.hide();
+  }
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "menu"
+  };
+}
+
+export default withStyle(MenuDiv)`
+
+  left: 0;
+  bottom: 0;
+  display: grid;
+  padding: ${menuDivPadding};
+  position: fixed;
+  border-top: 1px solid ${borderColour};
+  background-color: ${backgroundColour};
+  transform-origin: bottom left;
+  grid-template-rows: auto;
+  grid-template-columns: auto min-content;
+    
+`;