First version of a MarvelWidget, for visualizing Marvel models

csComp/Scripts/typings/marvelous/Marvelous.d.ts

@@ -0,0 +1,9 @@
+declare namespace Marvelous {
+    export interface Model { }
+    export function merge(arr1, arr2): number;
+    export function model(marvelModel, name, widgetElement): void;
+    export function loadModel(marvelModel): Marvelous.Model
+    export function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY): Object;
+    export function intersect(l1s, l1e, l2s, l2e): Object;
+    export function boxPoint(w, h, b, e): number;
+}

csComp/directives/Widgets/MarvelWidget/MarvelWidget.tpl.html

@@ -0,0 +1,18 @@
+<div>
+    <div class="row" style="margin-left:15px;margin-right:0px;">
+        <div class="col-md-9" style="font-size:16px; font-weight:bold;margin-bottom:2px;">{{data.title}}</div>
+        <div class="col-md-3">
+            <div>
+                <button class="fa fa-times leftpanel-header-button" ng-click="vm.close()" style="padding-right:0px" />
+                <button class="fa fa-plus-square-o leftpanel-header-button" ng-click="vm.minimize()" ng-show="minimized" />
+                <button class="fa fa-minus-square-o leftpanel-header-button" ng-click="vm.minimize()" ng-hide="minimized" />
+            </div>
+        </div>
+    </div>
+    <div class="col-md-12" style="padding:0px;font-size:12px;" ng-hide="minimized">
+        <div>
+            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="marvelViz" preserveAspectRatio="xMidYMid meet">
+            </svg>
+        </div>
+    </div>
+</div>

csComp/directives/Widgets/MarvelWidget/MarvelWidget.ts

@@ -0,0 +1,33 @@
+module MarvelWidget {
+    /**
+      * Config
+      */
+    var moduleName = 'csComp';
+
+    /**
+      * Module
+      */
+    export var myModule;
+    try {
+        myModule = angular.module(moduleName);
+    } catch (err) {
+        // named module does not exist, so create one
+        myModule = angular.module(moduleName, []);
+    }
+
+    /**
+      * Directive to display the available map layers.
+      */
+    myModule.directive('marvelwidget', [function() : ng.IDirective {
+            return {
+                restrict   : 'E',     // E = elements, other options are A=attributes and C=classes
+                scope      : {
+                },      // isolated scope, separated from parent. Is however empty, as this directive is self contained by using the messagebus.
+                templateUrl: 'directives/Widgets/MarvelWidget/MarvelWidget.tpl.html',
+                replace      : true,    // Remove the directive from the DOM
+                transclude   : false,   // Add elements and attributes to the template
+                controller   : MarvelWidgetCtrl
+            }
+        }
+    ]);
+}

csComp/directives/Widgets/MarvelWidget/MarvelWidgetCtrl.ts

@@ -0,0 +1,128 @@
+module MarvelWidget {
+    export class MarvelWidgetData {
+        title: string;
+        /**
+         * Content to display: you can either provide it directly, or specify a URL, in which case it will replace the content.
+         */
+        content: string;
+        url: string;
+        /**
+         * The actual content is being converted, if necessary, and set to the markdown text.
+         */
+        mdText: string;
+        /**
+         * If provided, indicates the feature type that needs to be selected in order to show the widget.
+         */
+        featureTypeName: string;
+        /**
+         * If provided, a list of properties that need to be injected into the content in order to generate the mdText.
+         */
+        dynamicProperties: string[];
+    }
+
+    export interface IMarvelWidgetScope extends ng.IScope {
+        vm: MarvelWidgetCtrl;
+        data: MarvelWidgetData;
+        minimized: boolean;
+    }
+
+    export class MarvelWidgetCtrl {
+        private scope: IMarvelWidgetScope;
+        private widget: csComp.Services.IWidget;
+        private parentWidget: JQuery;
+
+        public static $inject = [
+            '$scope',
+            '$timeout',
+            'layerService',
+            'messageBusService',
+            'mapService'
+        ];
+
+        constructor(
+            private $scope: IMarvelWidgetScope,
+            private $timeout: ng.ITimeoutService,
+            private $layerService: csComp.Services.LayerService,
+            private $messageBus: csComp.Services.MessageBusService,
+            private $mapService: csComp.Services.MapService
+            ) {
+            $scope.vm = this;
+            var par = <any>$scope.$parent;
+            this.widget = par.widget;
+            this.parentWidget = $("#" + this.widget.elementId).parent();
+
+            $scope.data = <MarvelWidgetData>this.widget.data;
+            $scope.data.mdText = $scope.data.content;
+            $scope.minimized = false;
+
+            if (typeof $scope.data.featureTypeName !== 'undefined' && typeof $scope.data.dynamicProperties !== 'undefined' && $scope.data.dynamicProperties.length > 0) {
+                // Hide widget
+                this.parentWidget.hide();
+                this.$messageBus.subscribe('feature', (action: string, feature: csComp.Services.IFeature) => {
+                    switch (action) {
+                        case 'onFeatureDeselect':
+                        case 'onFeatureSelect':
+                            this.selectFeature(feature);
+                            break;
+                        default:
+                            break;
+                    }
+                });
+            }
+
+            if (typeof $scope.data.url === 'undefined') return;
+            $.get($scope.data.url, (md) => {
+                $timeout(() => {
+                    $scope.data.content = $scope.data.mdText = md;
+                    $scope.data.title = 'Marvel test';
+                    var w = $("#" + this.widget.elementId);
+                    Marvelous.model($scope.data.mdText, 'Test', w);
+                }, 0);
+            });
+        }
+
+        private minimize() {
+            this.$scope.minimized = !this.$scope.minimized;
+            if (this.$scope.minimized) {
+                this.parentWidget.css("height", "30px");
+            } else {
+                this.parentWidget.css("height", this.widget.height);
+            }
+        }
+
+        private close() {
+            this.parentWidget.hide();
+        }
+
+        private escapeRegExp(str: string) {
+            return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+        }
+
+        private replaceAll(str: string, find: string, replace: string) {
+            return str.replace(new RegExp(this.escapeRegExp(find), 'g'), replace);
+        }
+
+        private selectFeature(feature: csComp.Services.IFeature) {
+            if (!feature || !feature.isSelected || feature.featureTypeName !== this.$scope.data.featureTypeName) {
+                this.parentWidget.hide();
+                return;
+            }
+            this.$timeout(() => {
+                var md = this.$scope.data.content;
+                var i = 0;
+                this.$scope.data.dynamicProperties.forEach(p => {
+                    var searchPattern = '{{' + i++ + '}}';
+                    var displayText = '';
+                    if (feature.properties.hasOwnProperty(p)) {
+                        var pt = this.$layerService.getPropertyType(feature, p);
+                        displayText = csComp.Helpers.convertPropertyInfo(pt, feature.properties[p]);
+                    }
+                    md = this.replaceAll(md, searchPattern, displayText);
+                });
+                this.parentWidget.show();
+                this.$scope.data.mdText = md;
+            }, 0);
+        }
+    }
+
+}