22096882594

Committed 17 Feb 2026 11:34AM UTC coverage: 26.228% (+0.03%) from 26.203%

Build # 22096882594

Build Type

push

github

Committed by

web-flow

Commit Message

Change mouse pointer when hovering over clickable features, and add a mask when loading (#719)

Run Details

499 of 2409 branches covered (20.71%)

Branch coverage included in aggregate %.

7 of 15 new or added lines in 2 files covered. (46.67%)

1 existing line in 1 file now uncovered.

1476 of 5121 relevant lines covered (28.82%)

1.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

8.4

/app/controller/MapController.js

/**
 * This class is the controller for the map view of cpsi mapview
 *
 */
Ext.define('CpsiMapview.controller.MapController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.cmv_map',

    requires: ['BasiGX.util.Map'],

    mixins: {
        editWindowOpenerMixin: 'CpsiMapview.util.EditWindowOpenerMixin'
    },

    /**
     * A configuration object to store settings relating to opening forms when clicking on a feature.
     * This should be overridden in inherited projects and should be in the following form:
     *
     * {
     *   layerKeyName: {
     *       keyField: 'ObjectId', // the field containing the unique feature Id to open in a form
     *       modelClass: 'CpsiMapview.model.ModelName', // the name of the class used to load a model
     *       editWindowClass: 'CpsiMapview.view.EditWindow' // the name of the form view class to open when clicking on a feature
     *   }
     * }
     *
     * You also use a function to return a configuration object which returns an Id instead of a
     * keyField which allows custom logic to be applied. The function receives a single argument which
     * is the clicked ol.Feature
     * {
     *   layerKeyName: function (feat) {
     *       return {
     *           id: Math.abs(feat.get('ObjectId')), // the unique feature Id to open in a form
     *           modelClass: 'CpsiMapview.model.ModelName', // the name of the class used to load a model
     *           editWindowClass: 'CpsiMapview.view.EditWindow' // the name of the form view class to open when clicking on a feature
     *       }
     *   }
     * }
     *
     * Multiple configurations can be provided to support clicks on multiple layers
     */
    clickableLayerConfigs: {},

    /**
     * Change the mouse cursor to a pointer if hovering over a feature that can be clicked to open a form
     * @param {any} evt
     * @returns
     */
    onPointerMove: function (evt) {
        const me = this;
        const map = me.getView().map;
        // the hover hitTolerance should match the click hitTolerance
        const hitTolerance = me.getView().mapViewConfig.hitTolerance;

        if (evt.dragging) return;
        const hit = map.hasFeatureAtPixel(evt.pixel, {
            hitTolerance: hitTolerance, // add a pixel-buffer
            layerFilter: function (layer) {
                const layerKey = layer.get('layerKey');
                return layerKey && me.clickableLayerConfigs[layerKey];
            }
        });

        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    },

    /**
     * Handle map clicks so data entry forms can be opened by clicking directly
     * on vector features
     * @param {any} clickedFeatures
     */
    onMapClick: function (clickedFeatures) {
        let feat, recId;
        const me = this;

        // Prevent triggering other map events, if we click on the coordinate marker
        const coordinateMousePanel = Ext.ComponentQuery.query(
            'basigx-panel-coordinatemouseposition'
        )[0];
        if (coordinateMousePanel) {
            const coordinateMarker = Ext.Array.findBy(
                clickedFeatures,
                function (clickedFeature) {
                    return coordinateMousePanel.fireEvent(
                        'isMapMarker',
                        clickedFeature.feature
                    );
                }
            );
            if (coordinateMarker) {
                coordinateMousePanel.fireEvent('removeMarker');
                return false;
            }
        }
        // avoid opening the form if another tool is active (see CpsiMapview.util.ApplicationMixin)
        const map = me.getView().map;
        if (map.get('defaultClickEnabled') === false) {
            return;
        }

        // filter out any features without the layer we want
        const editableFeatures = [];

        Ext.each(clickedFeatures, function (f) {
            if (f.layer) {
                const layerKey = f.layer.get('layerKey');
                if (
                    Object.prototype.hasOwnProperty.call(
                        me.clickableLayerConfigs,
                        layerKey
                    )
                ) {
                    editableFeatures.push(f);
                }
            }
        });

        if (editableFeatures.length > 0) {
            const editableFeature = editableFeatures[0].feature; // get the first feature
            const selectedLayerKey = editableFeatures[0].layer.get('layerKey'); // get layer for feature

            const featureCluster = editableFeature.getProperties().features;

            if (featureCluster) {
                feat = featureCluster[0];
            } else {
                feat = editableFeature;
            }

            // get the window and model types
            const selectedLayerConfig =
                me.clickableLayerConfigs[selectedLayerKey];
            let configObject;

            if (typeof selectedLayerConfig === 'function') {
                configObject = selectedLayerConfig(feat) || {};
                recId = configObject.id;
            } else {
                configObject = selectedLayerConfig;
                recId = feat.get(configObject.keyField);
            }

            if (!recId) {
                // return early and stop other map handlers
                return false;
            }

            const modelClass = configObject.modelClass;
            const editWindowClass = configObject.editWindowClass;

            const modelPrototype = Ext.ClassManager.get(modelClass);

            // check if the window is already open
            let win = me.getExistingEditingFormWindow(recId, editWindowClass);

            // if the record is not already opened, create a new window and load the record
            if (win === null) {
                const mainPanel = me.getView().up();
                if (mainPanel && mainPanel.mask) {
                    mainPanel.mask('Loading...');
                }
                modelPrototype.load(recId, {
                    success: function (rec) {
                        win = Ext.create(editWindowClass);
                        const vm = win.getViewModel();
                        vm.set('currentRecord', rec);
                        win.show();
                    },
                    failure: function () {
                        Ext.toast({
                            html: 'Cannot load the record with id ' + recId,
                            title: 'Record Loading Failed',
                            width: 200,
                            align: 'br'
                        });
                    },
                    callback: function () {
                        // remove the mask once loaded
                        if (mainPanel && mainPanel.unmask) {
                            mainPanel.unmask();
                        }
                    }
                });
            } else {
                // if the window is minimised make sure it is restored
                if (win.isMinimized) {
                    win.show();
                }
                Ext.WindowManager.bringToFront(win);
            }

            return false; // stop other map handlers
        }
    },

    /**
     * Function called after render of map component
     */
    afterMapRender: function () {
        const me = this;
        const mapPanel = me.getView();

        if (mapPanel.addScaleBarToMap) {
            const removeCtrls = [];
            // Cleanup existing controls first
            mapPanel.olMap.getControls().forEach(function (ctrl) {
                if (ctrl instanceof ol.control.ScaleLine) {
                    removeCtrls.push(ctrl);
                }
            });
            Ext.each(removeCtrls, function (removeCtrl) {
                mapPanel.olMap.removeControl(removeCtrl);
            });

            const sbTarget =
                mapPanel.body && mapPanel.body.dom
                    ? mapPanel.body.dom
                    : mapPanel.getEl().dom;
            const scaleLineCtrl = new ol.control.ScaleLine({
                target: sbTarget
            });
            mapPanel.olMap.addControl(scaleLineCtrl);
        }
    }
});

