mechanic-map 0.14.0 → 0.15.0

package/README.md

@@ -0,0 +1,447 @@
+# Mechanic Map SDK
+
+## Setup
+
+```sh
+node -v # v12.x.x
+```
+
+```js
+// Initialize MechanicMap
+
+const svgMapParams = {
+  id: "x-map", // map id - required
+  developer: false, // developer mode | default = false
+  rotate: 0, // map rotation
+  height: 800, // viewport height
+  maxScale: 2,
+  textOnRect: { // location text configs
+    enabled: true,
+    maxFontSize: 96,
+    minFontSize: 12,
+    fontFamily: "sans-serif",
+    mode: "dynamic",
+  },
+  animation: {
+    mode: "line",
+  },
+  stackMode: false,
+  data: { // map data - required
+    mapWidth: 4000,// map (svg) width - required
+    mapHeight: 3000,// map (svg) height - required
+    levels: [], // required - required
+    nodes: [], // required for SP
+    paths: [], // required for SP 
+  }
+}
+
+(MechanicMap && MechanicMap.default)($);
+const $svgMap = $("#svg-map"); // map container
+const map = $svgMap.svgMap(svgMapParams).data("svg-map");
+
+```
+
+
+## Parameters
+
+### Store Names (textOnRect)
+```js
+// defaults
+const svgMapParams = {
+  textOnRect: true
+  // if textOnRect=true when;
+  // textOnRect: {
+  //   enabled: true,
+  //   fontFamily: 'sans-serif',
+  //   fontSize: 24,
+  //   maxFontSize: 32,
+  //   minFontSize: 16,
+  //   mode: 'dynamic',
+  // }
+};
+
+// static
+const svgMapParams = {
+  textOnRect: {
+    maxFontSize: 48,
+    minFontSize: 1,
+    mode: 'static'
+  }
+};
+
+
+// dynamic
+const svgMapParams = {
+  textOnRect: {
+    maxFontSize: 48,
+    minFontSize: 1,
+    mode: 'dynamic'
+  }
+};
+```
+
+
+### Tooltip
+```js
+// defaults
+const svgMapParams = {
+  tooltip: {
+    enabled: true,
+    navigation: false,
+    detail: false,
+  },
+}
+
+// add navigation text
+const svgMapParams = {
+  tooltip: {
+    enabled: true,
+    navigation: {
+      text: "Navigate Here"
+      // listener of navigationClicked
+    },
+  },
+}
+
+// add navigation text
+const svgMapParams = {
+  tooltip: {
+    enabled: true,
+    detail: {
+      text: "Go To Details"
+      // listener of detailClicked
+    },
+  },
+}
+
+```
+
+### Location Pin
+```js
+const svgMapParams = {
+  // ... others
+  data: {
+    // ... others
+    landmark: {
+      id: 'K1_store_301',
+      zoom: false, // default
+      duraction: 1.2 // default (seconds)
+    }
+  }
+}
+```
+
+### Animation Modes
+```js
+const svgMapParams = {
+  // ... others
+  animation: {
+    // ... others
+    mode: "line" // "line", "dot", "arrow", "foot", "feet"
+  }
+}
+
+// look in styles
+```
+
+### Animation Speed
+```js
+const svgMapParams = {
+  // ... others
+  animation: {
+    // ... others
+    speedFactor: 8,
+    frequencyFactor: 8,
+  }
+}
+```
+
+### Stack Mode
+```js
+const svgMapParams = {
+  // ... others
+  cssAnimation: true, // If this value is false, it will cause tooltip errors.
+  stackMode: {
+    enabled: true,
+    offset: 10, // distance between floors 
+    switchFloorTime: 5 * SECOND
+  },
+}
+```
+
+## Listeners
+
+### Selected Location (store)
+```js
+$svgMap.on("locationOpened", function (event, location) {
+  console.log("on:locationOpened", location);
+});
+```
+
+### Selected Location (service)
+```js
+$svgMap.on("serviceLocationOpened", function (event, location) {
+  console.log("on:serviceLocationOpened", location);
+});
+```
+
+### Level Switched
+```js
+$svgMap.on("switchLevel", function (event, selectedLevelId, selectedLevelNo) {
+  console.log("on:switchLevel", selectedLevelId, selectedLevelNo);
+});
+```
+
+### Navigation Clicked (tooltip navigation button)
+```js
+$svgMap.on("navigationClicked", function (event, locationId) {
+  console.log("on:navigationClicked", locationId);
+});
+```
+
+### Detail Clicked (tooltip detail button)
+```js
+$svgMap.on("detailClicked", function (event, locationId) {
+  console.log("on:detailClicked", locationId);
+});
+```
+
+### Close Clicked (tooltip close button)
+```js
+$svgMap.on("closeClicked", function (event, locationId) {
+  console.log("on:closeClicked", locationId);
+});
+```
+
+### Navigation
+With this listener, you can: What floor am I on? Am I on the floor where navigation begins? Am I on the last floor? Is there a next floor?
+```js
+$svgMap.on('navigation', function(event, { current, isFirst, isLast, next }) {
+  console.log('on:navigation', current, isFirst, isLast, next);
+});
+```
+
+## Functions
+
+
+### Calculate SP Navigation
+This function can be used with kiosk data
+```js
+/*
+levels, paths and nodes required this function...
+const svgMapParameters = {
+  // ... others
+  data: {
+    // ... others
+    levels: [], // required - required
+    nodes: [], // required for SP
+    paths: [], // required for SP 
+  }
+}
+ */
+
+// start_location, end_location, routeType = 'auto' | 'p' | 'd'
+// p = pedestrian, d = disabled
+const sp = map.calculateSP('K0_kiosk_01', 'K1_store_50', 'p');
+
+if (sp.length) {
+  map.showNavigation(sp, true, true, true);
+} else {
+  // No suitable directions found
+}
+```
+
+
+### Start Navigation
+```js
+// navigationDetails, autoMode = true, zoomEnabled = true, showPins = true
+// navigationDetails = sp function data
+map.showNavigation(sp, true, true, true);
+```
+
+
+### Stop Navigation
+```js
+// ?reset map zoom = default true
+map.closeNavigation(true);
+```
+
+
+### Restart Navigation (run with last startNavigation function parameters)
+```js
+map.restartNavigation();
+```
+
+### Update Localized Texts
+```js
+map.updateLocalized({
+  floorText: '',
+  navigationText: '',
+  detailText: '',
+  closeText: ''
+});
+```
+
+### Show All Floors on Stack Mode 
+```js
+map.stackMode();
+```
+
+## styles
+```css
+text {
+  fill: #fff;
+}
+
+/* Tooltip */
+.svg-map-tooltip {
+  background-color: #233b49;
+  /*background-color: #828486;*/
+}
+
+.svg-map-tooltip-triangle {
+  border-color: #272727 transparent transparent transparent;
+}
+
+.svg-map-tooltip-title {
+  color: #f2f2f2;
+}
+
+a.svg-map-tooltip-navigation-button {
+  background: #288a13;
+  color: #fff;
+}
+
+a.svg-map-tooltip-detail-button {
+  background: #3f3e8a;
+  color: #fff;
+}
+
+/* INTERACTIVE ELEMENTS */
+
+/* clickable elements */
+.svg-map-not-clickable:not(g),
+g.svg-map-not-clickable > * {
+  fill: #000000;
+}
+
+/* order is important */
+/* all stores */
+g#stores > * {
+  stroke: none;
+  fill: #3486ac;
+}
+
+/* store default colors */
+g:not(#services) .svg-map-clickable:not(g),
+g:not(#services) g.svg-map-clickable > * {
+  fill: #0794d9;
+  stroke-width: 1px;
+}
+
+/* hovered stores */
+g:not(#services) .svg-map-clickable:not(g):hover,
+g:not(#services) g.svg-map-clickable:hover > * {
+  fill: #94ccff;
+  stroke: #94ccff;
+}
+
+/* selected store */
+g:not(#services) .svg-map-clickable.svg-map-active:not(g),
+g:not(#services) g.svg-map-clickable.svg-map-active > * {
+  fill: aqua;
+  stroke: aqua;
+}
+
+@keyframes navigation-fill-start {
+  0% {
+    fill: #208F27;
+    stroke: #208F27;
+  }
+  50% {
+    fill: #42A047;
+    stroke: rgba(66, 160, 71, 0.8);
+    /*fill: #ff0013;*/
+  }
+  100% {
+    fill: #208F27;
+    stroke: #208F27;
+  }
+}
+
+/* active navigate - target color animation */
+@keyframes navigation-fill-end {
+  0% {
+
+  }
+  50% {
+    fill: #0794d9;
+    stroke: #0794d9;
+  }
+  100% {
+  }
+}
+
+/*
+------ services -----
+*/
+/* service default colors */
+g:not(#stores) .svg-map-clickable:not(g),
+g:not(#stores) g.svg-map-clickable > * {
+  fill: #ff7c11;
+  stroke-width: 1px;
+}
+
+/* hovered service */
+g#services .svg-map-clickable:not(g):hover,
+g#services g.svg-map-clickable:hover > * {
+  fill: #ffa965;
+}
+
+/* selected service animation */
+@keyframes navigation-fill-services {
+  0% {
+    fill: #ffa965;
+    stroke: #ffa965;
+
+  }
+  50% {
+    fill: #ff7c11;
+    stroke: #ff7c11;
+  }
+  100% {
+    fill: #ffa965;
+    stroke: #ffa965;
+  }
+}
+
+/*
+------ navigation animation ------
+*/
+
+/*
+------ animation type = dot ------
+*/
+a.circle.walking {
+  background-color: #2cc197;
+}
+
+a.circle.walking.with-pulse:before {
+  border: 2px solid #2cc197;
+}
+
+/*
+------ animation type = line ------
+*/
+@keyframes navigation-line-animation {
+  0% {
+    stroke: #2cc197;
+  }
+  50% {
+    stroke: #8C3753;
+  }
+  100% {
+    stroke: #2cc197;
+  }
+}
+```

