forked from publiclab/Leaflet.DistortableImage
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* bug _cornerExceedsMapLats, set positive values * inici OpacitiesAction * actualitzar projecte * afegir carpeta node_modules * intentar carregar llibreries * carregar leaflet desde CDN * afegir icona Opacities * posar icona opacities a la barra * afegir icona opacities, correcció de bugs i rebuild * canvi icona Opacities * probar el sub-menu * sub-menu test 1 * sub-menu test 2 * sub-menu test 3 * sub-menu test 4 * sub-menu test 5 * sub-menu test 6 * sub-menu test 7 * sub-menu test 8 * sub-menu test 9 * sub-menu test 10 * sub-menu test 11 * sub-menu test 12 * sub-menu test 13 * sub-menu test 14 * sub-menu test 15 * sub-menu test 16 * sub-menu test 17 * sub-menu test 18 * sub-menu test 19 * sub-menu test 20 * sub-menu test 21 * sub-menu test 22 * sub-menu test 23 * sub-menu test 24 * sub-menu test 25 * sub-menu test 26 * sub-menu test 26 * sub-menu test 27 * sub-menu test 28 * sub-menu test 29 * sub-menu test 30 * sub-menu test 31 * sub-menu test 32 * sub-menu test 33 * sub-menu test 34 * sub-menu test 35 * sub-menu test 36 * sub-menu test 37 * sub-menu final test, pending a few know issues * correct Opacities icon, incorrect change when OpacityAction is fired * add comment in OpacitiesAction * correct undesired values in opacities array * millorar aplicació dels style al sub-toolbar * ajust css text sub-toolbar * ajust css text sub-toolbar * bug event propagation increase sub-toolbar z-index * re-build after merge for Opacities activation * bug barra colorize mal activada * cleaning * rebuild * afegir icones * The Opacities action has been moved up, above the toolbar * correct some mistakes * correct vertical displacement * re-build * incliude CSS overwrites * correct _opacity assignement after opacities change * mini bug * correct custom CSSStyleSheet * run build * rebuild * Remove CDN in examples * final * update & compile --------- Co-authored-by: themacboy <[email protected]> Co-authored-by: Jeffrey Warren <[email protected]>
- Loading branch information
3 people
authored
Feb 7, 2023
1 parent
8cca752
commit 9472b3f
Showing
18 changed files
with
611 additions
and
8,420 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| let opacities = [100, 80, 60, 40, 20, 0]; // Set numeric values from 0 to 100. | ||
|
|
||
| // Add custom CSS scripts and overwrites. Pending for better implementation of CSSStyleSheet in browsers. | ||
| const subtoolbarCss = new CSSStyleSheet(); | ||
| subtoolbarCss.replaceSync( | ||
| `.leaflet-toolbar-icon-vertical { | ||
| box-sizing: border-box !important; | ||
| display: block !important; | ||
| width: 30px !important; | ||
| height: 30px !important; | ||
| line-height: 30px !important; | ||
| padding: 0 !important; | ||
| text-align: center !important; | ||
| text-decoration: none !important; | ||
| background-color: #fff; | ||
| border: inset 0.5px lightgray !important; | ||
| font-size: 12px !important; | ||
| font-weight: bold !important; | ||
| color:#0087A8 !important; | ||
| float: none !important; | ||
| margin: auto !important; | ||
| z-index:900 !important; | ||
| } | ||
| ` | ||
| ); | ||
|
|
||
| subtoolbarCss.insertRule( | ||
| `.leaflet-toolbar-1 li:first-child a { | ||
| border-radius: 4px 4px 0px 0px !important; | ||
| }` | ||
| ); | ||
| document.adoptedStyleSheets = [subtoolbarCss]; | ||
|
|
||
| opacities = opacities.map((o) => { | ||
| (isNaN(o) || o > 100) ? o = 100 : o; | ||
| (o < 0) ? o = 0 : o; | ||
|
|
||
| return L.EditAction.extend({ | ||
| options: { | ||
| toolbarIcon: { | ||
| html: o, | ||
| tooltip: 'Opacity ' + o +'%', | ||
| className: 'leaflet-toolbar-icon-vertical', | ||
| style: 'background-color:rgb(' + (100 - o) + '%,' + (100 - o) + '%,' + (100 - o) + '%);', | ||
| }, | ||
| }, | ||
| addHooks() { | ||
| this._overlay.editing._setOpacities(o/100); | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| L.OpacitiesToolbar2 = L.Toolbar2.extend({ | ||
| options: { | ||
| className: '', | ||
| filter: function() { return true; }, | ||
| actions: [], | ||
| style: `translate(-1px, -${ ((opacities.length + 1) * 30)}px)`, | ||
| }, | ||
|
|
||
| appendToContainer(container) { | ||
| let baseClass = this.constructor.baseClass + '-' + this._calculateDepth(); | ||
| let className = baseClass + ' ' + this.options.className; | ||
| let Action; let action; | ||
| let i; let j; let l; let m; | ||
|
|
||
| this._container = container; | ||
| this._ul = L.DomUtil.create('ul', className, container); | ||
| this._ul.style.transform = ( this.options.style ) ? this.options.style : ''; | ||
|
|
||
| // Ensure that clicks, drags, etc. don't bubble up to the map. | ||
| // These are the map events that the L.Draw.Polyline handler listens for. | ||
| // Note that L.Draw.Polyline listens to 'mouseup', not 'mousedown', but | ||
| // if only 'mouseup' is silenced, then the map gets stuck in a halfway | ||
| // state because it receives a 'mousedown' event and is waiting for the | ||
| // corresponding 'mouseup' event. | ||
| this._disabledEvents = [ | ||
| 'click', 'mousemove', 'dblclick', | ||
| 'mousedown', 'mouseup', 'touchstart', | ||
| ]; | ||
|
|
||
| for (j = 0, m = this._disabledEvents.length; j < m; j++) { | ||
| L.DomEvent.on(this._ul, this._disabledEvents[j], L.DomEvent.stopPropagation); | ||
| } | ||
|
|
||
| /* Instantiate each toolbar action and add its corresponding toolbar icon. */ | ||
| for (i = 0, l = this.options.actions.length; i < l; i++) { | ||
| Action = this._getActionConstructor(this.options.actions[i]); | ||
|
|
||
| action = new Action(); | ||
| action._createIcon(this, this._ul, this._arguments); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
|
|
||
| L.OpacitiesAction = L.EditAction.extend({ | ||
| initialize(map, overlay, options) { | ||
| const edit = overlay.editing; | ||
| const mode = edit._mode; | ||
|
|
||
| options = options || {}; | ||
| options.toolbarIcon = { | ||
| svg: true, | ||
| html: 'opacities', | ||
| tooltip: 'Set custom opacity', | ||
| className: mode === 'lock' ? 'disabled' : '', | ||
| }; | ||
|
|
||
| options.subToolbar = new L.OpacitiesToolbar2({ | ||
| actions: opacities, | ||
| }); | ||
|
|
||
| L.DistortableImage.action_map.o = mode === 'lock' ? '' : '_setOpacities'; | ||
|
|
||
| L.EditAction.prototype.initialize.call(this, map, overlay, options); | ||
| }, | ||
|
|
||
| addHooks() { | ||
| const link = this._link; | ||
| if (L.DomUtil.hasClass(link, 'subtoolbar_enabled')) { | ||
| L.DomUtil.removeClass(link, 'subtoolbar_enabled'); | ||
| setTimeout(() => { | ||
| this.options.subToolbar._hide(); | ||
| }, 100); | ||
| } else { | ||
| L.DomUtil.addClass(link, 'subtoolbar_enabled'); | ||
| }; | ||
|
|
||
| L.IconUtil.toggleXlink(link, 'opacities', 'cancel'); | ||
| L.IconUtil.toggleTitle(link, 'Make Image Transparent', 'Cancel'); | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.