in src/component/tag/tag/OutlineCreateTag.ts [48:173]
public getDOMObjects(camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
const vNodes: vd.VNode[] = [];
const container: { offsetHeight: number, offsetWidth: number } = {
offsetHeight: size.height, offsetWidth: size.width,
};
const abort: (e: MouseEvent) => void = (e: MouseEvent): void => {
e.stopPropagation();
this._aborted$.next(this);
};
if (this._geometry instanceof RectGeometry) {
const anchorIndex: number = (<RectGeometry>this._geometry).anchorIndex;
const vertexIndex: number = anchorIndex === undefined ? 1 : anchorIndex;
const [basicX, basicY]: number[] = this._geometry.getVertex2d(vertexIndex);
const canvasPoint: number[] =
this._viewportCoords.basicToCanvasSafe(
basicX,
basicY,
container,
this._transform,
camera);
if (canvasPoint != null) {
const background: string = this._colorToBackground(this._options.color);
const transform: string = this._canvasToTransform(canvasPoint);
const pointProperties: vd.createProperties = {
style: { background: background, transform: transform },
};
const completerProperties: vd.createProperties = {
onclick: abort,
style: { transform: transform },
};
vNodes.push(vd.h("div.mapillary-tag-interactor", completerProperties, []));
vNodes.push(vd.h("div.mapillary-tag-vertex", pointProperties, []));
}
} else if (this._geometry instanceof PolygonGeometry) {
const polygonGeometry: PolygonGeometry = <PolygonGeometry>this._geometry;
const [firstVertexBasicX, firstVertexBasicY]: number[] = polygonGeometry.getVertex2d(0);
const firstVertexCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
firstVertexBasicX,
firstVertexBasicY,
container,
this._transform,
camera);
if (firstVertexCanvas != null) {
const firstOnclick: (e: MouseEvent) => void = polygonGeometry.polygon.length > 4 ?
(e: MouseEvent): void => {
e.stopPropagation();
polygonGeometry.removeVertex2d(polygonGeometry.polygon.length - 2);
this._created$.next(this);
} :
abort;
const transform: string = this._canvasToTransform(firstVertexCanvas);
const completerProperties: vd.createProperties = {
onclick: firstOnclick,
style: { transform: transform },
};
const firstClass: string = polygonGeometry.polygon.length > 4 ?
"mapillary-tag-completer" :
"mapillary-tag-interactor";
vNodes.push(vd.h("div." + firstClass, completerProperties, []));
}
if (polygonGeometry.polygon.length > 3) {
const [lastVertexBasicX, lastVertexBasicY]: number[] = polygonGeometry.getVertex2d(polygonGeometry.polygon.length - 3);
const lastVertexCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
lastVertexBasicX,
lastVertexBasicY,
container,
this._transform,
camera);
if (lastVertexCanvas != null) {
const remove: (e: MouseEvent) => void = (e: MouseEvent): void => {
e.stopPropagation();
polygonGeometry.removeVertex2d(polygonGeometry.polygon.length - 3);
};
const transform: string = this._canvasToTransform(lastVertexCanvas);
const completerProperties: vd.createProperties = {
onclick: remove,
style: { transform: transform },
};
vNodes.push(vd.h("div.mapillary-tag-interactor", completerProperties, []));
}
}
const verticesBasic: number[][] = polygonGeometry.polygon.slice();
verticesBasic.splice(-2, 2);
for (const vertexBasic of verticesBasic) {
const vertexCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
vertexBasic[0],
vertexBasic[1],
container,
this._transform,
camera);
if (vertexCanvas != null) {
const background: string = this._colorToBackground(this._options.color);
const transform: string = this._canvasToTransform(vertexCanvas);
const pointProperties: vd.createProperties = {
style: {
background: background,
transform: transform,
},
};
vNodes.push(vd.h("div.mapillary-tag-vertex", pointProperties, []));
}
}
}
return vNodes;
}