Commit 66a94bf7 authored by Robin Tissot's avatar Robin Tissot
Browse files

Merge branch 'develop'

parents 3da7f128 7690886f
......@@ -15,6 +15,14 @@ body {
max-width: 1600px;
}
canvas.resize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* alerts */
#alerts-container {
width: 400px;
......
/*
Baseline editor
a javascript based baseline segmentation editor,
requires paper.js and colorThief is optional.
Usage:
new Segmenter(img);
lengthTreshold=15
disableMasks=false
mainColor
secondaryColor
newLineCallback
updateLineCallback
deleteLineCallback
segmenter.load(lines)
*/
class SegmenterRegion {}
class SegmenterLine {
constructor(baseline, polygon, segmenter_) {
this.segmenter = segmenter_;
this.baseline = baseline;
this.polygon = null;
this.changed = false;
this.selected = false;
var line_ = this; // save in scope
this.polygonPath = new Path({
closed: true,
opacity: 0.1,
fillColor: this.segmenter.mainColor,
visible: this.segmenter.showPolygons,
segments: this.polygon,
onMouseDown: function(event) {
segmenter_.dragging = line_;
segmenter_.draggingPoint = this.getNearestLocation(event.point).segment;
if (event.event.shiftKey) {
line_.toggleSelect();
} else if (!event.event.shiftKey && !event.event.ctrlKey) {
segmenter_.purgeSelection();
line_.select();
} else {
line_.select();
}
}
});
this.baselinePath = new Path({
strokeColor: segmenter_.mainColor,
strokeWidth: 12,
opacity: 0.5,
segments: this.baseline,
selected: false,
visible: (this.segmenter.mode == 'click'),
onMouseDown: function(event) {
line_.segmenter.dragging = line_;
line_.segmenter.draggingPoint = this.getNearestLocation(event.point).segment;
if (event.event.shiftKey) {
line_.toggleSelect();
} else if (!event.event.shiftKey && !event.event.ctrlKey) {
segmenter_.purgeSelection();
line_.select();
} else {
line_.select();
}
var hit = this.hitTest(event.point, {
segments: true,
tolerance: 5
});
if (hit && hit.type=='segment' &&
hit.segment.index != 0 &&
hit.segment.index != hit.segment.path.segments.length-1) {
// right click
line_.segmenter.deletePointBtn.style.left = hit.segment.point.x - 20 + 'px';
line_.segmenter.deletePointBtn.style.top = hit.segment.point.y - 40 + 'px';
line_.segmenter.deletePointBtn.style.display = 'inline';
line_.segmenter.deleting = hit.segment;
} else {
line_.segmenter.deletePointBtn.style.display = 'none';
}
},
onDoubleClick: function(event) {
let location = this.getNearestLocation(event.point);
let newSegment = this.insert(location.index+1, location);
this.smooth({ type: 'catmull-rom', 'factor': 0.5 });
line_.createPolygonEdgeForBaselineSegment(newSegment);
}
});
this.baselinePath.line = this; // necessary for multi selector intersection
this.segmenter.purgeSelection();
}
createPolygonEdgeForBaselineSegment(segment) {
let pt = segment.point;
let upperVector = new Point({ angle: pt.angle - 90, length: 20 });
this.polygonPath.insert(segment.index, pt.add(upperVector));
let lowerVector = new Point({ angle: pt.angle + 90, length: 10 });
this.polygonPath.insert(this.polygonPath.segments.length-segment.index, pt.add(lowerVector));
}
deletePolygonsEdgeForBaselineSegment(segment) {
this.polygonPath.removeSegment(this.polygonPath.segments.length-segment.index-1);
this.polygonPath.removeSegment(segment.index);
}
createPolygon() {
for (let i in this.baselinePath.segments) {
this.createPolygonEdgeForBaselineSegment(this.baselinePath.segments[i]);
}
}
select() {
if (this.selected) return;
if (this.polygonPath && this.polygonPath.visible) this.polygonPath.selected = true;
this.baselinePath.selected = true;
this.baselinePath.strokeColor = this.segmenter.secondaryColor;
this.segmenter.addToSelection(this);
this.selected = true;
}
unselect() {
if (!this.selected) return;
if (this.polygonPath) this.polygonPath.selected = false;
this.baselinePath.selected = false;
this.baselinePath.strokeColor = this.segmenter.mainColor;
if (this.segmenter.deleting && this.segmenter.deleting.path == this.baselinePath) {
this.segmenter.deletePointBtn.style.display = 'none';
}
this.segmenter.removeFromSelection(this);
this.selected = false;
// if (this.changed) {
// // TODO: trigger event or callback
// }
}
toggleSelect() {
if (this.selected) this.unselect();
else this.select();
}
extend(point) {
if (this.baselinePath.length > this.segmenter.lengthThreshold) {
this.baselinePath.visible = true;
}
return this.baselinePath.add(point);
}
close() {
// call when drawing the last point of the line
if (this.segmenter.mode == 'drag') {
this.baselinePath.simplify(12);
}
this.createPolygon();
}
delete() {
this.unselect();
this.segmenter.lines.pop(this.segmenter.lines.indexOf(this));
this.baselinePath.remove();
this.polygonPath.remove();
// TODO: trigger event or callback
}
}
class Segmenter {
constructor(image, {lengthTreshold=15, delayInit=false}) {
this.img = image;
this.canvas = document.createElement('canvas');
this.canvas.className += 'resize';
// insert after..
this.img.parentNode.insertBefore(this.canvas, this.img.nextElementSibling);
this.lines = [];
this.selection = [];
// the minimal length in pixels below which the line will be removed automatically
this.lengthThreshold = lengthTreshold;
this.showPolygons = false;
this.mode = 'drag'; // drag or click
// needed?
this.newLine = null;
this.dragging = null;
this.draggingPoint = null;
this.deleting = null;
this.clip = null; // draw a box for multi selection
this.deletePointBtn = document.getElementById('delete-point');
this.deleteLineBtn = document.getElementById('delete-line');
this.togglePolygonsBtn = document.getElementById('toggle-polygons');
// init paperjs
if (!delayInit) {
this.init();
}
}
init(event) {
paper.install(window);
paper.settings.handleSize = 10;
paper.setup(this.canvas);
var tool = new Tool();
this.getColors(this.img);
this.canvas.addEventListener('contextmenu', function(e) { e.preventDefault(); });
tool.onMouseDown = function(event) {
if (this.mode == 'click' && !event.event.ctrlKey && !event.event.shiftKey) {
if (!this.newLine) {
if (!this.dragging) {
var pt;
this.newLine = this.createLine(event);
pt = this.newLine.extend(event.point);
this.dragging = pt;
this.draggingPoint = pt.point;
}
} else if (this.mode == 'click' &&
(event.event.which === 3 || event.event.button === 2)) {
// right click, end the line
this.newLine.close();
this.newLine = null;
this.dragging = null;
this.draggingPoint = null;
} else {
pt = this.newLine.extend(event.point);
this.dragging = pt;
this.draggingPoint = pt.point;
}
}
if (!this.dragging) {
this.deleting = null;
if (!event.event.shiftKey && !event.event.ctrlKey) {
this.purgeSelection();
}
}
if (!this.deleting) {
this.deletePointBtn.style.display = 'none';
}
}.bind(this);
tool.onMouseMove = function(event) {
if (this.mode == 'click' && this.dragging && this.draggingPoint) {
this.draggingPoint.x += event.delta.x;
this.draggingPoint.y += event.delta.y;
}
}.bind(this);
tool.onMouseDrag = function(event) {
if (this.mode == 'drag' && this.newLine) {
// adding points to current line
var pt = this.newLine.extend(event.point);
this.dragging = pt;
} else if (event.event.ctrlKey) {
// multi move
for (let i in this.selection) {
for(let j in this.selection[i].baselinePath.segments) {
let point = this.selection[i].baselinePath.segments[j].point;
point.x += event.delta.x;
point.y += event.delta.y;
}
}
} else if (event.event.shiftKey) {
// multi lasso selection
if (!this.clip) {
let shape = new Rectangle([event.point.x, event.point.y], [1, 1]);
this.clip = new Path.Rectangle(shape, 0);
this.clip.opacity = 0.3;
this.clip.strokeWidth = 2;
this.clip.strokeColor = 'black';
this.clip.dashArray = [10, 4];
this.clip.originalPoint = event.point;
} else {
this.clip.bounds.width = Math.max(1, Math.abs(this.clip.originalPoint.x - event.point.x));
if (event.point.x > this.clip.originalPoint.x) {
this.clip.bounds.x = this.clip.originalPoint.x;
} else {
this.clip.bounds.x = event.point.x;
}
this.clip.bounds.height = Math.max(1, Math.abs(this.clip.originalPoint.y - event.point.y));
if (event.point.y > this.clip.originalPoint.y) {
this.clip.bounds.y = this.clip.originalPoint.y;
} else {
this.clip.bounds.y = event.point.y;
}
for (let i in this.lines) {
let line = this.lines[i];
if (line.selected) {continue;} // avoid calculs
if (this.clip.intersects(line.baselinePath) ||
line.baselinePath.isInside(this.clip.bounds)) {
line.select();
}
}
}
} else if (this.dragging) {
// move closest point
this.draggingPoint.point.x += event.delta.x;
this.draggingPoint.point.y += event.delta.y;
let poly = this.dragging.polygonPath;
if (poly) {
let top = poly.segments[this.dragging.baselinePath.segments.length*2 -
this.draggingPoint.index - 1].point;
let bottom = poly.segments[this.draggingPoint.index].point;
top.x += event.delta.x;
top.y += event.delta.y;
bottom.x += event.delta.x;
bottom.y += event.delta.y;
}
} else if (event.event.altKey) {
// view.rotate(0.1);
} else if (!this.newLine && this.mode == 'drag') {
this.newLine = this.createLine(event);
}
}.bind(this);
tool.onMouseUp = function(event) {
if (this.mode == 'drag') {
if (this.newLine) {
if (this.newLine.baselinePath.length < this.length_threshold) {
if (DEBUG) console.log('Erasing bogus line of length ' + this.newLine.baselinePath.length);
this.newLine.delete();
}
this.newLine.close();
this.newLine = null;
}
}
if (!this.newLine) {
this.dragging = null;
this.draggingPoint = null;
}
if (this.clip) {
this.clip.remove();
this.clip = null;
}
}.bind(this);
this.deletePointBtn.addEventListener('click', function(event) {
if (this.deleting) {
let line = this.deleting.path.line;
line.deletePolygonsEdgeForBaselineSegment(this.deleting);
this.deleting.remove();
this.deletePointBtn.style.display = 'none';
this.deleting = null;
}
return false;
}.bind(this));
this.deleteLineBtn.addEventListener('click', function(event) {
for (let i=this.selection.length-1; i >= 0; i--) {
this.selection[i].delete();
}
}.bind(this));
this.togglePolygonsBtn.addEventListener('click', function(event) {
this.togglePolygons();
}.bind(this));
document.addEventListener('keyup', function(event) {
if (event.keyCode == 27) { // escape
if (this.newLine) {
this.newLine.delete();
this.newLine = null;
this.dragging = null;
} else {
this.purgeSelection();
}
} else if (event.keyCode == 46) { // supr
for (let i=this.selection.length-1; i >= 0; i--) {
this.selection[i].delete();
}
}
}.bind(this));
}
createLine(event) {
// this.purgeSelection();
var line = new SegmenterLine([event.point], null, this);
this.lines.push(line);
return line;
}
togglePolygons() {
this.showPolygons = !this.showPolygons;
for (let i in this.lines) {
let poly = this.lines[i].polygonPath;
poly.visible = !poly.visible;
// paperjs shows handles for invisible items :(
// TODO: use layers?
if (!poly.visible && poly.selected) poly.selected = false;
if (poly.visible && this.lines[i].selected) poly.selected = true;
}
}
addToSelection(line) {
this.selection.push(line);
this.deleteLineBtn.style.left = line.baselinePath.bounds.topRight.x + 20 + "px";
this.deleteLineBtn.style.top = line.baselinePath.bounds.topRight.y -30 + "px";
this.deleteLineBtn.style.display = 'inline';
}
removeFromSelection(line) {
this.deleteLineBtn.style.display = 'none';
this.selection.pop(this.selection.indexOf(line));
}
purgeSelection() {
for (let i=this.selection.length-1; i >= 0; i--) {
this.selection[i].unselect();
}
this.selection = [];
}
resetViewSize() {
paper.view.viewSize = [this.img.innerWidth(), this.img.innerHeight()];
}
toggleMode() {
this.mode = this.mode=='click'?'drag':'click';
}
load(data) {
// TODO
}
getColors() {
function isGrey_(color) {
return (
Math.abs(color[0] - color[1]) < 30 &&
Math.abs(color[0] - color[2]) < 30 &&
Math.abs(color[1] - color[2]) < 30
);
}
function hasColor_(pal, channel) {
for (let i in pal) {
if (isGrey_(pal[i])) {continue;}
if (pal[i][channel] == Math.max.apply(null, pal[i]) && pal[i][channel] > 100) {
// the channel is dominant in this color
return true;
}
}
return false;
}
function chooseColors(pal, depth=0) {
if (hasColor_(pal, 2)) {
// has blue
if (hasColor_(pal, 0)) {
// has red
if (hasColor_(pal, 1)) {
// has green; the document is quite rich, start again with only the 2 main colors
pal = pal.slice(0, 2);
if (depth < 1) return chooseColors(pal, depth=depth+1);
else return ['blue', 'teal']; // give up
} else {
return ['green', 'yellow'];
}
} else {
return ['red', 'orange'];
}
} else {
return ['blue', 'teal'];
}
}
const rgbToHex = (c) => '#' + [c[0], c[1], c[2]]
.map(x => x.toString(16).padStart(2, '0')).join('');
if (ColorThief !== undefined) {
var colorThief = new ColorThief();
let palette = colorThief.getPalette(this.img, 5);
for (let i in palette) {
let el = document.getElementById('color'+i);
el.style.backgroundColor = rgbToHex(palette[i]);
el.style.padding = '10px';
}
let choices = chooseColors(palette);
this.mainColor = choices[0];
this.secondaryColor = choices[1];
} else {
this.mainColor = 'blue';
this.secondaryColor = 'teal';
}
}
}
/*
* Color Thief v2.0
* by Lokesh Dhakar - http://www.lokeshdhakar.com
*
* Thanks
* ------
* Nick Rabinowitz - For creating quantize.js.
* John Schulz - For clean up and optimization. @JFSIII
* Nathan Spady - For adding drag and drop support to the demo page.
*
* License
* -------
* Copyright 2011, 2015 Lokesh Dhakar
* Released under the MIT license
* https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
*
* @license
*/
var CanvasImage=function(a){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),document.body.appendChild(this.canvas),this.width=this.canvas.width=a.width,this.height=this.canvas.height=a.height,this.context.drawImage(a,0,0,this.width,this.height)};CanvasImage.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},CanvasImage.prototype.update=function(a){this.context.putImageData(a,0,0)},CanvasImage.prototype.getPixelCount=function(){return this.width*this.height},CanvasImage.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)},CanvasImage.prototype.removeCanvas=function(){this.canvas.parentNode.removeChild(this.canvas)};var ColorThief=function(){};/*!
* quantize.js Copyright 2008 Nick Rabinowitz.
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
* @license
*/
/*!
* Block below copied from Protovis: http://mbostock.github.com/protovis/
* Copyright 2010 Stanford Visualization Group
* Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
* @license
*/
if(ColorThief.prototype.getColor=function(a,b){var c=this.getPalette(a,5,b),d=c[0];return d},ColorThief.prototype.getPalette=function(a,b,c){"undefined"==typeof b&&(b=10),("undefined"==typeof c||c<1)&&(c=10);for(var d,e,f,g,h,i=new CanvasImage(a),j=i.getImageData(),k=j.data,l=i.getPixelCount(),m=[],n=0;n<l;n+=c)d=4*n,e=k[d+0],f=k[d+1],g=k[d+2],h=k[d+3],h>=125&&(e>250&&f>250&&g>250||m.push([e,f,g]));var o=MMCQ.quantize(m,b),p=o?o.palette():null;return i.removeCanvas(),p},!pv)var pv={map:function(a,b){var c={};return b?a.map(function(a,d){return c.index=d,b.call(c,a)}):a.slice()},naturalOrder:function(a,b){return a<b?-1:a>b?1:0},sum:function(a,b){var c={};return a.reduce(b?function(a,d,e){return c.index=e,a+b.call(c,d)}:function(a,b){return a+b},0)},max:function(a,b){return Math.max.apply(null,b?pv.map(a,b):a)}};var MMCQ=function(){function a(a,b,c){return(a<<2*i)+(b<<i)+c}function b(a){function b(){c.sort(a),d=!0}var c=[],d=!1;return{push:function(a){c.push(a),d=!1},peek:function(a){return d||b(),void 0===a&&(a=c.length-1),c[a]},pop:function(){return d||b(),c.pop()},size:function(){return c.length},map:function(a){return c.map(a)},debug:function(){return d||b(),c}}}function c(a,b,c,d,e,f,g){var h=this;h.r1=a,h.r2=b,h.g1=c,h.g2=d,h.b1=e,h.b2=f,h.histo=g}function d(){this.vboxes=new b(function(a,b){return pv.naturalOrder(a.vbox.count()*a.vbox.volume(),b.vbox.count()*b.vbox.volume())})}function e(b){var c,d,e,f,g=1<<3*i,h=new Array(g);return b.forEach(function(b){d=b[0]>>j,e=b[1]>>j,f=b[2]>>j,c=a(d,e,f),h[c]=(h[c]||0)+1}),h}function f(a,b){var d,e,f,g=1e6,h=0,i=1e6,k=0,l=1e6,m=0;return a.forEach(function(a){d=a[0]>>j,e=a[1]>>j,f=a[2]>>j,d<g?g=d:d>h&&(h=d),e<i?i=e:e>k&&(k=e),f<l?l=f:f>m&&(m=f)}),new c(g,h,i,k,l,m,b)}function g(b,c){function d(a){var b,d,e,f,g,h=a+"1",j=a+"2",k=0;for(i=c[h];i<=c[j];i++)if(o[i]>n/2){for(e=c.copy(),f=c.copy(),b=i-c[h],d=c[j]-i,g=b<=d?Math.min(c[j]-1,~~(i+d/2)):Math.max(c[h],~~(i-1-b/2));!o[g];)g++;for(k=p[g];!k&&o[g-1];)k=p[--g];return e[j]=g,f[h]=e[j]+1,[e,f]}}if(c.count()){var e=c.r2-c.r1+1,f=c.g2-c.g1+1,g=c.b2-c.b1+1,h=pv.max([e,f,g]);if(1==c.count())return[c.copy()];var i,j,k,l,m,n=0,o=[],p=[];if(h==e)for(i=c.r1;i<=c.r2;i++){for(l=0,j=c.g1;j<=c.g2;j++)for(k=c.b1;k<=c.b2;k++)m=a(i,j,k),l+=b[m]||0;n+=l,o[i]=n}else if(h==f)for(i=c.g1;i<=c.g2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.b1;k<=c.b2;k++)m=a(j,i,k),l+=b[m]||0;n+=l,o[i]=n}else for(i=c.b1;i<=c.b2;i++){for(l=0,j=c.r1;j<=c.r2;j++)for(k=c.g1;k<=c.g2;k++)m=a(j,k,i),l+=b[m]||0;n+=l,o[i]=n}return o.forEach(function(a,b){p[b]=n-a}),d(h==e?"r":h==f?"g":"b")}}function h(a,c){function h(a,b){for(var c,d=1,e=0;e<k;)if(c=a.pop(),c.count()){var f=g(i,c),h=f[0],j=f[1];if(!h)return;if(a.push(h),j&&(a.push(j),d++),d>=b)return;if(e++>k)return}else a.push(c),e++}if(!a.length||c<2||c>256)return!1;var i=e(a),j=0;i.forEach(function(){j++});var m=f(a,i),n=new b(function(a,b){return pv.naturalOrder(a.count(),b.count())});n.push(m),h(n,l*c);for(var o=new b(function(a,b){return pv.naturalOrder(a.count()*a.volume(),b.count()*b.volume())});n.size();)o.push(n.pop());h(o,c-o.size());for(var p=new d;o.size();)p.push(o.pop());return p}var i=5,j=8-i,k=1e3,l=.75;return c.prototype={volume:function(a){var b=this;return b._volume&&!a||(b._volume=(b.r2-b.r1+1)*(b.g2-b.g1+1)*(b.b2-b.b1+1)),b._volume},count:function(b){var c=this,d=c.histo;if(!c._count_set||b){var e,f,g,h=0;for(e=c.r1;e<=c.r2;e++)for(f=c.g1;f<=c.g2;f++)for(g=c.b1;g<=c.b2;g++)index=a(e,f,g),h+=d[index]||0;c._count=h,c._count_set=!0}return c._count},copy:function(){var a=this;return new c(a.r1,a.r2,a.g1,a.g2,a.b1,a.b2,a.histo)},avg:function(b){var c=this,d=c.histo;if(!c._avg||b){var e,f,g,h,j,k=0,l=1<<8-i,m=0,n=0,o=0;for(f=c.r1;f<=c.r2;f++)for(g=c.g1;g<=c.g2;g++)for(h=c.b1;h<=c.b2;h++)j=a(f,g,h),e=d[j]||0,k+=e,m+=e*(f+.5)*l,n+=e*(g+.5)*l,o+=e*(h+.5)*l;k?c._avg=[~~(m/k),~~(n/k),~~(o/k)]:c._avg=[~~(l*(c.r1+c.r2+1)/2),~~(l*(c.g1+c.g2+1)/2),~~(l*(c.b1+c.b2+1)/2)]}return c._avg},contains:function(a){var b=