Make modals offset more from the top.

Fixes #123

Add support for InvokeURL command parameters. This completes InvokeURL command support

Fixes #25

RELEASE_NOTES.md

@@ -9,6 +9,8 @@
  * [#114](https://github.com/jumpinjackie/mapguide-react-layout/issues/114): Fix legend infinite loop on maps with multiple (>2) levels of group nesting
  * [#115](https://github.com/jumpinjackie/mapguide-react-layout/issues/115): Hover styles no longer rendered for disabled toolbar items
  * [#122](https://github.com/jumpinjackie/mapguide-react-layout/issues/122): Clicking expanded panel in accordion should not collapse it
+ * [#123](https://github.com/jumpinjackie/mapguide-react-layout/issues/123): Offset modals more from the top (so toolbars don't obscure them)
+ * [#25](https://github.com/jumpinjackie/mapguide-react-layout/issues/25): Add support for InvokeURL command parameters
 
 0.7.1
 =====

src/actions/init.ts

@@ -14,7 +14,7 @@ import {
     isCommandItem,
     isInvokeURLCommand,
     isSearchCommand,
-    UIItem 
+    UIItem
 } from "../api/contracts/weblayout";
 import {
     ApplicationDefinition,
@@ -112,7 +112,7 @@ function convertFlexLayoutUIItems(items: ContainerItem[], widgetsByKey: Dictiona
                                 return { command: DefaultCommands.RefreshMap, label: (noToolbarLabels ? null : widget.Label), tooltip: widget.Tooltip };
                             //case "SaveMap":
                             case "InvokeURL": //Commands with this name would've been registered beforehand
-                            case "Search": 
+                            case "Search":
                                 return { command: widget.Name, label: (noToolbarLabels ? null : widget.Label), tooltip: widget.Tooltip };
                             case "SelectPolygon":
                                 return { command: DefaultCommands.SelectPolygon, label: (noToolbarLabels ? null : widget.Label), tooltip: widget.Tooltip };
@@ -142,7 +142,7 @@ function convertFlexLayoutUIItems(items: ContainerItem[], widgetsByKey: Dictiona
                 return {
                     label: item.Label,
                     tooltip: item.Tooltip,
-                    children: convertFlexLayoutUIItems(item.Item, widgetsByKey, locale) 
+                    children: convertFlexLayoutUIItems(item.Item, widgetsByKey, locale)
                 };
         }
         return null;
@@ -189,10 +189,10 @@ function convertWebLayoutUIItems(items: UIItem[] | null | undefined, cmdsByKey:
         } else if (isSeparatorItem(item)) {
             return { isSeparator: true };
         } else if (isFlyoutItem(item)) {
-            return { 
+            return {
                 label: item.Label,
                 tooltip: item.Tooltip,
-                children: convertWebLayoutUIItems(item.SubItem, cmdsByKey, locale, false, false) 
+                children: convertWebLayoutUIItems(item.SubItem, cmdsByKey, locale, false, false)
             };
         }
         return null;
@@ -212,7 +212,7 @@ function prepareSubMenus(tbConf: any): any {
         //Special case: Task pane. Transfer all to flyout
         if (key == "taskpane") {
             const flyoutId = key;
-            prepared.flyouts[flyoutId] = { 
+            prepared.flyouts[flyoutId] = {
                 children: tbConf[key].items
             }
         } else {
@@ -228,7 +228,7 @@ function prepareSubMenus(tbConf: any): any {
                         tooltip: item.tooltip,
                         flyoutId: flyoutId
                     });
-                    prepared.flyouts[flyoutId] = { 
+                    prepared.flyouts[flyoutId] = {
                         children: item.children
                     }
                 } else {
@@ -277,7 +277,7 @@ function makeFlexLayoutAndRuntimeMapReceived(dispatch: ReduxDispatch, opts: any)
                         hasNavigator = true;
                         break;
                     case "Search":
-                        registerCommand(widget.Name, { 
+                        registerCommand(widget.Name, {
                             layer: cmd.Layer,
                             prompt: cmd.Prompt,
                             resultColumns: cmd.ResultColumns,
@@ -290,7 +290,10 @@ function makeFlexLayoutAndRuntimeMapReceived(dispatch: ReduxDispatch, opts: any)
                         registerCommand(widget.Name, {
                             url: cmd.Url,
                             disableIfSelectionEmpty: cmd.DisableIfSelectionEmpty,
-                            target: cmd.Target
+                            target: cmd.Target,
+                            parameters: (cmd.AdditionalParameter || []).map((p: any) => {
+                                return { name: p.Key, value: p.Value };
+                            })
                         });
                         break;
                 }
@@ -375,13 +378,16 @@ function makeWebLayoutAndRuntimeMapReceived(dispatch: ReduxDispatch, opts: any):
                     registerCommand(cmd.Name, {
                         url: cmd.URL,
                         disableIfSelectionEmpty: cmd.DisableIfSelectionEmpty,
-                        target: cmdTarget
+                        target: cmdTarget,
+                        parameters: (cmd.AdditionalParameter || []).map(p => {
+                            return { name: p.Key, value: p.Value };
+                        })
                     });
                 } else {
                     logger.warn(`Command ${cmd.Name} targets a specific frame which is not supported`);
                 }
             } else if (isSearchCommand(cmd)) {
-                registerCommand(cmd.Name, { 
+                registerCommand(cmd.Name, {
                     layer: cmd.Layer,
                     prompt: cmd.Prompt,
                     resultColumns: cmd.ResultColumns,
@@ -506,7 +512,7 @@ function makeRuntimeMapSuccessHandler<T>(client: Client, session: string, opts:
     return (res) => {
         const mapDefs = mapDefSelector(res);
         const mapPromises = [];
-        
+
         for (const mapDef of mapDefs) {
             const promise = client.createRuntimeMap({
                 mapDefinition: mapDef,
@@ -590,7 +596,7 @@ function setupMaps(appDef: ApplicationDefinition, mapsByName: Dictionary<Runtime
                         case "OpenStreetMap":
                             {
                                 //HACK: De-arrayification of arbitrary extension elements
-                                //is shallow (hence name/type is string[]). Do we bother to fix this? 
+                                //is shallow (hence name/type is string[]). Do we bother to fix this?
                                 const name = map.Extension.Options.name[0];
                                 const type = map.Extension.Options.type[0];
                                 const options: any = {};
@@ -612,7 +618,7 @@ function setupMaps(appDef: ApplicationDefinition, mapsByName: Dictionary<Runtime
                         case "Stamen":
                             {
                                 //HACK: De-arrayification of arbitrary extension elements
-                                //is shallow (hence name/type is string[]). Do we bother to fix this? 
+                                //is shallow (hence name/type is string[]). Do we bother to fix this?
                                 const name = map.Extension.Options.name[0];
                                 const type = map.Extension.Options.type[0];
                                 externalBaseLayers.push({
@@ -666,7 +672,7 @@ function getMapGuideMapGroup(appDef: ApplicationDefinition): MapGroup[] {
             }
         }
     }
-    return configs; 
+    return configs;
 }
 
 function getMapGuideConfiguration(appDef: ApplicationDefinition): MapConfiguration[] {
@@ -680,7 +686,7 @@ function getMapGuideConfiguration(appDef: ApplicationDefinition): MapConfigurati
             }
         }
     }
-    return configs; 
+    return configs;
 }
 
 function getMapDefinitionsFromFlexLayout(appDef: ApplicationDefinition): string[] {

src/actions/taskpane.ts

@@ -1,5 +1,6 @@
 import * as Constants from "../constants";
 import { MgError } from "../api/error";
+import { IInvokeUrlCommandParameter } from "../api/common";
 import {
     ReduxThunkedAction
 } from "../api/common";
@@ -34,14 +35,14 @@ export function goForward() {
 export function pushUrl(url: string, silent?: boolean) {
     return {
         type: Constants.TASK_PANE_PUSH_URL,
-        payload: { 
+        payload: {
             url: url,
             silent: silent
         }
     };
 }
 
-export function ensureParameters(url: string, mapName: string, session: string, locale?: string, uppercase = true): string {
+export function ensureParameters(url: string, mapName: string, session: string, locale?: string, uppercase = true, extraParameters: IInvokeUrlCommandParameter[] = []): string {
     //If this is a component URL, let it be
     if (url.indexOf("component://") >= 0) {
         return url;
@@ -86,12 +87,17 @@ export function ensureParameters(url: string, mapName: string, session: string,
             params.locale = locale;
         }
     }
+
+    for (const p of extraParameters) {
+        params[p.name] = p.value;
+    }
+
     parsed.query = queryString.stringify(params);
     const result = parsed.toString();
 
     if (url.indexOf(parsed.protocol) >= 0 || url.indexOf("/") == 0) {
         return result;
     }
-    
+
     return result;
 }

src/api/builders/deArrayify.ts

@@ -1,15 +1,15 @@
 /**
  * deArrayify.ts
- * 
+ *
  * This module provides JSON sanitization of JSON responses from the mapagent
- * 
+ *
  * Being a transformation of the XML form, and taking a lowest-common-denominator
- * approach to JSON conversion, the JSON responses from MapGuide are un-wieldy to 
+ * approach to JSON conversion, the JSON responses from MapGuide are un-wieldy to
  * use from the client-side due to:
- * 
+ *
  *  a) All properties being arrays
  *  b) All property values being strings
- * 
+ *
  * These functions help "clean" those responses to be of the form we expect (and prefer)
  */
 import * as Contracts from "../contracts";
@@ -62,7 +62,7 @@ function deArrayifyFeatureStyles(fts: any[]): Contracts.RtMap.FeatureStyleInfo[]
 
 function deArrayifyScaleRanges(scales: any[]): Contracts.RtMap.ScaleRangeInfo[] {
     if (!scales) { //Happens with raster layers (this is probably a bug in CREATERUNTIMEMAP)
-        const defaultRange: Contracts.RtMap.ScaleRangeInfo = { 
+        const defaultRange: Contracts.RtMap.ScaleRangeInfo = {
             MinScale: 0,
             MaxScale: Constants.MDF_INFINITY,
             FeatureStyle: []
@@ -728,7 +728,24 @@ function deArrayifyExtension(json: any, arrayCheck: boolean = true): any {
     const ext: any = {};
     for (const key in root[0]) {
         if (Array.isArray(root[0][key])) {
-            ext[key] = tryGetAsProperty(root[0], key, "string");
+            //Special case handling
+            switch (key) {
+                case "AdditionalParameter":
+                    {
+                        const params = [];
+                        for (const p of root[0][key]) {
+                            params.push({
+                                Key: tryGetAsProperty(p, "Key", "string"),
+                                Value: tryGetAsProperty(p, "Value", "string")
+                            });
+                        }
+                        ext[key] = params;
+                    }
+                    break;
+                default:
+                    ext[key] = tryGetAsProperty(root[0], key, "string");
+                    break;
+            }
         } else {
             ext[key] = deArrayifyExtension(root[0][key], false);
         }

src/api/common.ts

@@ -57,6 +57,11 @@ export interface ICommand {
 
 export type InvokeUrlCommandTarget = "TaskPane" | "NewWindow";
 
+export interface IInvokeUrlCommandParameter {
+    name: string;
+    value: string;
+}
+
 /**
  * Describes a command that invokes a URL into a specified target
  *
@@ -92,6 +97,11 @@ export interface IInvokeUrlCommand {
      * @memberOf IInvokeUrlCommand
      */
     target: InvokeUrlCommandTarget;
+    /**
+     * Additional command parameters
+     * @memberOf IInvokeUrlCommand
+     */
+    parameters: IInvokeUrlCommandParameter[];
 }
 
 /**

src/api/default-commands.ts

@@ -29,14 +29,14 @@ function panMap(dispatch: ReduxDispatch, viewer: IMapViewer, value: "right" | "l
         "down": [0, 1],
         "up": [0, 3]
     };
-    
+
     const view = viewer.getCurrentView();
     const current_center = [ view.x, view.y ];
     const currentExtent = viewer.getCurrentExtent();
     let newPos: number[];
 
     const direction = settings[value];
-    
+
     if (value == "right" || value == "left") {
         newPos = [
             currentExtent[direction[0]],
@@ -49,7 +49,7 @@ function panMap(dispatch: ReduxDispatch, viewer: IMapViewer, value: "right" | "l
             currentExtent[direction[1]]
         ];
     }
-    
+
     dispatch(MapActions.setCurrentView({ x: newPos[0], y: newPos[1], scale: view.scale }));
 }
 
@@ -451,7 +451,7 @@ export function initDefaultCommands() {
                     const txCoord = ol.proj.fromLonLat([ pos.coords.longitude, pos.coords.latitude ], proj);
                     const testCoord = ol.proj.fromLonLat([ pos.coords.longitude, pos.coords.latitude ], `EPSG:${rtMap.CoordinateSystem.EpsgCode}`);
                     viewer.zoomToView(txCoord[0], txCoord[1], view.scale);
-                    const extents: [number, number, number, number] = [ 
+                    const extents: [number, number, number, number] = [
                         rtMap.Extents.LowerLeftCoordinate.X,
                         rtMap.Extents.LowerLeftCoordinate.Y,
                         rtMap.Extents.UpperRightCoordinate.X,
@@ -532,7 +532,7 @@ export function initDefaultCommands() {
         }
     });
 
-    registerCommand(DefaultCommands.FeatureInfo, { icon: "feature-info.png", url: "server/FeatureInfo/featureinfomain.php", target: "TaskPane" });
-    registerCommand(DefaultCommands.Query, { icon: "query.png", url: "server/Query/querymain.php", target: "TaskPane" });
-    registerCommand(DefaultCommands.Theme, { icon: "theme.png", url: "server/Theme/thememain.php", target: "TaskPane" });
+    registerCommand(DefaultCommands.FeatureInfo, { icon: "feature-info.png", url: "server/FeatureInfo/featureinfomain.php", target: "TaskPane", parameters: [] });
+    registerCommand(DefaultCommands.Query, { icon: "query.png", url: "server/Query/querymain.php", target: "TaskPane", parameters: [] });
+    registerCommand(DefaultCommands.Theme, { icon: "theme.png", url: "server/Theme/thememain.php", target: "TaskPane", parameters: [] });
 }

src/api/registry/command.ts

@@ -161,7 +161,7 @@ export function registerCommand(name: string, cmdDef: ICommand | IInvokeUrlComma
                         dispatch({
                             type: Constants.TASK_INVOKE_URL,
                             payload: {
-                                url: ensureParameters(cmdDef.url, map.Name, map.SessionId, config.locale)
+                                url: ensureParameters(cmdDef.url, map.Name, map.SessionId, config.locale, true, cmdDef.parameters)
                             }
                         });
                     } else {
@@ -174,7 +174,7 @@ export function registerCommand(name: string, cmdDef: ICommand | IInvokeUrlComma
                                     size: [ 300, 500 ]
                                 },
                                 name: name,
-                                url: ensureParameters(cmdDef.url, map.Name, map.SessionId, config.locale)
+                                url: ensureParameters(cmdDef.url, map.Name, map.SessionId, config.locale, true, cmdDef.parameters)
                             }
                         });
                     }

src/components/modal-dialog.tsx

@@ -4,14 +4,14 @@ import Draggable = require('react-draggable');
 /**
  * [left, top, right, bottom]
  */
-export type ModalDialogPositioning = [number|null, number|null, number|null, number|null] | [string|null, string|null, string|null, string|null]; 
+export type ModalDialogPositioning = [number|null, number|null, number|null, number|null] | [string|null, string|null, string|null, string|null];
 
 export interface IModalDialogProps {
     isOpen: boolean;
     backdrop?: boolean;
     /**
      * [left, top, right, bottom]
-     * 
+     *
      * @type {ModalDialogPositioning}
      * @memberOf IModalDialogProps
      */
@@ -40,7 +40,7 @@ export class ModalDialog extends React.Component<IModalDialogProps, any> {
             //zIndex: 9999,
         };
         if (size != null) {
-            modalStyle.top = 20;
+            modalStyle.top = 120;
             modalStyle.left = "50%";
             modalStyle.width = size[0];
             modalStyle.height = size[1];