package/dist/css/color.css

@@ -1,154 +1,155 @@
+text {
+  fill: #fff;
+}
+
 /* Tooltip */
 .svg-map-tooltip {
-    background-color: #272727;
-    /*background-color: #828486;*/
+  background-color: #233b49;
+  /*background-color: #828486;*/
 }
 
 .svg-map-tooltip-triangle {
-    border-color: #272727 transparent transparent transparent;
-    /*border-color: #828486 transparent transparent transparent;*/
+  border-color: #272727 transparent transparent transparent;
+}
+
+.svg-map-tooltip-title {
+  color: #f2f2f2;
+}
+
+a.svg-map-tooltip-navigation-button {
+  background: #288a13;
+  color: #fff;
+}
+
+a.svg-map-tooltip-detail-button {
+  background: #3f3e8a;
+  color: #fff;
 }
 
 /* INTERACTIVE ELEMENTS */
+
 /* clickable elements */
 .svg-map-not-clickable:not(g),
 g.svg-map-not-clickable > * {
-    /*fill: #7b8c94 !important;*/
+  fill: #11bf14;
 }
 
-.svg-map-not-clickable.svg-map-active:not(g),
-g.svg-map-not-clickable.svg-map-active > * {
-    /*fill: #b62025 !important;*/
+/* order is important */
+/* all stores */
+g#stores > * {
+  stroke: none;
+  fill: #3486ac;
 }
 
