This commit is contained in:
JelteMX
2018-02-12 15:32:21 +01:00
parent e9a5feba45
commit 58d1be32ff
9 changed files with 63 additions and 213 deletions

BIN
dist/Leaflet.mpk vendored

Binary file not shown.

View File

@@ -17,7 +17,7 @@
"filesFolder": "widget",
"libraries": false,
"core": false,
"path": "./test/"
"path": "/Volumes/C/Projects/MX/Leaflet/test/"
},
"keywords": [
"widget",
@@ -74,6 +74,7 @@
"leaflet-fullscreen": "^1.0.2",
"leaflet-providers": "^1.1.17",
"leaflet.locatecontrol": "^0.62.0",
"whatwg-fetch": "^2.0.3"
"whatwg-fetch": "^2.0.3",
"widget-base-helpers": "^1.0.14"
}
}

View File

@@ -1,6 +1,4 @@
import { defineWidget } from '@/helpers/widget';
import { log, runCallback } from '@/helpers';
import { execute } from '@/helpers/microflow';
import { defineWidget, log, runCallback, execute } from 'widget-base-helpers';
import template from './Leaflet.template.html';
@@ -20,6 +18,12 @@ import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet.locatecontrol/dist/L.Control.Locate.css';
import 'leaflet.locatecontrol/dist/L.Control.Locate.mapbox.css';
// The following code will be stripped with our webpack loader and should only be used if you plan on doing styling
/* develblock:start */
import loadcss from 'loadcss';
loadcss(`/widgets/Leaflet/widget/ui/Leaflet.css`);
/* develblock:end */
Leaflet.Icon.Default.imagePath = window.require.toUrl('Leaflet/widget/ui/').split('?')[ 0 ];
export default defineWidget('Leaflet', template, {
@@ -36,45 +40,45 @@ export default defineWidget('Leaflet', template, {
lowestZoom: 10,
updateRefresh: false,
mapEntity: "",
xpathConstraint: "",
markerDisplayAttr: "",
latAttr: "",
lngAttr: "",
markerCategory: "",
onClickMarkerMf: "",
mapEntity: '',
xpathConstraint: '',
markerDisplayAttr: '',
latAttr: '',
lngAttr: '',
markerCategory: '',
onClickMarkerMf: '',
mapHeight: "",
mapWidth: "",
markerTemplate: "<p>{Marker}</p>",
markerDefaultImage: "",
markerImageAttr: "",
mapHeight: '',
mapWidth: '',
markerTemplate: '<p>{Marker}</p>',
markerDefaultImage: '',
markerImageAttr: '',
markerImages: [],
mapType: "OpenStreetMap_Mapnik",
mapType: 'OpenStreetMap_Mapnik',
customMapType: false,
customMapTypeUrl: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
customMapTypOptions: "{subdomains:'abc'}",
customMapTypeUrl: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
customMapTypOptions: '{subdomains:\'abc\'}',
controlDragging: true,
controlTouchZoom: true,
controlScrollWheelZoom: true,
controlZoomControl: true,
controlZoomControlPosition: "topleft",
controlZoomControlPosition: 'topleft',
controlAttribution: true,
controlAttributionPosition: "bottomright",
controlAttributionPosition: 'bottomright',
controlFullscreen: false,
controlFullscreenPosition: "topright",
controlFullscreenPosition: 'topright',
controlCategories: false,
controlCategoriesPosition: "topright",
controlCategoriesPosition: 'topright',
locateControl: false,
locateControlPosition: "topleft",
locateControlPosition: 'topleft',
locateControlDrawCircle: true,
locateControlKeepZoomLevel: false,
scaleControl: false,
scaleControlPosition: "bottomleft",
scaleControlPosition: 'bottomleft',
scaleControlMetric: true,
scaleControlImperial: true,
scaleControlMaxWidth: 100,
@@ -163,16 +167,16 @@ export default defineWidget('Leaflet', template, {
try {
options = JSON.parse(this.customMapTypeOptions);
} catch (e) {
console.warn(this.id + "._getMapLayer error parsing Custom Map Options: " + e.toString() + ", not using these options");
console.warn(this.id + '._getMapLayer error parsing Custom Map Options: ' + e.toString() + ', not using these options');
options = {};
}
}
tileLayer = Leaflet.tileLayer(this.customMapTypeUrl, options);
} else {
const providerName = this.mapType.replace(/_/g, ".");
const providerName = this.mapType.replace(/_/g, '.');
if (0 === providerName.indexOf("HERE")) {
if (0 === providerName.indexOf('HERE')) {
if ('' !== this.hereAppId && '' !== this.hereAppCode) {
tileLayer = Leaflet.tileLayer.provider(providerName, {
app_id: this.hereAppId, // eslint-disable-line camelcase
@@ -181,7 +185,7 @@ export default defineWidget('Leaflet', template, {
} else {
console.error(`${this.id} for HERE maps you need to provide a valid app ID and key.
Get one: http://developer.here.com/`);
tileLayer = Leaflet.tileLayer.provider("OpenStreetMap.Mapnik");
tileLayer = Leaflet.tileLayer.provider('OpenStreetMap.Mapnik');
}
} else {
tileLayer = Leaflet.tileLayer.provider(providerName);
@@ -210,9 +214,9 @@ Get one: http://developer.here.com/`);
width: this.mapWidth,
});
this.mapContainer.id = this.id + "_container";
this.mapContainer.id = this.id + '_container';
this._map = Leaflet.map(this.id + "_container", {
this._map = Leaflet.map(this.id + '_container', {
dragging: this.controlDragging,
touchZoom: this.controlTouchZoom,
scrollWheelZoom: this.controlScrollWheelZoom,
@@ -249,8 +253,8 @@ Get one: http://developer.here.com/`);
position: this.locateControlPosition,
drawCircle: this.locateControlDrawCircle,
keepCurrentZoomLevel: this.locateControlKeepZoomLevel,
icon: "glyphicon glyphicon-screenshot", // Using glyphicons that are part of Mendix
iconLoading: "glyphicon glyphicon-refresh",
icon: 'glyphicon glyphicon-screenshot', // Using glyphicons that are part of Mendix
iconLoading: 'glyphicon glyphicon-refresh',
}).addTo(this._map);
}
@@ -345,7 +349,7 @@ Get one: http://developer.here.com/`);
if (!this.controlCategories) {
return;
}
logger.debug(this.id + "._updateLayerControls");
logger.debug(this.id + '._updateLayerControls');
if (this._map) {
if (this._layerController) {
@@ -360,7 +364,7 @@ Get one: http://developer.here.com/`);
.keys(this._layerCategoryGroups)
.forEach(key => {
add = true;
layerCategoryGroups[ key.replace("_" + this.id, "") ] = this._layerCategoryGroups[ key ];
layerCategoryGroups[ key.replace('_' + this.id, '') ] = this._layerCategoryGroups[ key ];
});
if (add) {
@@ -402,7 +406,7 @@ Get one: http://developer.here.com/`);
} else {
const la = this.checkAttrForDecimal(obj, this.latAttr);
const lo = this.checkAttrForDecimal(obj, this.lngAttr);
logger.error(this.id + ": " + "Incorrect coordinates (" + la + "," + lo + ")");
logger.error(this.id + ': ' + 'Incorrect coordinates (' + la + ',' + lo + ')');
}
});
@@ -413,27 +417,27 @@ Get one: http://developer.here.com/`);
this._map.fitBounds(positions);
}
runCallback.call(this, callback, "_refreshMap");
runCallback.call(this, callback, '_refreshMap');
},
_fetchFromDB(callback) {
this.log('_fetchFromDB');
let xpath = "//" + this.mapEntity + this.xpathConstraint;
let xpath = '//' + this.mapEntity + this.xpathConstraint;
this._removeAllMarkers();
if (this._contextObj) {
xpath = xpath.replace("[%CurrentObject%]", this._contextObj.getGuid());
xpath = xpath.replace('[%CurrentObject%]', this._contextObj.getGuid());
mx.data.get({
xpath: xpath,
callback: objs => {
this._refreshMap(objs, callback);
},
});
} else if (!this._contextObj && -1 < xpath.indexOf("[%CurrentObject%]")) {
console.warn("No context for xpath, not fetching.");
runCallback.call(this, callback, "_fetchFromDB");
} else if (!this._contextObj && -1 < xpath.indexOf('[%CurrentObject%]')) {
console.warn('No context for xpath, not fetching.');
runCallback.call(this, callback, '_fetchFromDB');
} else {
mx.data.get({
xpath: xpath,
@@ -472,7 +476,7 @@ Get one: http://developer.here.com/`);
if (!cached) {
this._fetchFromDB(callback);
} else {
runCallback.call(this, callback, "_fetchFromCache");
runCallback.call(this, callback, '_fetchFromCache');
}
},
@@ -509,16 +513,16 @@ Get one: http://developer.here.com/`);
}
if ('' !== this.onClickMarkerMf) {
marker.on("click", () => {
console.log(this, obj, obj.getGuid());
marker.on('click', () => {
// console.log(this, obj, obj.getGuid());
execute.call(this, this.onClickMarkerMf, obj.getGuid());
});
}
if (this.markerDisplayAttr) {
const markerTemplate = '' !== this.markerTemplate ?
this.markerTemplate.replace("{Marker}", obj.get(this.markerDisplayAttr)) :
"<p>" + obj.get(this.markerDisplayAttr) + "<p/>";
this.markerTemplate.replace('{Marker}', obj.get(this.markerDisplayAttr)) :
'<p>' + obj.get(this.markerDisplayAttr) + '<p/>';
marker.bindPopup(markerTemplate, {
closeButton: false,
@@ -528,9 +532,9 @@ Get one: http://developer.here.com/`);
if (this.markerCategory && this.controlCategories) {
const category = obj.get(this.markerCategory);
if (category) {
let layerCategory = this._layerCategoryGroups[ category + "_" + this.id ];
let layerCategory = this._layerCategoryGroups[ category + '_' + this.id ];
if (!layerCategory) {
layerCategory = this._layerCategoryGroups[ category + "_" + this.id ] = new Leaflet.layerGroup();
layerCategory = this._layerCategoryGroups[ category + '_' + this.id ] = new Leaflet.layerGroup();
this._layerGroup.addLayer(layerCategory);
}
layerCategory.addLayer(marker);
@@ -599,12 +603,12 @@ Get one: http://developer.here.com/`);
if (this._contextObj) {
objs = [ this._contextObj ];
} else {
logger.error(this.id + "._goToContext: no Context object while you have set" +
" \"Pan to context\" in the Modeler! Showing default position");
logger.error(this.id + '._goToContext: no Context object while you have set' +
' \'Pan to context\' in the Modeler! Showing default position');
}
this._refreshMap(objs, callback);
} else {
runCallback.call(this, callback, "_goToContext");
runCallback.call(this, callback, '_goToContext');
}
},

View File

@@ -1,3 +0,0 @@
.widget {
background: #CCC;
}

View File

@@ -1,17 +0,0 @@
import Promise from 'dojo/promise/Promise';
export const getData = params => new Promise((resolve, reject) => {
mx.data.get({
params,
callback: resolve,
error: reject,
});
});
export const fetchAttr = (obj, attr) => new Promise((resolve, reject) => {
try {
obj.fetch(attr, val => resolve(val));
} catch (e) {
reject(e);
}
});

View File

@@ -1,26 +0,0 @@
/*eslint no-invalid-this: 0*/
/**
* Logs using the Mendix logger
*
* @export
* @param {string} methodName
* @param {...any} args
*/
export function log(methodName, ...args) {
logger.debug(`${this.id}.${methodName}`, args.length ? args[ 0 ] : '');
}
/**
* Runs a callback and logs the method where it comes from
*
* @export
* @param {() => {}} cb
* @param {string} from
*/
export function runCallback(cb, from) {
log.call(this, '_callback', from ? `from ${from}` : '');
if (cb && 'function' === typeof cb) {
cb();
}
}

View File

@@ -1,44 +0,0 @@
/*eslint no-invalid-this: 0*/
import lang from 'dojo/_base/lang';
import { log } from '@/helpers';
export function execute(microflow, guid, cb, errCb) {
if (microflow) {
log.call(this, 'execute microflow', `microflow: ${microflow}:${guid}`);
const action = {
params: {
applyto: 'selection',
guids: [],
actionname: microflow,
},
callback: lang.hitch(this, objs => {
if (cb && 'function' == typeof cb) {
cb(objs);
}
}),
error: lang.hitch(this, error => {
if (errCb && 'function' == typeof errCb) {
errCb(error);
} else {
mx.ui.error(`Error executing microflow ${microflow} : ${error.message}`);
console.error(this.id + "._execMf", error);
}
}),
};
if (guid) {
action.params.guids = [guid];
}
if (!mx.version || mx.version && 7 > parseInt(mx.version.split(".")[ 0 ], 10)) {
action.store = {
caller: this.mxform,
};
} else {
action.origin = this.mxform;
}
mx.data.action(action, this);
}
}

View File

@@ -1,39 +0,0 @@
import declare from 'dojoBaseDeclare';
import widgetBase from 'widgetBase';
import templateMixin from 'dijit/_TemplatedMixin';
const { packageName, version, widgetFolder } = config;
/**
* Defines a widget. Use this when you have multiple sub widgets. For a single widget this might be overkill
*
* @export
* @param {string} id
* @param {string} template
* @param {{}}} obj
* @param {any} base
* @returns
*/
export function defineWidget(id, template, obj, base) {
const widgetObj = obj;
widgetObj._WIDGET_VERSION = version;
const mixins = [];
if ('undefined' !== typeof base) {
if (null !== base) {
mixins.push(base);
}
} else {
mixins.push(widgetBase);
}
if (template) {
mixins.push(templateMixin);
}
if ('boolean' !== typeof template){
widgetObj.templateString = template;
}
return declare(`${packageName}.${widgetFolder}.${id}`, mixins, widgetObj);
}

View File

@@ -117,7 +117,10 @@ const webpackConfig = {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: [
path.resolve(__dirname, 'src'),
path.resolve('node_modules', 'widget-base-helpers')
],
loader: [
'babel-loader',
'eslint-loader'
@@ -137,35 +140,7 @@ const webpackConfig = {
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: [
'url-loader?limit=10000',
{
loader: 'img-loader',
options: {
// enabled: process.env.NODE_ENV === 'production',
gifsicle: {
interlaced: false
},
mozjpeg: {
progressive: true,
arithmetic: false
},
optipng: true, // disabled
pngquant: {
floyd: 0.5,
speed: 2
},
svgo: {
plugins: [
{
removeTitle: true
},
{
convertPathData: false
}
]
}
}
}
'url-loader'
]
}
]
@@ -223,4 +198,3 @@ if (env !== 'production') {
}
module.exports = webpackConfig;