danvics/pdfdraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Simplify settings handling to keep current drawer active.

Browse source 
With that better support changing properties of items and restore
previous settings after deselecting.
This commit is contained in:
Joachim Bauch 2021-12-16 14:44:52 +01:00
parent 291d358099
commit 6782c1d233
No known key found for this signature in database
GPG key ID: 77C1D22D53E15F02
1 changed files with 163 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

247
src/pdfdraw.js
View file

@ -130,13 +130,13 @@ Storage.prototype.set = function(key, value) {
this.storage.setItem(this._getKey(key), value); this.storage.setItem(this._getKey(key), value);
}; };
var BaseDrawer = function(annotator, previous_mode) { var BaseDrawer = function(annotator) {
this.annotator = annotator; this.annotator = annotator;
this.previous_mode = previous_mode;
}; };
BaseDrawer.prototype.destroy = function() {}; BaseDrawer.prototype.destroy = function() {};
BaseDrawer.prototype.activate = function(page_annotator) {}; BaseDrawer.prototype.activate = function(page_annotator) {};
BaseDrawer.prototype.updateSettings = function(page_annotator) {};
BaseDrawer.prototype.onMouseDown = function(page_annotator, event) {}; BaseDrawer.prototype.onMouseDown = function(page_annotator, event) {};
BaseDrawer.prototype.onMouseUp = function(page_annotator, event) {}; BaseDrawer.prototype.onMouseUp = function(page_annotator, event) {};
BaseDrawer.prototype.onMouseDrag = function(page_annotator, event) {}; BaseDrawer.prototype.onMouseDrag = function(page_annotator, event) {};
@ -328,6 +328,7 @@ PointerDrawer.prototype.onMouseLeave = function(page_annotator, event) {
var SelectDrawer = function(annotator) { var SelectDrawer = function(annotator) {
BaseDrawer.apply(this, arguments); BaseDrawer.apply(this, arguments);
this.selected_item = null; this.selected_item = null;
this.prev_settings = null;
this.pending_items = {}; this.pending_items = {};
this.send_interval = setInterval(this._sendPending.bind(this), 100); this.send_interval = setInterval(this._sendPending.bind(this), 100);
}; };
@ -342,13 +343,38 @@ SelectDrawer.prototype._select = function(item) {
this.selected_item = item; this.selected_item = item;
this.selected_item.shadowColor = "black"; this.selected_item.shadowColor = "black";
this.selected_item.shadowBlur = 10; this.selected_item.shadowBlur = 10;
var color = item.strokeColor.toCSS(true);
if (item.strokeColor.hasAlpha() && color.length <= 7) {
color += Math.round(item.strokeColor.alpha * 255).toString(16);
}
var settings = {
'color': color,
'strokeWidth': item.strokeWidth,
};
this.prev_settings = this.annotator.updateSettings(settings);
}; };
SelectDrawer.prototype._unselect = function() { SelectDrawer.prototype._unselect = function() {
var reset;
if (this.prev_settings) {
if (this.selected_item) {
reset = {
'strokeColor': this.selected_item.strokeColor,
'strokeWidth': this.selected_item.strokeWidth,
};
}
this.annotator.updateSettings(this.prev_settings);
this.prev_settings = null;
}
if (!this.selected_item) { if (!this.selected_item) {
return; return;
} }
if (reset) {
this.selected_item.strokeColor = reset.strokeColor;
this.selected_item.strokeWidth = reset.strokeWidth;
}
this.selected_item.shadowColor = null; this.selected_item.shadowColor = null;
this.selected_item.shadowBlur = 0; this.selected_item.shadowBlur = 0;
this.selected_item = null; this.selected_item = null;
@ -432,6 +458,10 @@ SelectDrawer.prototype.onItemMoved = function(page_annotator, name, item, event)
event.stopPropagation(); event.stopPropagation();
item.position.x += event.delta.x; item.position.x += event.delta.x;
item.position.y += event.delta.y; item.position.y += event.delta.y;
this.addPendingItem(page_annotator, name, item);
};
SelectDrawer.prototype.addPendingItem = function(page_annotator, name, item) {
if (this.pending_items.hasOwnProperty(name)) { if (this.pending_items.hasOwnProperty(name)) {
this.pending_items[name][0] = page_annotator; this.pending_items[name][0] = page_annotator;
this.pending_items[name][1] = item; this.pending_items[name][1] = item;
@ -440,33 +470,19 @@ SelectDrawer.prototype.onItemMoved = function(page_annotator, name, item, event)
} }
}; };
SelectDrawer.prototype.updateSettings = function() { SelectDrawer.prototype.updateSettings = function(page_annotator) {
if (!this.selected_item) { if (!this.selected_item) {
return; return;
} }
if (this.selected_item.strokeColor === this.annotator.color &&
this.selected_item.strokeWidth === this.annotator.strokeWidth) {
return;
}
this.selected_item.strokeColor = this.annotator.color; this.selected_item.strokeColor = this.annotator.color;
this.selected_item.strokeWidth = this.annotator.strokeWidth; this.selected_item.strokeWidth = this.annotator.strokeWidth;
}; this.addPendingItem(page_annotator, this.selected_item.name, this.selected_item);
var ColorPickerDrawer = function(annotator, previous_mode, selected_item) {
BaseDrawer.apply(this, arguments);
this.selected_item = selected_item;
this.annotator.showSettings();
};
ColorPickerDrawer.prototype = Object.create(BaseDrawer.prototype);
ColorPickerDrawer.prototype.destroy = function() {
this.annotator.hideSettings();
};
ColorPickerDrawer.prototype.onClick = function(page_annotator, event) {
this.annotator.setDrawMode(this.previous_mode);
if (this.selected_item) {
this.annotator.drawer._select(this.selected_item);
this.annotator.drawer.updateSettings();
this.selected_item = null;
}
}; };
var Cursor = function(annotator, userid, radius) { var Cursor = function(annotator, userid, radius) {
@ -570,31 +586,31 @@ var PageAnnotator = function(annotator, pagenum, container, page) {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseDown.apply(this.annotator.drawer, args); this.annotator.e.trigger('mousedown', [args]);
}.bind(this)); }.bind(this));
this.view.on('mouseup', function() { this.view.on('mouseup', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseUp.apply(this.annotator.drawer, args); this.annotator.e.trigger('mouseup', [args]);
}.bind(this)); }.bind(this));
this.view.on('mousedrag', function() { this.view.on('mousedrag', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseDrag.apply(this.annotator.drawer, args); this.annotator.e.trigger('mousedrag', [args]);
}.bind(this)); }.bind(this));
this.view.on('mouseenter', function() { this.view.on('mouseenter', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseEnter.apply(this.annotator.drawer, args); this.annotator.e.trigger('mouseenter', [args]);
}.bind(this)); }.bind(this));
this.view.on('mouseleave', function() { this.view.on('mouseleave', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseLeave.apply(this.annotator.drawer, args); this.annotator.e.trigger('mouseleave', [args]);
}.bind(this)); }.bind(this));
// Sometimes the "mouseleave" event of paper.js doesn't fire when // Sometimes the "mouseleave" event of paper.js doesn't fire when
// switching views, also handle "mouseleave" on the canvas itself // switching views, also handle "mouseleave" on the canvas itself
@ -603,21 +619,21 @@ var PageAnnotator = function(annotator, pagenum, container, page) {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseLeave.apply(this.annotator.drawer, args); this.annotator.e.trigger('mouseleave', [args]);
}.bind(this)); }.bind(this));
this.view.on('mousemove', function() { this.view.on('mousemove', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onMouseMove.apply(this.annotator.drawer, args); this.annotator.e.trigger('mousemove', [args]);
}.bind(this)); }.bind(this));
this.view.on('click', function() { this.view.on('click', function() {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onClick.apply(this.annotator.drawer, args); this.annotator.e.trigger('click', [args]);
}.bind(this)); }.bind(this));
$(window).keyup(function(event) { $(window).on('keyup', function(event) {
if (PageAnnotator.prototype.__active !== this) { if (PageAnnotator.prototype.__active !== this) {
return; return;
} }
@ -625,7 +641,7 @@ var PageAnnotator = function(annotator, pagenum, container, page) {
var args = Array.prototype.slice.call(arguments); var args = Array.prototype.slice.call(arguments);
args.unshift(this); args.unshift(this);
this.activate(); this.activate();
this.annotator.drawer.onKeyUp.apply(this.annotator.drawer, args); this.annotator.e.trigger('keyup', [args]);
}.bind(this)); }.bind(this));
}; };
@ -753,6 +769,7 @@ function parseStrokeWidth(value) {
} }
function Annotator(socketurl, id, userid, displayname, token) { function Annotator(socketurl, id, userid, displayname, token) {
this.e = $({});
this.annotators = {}; this.annotators = {};
this.cursors = {}; this.cursors = {};
this.draw_mode = null; this.draw_mode = null;
@ -812,6 +829,7 @@ function Annotator(socketurl, id, userid, displayname, token) {
this.storage.set('color', this.color); this.storage.set('color', this.color);
$(".modeButton.colorMode, .modeButton.colorMode:focus") $(".modeButton.colorMode, .modeButton.colorMode:focus")
.css("background-color", this.color); .css("background-color", this.color);
this.drawer.updateSettings(PageAnnotator.prototype.__active);
}.bind(this); }.bind(this);
this.colorPicker.on("color:init", setColor); this.colorPicker.on("color:init", setColor);
this.colorPicker.on("color:change", setColor); this.colorPicker.on("color:change", setColor);
@ -822,6 +840,7 @@ function Annotator(socketurl, id, userid, displayname, token) {
var strokeWidth = parseStrokeWidth(e.target.value); var strokeWidth = parseStrokeWidth(e.target.value);
this.storage.set('strokeWidth', strokeWidth); this.storage.set('strokeWidth', strokeWidth);
this.strokeWidth = strokeWidth; this.strokeWidth = strokeWidth;
this.drawer.updateSettings(PageAnnotator.prototype.__active);
}.bind(this)); }.bind(this));
$('#inputStrokeWidth').on('change', function(e) { $('#inputStrokeWidth').on('change', function(e) {
@ -833,14 +852,88 @@ function Annotator(socketurl, id, userid, displayname, token) {
$("#mainContainer").append(this.userlist); $("#mainContainer").append(this.userlist);
this.connectionError = $("#connectionError"); this.connectionError = $("#connectionError");
this.connectingMessage = $("#connectingMessage"); this.connectingMessage = $("#connectingMessage");
this.e.on('mousedown', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseDown.apply(this.drawer, args);
}.bind(this));
this.e.on('mouseup', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseUp.apply(this.drawer, args);
}.bind(this));
this.e.on('mousedrag', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseDrag.apply(this.drawer, args);
}.bind(this));
this.e.on('mouseenter', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseEnter.apply(this.drawer, args);
}.bind(this));
this.e.on('mouseleave', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseLeave.apply(this.drawer, args);
}.bind(this));
this.e.on('mousemove', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onMouseMove.apply(this.drawer, args);
}.bind(this));
this.e.on('keyup', function(event, args) {
if (this.settings_open) {
event.preventDefault();
return;
}
this.drawer.onKeyUp.apply(this.drawer, args);
}.bind(this));
this.e.on('click', function(event, args) {
if (this.settings_open) {
this.drawer.updateSettings(args[0]);
this.toggleSettings();
return;
}
this.drawer.onClick.apply(this.drawer, args);
}.bind(this));
} }
Annotator.prototype.showSettings = function() { Annotator.prototype.updateSettings = function(settings) {
$("#settingsDialog").show(); var prev = {
'color': this.colorPicker.color.hex8String,
'strokeWidth': this.strokeWidth,
};
this.colorPicker.color.hex8String = settings.color;
$('#inputStrokeWidth').val(settings.strokeWidth);
$('#strokeWidthValue').text($('#inputStrokeWidth').val());
return prev;
}; };
Annotator.prototype.hideSettings = function() { Annotator.prototype.toggleSettings = function() {
$("#settingsDialog").hide(); $("#settingsDialog").toggle();
this.settings_open = !this.settings_open;
}; };
Annotator.prototype.onDisconnect = function() { Annotator.prototype.onDisconnect = function() {
@ -1095,52 +1188,7 @@ Annotator.prototype.destroyDrawer = function() {
} }
}; };
Annotator.prototype.updateDrawer = function(previous_mode) {
var selected_item = null;
if (this.drawer && this.drawer instanceof SelectDrawer) {
selected_item = this.drawer.selected_item;
}
this.destroyDrawer();
switch (this.draw_mode) {
case "freehand":
this.drawer = new FreehandDrawer(this, previous_mode);
break;
case "rectangle":
this.drawer = new RectangleDrawer(this, previous_mode);
break;
case "ellipse":
this.drawer = new EllipseDrawer(this, previous_mode);
break;
case "pointer":
this.drawer = new PointerDrawer(this, previous_mode);
break;
case "select":
this.drawer = new SelectDrawer(this, previous_mode);
break;
case "color":
this.drawer = new ColorPickerDrawer(this, previous_mode, selected_item);
break;
case "line":
this.drawer = new LineDrawer(this, previous_mode);
break;
case null:
break;
default:
console.log("Unknown draw mode", this.draw_mode);
return;
}
};
Annotator.prototype.setDrawMode = function(mode) { Annotator.prototype.setDrawMode = function(mode) {
if (this.draw_mode === mode) {
if (mode === "color") {
// Toggle back from color picker.
this.setDrawMode(this.drawer.previous_mode);
}
return;
}
var previous_mode = this.draw_mode;
$(".toolbarButton.selected").removeClass('selected'); $(".toolbarButton.selected").removeClass('selected');
this.draw_mode = mode; this.draw_mode = mode;
$("#" + (mode || "none") + "Mode").addClass('selected'); $("#" + (mode || "none") + "Mode").addClass('selected');
@ -1154,7 +1202,33 @@ Annotator.prototype.setDrawMode = function(mode) {
$("#drawModeToolbar").addClass('selected'); $("#drawModeToolbar").addClass('selected');
break; break;
} }
this.updateDrawer(previous_mode);
this.destroyDrawer();
switch (this.draw_mode) {
case "freehand":
this.drawer = new FreehandDrawer(this);
break;
case "rectangle":
this.drawer = new RectangleDrawer(this);
break;
case "ellipse":
this.drawer = new EllipseDrawer(this);
break;
case "pointer":
this.drawer = new PointerDrawer(this);
break;
case "select":
this.drawer = new SelectDrawer(this);
break;
case "line":
this.drawer = new LineDrawer(this);
break;
case null:
break;
default:
console.log("Unknown draw mode", this.draw_mode);
return;
}
}; };
Annotator.prototype.switchPage = function(pagenum) { Annotator.prototype.switchPage = function(pagenum) {
@ -1424,7 +1498,12 @@ $(document).ready(function() {
$(".modeButton").click(function(event) { $(".modeButton").click(function(event) {
var button = $(event.target); var button = $(event.target);
annotator.setDrawMode(button.data("mode") || null); var mode = button.data("mode") || null;
if (mode === "color") {
annotator.toggleSettings();
} else {
annotator.setDrawMode(mode);
}
}); });
var $btnDrawMode = $(".toolbarButton.drawMode"); var $btnDrawMode = $(".toolbarButton.drawMode");