Gitlab CSE Unil

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

fin comportement ellipse geo

parent 04194bc0
......@@ -28,9 +28,9 @@ define([
io.events.annotableLoaded.add(function(annotableData){
// p.raster is a paper.Raster
view.events.annotationRemoved.add(function(annotation){
if (annotation.data.type === 'rectanglegeo') {
/*if (annotation.data.type === 'rectanglegeo') {
}
}*/
});
view.events.imageLoaded.add(function(p){
// Here we initilize tools that needs some image properties
......
......@@ -43,7 +43,8 @@ define([
"tools/marker",
// ----- GEOMO tool
"tools/rectanglegeo"
"tools/rectanglegeo",
"tools/ellipsegeo"
],
function(_, Signal){
// ----- Locale variables -----------------------------
......
define(["paper", "tools/Shape.class"], function (paper, Shape) {
define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, Category) {
// ----- Const ---------------------------------------
var TOOL_TYPE = "ellipse";
var TOOL_TYPE = "ellipsegeo";
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
annotationAdded: null,
annotationSelected: null,
annotationChanged: null
};
var toolDef = new Shape(TOOL_TYPE, _events);
var exportJSON = toolDef.exportJSON;
delete(toolDef.exportJSON);
// Properties
var defaultProperties = {
comment: "",
category: "cat_geo_1",
fill: true
};
var hitOptions = {
segments: true,
stroke: true,
fill: false,
tolerance: 5,
bounds: false,
handles: true
};
// ----- Serialization ---------------------------------
function exportJSON(param) {
var json = this.exportJSON({asString: false});
return (param && param.asString) ? JSON.stringify(json) : json;
}
function importJSON(itemDef, layer, listening) {
// Sanitize data
var item = itemDef[1];
var itemData = item.data;
var curLayer = paper.project.activeLayer;
layer.activate();
// Keep copy of current category
var curCat = defaultProperties.category;
var importJSON = toolDef.importJSON;
delete(toolDef.importJSON);
//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 ellgeo = createEllipseGeo({point: new paper.Point((from.x+to.x)/2,(from.y+to.y)/2), size: [to.x-from.x,to.y-from.y]}, itemData, listening);
var point = new paper.Point(itemData.origin.point[1], itemData.origin.point[2]);
var size = new paper.Point(itemData.origin.size[1], itemData.origin.size[2]);
var ellgeo = createEllipseGeo({point: point, size: size}, itemData, listening);
if (itemData.prop.category) {
_setCategory.call(ellgeo, itemData.prop.category);
}
// Restore states
curLayer.activate();
defaultProperties.category = curCat;
return ellgeo;
}
//var toolDef = new Shape('ellipse', _events);
// ----- Initialisations ------------------------------
// ----- Functions ------------------------------------
function createEllipseGeo(origin, config, eventListening) {
var newEllGeo = new paper.Shape.Ellipse({
point: origin.point,
size: origin.size
});
//new paper.Shape('ellipse', _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];
}
newEllGeo.data = {
tId: "a" + newEllGeo._id,
type: TOOL_TYPE,
// Properties
prop: properties,
setCategory: _setCategory,
getColorBgD: _getColorBgD,
origin: origin,
// Mouse Event
itemMouseDrag: itemMouseDrag,
itemMouseUp: itemMouseUp,
itemMouseDown: itemMouseDown,
setDragMode: itemResize,
};
newEllGeo.itemMouseDown =itemMouseDown,
newEllGeo.onMouseDown = itemMouseDown;
newEllGeo.itemMouseDrag = itemMouseDrag;
newEllGeo.setDragMode = itemMouseDrag;
newEllGeo.onPropertyChange = itemPropertyChange;
newEllGeo.style = {
strokeColor: _getColor(properties.category),
strokeWidth: 7
};
if (properties.fill)
newEllGeo.style = {
fillColor: _getColorBg(properties.category),
};
newEllGeo._boundsSelected = true;
return newEllGeo;
}
function drawEllGeo(ellipsegeo, event) {
// data passed in prop obj
if (ellipsegeo.data) {
var category = ellipsegeo.data.prop.category || 'default';
var fill = ellipsegeo.data.prop.fill || "checked";
} else {
var category = 'default';
var fill = "checked";
}
var cat = Category.getCategory(category);
var color = cat && cat.color || "grey";
var colorbg = cat && cat.colorbg || "grey";
if (!_drawingLine) {
_drawingLine = new paper.Shape.Ellipse({
point: _startPoint,
size: event.delta
});
if (fill == "checked") {
_drawingLine.fillColor = colorbg;
}
_drawingLine.color = color;
}
else {
_drawingLine.remove();
_drawingLine = new paper.Shape.Ellipse({
point: _startPoint,
size: [event.point.x - _startPoint.x, event.point.y - _startPoint.y]
});
}
}
function _terminateCreate(event) {
if (_drawingLine) {
_drawingLine.remove();
_drawingLine = null;
}
var newEllGeo = createEllipseGeo({point: _startPoint, size: event.delta});
_events.annotationAdded.dispatch(newEllGeo);
_startPoint = null;
create = false;
}
function itemMouseDown(event) {
console.log("MouseDown");
var hitItem = this;
_editedRecGeo = this;
var hitResult = hitItem.hitTest(event.point, hitOptions);
hitItem.layer.activate();
paper.project.deselectAll();
hitItem.selected = true;
_events.annotationSelected.dispatch(hitItem);
_editedSegmentIdx = null;
if (hitResult){
console.log(hitResult.type);
}
if (hitResult && hitResult.type === 'segment') {
_editedSegmentIdx = hitResult.segment.index;
}
_recGeoChanged = false;
_events.annotationSelected.dispatch(hitItem);
}
function itemResize(event, hitItemArg) {
console.log("itemResize");
_editedSegmentIdx=hitItemArg;
_recGeoChanged = false;
}
function itemMouseDrag(event) {
console.log("itemMouseDrag");
// Handle only event forwarded by tools
if (!event.tool)
return;
if (_editedSegmentIdx !== null) {
var dstPoint = event.point.clone();
var deltaPoint = event.delta;
if (_editedSegmentIdx.nameParts[0] == "top"){
if (_editedSegmentIdx.nameParts[1] == "left"){
this.size.width -= deltaPoint.x*2;
this.size.height -= deltaPoint.y*2;
} else {
this.size.width += deltaPoint.x*2;
this.size.height -= deltaPoint.y*2;
}
} else {
if (_editedSegmentIdx.nameParts[1] == "left"){
this.size.width -= deltaPoint.x*2;
this.size.height += deltaPoint.y*2;
} else {
this.size.width += deltaPoint.x*2;
this.size.height += deltaPoint.y*2;
}
}
this.data.origin.size.x = this.size.width;
this.data.origin.size.y = this.size.height;
} else {
this.translate(event.delta);
this.data.origin.point.x +=event.delta.x;
this.data.origin.point.y +=event.delta.y;
}
_recGeoChanged = true;
}
function itemMouseUp(event) {
if (!event.tool) // catches only tool's events
return;
if (_recGeoChanged) {
_events.annotationChanged.dispatch(this);
}
_recGeoChanged = false;
_editedSegmentIdx = null;
}
function itemPropertyChange(property, value) {
if (property === 'category') {
_setCategory.call(this, value);
this.style = {
fillColor: _getColorBg(value),
strokeColor: _getColor(value)
};
paper.view.draw();
}
}
function cancelCreate() {
if (_drawingLine)
_drawingLine.remove();
_startPoint = null;
create = false;
}
// ----- Functions ------------------------------------
function _setCategory(catId) {
defaultProperties.category = catId;
}
function _getColor(catId) {
var category = Category.getCategory(catId),
color = (category && category.color) || "#000000";
return color;
}
function _getColorBg(catId) {
var category = Category.getCategory(catId),
color = (category && category.colorbg) || "#000000";
return color;
}
function _getColorBgD() {
if (this.prop){
var category = Category.getCategory(this.prop.category),
color = (category && category.colorbg) || "#000000";
return color;
} else {
return "#000000";
}
}
// ----- Tool Def -------------------------------------
var toolDef = {
onMouseDown: function(event) {
if (_startPoint) {
if (_drawingLine && !terminateOnRelease) {
_terminateCreate();
}
} else {
var hitResult = paper.project.activeLayer.hitTest(event.point, hitOptions);
if (!hitResult) {
paper.project.deselectAll();
_events.annotationSelected.dispatch(null);
if (!_startPoint) {
_editedSegmentIdx = _editedRecGeo = null;
create = true;
if (_drawingLine)
_drawingLine.remove();
_drawingLine = null;
_startPoint = event.point;
terminateOnRelease = false;
}
} else {
hitResult.item.onMouseDown(event);
}
}
},
onMouseDrag: function(event) {
if (create && _startPoint) {
terminateOnRelease = true;
drawEllGeo(this,event);
}
},
onMouseMove: function(event) {
if (create && _startPoint) {
drawEllGeo(this,event);
}
},
onMouseUp: function(event) {
if (_startPoint) {
if (_drawingLine && terminateOnRelease) {
drawEllGeo(this,event);
_terminateCreate(event);
}
}
_editedSegmentIdx = _editedRecGeo = null;
},
onKeyDown: function(event) {
switch (event.key) {
case "escape":
if (create)
cancelCreate();
break;
}
}
};
// ----- Returned Module ------------------------------
_tool = new paper.Tool(toolDef);
return {
name: TOOL_TYPE,
tool: new paper.Tool(toolDef),
tool: _tool,
exportJSON: exportJSON,
importJSON: importJSON,
registerEvent: function(eventName, evt) { _events[eventName] = evt; }
......
......@@ -104,7 +104,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
newRecGeo.style = {
strokeColor: _getColor(properties.category),
strokeWidth: 25
strokeWidth: 7
};
if (properties.fill)
newRecGeo.style = {
......
......@@ -127,3 +127,28 @@
border-right: solid 1px #c9c9c9;
width: 25px;
}
.adim-env-geomo #side-col {
width: 350px;
}
.adim-env-geomo #side-col.collapsed {
margin: 0 -375px 0 25px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-1 {
width: 250px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-1.collapsed {
margin: 0 -275px 0 25px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-2 {
width: 450px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-2.collapsed {
margin: 0 -475px 0 25px;
}
.adim-env-geomo .adim-view-review #alt-side-col-panel-group {
margin-right: 0;
padding-right: 0;
}
.adim-env-geomo .adim-view-review #side-col-panel-group #annotation-markers-panel {
display: none !important;
}
......@@ -138,4 +138,35 @@
width: 25px;
}
}
.adim-env-geomo {
#side-col {
.sidecol-width(@anodate-sidecol-width);
}
.adim-view-review {
#side-col {
&.col-sm-1 {
.sidecol-width(250px);
}
&.col-sm-2 {
.sidecol-width(450px);
}
}
#alt-side-col-panel-group {
//width: 50% !important;
//display: block !important;
margin-right: 0;
padding-right: 0;
}
#side-col-panel-group {
//width: 50% !important;
#annotation-markers-panel {
display: none !important;
}
}
}
}
\ No newline at end of file
......@@ -3587,6 +3587,31 @@ canvas.cursor-tool-arrow2 {
border-right: solid 1px #c9c9c9;
width: 25px;
}
.adim-env-geomo #side-col {
width: 350px;
}
.adim-env-geomo #side-col.collapsed {
margin: 0 -375px 0 25px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-1 {
width: 250px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-1.collapsed {
margin: 0 -275px 0 25px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-2 {
width: 450px;
}
.adim-env-geomo .adim-view-review #side-col.col-sm-2.collapsed {
margin: 0 -475px 0 25px;
}
.adim-env-geomo .adim-view-review #alt-side-col-panel-group {
margin-right: 0;
padding-right: 0;
}
.adim-env-geomo .adim-view-review #side-col-panel-group #annotation-markers-panel {
display: none !important;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
......
......@@ -34,7 +34,7 @@
<span class="icon-line"></span><span class="tool-text"> Lignes</span>
</label>
<label class="btn btn-lg-off btn-primary">
<input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
<input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipsegeo">
<span class="icon icon-elipse"></span><span class="tool-text"> Cercle</span>
</label>
<label class="btn btn-lg-off btn-primary">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment