Skip to content

Commit

Permalink
Fix for Marvel widget not loading correctly when in editmode.
Browse files Browse the repository at this point in the history 
Some esthetic changes.
  • Loading branch information
Rinze committed Nov 27, 2015
1 parent 441672a commit 06eeb4b
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 33 deletions.
1 change: 1 addition & 0 deletions csComp/Scripts/typings/marvelous/Marvelous.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ declare namespace Marvelous {
export interface Model { }
export function merge(arr1, arr2): number;
export function model(marvelModel, name, widgetElement): void;
export function refreshView(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;
Expand Down
28 changes: 14 additions & 14 deletions csComp/directives/Widgets/MarvelWidget/MarvelWidget.tpl.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div>
<div class="row" style="margin-left:15px;margin-right:0px;">
<div class="col-md-8" style="font-size:14px; font-weight:bold;margin-bottom:2px;">{{data.title}}</div>
<div class="col-md-4">
<div class="col-md-9" style="font-size:14px; font-weight:bold;margin-bottom:2px;">Risicodiagram voor een {{data.title.toLowerCase()}}</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 leftpanel-header-button" ng-click="vm.minimize()" ng-show="minimized" />
<button class="fa fa-minus leftpanel-header-button" ng-click="vm.minimize()" ng-hide="minimized" />
<button class="fa fa-floppy-o leftpanel-header-button" ng-click="vm.save()" ng-show="editmode" />
<button class="fa fa-share-alt leftpanel-header-button" ng-click="vm.save()" ng-show="editmode" />
<button class="fa fa-cog leftpanel-header-button" ng-click="vm.edit()" ng-hide="editmode" />
</div>
</div>
Expand All @@ -22,54 +22,54 @@
<div ng-show="editmode" style="margin-top:20px">
<div ng-repeat="(id, dep) in dependencyTypes">
<div class="row" style="margin-left:15px;margin-right:0px;">
<div class="col-md-1">
<div class="col-md-1" style="padding-right:5px">
<input type="checkbox" ng-click="vm.addDependency(id, dep)" id="check-{{id}}" ng-checked="selectedFeature.properties.hasOwnProperty(id)" />
</div>
<div class="col-md-10">
<div class="col-md-11" style="padding-left:5px">
<div ng-switch="dep.type">
<div ng-switch-when="number">
<div ng-if="selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input id="depValue" name="textinput" type="number" ng-model="selectedFeature.properties[id]" placeholder="value" class="input">
<input id="depValue" name="textinput" type="number" ng-model="selectedFeature.properties[id]" placeholder="value" class="input marvel-input">
</div>
<div ng-if="!selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input disabled id="depValue" type="number" name="textinput" placeholder="value" class="input">
<input disabled id="depValue" type="number" name="textinput" placeholder="value" class="input marvel-input">
</div>
</div>
<div ng-switch-when="string">
<div ng-if="selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input id="depValue" name="textinput" ng-model="selectedFeature.properties[id]" placeholder="value" class="input">
<input id="depValue" name="textinput" ng-model="selectedFeature.properties[id]" placeholder="value" class="input marvel-input">
</div>
<div ng-if="!selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input disabled id="depValue" name="textinput" placeholder="value" class="input">
<input disabled id="depValue" name="textinput" placeholder="value" class="input marvel-input">
</div>
</div>
<div ng-switch-when="stringarray">
<div ng-if="selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input id="add-{{id}}" name="textinput" placeholder="Featurename" class="input">
<input id="add-{{id}}" name="textinput" placeholder="Featurename" class="input marvel-input">
<button class="fa fa-plus leftpanel-header-button" style="float:none" ng-click="vm.addDependencyFeature(id)" />
<div ng-repeat="name in selectedFeature.properties[id]">
<label class="control-label-marvel" for="depName">{{$index}}</label>
<input disabled id="depName" name="textinput" ng-model="name" placeholder="value" class="input">
<input disabled id="depName" name="textinput" ng-model="name" placeholder="value" class="input marvel-input">
<button class="fa fa-minus leftpanel-header-button" style="float:none" ng-click="vm.removeDependencyFeature(id, name)" />
</div>
</div>
<div ng-if="!selectedFeature.properties.hasOwnProperty(id)">
<label class="control-label-marvel" for="depValue">{{dep.label}}</label>
<input disabled id="depValue" name="textinput" placeholder="Featurename" class="input">
<input disabled id="depValue" name="textinput" placeholder="Featurename" class="input marvel-input">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:15px;margin-right:0px;margin-top:10px;">
<button class="btn btn-primary rightpanel-button" style="float:right; margin-right:8px" popover="Save dependencies to the selected feature only" popover-placement="top" popover-trigger="mouseenter" ng-click="vm.save()">Save single feature</button>
<button class="btn btn-primary rightpanel-button" style="float:right; margin-right:8px" popover="Save dependencies to all features of this type" popover-placement="top" popover-trigger="mouseenter" ng-click="vm.saveAll()">Save all</button>
<button class="btn btn-primary rightpanel-button" style="float:right;margin:4px;padding:4px;" popover="Save dependencies to the selected feature only" popover-placement="top" popover-trigger="mouseenter" ng-click="vm.save()">Save {{selectedFeature.properties['Name']}}</button>
<button class="btn btn-primary rightpanel-button" style="float:right;margin:4px;padding:4px;" popover="Save dependencies to all features of this type" popover-placement="top" popover-trigger="mouseenter" ng-click="vm.saveAll()">Save every {{data.title.toLowerCase()}}</button>
</div>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions csComp/directives/Widgets/MarvelWidget/MarvelWidgetCtrl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,12 @@ module MarvelWidget {

private edit() {
this.$scope.editmode = !this.$scope.editmode;
if (!this.$scope.editmode) {
this.$timeout(() => {
var w = $("#" + this.widget.elementId);
Marvelous.refreshView(w);
}, 50);
}
}

private close() {
Expand Down
5 changes: 4 additions & 1 deletion csComp/includes/css/csStyles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -956,9 +956,12 @@ body,
}
.control-label-marvel {
font-size: 16px;
width: 120px;
width: 200px;
margin-left: 2px;
}
.marvel-input {
width: 90px;
}
.widgets-edit-list {
list-style-type: none;
padding: 0;
Expand Down
51 changes: 33 additions & 18 deletions csComp/includes/js/marvelous.model.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
var Marvelous = (function() {

var currentmodel;
var widgetHeightMargin = 25; // content offset from widget top
var widgetWidthMargin = 5; // content offset from widget left border
var widgetHeightMargin = 25; // content offset from widget top
var widgetWidthMargin = 5; // content offset from widget left border

var Model = function() {
this.nodes = null;
Expand All @@ -20,6 +20,7 @@ var Marvelous = (function() {
this.height = parseInt(this.widget.css("height")) - widgetHeightMargin;
var svg = d3.select("#marvelViz");
svg.selectAll("g").remove();
svg.selectAll("rect").remove();
svg.append("g").attr("class", "conns");
this.rect = svg.append("rect").attr("fill-opacity", 0).attr("class",
"overlay");
Expand Down Expand Up @@ -59,7 +60,10 @@ var Marvelous = (function() {
var w = nodeBox.width;
var h = nodeBox.height;
var scale = Math.min(parseInt(this.width) / w, parseInt(this.height) / h);
scale *= 0.98; // leave some margins
scale *= 0.98; // leave some margins
if (scale <= 0 || scale >= 10000) scale = 1;
if (transX <= 0 || transX >= 10000) transX = 0;
if (transY <= 0 || transY >= 10000) transY = 0;
var transX = (this.widget.offset().left + widgetWidthMargin - $("g.nodes").offset().left) * scale;
var transY = (this.widget.offset().top + widgetHeightMargin - $("g.nodes").offset().top) * scale;
this.zoomListener.translate([transX, transY]).scale(scale);
Expand Down Expand Up @@ -105,10 +109,18 @@ var Marvelous = (function() {
node.select("rect").attr("y", function(d) {
return (d.isConditional) ? d.Center._y : d.Center._y - 20;
})
.attr("width", function(d) { return (d.isConditional) ? 0 : 130; })
.attr("height", function(d) { return (d.isConditional) ? 0 : 40; })
.attr("rx", function(d) { return (d.isConditional) ? 0 : 8; })
.attr("ry", function(d) { return (d.isConditional) ? 0 : 8; })
.attr("width", function(d) {
return (d.isConditional) ? 0 : 130;
})
.attr("height", function(d) {
return (d.isConditional) ? 0 : 40;
})
.attr("rx", function(d) {
return (d.isConditional) ? 0 : 8;
})
.attr("ry", function(d) {
return (d.isConditional) ? 0 : 8;
})
.attr("style", "stroke:black;stroke-width:2")
.attr("fill", function(d) {
return "rgb(" + d.Background.R + "," + d.Background.G + "," + d.Background.B + ")";
Expand All @@ -119,21 +131,21 @@ var Marvelous = (function() {
}).attr("y", function(d) {
return d.Center._y + 5;
}).text(function(d) {
return (d.isConditional) ? '' : d.Name;
}).attr("text-anchor", "middle");
return (d.isConditional) ? ' ' : d.Name;
}).attr("text-anchor", "middle").attr("font-size", "20px").attr("font-weight", "bold");

// fix width
node.select("rect").attr(
"width",
function(d) {
var tw = d3.select(this.parentNode).select("text").node()
.getComputedTextLength();
node.select("rect").attr("width", function(d) {
if (d.isConditional) {
d.calculatedWidth = 1;
} else {
var tw = d3.select(this.parentNode).select("text").node().getComputedTextLength();
d.calculatedWidth = Math.max(tw + 10, 130);
return d.calculatedWidth;
}).attr("x", function(d) {
return d.Center._x - d.calculatedWidth / 2;
}
return d.calculatedWidth;
}).attr("x", function(d) {
return (d.isConditional) ? (d.Center._x) : (d.Center._x - d.calculatedWidth / 2);
});

node.exit().remove();
};

Expand Down Expand Up @@ -350,6 +362,9 @@ var Marvelous = (function() {
return model;
},

refreshView: function(widgetElement) {
currentmodel.initView(widgetElement);
},

// max = function(a) {
// return Math.max.apply(null, a);
Expand Down

0 comments on commit 06eeb4b

Please sign in to comment.