New annotation tools

Paper.js library was integrated within Mirador. All annotation shapes are rendered within a single canvas (front layer of the OSD). Five drawing tools were implemented: rectangle, circle, polygon, freehand and pin.

.gitignore

@@ -12,3 +12,5 @@ data/ecodices
 data/BnF
 data/Harvard
 build/
+.idea/
+bower_components/

Gruntfile.js

@@ -36,6 +36,8 @@ module.exports = function(grunt) {
     'js/lib/URI.min.js',
     'js/lib/mousetrap.min.js',
     'js/lib/isfahan.js',
+    'js/lib/paper-full.min.js',
+    'js/lib/spectrum.js',
     'js/lib/i18next.min.js'
   ],
 
@@ -94,6 +96,7 @@ module.exports = function(grunt) {
         'css/jquery-ui.custom.min.css',
         'css/layout-default-latest.css',
         'css/jquery.qtip.min.css',
+        'css/spectrum.css',
         'css/mirador.css',
         '!css/mirador-combined.css'
         ],

bower.json

@@ -24,6 +24,8 @@
     "jquery.scrollTo": "~1.4.12",
     "mousetrap": "~1.4.6",
     "URIjs": "https://github.com/medialize/URI.js.git#~1.13.2",
+    "paper": "git://github.com/paperjs/paper.js.git#*",
+    "spectrum": "git://github.com/bgrins/spectrum.git#*",
     "qTip2": "~2.2.1"
   },
   "devDependencies": {

css/mirador.css

@@ -1172,10 +1172,83 @@ li.highlight {
 }
 .mirador-osd-context-controls a {
   float:left;
-  margin:0 15px 0 0;
+  margin:0 10px 0 0;
   font-weight: normal;
 }
 
+/* annotation tools
+---------------------------------------------------------------------------- */
+
+.draw-tool .square {
+  background-position: 0px;
+}
+
+.draw-tool .circle {
+  background-position: -21px;
+}
+
+.draw-tool .freehand {
+  background-position: -42px;
+}
+
+.draw-tool .polygon {
+  background-position: -63px;
+}
+
+.draw-tool .pin {
+  background-position: -84px;
+}
+
+.draw-tool i {
+  background-image: url('../images/tools.png');
+  background-repeat: none;
+  cursor: pointer;
+  display: inline-block;
+  height: 21px;
+  width: 21px;
+  margin: 3px 0 0 0;
+}
+
+/* color picker custom style
+---------------------------------------------------------------------------- */
+
+.sp-button-container a {
+  color: #555555 !important;
+  text-shadow: none !important;
+  margin: 0 0 0 15px !important;
+  text-decoration: none !important;
+  text-decoration-line: underline !important;
+}
+
+.mirador-osd-edit-mode .sp-container {
+  width: 300px !important;
+}
+
+.mirador-osd-edit-mode .sp-preview {
+  height: 10px !important;
+}
+.mirador-osd-edit-mode .sp-dd {
+  height: 6px !important;
+  line-height: 6px !important;
+}
+.mirador-osd-edit-mode .sp-replacer {
+  border-radius: 5px !important;
+}
+
+.borderColorPicker + div {
+  background-image: url('../images/border-color-picker.png');
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  padding-left: 1.5em;
+}
+
+.fillColorPicker + div {
+  background-image: url('../images/fill-color-picker.png');
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  padding-left: 1.5em;
+}
+
 /* image view
 ---------------------------------------------------------------------------- */