@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
329 lines (328 loc) • 10.4 kB
JavaScript
import ConfigManager from '../../tools/configuration/configmanager';
import StateManager from '../../tools/state/statemanager';
import ShapeNamer from './shapeNamer';
import { v4 as uuidv4 } from 'uuid';
import { Fill, RegularShape, Stroke, Style } from 'ol/style';
import { toRadians } from 'ol/math';
export var DrawingShape;
(function (DrawingShape) {
DrawingShape[DrawingShape["Point"] = 0] = "Point";
DrawingShape[DrawingShape["Polyline"] = 1] = "Polyline";
DrawingShape[DrawingShape["Polygon"] = 2] = "Polygon";
DrawingShape[DrawingShape["Square"] = 3] = "Square";
DrawingShape[DrawingShape["Rectangle"] = 4] = "Rectangle";
DrawingShape[DrawingShape["Disk"] = 5] = "Disk";
DrawingShape[DrawingShape["FreehandPolyline"] = 6] = "FreehandPolyline";
DrawingShape[DrawingShape["FreehandPolygon"] = 7] = "FreehandPolygon";
})(DrawingShape || (DrawingShape = {}));
export class DrawingState {
constructor() {
Object.defineProperty(this, "activeTool", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "features", {
enumerable: true,
configurable: true,
writable: true,
value: []
});
}
}
export default class DrawingFeature {
constructor(tool, geojson = {}, name = null) {
Object.defineProperty(this, "_tool", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_name", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_nameColor", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_strokeColor", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_strokeWidth", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_fillColor", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_nameFontSize", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_measureFontSize", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_measureColor", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_font", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "_displayName", {
enumerable: true,
configurable: true,
writable: true,
value: true
});
Object.defineProperty(this, "_displayMeasure", {
enumerable: true,
configurable: true,
writable: true,
value: true
});
Object.defineProperty(this, "_selected", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "geojson", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "id", {
enumerable: true,
configurable: true,
writable: true,
value: uuidv4()
});
Object.defineProperty(this, "onChange", {
enumerable: true,
configurable: true,
writable: true,
value: () => { }
});
const defaultConfig = ConfigManager.getInstance().Config.drawing;
this._tool = tool;
this._name = name == null ? ShapeNamer.getRandomName(DrawingShape[tool]) : name;
this._strokeColor = defaultConfig.defaultStrokeColor;
this._strokeWidth = defaultConfig.defaultStrokeWidth;
this._fillColor = defaultConfig.defaultFillColor;
this._nameFontSize = defaultConfig.defaultTextSize;
this._measureFontSize = defaultConfig.defaultTextSize;
this._font = defaultConfig.defaultFont;
this.geojson = geojson;
this._nameColor = '#000000';
this._measureColor = '#000000';
}
get name() {
return this._name;
}
set name(v) {
this._name = v;
this.onChange(this);
}
get strokeColor() {
return this._strokeColor;
}
set strokeColor(v) {
this._strokeColor = v;
this.onChange(this);
}
get strokeWidth() {
return this._strokeWidth;
}
set strokeWidth(v) {
this._strokeWidth = v;
this.onChange(this);
}
get fillColor() {
return this._fillColor;
}
set fillColor(v) {
this._fillColor = v;
this.onChange(this);
}
get nameFontSize() {
return this._nameFontSize;
}
set nameFontSize(v) {
this._nameFontSize = v;
this.onChange(this);
}
get measureFontSize() {
return this._measureFontSize;
}
set measureFontSize(v) {
this._measureFontSize = v;
this.onChange(this);
}
get font() {
return this._font;
}
set font(v) {
this._font = v;
this.onChange(this);
}
get displayName() {
return this._displayName;
}
set displayName(v) {
this._displayName = v;
this.onChange(this);
}
get displayMeasure() {
return this._displayMeasure;
}
set displayMeasure(v) {
this._displayMeasure = v;
this.onChange(this);
}
get nameColor() {
return this._nameColor;
}
set nameColor(v) {
this._nameColor = v;
this.onChange(this);
}
get measureColor() {
return this._measureColor;
}
set measureColor(v) {
this._measureColor = v;
this.onChange(this);
}
get type() {
return this._tool;
}
get selected() {
return this._selected;
}
set selected(v) {
this._selected = v;
this.onChange(this);
}
addToState() {
StateManager.getInstance().state.extendedState.drawing.features.push(this);
}
serialize() {
return {
n: this._name,
sc: this._strokeColor,
sw: this._strokeWidth,
fc: this._fillColor,
nfz: this._nameFontSize,
mfz: this._measureFontSize,
f: this._font,
g: this.geojson,
t: this._tool,
dn: this._displayName,
dm: this._displayMeasure,
nc: this._nameColor,
mc: this._measureColor,
s: this._selected
};
}
getLengthText(length) {
if (this.displayMeasure) {
return length > 100 ? (length / 1000).toFixed(2) + ' km' : length.toFixed(2) + ' m';
}
else {
return '';
}
}
getAreaText(area) {
if (this.displayMeasure) {
return area > 10000 ? (area / 1000000).toFixed(2) + ' km²' : area.toFixed(2) + ' m²';
}
else {
return '';
}
}
getCoordText(coord) {
if (!this.displayMeasure) {
return '';
}
else if (coord.length > 2) {
return 'E ' + coord[0].toFixed(2) + '\nN ' + coord[1].toFixed(2) + '\nH ' + coord[2].toFixed(2);
}
else {
return 'E ' + coord[0].toFixed(2) + '\nN ' + coord[1].toFixed(2);
}
}
isPointOrPolyline() {
return (this.type == DrawingShape.Point ||
this.type == DrawingShape.Polyline ||
this.type == DrawingShape.FreehandPolyline);
}
getVertexStyle(activeNode = false) {
const defaultConfig = ConfigManager.getInstance().Config.drawing;
return new Style({
zIndex: 1002,
image: new RegularShape({
points: 4,
radius: activeNode ? defaultConfig.defaultVertexRadius + 2 : defaultConfig.defaultVertexRadius,
angle: toRadians(45),
rotateWithView: false,
fill: new Fill({
color: defaultConfig.defaultVertexFillColor
}),
stroke: new Stroke({
color: this.strokeColor,
width: activeNode ? defaultConfig.defaultVertexStrokeWidth + 2 : defaultConfig.defaultVertexStrokeWidth
})
})
});
}
static deserialize(serializedFeature) {
const newFeature = new DrawingFeature(serializedFeature.t, serializedFeature.g, serializedFeature.n);
newFeature.strokeColor = serializedFeature.sc;
newFeature.strokeWidth = serializedFeature.sw;
newFeature.fillColor = serializedFeature.fc;
newFeature.nameFontSize = serializedFeature.nfz;
newFeature.measureFontSize = serializedFeature.mfz;
newFeature.font = serializedFeature.f;
newFeature.geojson = serializedFeature.g;
newFeature.displayName = serializedFeature.dn;
newFeature.displayMeasure = serializedFeature.dm;
newFeature.nameColor = serializedFeature.nc;
newFeature.measureColor = serializedFeature.mc;
newFeature.selected = serializedFeature.s;
newFeature.addToState();
return newFeature;
}
static circleToPolygon(center, radius, nbEdges = 300) {
const positions = [];
for (let i = 0; i < 2 * Math.PI; i += (2 * Math.PI) / nbEdges) {
positions.push([center[0] + radius * Math.cos(i), center[1] + radius * Math.sin(i)]);
}
return [...positions, positions[0]];
}
}