Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify menu API to add tools at runtime #149

Merged
merged 7 commits into from
Mar 2, 2019
Merged

Simplify menu API to add tools at runtime #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a9c57ff
Fix jshint/karma errors and duplicate code from #100
rexagod Feb 21, 2019
9b7056c
Merge branch 'main' of https://github.com/publiclab/Leaflet.Distortab…
rexagod Feb 22, 2019
c4e2539
menu API abstractions
rexagod Feb 23, 2019
a854f47
add a user-friendly demo example
rexagod Feb 23, 2019
ad52b88
Update index.html
rexagod Feb 23, 2019
3a8a066
window->L.DI and document _demonstrator()
rexagod Mar 1, 2019
7b94926
Rebase
rexagod Mar 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 144 additions & 124 deletions dist/leaflet.distortableimage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,10 +454,11 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
},

initialize: function(url, options) {
this._url = url;
this._rotation = this.options.rotation;
this._toolArray = L.DistortableImage.EditToolbarDefaults;
this._url = url;
this._rotation = this.options.rotation;

L.setOptions(this, options);
L.setOptions(this, options);
},

onAdd: function(map) {
Expand All @@ -473,32 +474,32 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
/* End copied from L.ImageOverlay */

/* Use provided corners if available */
if (this.options.corners) {
this._corners = this.options.corners;
if (this.options.corners) {
this._corners = this.options.corners;
if (map.options.zoomAnimation && L.Browser.any3d) {
map.on('zoomanim', this._animateZoom, this);
}

/* This reset happens before image load; it allows
* us to place the image on the map earlier with
/* This reset happens before image load; it allows
* us to place the image on the map earlier with
* "guessed" dimensions. */
this._reset();
}

/* Have to wait for the image to load because
/* Have to wait for the image to load because
* we need to access its width and height. */
L.DomEvent.on(this._image, 'load', function() {
this._initImageDimensions();
this._reset();
/* Initialize default corners if not already set */
if (!this._corners) {
if (!this._corners) {
if (map.options.zoomAnimation && L.Browser.any3d) {
map.on('zoomanim', this._animateZoom, this);
}
}
}, this);
}, this);

this.fire('add');
this.fire('add');
},

onRemove: function(map) {
Expand All @@ -515,6 +516,15 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
});
},

_addTool: function(tool) {
this._toolArray.push(tool);
L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
options: {
actions: this._toolArray
}
});
},

