[EPO-973] Support multipe skyviewer widgets.

* Add settings to lasso, circle and rectangle init methods. * `pointsFilter` takes settings. * Remove singleton settings variable. * Incremeent version to 0.2.8. modified: README.md modified: dist/bundle.js modified: examples/circle/dist/app.bundle.js modified: examples/circle/package.json modified: examples/circle/src/app.js modified: examples/circle/webpack.config.js modified: examples/lasso/dist/app.bundle.js modified: examples/lasso/dist/index.html modified: examples/lasso/package.json modified: examples/lasso/src/app.js modified: examples/rectangle/package.json modified: examples/rectangle/src/app.js modified: package.json modified: src/circle.js modified: src/index.js modified: src/lasso.js modified: src/rectangle.js modified: yarn.lock
lsst-epo · Jul 11, 2018 · 90cbf4a · 90cbf4a
1 parent 79f14ec
commit 90cbf4a
Show file tree

Hide file tree

Showing 18 changed files with 40,400 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -23,15 +23,16 @@ To use it, import it and use one of the selection tools.
 ```javascript
 import * as pst from 'paper-select-tool';
 
-var core = document.getElementById('core');
-var project;
+var core = document.getElementById('core'),
+    settings;
 window.onload = function() {
-  pst.lasso(core);
+  settings = Settings();
+  pst.lasso(settings, core);
 }
 // ...
 var things = [{ point: new paper.Point(100, 100),
                 id: 'big bada boom' }];
-var inSelection = pst.hitFilter(things);
+var inSelection = pst.pointsFilter(settings, things);
 // returns the filtered collection of objects with points in the selection.
 ```
 

diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/examples/circle/dist/app.bundle.js b/examples/circle/dist/app.bundle.js
diff --git a/examples/circle/package.json b/examples/circle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-select-tool-circle-example",
-  "version": "0.1.8",
+  "version": "0.2.9",
   "description": "Paper.js based selection tool example.",
   "browser": "./dist/app.bundle.js",
   "main": "./dist/app.bundle.js",
@@ -31,7 +31,7 @@
     "http-server": "^0.11.1",
     "npm": "^6.0.1",
     "paper": "^0.11.5",
-    "paper-select-tool": "^0.1.8"
+    "paper-select-tool": "^0.2.9"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

diff --git a/examples/circle/src/app.js b/examples/circle/src/app.js
@@ -8,5 +8,6 @@ window.onload = function() {
   core.style.width = '100vw';
   core.height = document.body.height;
   core.width = document.body.width;
-  pst.circle(core);
-}
+  var settings = pst.Settings();
+  pst.circle(settings, core);
+};
diff --git a/examples/circle/webpack.config.js b/examples/circle/webpack.config.js
@@ -2,11 +2,11 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    app: './src/app.js'
+    app: './src/app.js',
   },
   output: {
     filename: 'app.bundle.js',
-    path: path.resolve(__dirname, 'dist')
+    path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
@@ -16,13 +16,13 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['env']
-          }
-        }
-      }
-    ]
+            presets: ['env'],
+          },
+        },
+      },
+    ],
   },
   stats: {
-    colors: true
-  }
+    colors: true,
+  },
 };
diff --git a/examples/lasso/dist/app.bundle.js b/examples/lasso/dist/app.bundle.js
diff --git a/examples/lasso/dist/index.html b/examples/lasso/dist/index.html
@@ -4,7 +4,8 @@
      <title>paper-select-tool</title>
    </head>
    <body style="width: 100vw; height: 100vh; margin: 0px;">
-      <canvas id="core"></canvas>
+     <canvas id="core"></canvas>
+     <canvas id="core2"></canvas>
       <script src="app.bundle.js">
       </script>
    </body>

diff --git a/examples/lasso/package.json b/examples/lasso/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-select-tool-lasso-example",
-  "version": "0.1.8",
+  "version": "0.2.9",
   "description": "Paper.js based selection tool example.",
   "browser": "./dist/app.bundle.js",
   "main": "./dist/app.bundle.js",
@@ -31,7 +31,7 @@
     "http-server": "^0.11.1",
     "npm": "^6.0.1",
     "paper": "^0.11.5",
-    "paper-select-tool": "^0.1.8"
+    "paper-select-tool": "^0.2.9"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

diff --git a/examples/lasso/src/app.js b/examples/lasso/src/app.js
@@ -1,14 +1,29 @@
 // or var pst = require('paper-select-tool);
 import * as pst from 'paper-select-tool';
+import * as paper from 'paper';
 
