photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P5-2992 - Fix ruler length for canvas image on edge

Browse Source
This commit is contained in:
Anders Gustafsson
2018-08-20 10:22:06 +02:00
parent e563435ae5
commit c38533a1b4
3 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js
Vendored
+25 -9
View File
@@ -703,7 +703,9 @@ var DragHandle = function (handler) {
}; };
this.init = function () { this.init = function () {
var viewportData = this.getCanvas().getViewport().getData(); var viewport = this.getCanvas().getViewport();
var viewportData = viewport.getData();
var frameHandler = viewport.getFrameHandler();
var tracks = handler.getTracks(); var tracks = handler.getTracks();
if (this.__handles) { if (this.__handles) {
@@ -711,9 +713,15 @@ var DragHandle = function (handler) {
this.getCanvas().remove(this.__handles.y); this.getCanvas().remove(this.__handles.y);
} }
var frameWidth = frameHandler.getFrameSize();
var frameType = frameHandler.getFrameType();
var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width;
var handleHeight = frameType == 'image' ? viewportData.height - frameWidth * 2 : viewportData.height;
this.__handles = { this.__handles = {
x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width), x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth),
y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height) y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
}; };
this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords(); this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
@@ -952,6 +960,7 @@ var config = require('./config');
function FrameHandler(viewport) { function FrameHandler(viewport) {
var _frames; var _frames;
var _frameType = viewport.canvas.__canvasFrameType; var _frameType = viewport.canvas.__canvasFrameType;
var _frameSize;
function getFramesAsArray() { function getFramesAsArray() {
return [ return [
@@ -990,6 +999,10 @@ function FrameHandler(viewport) {
return _frameType; return _frameType;
}; };
this.getFrameSize = function() {
return _frameSize;
};
this.setVisible = function (isVisible) { this.setVisible = function (isVisible) {
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible; isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
@@ -1018,6 +1031,7 @@ function FrameHandler(viewport) {
} }
if (frameType === 'none') { if (frameType === 'none') {
viewport.canvas.getDragbars().apply();
return this.setVisible(false); return this.setVisible(false);
} }
@@ -1028,23 +1042,25 @@ function FrameHandler(viewport) {
}); });
var vpData = viewport.getData(); var vpData = viewport.getData();
var frameSize = 29; var realFrameSize = 29; // Actual real life frame size width in mm.
if (vpData.dim.units === 'inch') { if (vpData.dim.units === 'inch') {
frameSize /= 2.54; realFrameSize /= 2.54;
} }
_frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
_frames.top.height = _frames.top.height =
_frames.bottom.height = _frames.bottom.height =
_frames.right.width = _frames.right.width =
_frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX; _frames.left.width = _frameSize;
_frames.top.width = _frames.bottom.width = vpData.width; _frames.top.width = _frames.bottom.width = vpData.width;
_frames.right.height = _frames.left.height = vpData.height; _frames.right.height = _frames.left.height = vpData.height;
if (frameType === 'image') { if (frameType === 'image') {
_frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2; _frames.top.width -= _frameSize * 2;
_frames.bottom.width = _frames.top.width; _frames.bottom.width = _frames.top.width;
_frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2; _frames.right.height -= _frameSize * 2;
_frames.left.height = _frames.right.height; _frames.left.height = _frames.right.height;
_frames.top.set({ _frames.top.set({
@@ -1079,7 +1095,7 @@ function FrameHandler(viewport) {
left: (bounds.left - _frames.left.width) + 1 left: (bounds.left - _frames.left.width) + 1
}).centerV().setCoords(); }).centerV().setCoords();
} }
viewport.canvas.getDragbars().apply();
viewport.canvas.renderAll(); viewport.canvas.renderAll();
return this; return this;
src/DragHandle.js
+11 -3
View File
@@ -97,7 +97,9 @@ var DragHandle = function (handler) {
}; };
this.init = function () { this.init = function () {
var viewportData = this.getCanvas().getViewport().getData(); var viewport = this.getCanvas().getViewport();
var viewportData = viewport.getData();
var frameHandler = viewport.getFrameHandler();
var tracks = handler.getTracks(); var tracks = handler.getTracks();
if (this.__handles) { if (this.__handles) {
@@ -105,9 +107,15 @@ var DragHandle = function (handler) {
this.getCanvas().remove(this.__handles.y); this.getCanvas().remove(this.__handles.y);
} }
var frameWidth = frameHandler.getFrameSize();
var frameType = frameHandler.getFrameType();
var handleWidth = frameType == 'image' ? viewportData.width - frameWidth * 2 : viewportData.width;
var handleHeight = frameType == 'image' ? viewportData.height - frameWidth * 2 : viewportData.height;
this.__handles = { this.__handles = {
x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, viewportData.width), x: getRect(viewportData.dim.width + ' ' + viewportData.dim.units, handleWidth),
y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, viewportData.height) y: getRect(viewportData.dim.height + ' ' + viewportData.dim.units, handleHeight)
}; };
this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords(); this.__handles.x.addTo(this.getCanvas()).centerH().set({ top: tracks.x.top }).setCoords();
src/FrameHandler.js
+14 -6
View File
@@ -6,6 +6,7 @@ var config = require('./config');
function FrameHandler(viewport) { function FrameHandler(viewport) {
var _frames; var _frames;
var _frameType = viewport.canvas.__canvasFrameType; var _frameType = viewport.canvas.__canvasFrameType;
var _frameSize;
function getFramesAsArray() { function getFramesAsArray() {
return [ return [
@@ -44,6 +45,10 @@ function FrameHandler(viewport) {
return _frameType; return _frameType;
}; };
this.getFrameSize = function() {
return _frameSize;
};
this.setVisible = function (isVisible) { this.setVisible = function (isVisible) {
isVisible = typeof isVisible === 'undefined' ? true : !!isVisible; isVisible = typeof isVisible === 'undefined' ? true : !!isVisible;
@@ -72,6 +77,7 @@ function FrameHandler(viewport) {
} }
if (frameType === 'none') { if (frameType === 'none') {
viewport.canvas.getDragbars().apply();
return this.setVisible(false); return this.setVisible(false);
} }
@@ -82,23 +88,25 @@ function FrameHandler(viewport) {
}); });
var vpData = viewport.getData(); var vpData = viewport.getData();
var frameSize = 29; var realFrameSize = 29; // Actual real life frame size width in mm.
if (vpData.dim.units === 'inch') { if (vpData.dim.units === 'inch') {
frameSize /= 2.54; realFrameSize /= 2.54;
} }
_frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
_frames.top.height = _frames.top.height =
_frames.bottom.height = _frames.bottom.height =
_frames.right.width = _frames.right.width =
_frames.left.width = vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX; _frames.left.width = _frameSize;
_frames.top.width = _frames.bottom.width = vpData.width; _frames.top.width = _frames.bottom.width = vpData.width;
_frames.right.height = _frames.left.height = vpData.height; _frames.right.height = _frames.left.height = vpData.height;
if (frameType === 'image') { if (frameType === 'image') {
_frames.top.width -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2; _frames.top.width -= _frameSize * 2;
_frames.bottom.width = _frames.top.width; _frames.bottom.width = _frames.top.width;
_frames.right.height -= (vpData.ppmm * frameSize * viewport.canvas.getImage().scaleX) * 2; _frames.right.height -= _frameSize * 2;
_frames.left.height = _frames.right.height; _frames.left.height = _frames.right.height;
_frames.top.set({ _frames.top.set({
@@ -133,7 +141,7 @@ function FrameHandler(viewport) {
left: (bounds.left - _frames.left.width) + 1 left: (bounds.left - _frames.left.width) + 1
}).centerV().setCoords(); }).centerV().setCoords();
} }
viewport.canvas.getDragbars().apply();
viewport.canvas.renderAll(); viewport.canvas.renderAll();
return this; return this;