@totvs-agro/mobile-components
Version:
Componentes Mobile Totvs (Front-End) para utilização dos estilos do T-Faces e Ionic v3
298 lines • 13.8 kB
JavaScript
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import { PontoShapeModel } from "../../model/shape/ponto-shape-model";
import { GoogleMapsEvent } from "@ionic-native/google-maps";
import * as turf from '@turf/turf';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/interval';
import { PolygonUtil } from "../../map/polygon-util";
var PontosShapeListController = /** @class */ (function () {
function PontosShapeListController(map, _events) {
this.map = map;
this._events = _events;
this.COLOR_SHAPE_INVISIBLE = 'rgba(102, 170, 170, 0)';
this.COLOR_SHAPE_VISIBLE = 'rgba(102, 170, 170, 0.5)';
this._points = [];
this._middleMarkers = [];
this.areaShape = 0;
}
PontosShapeListController.prototype.addAll = function (positions, options) {
var _this = this;
if (!options) {
options = {
index: null,
drawMiddleMarkers: true
};
}
positions.forEach(function (p) {
var marker = _this.createMarkerPoint(p);
var point = new PontoShapeModel(p, marker);
_this._points.push(point);
});
if (options.drawMiddleMarkers != false) {
this.generateMiddleMarkers();
}
this.drawPolygon();
this.unselectPoints();
};
PontosShapeListController.prototype.add = function (latLng, options) {
if (!options) {
options = {
index: null,
drawMiddleMarkers: true
};
}
var marker = this.createMarkerPoint(latLng, options.index);
var point = new PontoShapeModel(latLng, marker);
if (options.index) {
this._points.splice(options.index, 0, point);
}
else {
this._points.push(point);
}
if (options.drawMiddleMarkers != false) {
this.generateMiddleMarkers();
}
this.drawPolygon();
this.unselectPoints();
return marker;
};
PontosShapeListController.prototype.clear = function () {
this._points.forEach(function (p) { return p.destroyMarker(); });
this._middleMarkers.forEach(function (m) { return m.destroy(); });
this._points = [];
this._middleMarkers = [];
this.areaShape = 0;
this._polygon.destroy();
//this.map.clear();
};
PontosShapeListController.prototype.selectMarker = function (marker) {
this.unselectMiddlePoints();
var point = this._points[marker.get('_index')];
this._points.forEach(function (p) { return p.unselectIfDiff(point); });
this._selectedPoint = point;
point.setSelected(true);
this._events.publish("shape-draw:deletePoint");
};
PontosShapeListController.prototype.getSelectedPoint = function () {
return this._selectedPoint;
};
PontosShapeListController.prototype.unselectPoints = function () {
this.unselectMiddlePoints();
this._points.forEach(function (p) { return p.setSelected(false); });
this._selectedPoint = null;
};
PontosShapeListController.prototype.removeSelectedPoint = function () {
var _this = this;
if (this._selectedPoint) {
this._points.forEach(function (p, i, arr) {
if (p == _this._selectedPoint) {
p.destroyMarker();
_this._points.splice(i, 1);
}
});
if (this._points.length != 0) {
this.drawPolygon();
this.generateMiddleMarkers();
this.adjustMarkersIndexes();
this.unselectPoints();
}
}
};
PontosShapeListController.prototype.createMarkerPoint = function (latLng, index) {
var _this = this;
var marker = this.map.addMarkerSync({
icon: { url: './assets/images/marker-point.png' },
position: latLng,
draggable: true,
disableAutoPan: true,
'_index': index ? index : this.nextIndex()
});
marker.setAnimation(null);
marker.setIconAnchor(16, 16);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(function (params) { return _this.selectMarker(params[1]); });
marker.on(GoogleMapsEvent.MARKER_DRAG_START).subscribe(function (params) {
_this.selectMarker(params[1]);
_this.changeMarkerPosition(params[1]);
_this.clearMiddleMarkers();
_this._polygon.setFillColor(_this.COLOR_SHAPE_INVISIBLE);
_this.observablePolygonArea("start");
});
marker.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(function (params) {
_this._polygon.setFillColor(_this.COLOR_SHAPE_VISIBLE);
_this.generateMiddleMarkers();
_this.observablePolygonArea("end");
});
marker.on(GoogleMapsEvent.MARKER_DRAG).subscribe(function (params) {
_this.changeMarkerPosition(params[1]);
});
return marker;
};
PontosShapeListController.prototype.clearMiddleMarkers = function () {
this._middleMarkers.forEach(function (marker) { return marker.remove(); });
this._middleMarkers.length = 0;
};
PontosShapeListController.prototype.generateMiddleMarkers = function () {
this.clearMiddleMarkers();
if (this._points.length < 3) {
return;
}
for (var i = 0; i < this._points.length; i++) {
var actualPoint = this._points[i];
var nextPoint = this._points[i + 1];
var finalMiddlePoint = nextPoint == null;
if (finalMiddlePoint) {
nextPoint = this._points[0];
}
var previousPointTurf = turf.point([nextPoint.latLng.lat, nextPoint.latLng.lng]);
var actualPointTurf = turf.point([actualPoint.latLng.lat, actualPoint.latLng.lng]);
var midPointTurf = turf.midpoint(previousPointTurf, actualPointTurf);
var coordinates = midPointTurf.geometry.coordinates;
var latLng = { lat: coordinates[0], lng: coordinates[1] };
var middleMarker = this.createMiddleMarkerPoint(latLng, i, finalMiddlePoint ? 0 : i + 1);
this._middleMarkers.push(middleMarker);
}
};
PontosShapeListController.prototype.createMiddleMarkerPoint = function (latLng, indexBefore, indexAfter) {
var _this = this;
var marker = this.map.addMarkerSync({
icon: { url: './assets/images/marker-new.png' },
position: latLng,
draggable: false,
disableAutoPan: true,
'indexBefore': indexBefore,
'indexAfter': indexAfter
});
marker.setIconAnchor(8, 8);
marker.setOpacity(1);
marker.setAnimation(null);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(function (params) {
_this.unselectMiddlePoints();
_this._points.forEach(function (p) { return p.unselectIfDiff(null); });
var marker = params[1];
marker.setIcon({ url: './assets/images/marker-move.png' });
var index = marker.get('indexAfter');
marker.destroy();
var newMarker = _this.add(params[0], {
index: index,
drawMiddleMarkers: true
});
_this.adjustMarkersIndexes();
_this.selectMarker(newMarker);
});
marker.on(GoogleMapsEvent.MARKER_DRAG_START).subscribe(function (params) { return _this._polygon.setFillColor(_this.COLOR_SHAPE_INVISIBLE); });
marker.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(function (params) { return _this._polygon.setFillColor(_this.COLOR_SHAPE_VISIBLE); });
return marker;
};
PontosShapeListController.prototype.adjustMarkersIndexes = function () {
this._points.forEach(function (point, index, arr) { return point.marker.set('_index', index); });
};
PontosShapeListController.prototype.nextIndex = function () {
return this._points.length;
};
PontosShapeListController.prototype.isPolygonDrew = function () {
if (this._points.length >= 3)
return true;
return false;
};
PontosShapeListController.prototype.changeMarkerPosition = function (marker) {
return __awaiter(this, void 0, void 0, function () {
var index, latLng;
return __generator(this, function (_a) {
index = marker.get('_index');
latLng = marker.getPosition();
this._points[index].changePosition(latLng);
this._polygon.getPoints().setAt(index, latLng);
return [2 /*return*/];
});
});
};
PontosShapeListController.prototype.drawPolygon = function () {
if (this._polygon) {
this._polygon.remove();
}
this._polygon = this.map.addPolygonSync({
points: this.getLatLngPoints(),
strokeColor: '#ffffff',
fillColor: this.COLOR_SHAPE_VISIBLE,
strokeWidth: 3,
clickable: true
});
this.areaShape = PolygonUtil.calcPolygonAreaHa(this._polygon);
};
PontosShapeListController.prototype.observablePolygonArea = function (action) {
var _this = this;
if (action == "start") {
this._observable = Observable.interval(100)
.subscribe(function (p) {
_this.areaShape = PolygonUtil.calcPolygonAreaHa(_this._polygon);
});
}
else if (this._observable) {
this._observable.unsubscribe();
}
};
PontosShapeListController.prototype.getLatLngPoints = function () {
return this._points.map(function (p) { return p.latLng; });
};
PontosShapeListController.prototype.getSimplifiedPoints = function () {
return this.getSimplifiedPointsByList(this.getLatLngPoints());
};
PontosShapeListController.prototype.getSimplifiedPointsByList = function (points) {
var listPoint = [].concat(points);
listPoint.push(points[0]);
var turfCoords = PolygonUtil.coordsGoogleToTurf(listPoint);
var polygon = turf.polygon([turfCoords]);
var simplifiedTurfPolygon = turf.simplify(polygon, {
tolerance: 0.00001,
highQuality: false
});
return PolygonUtil.coordsTurfToGoogle(simplifiedTurfPolygon.geometry.coordinates[0]);
};
PontosShapeListController.prototype.unselectMiddlePoints = function () {
this._middleMarkers.forEach(function (m) {
m.setIcon({ url: './assets/images/marker-new.png' });
m.setDraggable(false);
});
};
PontosShapeListController.prototype.getAreaPolygon = function () {
return this.areaShape;
};
return PontosShapeListController;
}());
export { PontosShapeListController };
//# sourceMappingURL=shape-draw-controller.js.map