-var core = document.getElementById('core');
+var core = document.getElementById('core'),
+  core2 = document.getElementById('core2');
 
 window.onload = function() {
-  core.style.height = '100%';
+  core.style.background = '#eeeeee';
+  core.style.height = '50%';
   core.style.width = '100vw';
   core.height = document.body.height;
   core.width = document.body.width;
+  core2.style.background = '#dedede';
+  core2.style.height = '50%';
+  core2.style.width = '100vw';
+  core2.height = document.body.height;
+  core2.width = document.body.width;
+  window.paper = paper;
+  var settings = new pst.Settings();
   // configure settings through the pst.settings object.
-  pst.settings.strokeColor = '#08BCBC';
-  pst.lasso(core);
-}
+  settings.strokeColor = '#08BCBC';
+  pst.lasso(settings, core);
+
+  var settings2 = new pst.Settings();
+  // configure settings through the pst.settings object.
+  settings2.strokeColor = '#08BCBC';
+  pst.lasso(settings2, core2);
+};
diff --git a/examples/rectangle/package.json b/examples/rectangle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-select-tool-rectangle-example",
-  "version": "0.1.8",
+  "version": "0.2.9",
   "description": "Paper.js based selection tool example.",
   "browser": "./dist/app.bundle.js",
   "main": "./dist/app.bundle.js",
@@ -31,7 +31,7 @@
     "http-server": "^0.11.1",
     "npm": "^6.0.1",
     "paper": "^0.11.5",
-    "paper-select-tool": "^0.1.8"
+    "paper-select-tool": "^0.2.9"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

diff --git a/examples/rectangle/src/app.js b/examples/rectangle/src/app.js
@@ -8,5 +8,6 @@ window.onload = function() {
   core.style.width = '100vw';
   core.height = document.body.height;
   core.width = document.body.width;
-  pst.rectangle(core);
-}
+  var settings = pst.Settings();
+  pst.rectangle(settings, core);
+};
diff --git a/package.json b/package.json
@@ -1,14 +1,15 @@
 {
   "name": "paper-select-tool",
-  "version": "0.1.8",
+  "version": "0.2.9",
   "description": "Paper.js based selection tool.",
   "browser": "./dist/bundle.js",
   "main": "./dist/bundle.js",
   "module": "./src/index.js",
   "scripts": {
     "start": "http-server",
     "dev": "webpack --mode development",
-    "prettier": "prettier --single-quote --trailing-comma es5 './src/**/*.js' --write",
+      "prettier": "prettier --single-quote --trailing-comma es5 './src/**/*.js' --write",
+      "prettier-examples": "prettier --single-quote --trailing-comma es5 './examples/**/src/*.js' --write",
     "build": "webpack --mode production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

diff --git a/src/circle.js b/src/circle.js
@@ -2,11 +2,10 @@
 
 import * as paper from 'paper';
 
-import { settings } from './index.js';
-
-export default function rectangleInit(canvas) {
+export default function circleInit(settings, canvas) {
   if (!canvas) canvas = document.createElement('canvas');
-  var ps = paper.default.setup(canvas);
+  var ps = new paper.default.PaperScope();
+  ps.setup(canvas);
   settings.scope = ps;
   var path1,
     point1,
@@ -88,7 +87,7 @@ export default function rectangleInit(canvas) {
     path1.fullySelected = true;
   };
 
-  console.debug('Select Cricle Added!');
+  console.debug('Select Circle Added!');
   ps.project.view.draw();
   return ps;
 }
diff --git a/src/index.js b/src/index.js
@@ -9,7 +9,7 @@ export const rectangle = rectangleInit;
 import circleInit from './circle';
 export const circle = circleInit;
 
-class Settings {
+export class Settings {
   constructor() {
     this.alpha = 0.2;
     this.lightness = 0.28;
@@ -66,9 +66,8 @@ class Settings {
     this._strokeColor = strokeColor;
   }
 }
-export let settings = new Settings();
 
-export function pointsFilter(points) {
+export function pointsFilter(settings, points) {
   var hits = [];
   points.forEach(function(p) {
     var h = settings.scope.project.hitTest(p['point']);

diff --git a/src/lasso.js b/src/lasso.js
@@ -2,13 +2,11 @@
 
 import * as paper from 'paper';
 
-import { settings } from './index.js';
-
-export default function lassoInit(canvas) {
+export default function lassoInit(settings, canvas) {
   if (!canvas) canvas = document.createElement('canvas');
-  var ps = paper.default.setup(canvas);
+  var ps = new paper.default.PaperScope();
+  ps.setup(canvas);
   settings.scope = ps;
-
   var path1,
     path2,
     segment,

diff --git a/src/rectangle.js b/src/rectangle.js
@@ -2,13 +2,11 @@
 
 import * as paper from 'paper';
 
-import { settings } from './index.js';
-
-export default function rectangleInit(canvas) {
+export default function rectangleInit(settings, canvas) {
   if (!canvas) canvas = document.createElement('canvas');
-  var ps = paper.default.setup(canvas);
+  var ps = new paper.default.PaperScope();
+  ps.setup(canvas);
   settings.scope = ps;
-
   var path1,
     point1,
     path2,