Skip to content

Commit

Permalink
Issue #50: add interaction areas
Browse files Browse the repository at this point in the history
  • Loading branch information
@fredericbonifas
fredericbonifas committed May 20, 2015
1 parent 1e1b8d8 commit 4bbf3dc
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 11 deletions.
1 change: 1 addition & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ CHANGELOG
* Add address search tool
* Draw an optional arrow at the end of a line
* Add margins around the map and legend
* Add interaction areas

**Minor changes**

Expand Down
89 changes: 89 additions & 0 deletions app/scripts/controllers/commonmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,20 @@ angular.module('accessimapEditeurDerApp')
$scope.styleChoices = [];
$scope.styleChosen = $scope.styleChoices[0];

$scope.interactionFilters = {
'f0': {
name: 'Aucune interaction'
},
'f1': {
name: 'filtre numéro 1'
},
'f2': {
name: 'filtre numéro 2'
}
};

$scope.interaction = {};

$scope.featureIcon = svgicon.featureIcon;

d3.select('svg').append('defs')
Expand Down Expand Up @@ -116,6 +130,81 @@ angular.module('accessimapEditeurDerApp')
});
});
}
if ($scope.mode === 'interaction') {
resetActions();
$('#der').css('cursor', 'crosshair');
// Add filters to SVG if they don't exist
if (d3.select('filters').empty()) {
var filters = d3.select('#der')
.select('svg')
.append('filters');
filters.append('filter')
.attr('id', 'f0')
.attr('name', 'Aucune interaction')
.attr('expandable', 'false');
filters.append('filter')
.attr('id', 'f1')
.attr('name', 'filtre numéro 1')
.attr('expandable', 'true');
filters.append('filter')
.attr('id', 'f2')
.attr('name', 'filtre numéro 2')
.attr('expandable', 'true');
}

// Make the selected feature blink
d3.selectAll('path')
.on('click', function() {
d3.selectAll('.blink').classed('blink', false);
var feature = d3.select(this);
feature.classed('blink', true);
var bbox = feature[0][0].getBBox();
if (feature.select('actions').empty()) {
$scope.$apply(function() {
$scope.interaction = {};
});
feature.append('actions')
.append('action')
.attr('filter', $scope.interaction.filter)
.attr('protocol', $scope.interaction.protocol)
.attr('value', $scope.interaction.value)
.attr('x', bbox.x)
.attr('y', bbox.y)
.attr('width', bbox.width)
.attr('height', bbox.height);
} else {
$scope.$apply(function() {
$scope.interaction.filter = feature.select('actions').select('action').attr('filter');
$scope.interaction.protocol = feature.select('actions').select('action').attr('protocol');
$scope.interaction.value = feature.select('actions').select('action').attr('value');
});
}
$scope.$watch('interaction.filter', function() {
d3.selectAll('.blink')
.select('actions')
.select('action')
.attr('filter', $scope.interaction.filter);
});
$scope.$watch('interaction.protocol', function() {
d3.selectAll('.blink')
.select('actions')
.select('action')
.attr('protocol', $scope.interaction.protocol);
});
$scope.$watch('interaction.value', function() {
d3.selectAll('.blink')
.select('actions')
.select('action')
.attr('value', $scope.interaction.value);
});
});
d3.selectAll('circle')
.on('click', function() {
d3.selectAll('.blink').classed('blink', false);
var feature = d3.select(this);
feature.classed('blink', true);
});
}
if ($scope.mode === 'point') {
resetActions();
$('#der').css('cursor', 'crosshair');
Expand Down
46 changes: 35 additions & 11 deletions app/views/commonmap.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,33 @@
<form class="form-inline">

<div class="btn-group">
<a ng-click="mode = 'default'" ng-class="{ 'active' : mode == 'default' }" class="btn btn-primary active">Consulter</a>
<a ng-click="mode = 'default'" ng-class="{ 'active' : mode == 'default' }" class="btn btn-primary active">
Consulter
</a>
<a ng-click="mode = 'delete'" ng-class="{ 'active' : mode == 'delete' }" class="btn btn-primary">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Supprimer un élément</a>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Supprimer un élément
</a>
<a ng-click="mode = 'move'" ng-class="{ 'active' : mode == 'move' }" class="btn btn-primary">
<span class="glyphicon glyphicon-move" aria-hidden="true"></span> Déplacer points</a>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span> Déplacer points
</a>
<a ng-click="mode = 'interaction'" ng-class="{ 'active' : mode == 'interaction' }" class="btn btn-primary">
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> Interaction
</a>
<a ng-click="mode = 'point'" ng-class="{ 'active' : mode == 'point' }" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Point</a>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Point
</a>
<a ng-click="mode = 'line'" ng-class="{ 'active' : mode == 'line' }" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Ligne</a>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Ligne
</a>
<a ng-click="mode = 'circle'" ng-class="{ 'active' : mode == 'circle' }" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Cercle</a>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Cercle
</a>
<a ng-click="mode = 'polygon'" ng-class="{ 'active' : mode == 'polygon' }" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Polygone</a>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Polygone
</a>
<a ng-click="mode = 'addtext'" ng-class="{ 'active' : mode == 'addtext' }" class="btn btn-primary">
<span class="glyphicon glyphicon-font" aria-hidden="true"></span> Texte</a>
<span class="glyphicon glyphicon-font" aria-hidden="true"></span> Texte
</a>
</div>

<ui-select ng-show="mode === 'point' || mode === 'line' || mode === 'polygon' || mode === 'circle'" ng-model="$parent.styleChosen" ng-disabled="disabled" theme="bootstrap" class="form-control style-selector" style="width: 300px;">
Expand All @@ -31,10 +43,22 @@
</button>
</form>

<div class="form-group">
<label for="comment">Commentaires de transcription</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
<div ng-show="mode === 'interaction'" class="form-inline">
<label for="comment">Filtre</label>
<select ng-model="interaction.filter" class="form-control" ng-options="filterId as filter.name for (filterId, filter) in interactionFilters"></select>
<label for="comment">Protocole</label>
<select ng-model="interaction.protocol" class="form-control">
<option value="tts">TTS</option>
<option value="mp3">MP3</option>
</select>
<label for="comment">Valeur</label>
<input ng-model="interaction.value" class="form-control" type="text" id="comment"></input>
</div>

<div id="der"></div>
<div id="der-legend"></div>

<div class="form-group">
<label for="comment">Commentaires de transcription</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>

0 comments on commit 4bbf3dc

Please sign in to comment.