in src/component/tag/tag/OutlineRenderTag.ts [52:216]
public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
const vNodes: vd.VNode[] = [];
const isRect: boolean = this._tag.geometry instanceof RectGeometry;
const isPerspective: boolean = !isSpherical(this._transform.cameraType);
const container: { offsetHeight: number, offsetWidth: number } = {
offsetHeight: size.height, offsetWidth: size.width,
};
if (this._tag.icon != null && (isRect || isPerspective)) {
const [iconBasicX, iconBasicY]: number[] = this._tag.geometry instanceof RectGeometry ?
this._tag.geometry.getVertex2d(this._tag.iconIndex) :
this._tag.geometry.getPoleOfInaccessibility2d();
const iconCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
iconBasicX,
iconBasicY,
container,
this._transform,
camera);
if (iconCanvas != null) {
const interact: (e: MouseEvent) => void = (): void => {
this._interact$.next({ offsetX: 0, offsetY: 0, operation: TagOperation.None, tag: this._tag });
};
if (atlas.loaded) {
const sprite: vd.VNode = atlas.getDOMSprite(this._tag.icon, this._tag.iconFloat);
const iconCanvasX: number = Math.round(iconCanvas[0]);
const iconCanvasY: number = Math.round(iconCanvas[1]);
const transform: string = `translate(${iconCanvasX}px,${iconCanvasY}px)`;
const click: (e: MouseEvent) => void = (e: MouseEvent): void => {
e.stopPropagation();
this._tag.click$.next(this._tag);
};
const properties: vd.createProperties = {
onclick: click,
onpointerdown: interact,
style: { transform: transform },
};
vNodes.push(vd.h("div.mapillary-tag-symbol", properties, [sprite]));
}
}
} else if (this._tag.text != null && (isRect || isPerspective)) {
const [textBasicX, textBasicY]: number[] = this._tag.geometry instanceof RectGeometry ?
this._tag.geometry.getVertex2d(3) :
this._tag.geometry.getPoleOfInaccessibility2d();
const textCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
textBasicX,
textBasicY,
container,
this._transform,
camera);
if (textCanvas != null) {
const textCanvasX: number = Math.round(textCanvas[0]);
const textCanvasY: number = Math.round(textCanvas[1]);
const transform: string = this._tag.geometry instanceof RectGeometry ?
`translate(${textCanvasX}px,${textCanvasY}px)` :
`translate(-50%, -50%) translate(${textCanvasX}px,${textCanvasY}px)`;
const interact: (e: MouseEvent) => void = (): void => {
this._interact$.next({ offsetX: 0, offsetY: 0, operation: TagOperation.None, tag: this._tag });
};
const properties: vd.createProperties = {
onpointerdown: interact,
style: {
color: this._colorToCss(this._tag.textColor),
transform: transform,
},
textContent: this._tag.text,
};
vNodes.push(vd.h("span.mapillary-tag-symbol", properties, []));
}
}
if (!this._tag.editable) {
return vNodes;
}
const lineColor: string = this._colorToCss(this._tag.lineColor);
if (this._tag.geometry instanceof RectGeometry) {
const [centroidBasicX, centroidBasicY]: number[] = this._tag.geometry.getCentroid2d();
const centroidCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
centroidBasicX,
centroidBasicY,
container,
this._transform,
camera);
if (centroidCanvas != null) {
const interact: (e: MouseEvent) => void = this._interact(TagOperation.Centroid, "move");
const centroidCanvasX: number = Math.round(centroidCanvas[0]);
const centroidCanvasY: number = Math.round(centroidCanvas[1]);
const transform: string = `translate(-50%, -50%) translate(${centroidCanvasX}px,${centroidCanvasY}px)`;
const properties: vd.createProperties = {
onpointerdown: interact,
style: { background: lineColor, transform: transform },
};
vNodes.push(vd.h("div.mapillary-tag-mover", properties, []));
}
}
const vertices2d: number[][] = this._tag.geometry.getVertices2d();
for (let i: number = 0; i < vertices2d.length - 1; i++) {
if (isRect &&
((this._tag.icon != null && i === this._tag.iconIndex) ||
(this._tag.icon == null && this._tag.text != null && i === 3))) {
continue;
}
const [vertexBasicX, vertexBasicY]: number[] = vertices2d[i];
const vertexCanvas: number[] =
this._viewportCoords.basicToCanvasSafe(
vertexBasicX,
vertexBasicY,
container,
this._transform,
camera);
if (vertexCanvas == null) {
continue;
}
const cursor: InteractionCursor = isRect ?
i % 2 === 0 ? "nesw-resize" : "nwse-resize" :
"crosshair";
const interact: (e: MouseEvent) => void = this._interact(TagOperation.Vertex, cursor, i);
const vertexCanvasX: number = Math.round(vertexCanvas[0]);
const vertexCanvasY: number = Math.round(vertexCanvas[1]);
const transform: string = `translate(-50%, -50%) translate(${vertexCanvasX}px,${vertexCanvasY}px)`;
const properties: vd.createProperties = {
onpointerdown: interact,
style: { background: lineColor, transform: transform, cursor: cursor },
};
vNodes.push(vd.h("div.mapillary-tag-resizer", properties, []));
if (!this._tag.indicateVertices) {
continue;
}
const pointProperties: vd.createProperties = {
style: { background: lineColor, transform: transform },
};
vNodes.push(vd.h("div.mapillary-tag-vertex", pointProperties, []));
}
return vNodes;
}