_initImageDimensions: function() {
var map = this._map,

Expand Down Expand Up @@ -607,7 +617,7 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({

/*
* Calculates the transform string that will be correct *at the end* of zooming.
* Leaflet then generates a CSS3 animation between the current transform and
* Leaflet then generates a CSS3 animation between the current transform and
* future transform which makes the transition appear smooth.
*/
_animateZoom: function(event) {
Expand All @@ -616,16 +626,16 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
latLngToNewLayerPoint = function(latlng) {
return map._latLngToNewLayerPoint(latlng, event.zoom, event.center);
},

transformMatrix = this._calculateProjectiveTransform(latLngToNewLayerPoint),
topLeft = latLngToNewLayerPoint(this._corners[0]),

warp = L.DomUtil.getMatrixString(transformMatrix),
translation = this._getTranslateString(topLeft);

/* See L.DomUtil.setPosition. Mainly for the purposes of L.Draggable. */
image._leaflet_pos = topLeft;

if (!L.Browser.gecko) {
image.style[L.DomUtil.TRANSFORM] = [translation, warp].join(' ');
}
Expand Down Expand Up @@ -655,19 +665,19 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
},

_calculateProjectiveTransform: function(latLngToCartesian) {
/* Setting reasonable but made-up image defaults
* allow us to place images on the map before
/* Setting reasonable but made-up image defaults
* allow us to place images on the map before
* they've finished downloading. */
var offset = latLngToCartesian(this._corners[0]),
w = this._image.offsetWidth || 500,
w = this._image.offsetWidth || 500,
h = this._image.offsetHeight || 375,
c = [],
j;
/* Convert corners to container points (i.e. cartesian coordinates). */
for (j = 0; j < this._corners.length; j++) {
c.push(latLngToCartesian(this._corners[j])._subtract(offset));
}

/*
* This matrix describes the action of the CSS transform on each corner of the image.
* It maps from the coordinate system centered at the upper left corner of the image
Expand All @@ -688,127 +698,137 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
L.DistortableImage = L.DistortableImage || {};

var EditOverlayAction = LeafletToolbar.ToolbarAction.extend({
initialize: function(map, overlay, options) {
this._overlay = overlay;
this._map = map;

LeafletToolbar.ToolbarAction.prototype.initialize.call(this, options);
}
}),
initialize: function(map, overlay, options) {
this._overlay = overlay;
this._map = map;

ToggleTransparency = EditOverlayAction.extend({
options: { toolbarIcon: {
html: '<span class="fa fa-adjust"></span>',
tooltip: 'Toggle Image Transparency',
title: 'Toggle Image Transparency'
}},

addHooks: function() {
var editing = this._overlay.editing;
LeafletToolbar.ToolbarAction.prototype.initialize.call(this, options);
}
}),

ToggleTransparency = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-adjust"></span>',
tooltip: "Toggle Image Transparency",
title: "Toggle Image Transparency"
}
},

editing._toggleTransparency();
this.disable();
}
}),
addHooks: function() {
var editing = this._overlay.editing;

ToggleOutline = EditOverlayAction.extend({
options: { toolbarIcon: {
html: '<span class="fa fa-square-o"></span>',
tooltip: 'Toggle Image Outline',
title: 'Toggle Image Outline'
}},
editing._toggleTransparency();
this.disable();
}
}),

ToggleOutline = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-square-o"></span>',
tooltip: "Toggle Image Outline",
title: "Toggle Image Outline"
}
},

addHooks: function() {
var editing = this._overlay.editing;
addHooks: function() {
var editing = this._overlay.editing;

editing._toggleOutline();
this.disable();
}
}),
editing._toggleOutline();
this.disable();
}
}),

RemoveOverlay = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-trash"></span>',
tooltip: "Delete image",
title: "Delete image"
}
},

RemoveOverlay = EditOverlayAction.extend({
options: { toolbarIcon: {
html: '<span class="fa fa-trash"></span>',
tooltip: 'Delete image',
title: 'Delete image'
}},
addHooks: function() {
var map = this._map;

addHooks: function() {
var map = this._map;
map.removeLayer(this._overlay);
this._overlay.fire("delete");
this.disable();
}
}),

ToggleEditable = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-lock"></span>',
tooltip: "Lock / Unlock editing",
title: "Lock / Unlock editing"
}
},

map.removeLayer(this._overlay);
this._overlay.fire('delete');
this.disable();
}
}),
addHooks: function() {
var editing = this._overlay.editing;

ToggleEditable = EditOverlayAction.extend({
options: { toolbarIcon: {
html: '<span class="fa fa-lock"></span>',
tooltip: 'Lock / Unlock editing',
title: 'Lock / Unlock editing'
}},
editing._toggleLock();
this.disable();
}
}),

addHooks: function() {
var editing = this._overlay.editing;
ToggleRotateDistort = EditOverlayAction.extend({
initialize: function(map, overlay, options) {
var icon = overlay.editing._mode === "rotate" ? "image" : "rotate-left";

editing._toggleLock();
this.disable();
}
}),
options = options || {};
options.toolbarIcon = {
html: '<span class="fa fa-' + icon + '"></span>',
tooltip: "Rotate",
title: "Rotate"
};

ToggleRotateDistort = EditOverlayAction.extend({
initialize: function(map, overlay, options) {
var icon = overlay.editing._mode === 'rotate' ? 'image' : 'rotate-left';
EditOverlayAction.prototype.initialize.call(this, map, overlay, options);
},

options = options || {};
options.toolbarIcon = {
html: '<span class="fa fa-' + icon + '"></span>',
tooltip: 'Rotate',
title: 'Rotate'
};
addHooks: function() {
var editing = this._overlay.editing;

EditOverlayAction.prototype.initialize.call(this, map, overlay, options);
},
editing._toggleRotateDistort();
this.disable();
}
}),

ToggleExport = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-download"></span>',
tooltip: "Export Image",
title: "Export Image"
}
},

addHooks: function() {
var editing = this._overlay.editing;
addHooks: function() {
var editing = this._overlay.editing;

editing._toggleRotateDistort();
this.disable();
}
}),
editing._toggleExport();
this.disable();
}
});

var defaults = [
ToggleTransparency,
RemoveOverlay,
ToggleOutline,
ToggleEditable,
ToggleRotateDistort,
ToggleExport
];

ToggleExport = EditOverlayAction.extend({
options: {
toolbarIcon: {
html: '<span class="fa fa-download"></span>',
tooltip: 'Export Image',
title: 'Export Image'
}
},

addHooks: function ()
{
var editing = this._overlay.editing;

editing._toggleExport();
this.disable();
}
});
L.DistortableImage.EditToolbarDefaults = defaults;

L.DistortableImage.EditToolbar = LeafletToolbar.Popup.extend({
options: {
actions: [
ToggleTransparency,
RemoveOverlay,
ToggleOutline,
ToggleEditable,
ToggleRotateDistort,
ToggleExport
]
}
options: {
actions: defaults
}
});

L.DistortableImage = L.DistortableImage || {};
Expand All @@ -824,8 +844,8 @@ L.DistortableImage.Edit = L.Handler.extend({
76: '_toggleLock', // l
79: '_toggleOutline', // o
82: '_toggleRotateDistort', // r
46: "_removeOverlay", // delete windows / delete + fn mac
8: "_removeOverlay", // backspace windows / delete mac
46: "_removeOverlay", // delete windows / delete + fn mac
8: "_removeOverlay", // backspace windows / delete mac
83: '_toggleScale', // s
84: '_toggleTransparency', // t
20: '_toggleRotate' // CAPS
Expand Down Expand Up @@ -883,7 +903,7 @@ L.DistortableImage.Edit = L.Handler.extend({
'rotateStandalone': this.__rotateHandles
};

if (this._mode === 'lock') {
if (this._mode === 'lock') {
map.addLayer(this._lockHandles);
} else {
this._mode = 'distort';
Expand Down
Loading