+/* store default colors */
 g:not(#services) .svg-map-clickable:not(g),
 g:not(#services) g.svg-map-clickable > * {
-    /*fill: #466777 !important;*/
+  fill: #0794d9;
+  stroke-width: 1px;
 }
 
-/* hovered elements */
+/* hovered stores */
 g:not(#services) .svg-map-clickable:not(g):hover,
 g:not(#services) g.svg-map-clickable:hover > * {
-    /*fill: #466777 !important;*/
-    fill: #3f2f32 !important;
+  fill: #94ccff;
+  stroke: #94ccff;
 }
 
+/* selected store */
 g:not(#services) .svg-map-clickable.svg-map-active:not(g),
 g:not(#services) g.svg-map-clickable.svg-map-active > * {
-    /*fill: #b62025 !important;*/
-    fill: #3F2B2F !important;
-}
-
-g:not(#services) .svg-map-clickable.svg-map-active.svg-map-navigation-start:not(g),
-g:not(#services) g.svg-map-clickable.svg-map-active.svg-map-navigation-start > * {
-    /*fill: #466777 !important;*/
-}
-
-g:not(#services) .svg-map-clickable.svg-map-active.svg-map-navigation-end:not(g),
-g:not(#services) g.svg-map-clickable.svg-map-active.svg-map-navigation-end> * {
-    /*fill: #466777 !important;*/
-}
-
-/* hovered elements SERVICE */
-g#services .svg-map-clickable:not(g):hover,
-g#services g.svg-map-clickable:hover > * {
-    /*fill: #466777 !important;*/
-    /*fill: #3f2f32 !important;*/
-}
-
-g#services .svg-map-clickable.svg-map-active:not(g),
-g#services g.svg-map-clickable.svg-map-active > * {
-    /*fill: #b62025 !important;*/
-    animation: navigation-fill-services 2s infinite;
-}
-
-.navigation-line-animation {
-    /*fill: #b62025 !important;*/
-    animation: navigation-line-animation 2s infinite;
-}
-
-
-@keyframes navigation-line-animation {
-    0% {
-        stroke: #4df750;
-    }
-    50% {
-        stroke: #206220;
-    }
-    100% {
-        stroke: #4df750;
-    }
+  fill: aqua;
+  stroke: aqua;
 }
 
 @keyframes navigation-fill-start {
-    0% {
-        fill: #466777;
-        /*fill: #828486;*/
-    }
-    50% {
-        fill: #42A047;
-        /*fill: #3F2B2F;*/
-    }
-    100% {
-        fill: #466777;
-        /*fill: #828486;*/
-    }
-}
-
+  0% {
+    fill: #208F27;
+    stroke: #208F27;
+  }
+  50% {
+    fill: #42A047;
+    stroke: rgba(66, 160, 71, 0.8);
+    /*fill: #ff0013;*/
+  }
+  100% {
+    fill: #208F27;
+    stroke: #208F27;
+  }
+}
+
+/* active navigate - target color animation */
 @keyframes navigation-fill-end {
-    0% {
-        fill: #466777;
-        /*fill: #828486;*/
-    }
-    50% {
-        fill: #b62025;
-        /*fill: #3F2B2F;*/
-    }
-    100% {
-        fill: #466777;
-        /*fill: #828486;*/
-    }
-}
+  0% {
 
-@keyframes navigation-fill-services {
-    0% {
-        fill: #EDEDED;
-    }
-    50% {
-        /*fill: #b62025;*/
-        fill: rgba(63,43,47, 0.8);
-    }
-    100% {
-        fill: #EDEDED;
-    }
+  }
+  50% {
+    fill: #0794d9;
+    stroke: #0794d9;
+  }
+  100% {
+  }
 }
 
-g#stores > path {
-    /*stroke: none;*/
-    /*fill: #7b8c94;*/
+/*
+------ services -----
+*/
+/* service default colors */
+g:not(#stores) .svg-map-clickable:not(g),
+g:not(#stores) g.svg-map-clickable > * {
+  fill: #ff7c11;
+  stroke-width: 1px;
 }
 
-g#shadow > path {
-    /*stroke: none;*/
-    /*fill: #424242;*/
-}
-
-g[id^=text] > text {
-    /*fill: #fff;*/
+/* hovered service */
+g#services .svg-map-clickable:not(g):hover,
+g#services g.svg-map-clickable:hover > * {
+  fill: #ffa965;
 }
 
+/* selected service animation */
+@keyframes navigation-fill-services {
+  0% {
+    fill: #ffa965;
+    stroke: #ffa965;
+
+  }
+  50% {
+    fill: #ff7c11;
+    stroke: #ff7c11;
+  }
+  100% {
+    fill: #ffa965;
+    stroke: #ffa965;
+  }
+}
+
+/*
+------ navigation animation ------
+*/
+
+/*
+------ animation type = dot ------
+*/
 a.circle.walking {
-    background-color: #8C3753;
-    /*background-color: #3F2B2F;*/
+  background-color: #2cc197;
 }
 
 a.circle.walking.with-pulse:before {
-    border: 2px solid #8C3753;
-    /*border: 2px solid #3F2B2F;*/
+  border: 2px solid #2cc197;
 }
 
-/* category coloring here */
-g:not(#services) .svg-map-clickable.CATEGORY-SLUG-HERE:not(g),
-g:not(#services) g.svg-map-clickable.CATEGORY-SLUG-HERE > * {
-    fill: #466777 !important;
-}
+/*
+------ animation type = line ------
+*/
+@keyframes navigation-line-animation {
+  0% {
+    stroke: #2cc197;
+  }
+  50% {
+    stroke: #8C3753;
+  }
+  100% {
+    stroke: #2cc197;
+  }
+}