Gitlab CSE Unil

Commit a17b3718 authored by M. Chardon's avatar M. Chardon
Browse files

- ajout environnement geomo

- construction des cartouches et des catégories
- construction des rectangles geomo
parent 4e980d98
......@@ -15,23 +15,33 @@ define(["underscore", "paper", "signals"], function (_, paper, Signal) {
* @private
*/
function _init(parameters){
var env = null;
if (parameters && parameters.env){
env = parameters.env;
}
// Init category container element
if (_.isString(_catContainer)) _catContainer = $(_catContainer);
_(_catContainer.find("[data-category]")).each(function(el, i){
var $el = $(el),
colorStr = $el.data('color') || $el.css("backgroundColor"),
colorBgStr = $el.data('colorBg') || $el.css("backgroundColor"),
id = $el.data('category');
_categories[id] = {
id: id,
color: _getColorFromStr(colorStr)
color: _getColorFromStr(colorStr),
colorbg: _getColorFromStr(colorBgStr)
};
if (i == 0) {
_categories['default'] = _categories[id];
}
});
if (env && env=='geomo'){
_categories['default'] = _categories['cat_geo_1'];
} else {
_categories['default'] = _categories['cat_2'];
}
}
/**
* Convert a css color property of the form 'rgb(128, 64, 32)' to hex or paperjs Color
......
/**
* anodate environment
*
* Created by jfurrer on 30.06.15.
*/
define([
"jquery",
"underscore",
"paper",
"signals",
"adim/config",
"adim/view",
"adim/attributes",
"adim/io",
"adim/tools",
"adim/ui",
"adim/category",
"env/shortcuts"
],
function($, _, paper, Signal, config, view, attributes, io, tools, ui, category, shortcuts){
/**
* Signal binding specific to anodate environment
* @private
*/
function _initSignalRouting(){
console.info("_initSignalRouting from env/geomo");
io.events.annotableLoaded.add(function(annotableData){
// p.raster is a paper.Raster
view.events.annotationRemoved.add(function(annotation){
if (annotation.data.type === 'rectanglegeo') {
}
});
view.events.imageLoaded.add(function(p){
// Here we initilize tools that needs some image properties
});
}, 100);
// called after all other handlers
view.events.annotationsLoaded.add(function() {
}, -100);
ui.events.modeChanged.add(function(opts) {
var mode = opts.mode;
if (mode === 'edit') {
$("#annotation-display-panel").hide();
$("#annotation-property-panel").show();
} else if (mode === 'review') {
$("#annotation-display-panel").show();
$("#annotation-property-panel").hide();
}
});
}
/**
* UI initialization specific to anodate environment
* @param params
* @private
*/
function _initUI(params) {
category.init({'env':env.name});
// Init Type Display Selector
$(".adim-display-type-selector").find("button").on('click', function(event) {
var $but = $(this);
var activate = !$but.hasClass("active");
var category = $but.data('category');
if (event.metaKey) {
//if (category !== 'image') {
// view.selectItemsByType(category);
//}
} else {
$but.toggleClass("active", activate);
if (category === 'image') {
attributes.setImageOpacity(activate ? 100 : 0, true);
//_opacitySlider.slider('setValue', activate ? 100 : 0);
} else {
view.toggleItemsByProp({prop: 'category', val: category, undef: true}, activate);
}
}
});
// Init Side Col Panel layout
var sideCol = $("#side-col"),
canvasCtnr = $(".canvas-container"),
sideColPanelGroup = $("#side-col-panel-group"),
altSideColPanelGroup = $("#alt-side-col-panel-group"),
sharedAnnotationMarkersPanel = $("#shared-annotation-markers-panel");
function displayAltCol(show) {
sideCol.toggleClass("col-sm-1", !show)
.toggleClass("col-sm-2", show);
altSideColPanelGroup.toggleClass("hidden", !show);
sideColPanelGroup.toggleClass("col-xs-12", !show)
.toggleClass("col-xs-6", show);
}
function displayAltColAndLabels(show) {
displayAltCol(show && sharedAnnotationMarkersPanel.find(".panel-collapse").hasClass("in"));
sharedAnnotationMarkersPanel.toggleClass("hidden", !show);
}
displayAltColAndLabels(params.mode === 'review');
ui.events.modeChanged.add(function(opts) {
var mode = opts.mode;
displayAltColAndLabels(mode === 'review');
ui.updateReservedSpace();
ui.adjustCanvasToImage();
});
sharedAnnotationMarkersPanel.find(".panel-collapse")
.on('hidden.bs.collapse', function () {
canvasCtnr.css("transition", 'width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0s');
sharedAnnotationMarkersPanel.prependTo(sideColPanelGroup);
displayAltCol(false);
ui.updateReservedSpace();
ui.adjustCanvasToImage();
canvasCtnr.css("transition", "");
})
.on('show.bs.collapse', function () {
displayAltCol(true);
sharedAnnotationMarkersPanel.appendTo(altSideColPanelGroup);
ui.updateReservedSpace();
ui.adjustCanvasToImage();
})
;
}
/**
* Define initial strokeColor from the forth color of the current color palette.
* This has to be define as a getter function as we cannot compute the color before
* the DOM is ready. The ``style`` property is accessed in the $.ready handler of main.
*
* @returns {{strokeColor: *}}
* @private
*/
function _getStyle() {
}
var env = {
name: 'geomo',
shortcuts: shortcuts,
initSignalRouting: _initSignalRouting,
initUI: _initUI
};
Object.defineProperty(env, 'style', {get: _getStyle});
return env;
});
\ No newline at end of file
/**
* Copyright (C) 2014 Université de Lausanne, RISET,
* < http://www.unil.ch/riset/ >
* This file is part of AdIm.
* AdIm is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* AdIm is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
* This copyright notice MUST APPEAR in all copies of the file.
*
* @AUTHOR: Julien Furrer <Julien.Furrer@unil.ch>
* @CREATION-DATE: 30.06.15
*
*/
define([
"jquery",
"paper",
"signals",
// ----- app
"adim/config",
"adim/view",
"adim/tools",
"adim/ui",
// plugins
"jquery.hotkeys"
],
function ($, paper, Signal, config, view, tools, ui) {
// Two contexts corresponding to the view modes: 'edit' and 'review'
var _keyblock = function(){ return function(){return false} };
var activeTool;
return {
// DELETE -> [edit]:delete selected annot. [review]:prevent default
'backspace del': [{
event: "keydown",
ctxt: "edit",
fn: function(){
view.removeSelectedItems();
return false;
}
}, {
event: "keydown",
ctxt: "review",
fn: _keyblock()
}],
// SPACEBAR -> [*]:activate pan tool while pressed, in all context
'space': [{
event: "keydown",
//ctxt: "*",
fn: function(){
if (!activeTool) {
activeTool = tools.getActiveTool();
tools.activateTool('pan');
}
return false;
}
}, {
event: "keyup",
//ctxt: "*",
fn: function(){
if (activeTool) {
tools.activateTool(activeTool);
activeTool = null;
}
return false;
}
}],
// A -> [edit]:activate select tool
'a': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('select');
return false;
}
}],
// CTRL-A -> [edit]:select all annotations in edit mode. [review]:prevent default
'ctrl+a meta+a': [{
event: "keydown",
ctxt: "edit",
fn: function(){
paper.project.activeLayer.children.map(function(c){c.selected = true;});
return false;
}
}, {
event: "keydown",
ctxt: "review",
fn: _keyblock()
}],
// D -> [edit]:activate drawing tool
'd': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('drawing');
return false;
}
}],
// F -> [edit]:activate arrow tool
'f': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('arrow');
return false;
}
}],
// L -> [edit]:activate lines tool
'l': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('lines');
return false;
}
}],
// C -> [edit]:activate ellipse tool
'c': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('ellipse');
return false;
}
}],
// R -> [edit]:activate rectangle tool
'r': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('rectangle');
return false;
}
}],
// T -> [edit]:activate text tool
't': [{
event: "keydown",
ctxt: "edit",
fn: function(){
tools.activateTool('text');
return false;
}
}]
}
}
);
......@@ -40,7 +40,10 @@ define([
"tools/cmsarea",
// ----- ANODATE tool
"tools/marker"
"tools/marker",
// ----- GEOMO tool
"tools/rectanglegeo"
],
function(_, Signal){
// ----- Locale variables -----------------------------
......
define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, Category) {
// ----- Const ---------------------------------------
var TOOL_TYPE = "rectanglegeo";
var _tool; // The tool itself
// ----- Locale variables -----------------------------
var _startPoint = null;
var _editedRecGeo = null;
var _editedSegmentIdx = null;
var _drawingLine = null;
var terminateOnRelease = null;
var _recGeoChanged = null;
var create = true;
// Events
var _events = {
annotationAdded: null,
annotationSelected: null,
annotationChanged: null
};
// Properties
var defaultProperties = {
comment: "",
//labelComment: "",
category: "cat_geo_1"
};
var hitOptions = {
segments: true,
stroke: true,
fill: false,
tolerance: 5,
bounds: false,
handles: true
};
// ----- Serialization ---------------------------------
function exportJSON(param) {
var json = this.exportJSON({asString:false});
// Apply some cleanup
//json[1].data.origin.splice(0,1);
return (param && param.asString) ? JSON.stringify(json) : json;
}
function importJSON(itemDef, layer, listening) {
// Sanitize data
var item = itemDef[1];
var itemData = itemDef[1].data;
var curLayer = paper.project.activeLayer;
layer.activate();
// Keep copy of current category
var curCat = defaultProperties.category;
var from = new paper.Point(itemData.origin.from[1],itemData.origin.from[2]);
var to = new paper.Point(itemData.origin.to[1], itemData.origin.to[2]);
var recgeo = createRectangleGeo({from: from, to: to}, itemData, listening);
if (itemData.prop.category) {
_setCategory.call(recgeo, itemData.prop.category);
}
// Restore states
curLayer.activate();
defaultProperties.category = curCat;
return recgeo;
}
// ----- Item -----------------------------------------
function createRectangleGeo(origin, config, eventListening) {
var newRecGeo = new paper.Path.Rectangle(origin); //Shape("rectangle", _events);
// Extend tool's item properties with default values
var properties = (config && typeof config.prop === 'object') ? config.prop : {};
for (var p in defaultProperties) {
if (!properties.hasOwnProperty(p))
properties[p] = defaultProperties[p];
}
//newRecGeo.style = confidenceStyle[o.prop.confidence];
newRecGeo.data = {
tId: "a" + newRecGeo._id,
type: TOOL_TYPE,
// Properties
prop: properties,
setCategory: _setCategory,
origin: origin
// Mouse Event
//itemMouseDrag: itemMouseDrag,
//itemMouseUp: itemMouseUp
// General attributes handlers
//setColor: _noop, //_setColor,
//getColor: _noop, //_getColor,
//setFill: _noop,
//setStrokeWidth: _setStrokeWidth,
//getStrokeWidth: _getStrokeWidth,
};
// Add event listeners
//newRecGeo.onMouseDown = itemMouseDown;
//newRecGeo.onMouseDrag = itemMouseDrag; // --> in data.itemMouseDrag
//newRecGeo.onMouseUp = itemMouseUp;
//newRecGeo.onKeyDown = itemKeyDown;
//newRecGeo.onKeyUp = itemKeyUp;
//newRecGeo.onPropertyChange = itemPropertyChange;
newRecGeo.style = {
fillColor: _getColorBg(properties.category),
strokeColor: _getColor(properties.category),
strokeWidth: 25
};
newRecGeo._boundsSelected = true;
return newRecGeo;
//marker._boundsSelected = true;
//marker._selectChildren = false;
/*if (eventListening) {
marker.onPropertyChange = itemPropertyChange;
marker.onMouseDown = itemMouseDown;
}*/
//drawMarker(marker);
// Add the marker to the list of markers. Only if in editing mode.
/*if (eventListening) {
_.some(_markers, function (m, idx) {
if (label < m.data.label) {
_markers.splice(idx, 0, marker);
return true;
}
return false;
}) || _markers.push(marker);
}*/
//return marker;
}
function drawRecGeo(rectgeo, event) {
// data passed in prop obj
prop = /*prop ||*/ {};
if (rectgeo.data) {
var category = rectgeo.data.prop.category || 'default';
} else {
var category = 'default';
}
var cat = Category.getCategory(category);
var color = cat && cat.color ||"grey";
if (!_drawingLine) {
_drawingLine = new paper.Path.Rectangle(_startPoint,event.point); //Shape("rectangle", _events); //new paper.Path.Line({from: _startPoint, to: event.point});
_drawingLine.fillColor=color;
//_drawingLine.style = striaStyle;
//_drawingLine.dashArray = [10, 5];
}
else {
//_drawingLine.segments[1].point = event.point;
_drawingLine.size = new paper.Size(event.point.x-_startPoint.x,event.point.y-_startPoint.y); //= new paper.Path.Rectangle(_startPoint,event.point);
//if (event.event.shiftKey)
// _horizontalize(_drawingLine, 1);
}
//_drawingLine.opacity = validatePosition(_startPoint, event.point) ? 1 : 0.5;
//_drawingLine.dashArray = validatePosition(_startPoint, event.point) ? null : [10, 5];
/*
var circle = new paper.Path.Circle({
center: [0, 0],
strokeColor: color || "black",
fillColor: "white"
});
// The label
var labelText = new paper.PointText({
point: [0,0],
fillColor: color || "black",
strokeColor: null,
fontFamily: 'Courier',
fontWeight: 'bold'
});
var rec = new Shape("rectangle", _events);
//rectgeomarker.removeChildren();
//rectgeomarker.addChildren([rec]);*/
}
function _terminateCreate(event) {
//var dstPoint = _drawingLine ? _drawingLine.segments[1].point.clone() : null;
/*if (!validatePosition(_startPoint, dstPoint))
return;
*/
if (_drawingLine) {
_drawingLine.remove();
_drawingLine = null;
}