1	/**
2	* This class is the controller for the map view of cpsi mapview
3	*
4	*/
5	Ext.define('CpsiMapview.controller.MapController', {	1✔
6	extend: 'Ext.app.ViewController',
7
8	alias: 'controller.cmv_map',
9
10	requires: ['BasiGX.util.Map'],
11
12	mixins: {
13	editWindowOpenerMixin: 'CpsiMapview.util.EditWindowOpenerMixin'
14	},
15
16	/**
17	* A configuration object to store settings relating to opening forms when clicking on a feature.
18	* This should be overridden in inherited projects and should be in the following form:
19	*
20	* {
21	* layerKeyName: {
22	* keyField: 'ObjectId', // the field containing the unique feature Id to open in a form
23	* modelClass: 'CpsiMapview.model.ModelName', // the name of the class used to load a model
24	* editWindowClass: 'CpsiMapview.view.EditWindow' // the name of the form view class to open when clicking on a feature
25	* }
26	* }
27	*
28	* You also use a function to return a configuration object which returns an Id instead of a
29	* keyField which allows custom logic to be applied. The function receives a single argument which
30	* is the clicked ol.Feature
31	* {
32	* layerKeyName: function (feat) {
33	* return {
34	* id: Math.abs(feat.get('ObjectId')), // the unique feature Id to open in a form
35	* modelClass: 'CpsiMapview.model.ModelName', // the name of the class used to load a model
36	* editWindowClass: 'CpsiMapview.view.EditWindow' // the name of the form view class to open when clicking on a feature
37	* }
38	* }
39	* }
40	*
41	* Multiple configurations can be provided to support clicks on multiple layers
42	*/
43	clickableLayerConfigs: {},
44
45	/**
46	* Change the mouse cursor to a pointer if hovering over a feature that can be clicked to open a form
47	* @param {any} evt
48	* @returns
49	*/
50	onPointerMove: function (evt) {
51	const me = this;	2✔
52	const map = me.getView().map;	2✔
53	// the hover hitTolerance should match the click hitTolerance
54	const hitTolerance = me.getView().mapViewConfig.hitTolerance;	2✔
55
56	if (evt.dragging) return;	2!
57	const hit = map.hasFeatureAtPixel(evt.pixel, {	2✔
58	hitTolerance: hitTolerance, // add a pixel-buffer
59	layerFilter: function (layer) {
NEW 60	const layerKey = layer.get('layerKey');	×
NEW 61	return layerKey && me.clickableLayerConfigs[layerKey];	×
62	}
63	});
64
65	map.getTargetElement().style.cursor = hit ? 'pointer' : '';	2✔
66	},
67
68	/**
69	* Handle map clicks so data entry forms can be opened by clicking directly
70	* on vector features
71	* @param {any} clickedFeatures
72	*/
73	onMapClick: function (clickedFeatures) {
74	let feat, recId;
75	const me = this;	×
76
77	// Prevent triggering other map events, if we click on the coordinate marker
78	const coordinateMousePanel = Ext.ComponentQuery.query(	×
79	'basigx-panel-coordinatemouseposition'
80	)[0];
81	if (coordinateMousePanel) {	×
82	const coordinateMarker = Ext.Array.findBy(	×
83	clickedFeatures,
84	function (clickedFeature) {
85	return coordinateMousePanel.fireEvent(	×
86	'isMapMarker',
87	clickedFeature.feature
88	);
89	}
90	);
91	if (coordinateMarker) {	×
92	coordinateMousePanel.fireEvent('removeMarker');	×
93	return false;	×
94	}
95	}
96	// avoid opening the form if another tool is active (see CpsiMapview.util.ApplicationMixin)
97	const map = me.getView().map;	×
98	if (map.get('defaultClickEnabled') === false) {	×
99	return;	×
100	}
101
102	// filter out any features without the layer we want
103	const editableFeatures = [];	×
104
105	Ext.each(clickedFeatures, function (f) {	×
106	if (f.layer) {	×
107	const layerKey = f.layer.get('layerKey');	×
108	if (	×
109	Object.prototype.hasOwnProperty.call(
110	me.clickableLayerConfigs,
111	layerKey
112	)
113	) {
114	editableFeatures.push(f);	×
115	}
116	}
117	});
118
119	if (editableFeatures.length > 0) {	×
120	const editableFeature = editableFeatures[0].feature; // get the first feature	×
121	const selectedLayerKey = editableFeatures[0].layer.get('layerKey'); // get layer for feature	×
122
123	const featureCluster = editableFeature.getProperties().features;	×
124
125	if (featureCluster) {	×
126	feat = featureCluster[0];	×
127	} else {
128	feat = editableFeature;	×
129	}
130
131	// get the window and model types
132	const selectedLayerConfig =
133	me.clickableLayerConfigs[selectedLayerKey];	×
134	let configObject;
135
136	if (typeof selectedLayerConfig === 'function') {	×
137	configObject = selectedLayerConfig(feat) \|\| {};	×
138	recId = configObject.id;	×
139	} else {
140	configObject = selectedLayerConfig;	×
141	recId = feat.get(configObject.keyField);	×
142	}
143
144	if (!recId) {	×
145	// return early and stop other map handlers
146	return false;	×
147	}
148
149	const modelClass = configObject.modelClass;	×
150	const editWindowClass = configObject.editWindowClass;	×
151
152	const modelPrototype = Ext.ClassManager.get(modelClass);	×
153
154	// check if the window is already open
155	let win = me.getExistingEditingFormWindow(recId, editWindowClass);	×
156
157	// if the record is not already opened, create a new window and load the record
158	if (win === null) {	×
NEW 159	const mainPanel = me.getView().up();	×
NEW 160	if (mainPanel && mainPanel.mask) {	×
NEW 161	mainPanel.mask('Loading...');	×
162	}
UNCOV 163	modelPrototype.load(recId, {	×
164	success: function (rec) {
165	win = Ext.create(editWindowClass);	×
166	const vm = win.getViewModel();	×
167	vm.set('currentRecord', rec);	×
168	win.show();	×
169	},
170	failure: function () {
171	Ext.toast({	×
172	html: 'Cannot load the record with id ' + recId,
173	title: 'Record Loading Failed',
174	width: 200,
175	align: 'br'
176	});
177	},
178	callback: function () {
179	// remove the mask once loaded
NEW 180	if (mainPanel && mainPanel.unmask) {	×
NEW 181	mainPanel.unmask();	×
182	}
183	}
184	});
185	} else {
186	// if the window is minimised make sure it is restored
187	if (win.isMinimized) {	×
188	win.show();	×
189	}
190	Ext.WindowManager.bringToFront(win);	×
191	}
192
193	return false; // stop other map handlers	×
194	}
195	},
196
197	/**
198	* Function called after render of map component
199	*/
200	afterMapRender: function () {
201	const me = this;	×
202	const mapPanel = me.getView();	×
203
204	if (mapPanel.addScaleBarToMap) {	×
205	const removeCtrls = [];	×
206	// Cleanup existing controls first
207	mapPanel.olMap.getControls().forEach(function (ctrl) {	×
208	if (ctrl instanceof ol.control.ScaleLine) {	×
209	removeCtrls.push(ctrl);	×
210	}
211	});
212	Ext.each(removeCtrls, function (removeCtrl) {	×
213	mapPanel.olMap.removeControl(removeCtrl);	×
214	});
215
216	const sbTarget =
217	mapPanel.body && mapPanel.body.dom	×
218	? mapPanel.body.dom
219	: mapPanel.getEl().dom;
220	const scaleLineCtrl = new ol.control.ScaleLine({	×
221	target: sbTarget
222	});
223	mapPanel.olMap.addControl(scaleLineCtrl);	×
224	}
225	}
226	});

compassinformatics / cpsi-mapview / 22096882594

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous