Merge branch 'hotfix/1.2.2'

CHANGELOG.md

@@ -1,35 +1,39 @@
-# Changelog
+## Changelog
 
-v1.1.6
+# v1.2.2
+- fix bug with configure not getting called results in error
+- added multiple instances to example for illustation
+
+# v1.1.6
 - Fix css away from using transform: scale due to weird behavior
 
-v1.1.5
+# v1.1.5
 - Expose overwrite options for kConfig values
 - Update README
 - Update Webpack dev for devServer goodies
 
-v1.1.4
+# v1.1.4
 - UMD
 - github pages update
 
-v1.1.3
+# v1.1.3
 - forgot to bundle
 
-v1.1.2
+# v1.1.2
 - ff css transition has different behavior - looks bad.  replace ff with separate animation effect
 
-v1.1.1
+# v1.1.1
 - forgot to bundle build
 
-v1.1.0
+# v1.1.0
 - modularize d3
 
-v1.0.2
+# v1.0.2
 - moved d3 to modular libraries
 
-v1.0.1
+# v1.0.1
 - fix webpack dev builds to not need expliticly set to window
 - added reDrawMarker method
 
-v1.0.0
+# v1.0.0
 - initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skycatch/model-trainer-image-marker",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Reusuable module for easy visual machine learning context training",
   "main": "index.js",
   "webpack": "index.js",

sandbox/example.css

@@ -6,6 +6,9 @@ body {
 body .relative {
   position: relative;
 }
+body .inline {
+  display: inline-block;
+}
 body .float-right {
   position: absolute;
   top: 20px;

sandbox/example.js

@@ -1,5 +1,7 @@
 'use strict';
 const d3Target = '#system';
+const d3Target2 = '#system2';
+const d3Target3 = '#system3';
 
 /*******************************************************************/
 /* This is the entry point for the implentation if your library    */
@@ -10,6 +12,17 @@ const d3Target = '#system';
 const ModelTrainerImageMarker = window['@skycatch/model-trainer-image-marker'];
 
 const internals = {};
+internals.CanvasSystem = [];
+internals.iconColors = ['white', 'red', 'blue'];
+
+internals.guid = () => {
+  const s4 = () => {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
 
 const imageRequest = new Request('https://source.unsplash.com/random');
 
@@ -20,16 +33,25 @@ fetch(imageRequest)
 })
 .then((url) => {
 
+  initialize(d3Target, url);
+  initialize(d3Target2, url);
+  initialize(d3Target3, url);
+});
+
+const initialize = (el, url) => {
   const img = new Image();
+  el = el.split('#').pop();
+
   img.onload = () => {
 
-    internals.CanvasSystem = new ModelTrainerImageMarker('cpId-1');
+    internals.CanvasSystem[el] = new ModelTrainerImageMarker('cpId-'+internals.guid());
     // To specify the marker - pass reference to xlink:href
     // Available Options: { targetIcon, scaleMin, scaleMax, scaleLocateZoom, markerSize, markerShadowSize }
-    internals.CanvasSystem.configure({
-      targetIcon: '#target-white'
-    })
-    internals.CanvasSystem.boot(img, 'imgId-1', d3Target, null, null, {
+    internals.CanvasSystem[el].configure({
+      targetIcon: '#target-'+internals.iconColors[Math.floor(Math.random() * internals.iconColors.length)]
+    });
+
+    internals.CanvasSystem[el].boot(img, 'imgId-'+internals.guid(), '#'+el, null, null, {
       onReady: onReady.bind(this),
       onMark: onMarked.bind(this),
       onMarkClick: onMarkerClicked.bind(this),
@@ -43,7 +65,7 @@ fetch(imageRequest)
   }
 
   img.src = Math.random() > .1 ? url : 'https://media.giphy.com/media/l0IyayMlfXiWKTJCM/giphy.gif';
-});
+}
 
 /// Application Events
 
@@ -79,27 +101,31 @@ const onZoomToCP = (data) => {
 
 /// Application Modifiers
 
-const resetZoom = () => {
+const resetZoom = (el) => {
 
-  if (internals.CanvasSystem) { internals.CanvasSystem.resetZoom(750); }
+  if (internals.CanvasSystem[el]) { internals.CanvasSystem[el].resetZoom(750); }
 };
 
-const zoomControlPoint = () => {
+const zoomControlPoint = (el) => {
 
-  if (internals.CanvasSystem) { internals.CanvasSystem.findCP(1500); }
+  if (internals.CanvasSystem[el]) { internals.CanvasSystem[el].findCP(1500); }
 };
 
-const clearMarker = () => {
+const clearMarker = (el) => {
 
-  if (internals.CanvasSystem) { internals.CanvasSystem.clearMarker(); }
+  if (internals.CanvasSystem[el]) { internals.CanvasSystem[el].clearMarker(); }
 };
 
-const redrawIcon = () => {
+const redrawIcon = (el) => {
 
-  if (internals.CanvasSystem) { internals.CanvasSystem.reDrawMarker(); }
+  if (internals.CanvasSystem[el]) { internals.CanvasSystem[el].reDrawMarker(); }
 }
 
 window.onresize = function(event) {
 
-  if (internals.CanvasSystem) { internals.CanvasSystem.resetDimentions(event); }
+  if (internals.CanvasSystem) {
+    internals.CanvasSystem.forEach((el) => {
+      internals.CanvasSystem[el].resetDimentions(event);
+    })
+  }
 };

src/assets/scss/lib/_default.scss

@@ -1,4 +1,4 @@
-svg#system {
+svg.mtim_system {
   width: 100%;
   display: block;
   margin: 0.5em auto;
@@ -11,13 +11,20 @@ svg#system {
       transform-origin: center center;
     }
 
-    use.control-point + circle.shadow,
-    circle.control-point + circle.shadow {
+    use.control-point + circle.shadow {
       fill: #ccc;
       opacity: 0;
       transform-origin: center;
       animation: svg-circle-fade-gradual 0.4s linear 1;
     }
+
+    circle.control-point + circle.shadow {
+      fill: #ccc;
+      opacity: 1;
+      transform-origin: center;
+      animation: svg-circle-fade 0.4s linear 1;
+    }
+
     circle.control-point-static {
       fill: #ccc;
       cursor: pointer;

src/lib/index.js

@@ -61,6 +61,7 @@ class ModelTrainerImageMarker {
     this.target = target;
     this.imgId = imgId;
     this.cartesianSystem = d3.select(`svg${this.target}`);
+    this.cartesianSystem.attr('class', 'mtim_system');
 
     this._init();
   }
@@ -375,6 +376,7 @@ class ModelTrainerImageMarker {
   // Initialize System
   _init () {
 
+    this.configure();
     // X Scaling Behavior
     this.xScale = d3.scaleLinear()
       .domain([-1,  this.img.width + 1])