Skip to content

Commit

Permalink
Adjust paddings, Scale Font Size, Shorten label text #1491
Browse files Browse the repository at this point in the history
  • Loading branch information
@ce-bo
ce-bo committed Nov 28, 2020
1 parent 9f0e096 commit 4a9c3dc
Show file tree
Hide file tree
Showing 8 changed files with 387 additions and 365 deletions.
68 changes: 34 additions & 34 deletions visualization/app/codeCharta/ui/codeMap/__snapshots__/codeMap.render.service.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,24 @@ Array [
"heightDelta": 0,
"id": 0,
"incomingEdgePoint": Vector3 {
"x": 252.57550765359252,
"x": 225.07550765359252,
"y": 2,
"z": 1.287753826796262,
"z": -12.462246173203738,
},
"isLeaf": false,
"length": 1005.151015307185,
"length": 950.151015307185,
"link": undefined,
"mapNodeDepth": 0,
"markingColor": undefined,
"name": "root",
"outgoingEdgePoint": Vector3 {
"x": 252.57550765359252,
"x": 225.07550765359252,
"y": 2,
"z": 503.8632614803888,
"z": 462.6132614803888,
},
"path": "/root",
"visible": true,
"width": 1005.151015307185,
"width": 950.151015307185,
"x0": 0,
"y0": 0,
"z0": 0,
Expand All @@ -55,24 +55,24 @@ Array [
"heightDelta": 0,
"id": 1,
"incomingEdgePoint": Vector3 {
"x": -26.612246173203744,
"x": -32.862246173203744,
"y": 4,
"z": 10.887753826796228,
"z": -2.862246173203772,
},
"isLeaf": true,
"length": 966.751015307185,
"length": 911.751015307185,
"link": "http://www.google.de",
"mapNodeDepth": 1,
"markingColor": undefined,
"name": "big leaf",
"outgoingEdgePoint": Vector3 {
"x": -26.612246173203744,
"x": -32.862246173203744,
"y": 4,
"z": 494.26326148038873,
"z": 453.01326148038873,
},
"path": "/root/big leaf",
"visible": true,
"width": 408.37550765359254,
"width": 395.87550765359254,
"x0": 19.200000000000003,
"y0": 19.200000000000003,
"z0": 2,
Expand All @@ -92,25 +92,25 @@ Array [
"heightDelta": 0,
"id": 2,
"incomingEdgePoint": Vector3 {
"x": 400.96326148038884,
"x": 382.21326148038884,
"y": 4,
"z": 10.887753826796228,
"z": -2.862246173203772,
},
"isLeaf": false,
"length": 966.751015307185,
"length": 911.751015307185,
"link": undefined,
"mapNodeDepth": 1,
"markingColor": undefined,
"name": "Parent Leaf",
"outgoingEdgePoint": Vector3 {
"x": 400.96326148038884,
"x": 382.21326148038884,
"y": 4,
"z": 494.26326148038873,
"z": 453.01326148038873,
},
"path": "/root/Parent Leaf",
"visible": true,
"width": 408.3755076535925,
"x0": 446.77550765359257,
"width": 395.8755076535925,
"x0": 434.27550765359257,
"y0": 19.200000000000003,
"z0": 2,
},
Expand All @@ -130,25 +130,25 @@ Array [
"heightDelta": 0,
"id": 3,
"incomingEdgePoint": Vector3 {
"x": 283.2693845669907,
"x": 273.8943845669907,
"y": 6,
"z": -79.06734770392225,
"z": -87.31734770392224,
},
"isLeaf": true,
"length": 265.0653045921555,
"length": 248.5653045921555,
"link": undefined,
"mapNodeDepth": 2,
"markingColor": undefined,
"name": "small leaf",
"outgoingEdgePoint": Vector3 {
"x": 417.85713839378695,
"x": 414.73213839378695,
"y": 6,
"z": -79.06734770392225,
"z": -87.31734770392224,
},
"path": "/root/Parent Leaf/small leaf",
"visible": true,
"width": 269.17550765359243,
"x0": 465.9755076535926,
"width": 281.67550765359243,
"x0": 453.4755076535926,
"y0": 38.400000000000006,
"z0": 4,
},
Expand All @@ -168,26 +168,26 @@ Array [
"heightDelta": 0,
"id": 4,
"incomingEdgePoint": Vector3 {
"x": 350.56326148038886,
"x": 344.31326148038886,
"y": 6,
"z": 233.6867322709129,
"z": 207.5617322709129,
},
"isLeaf": true,
"length": 644.0857107150293,
"length": 605.5857107150293,
"link": undefined,
"mapNodeDepth": 2,
"markingColor": undefined,
"name": "other small leaf",
"outgoingEdgePoint": Vector3 {
"x": 350.56326148038886,
"x": 344.31326148038886,
"y": 6,
"z": 555.7295876284276,
"z": 510.35458762842757,
},
"path": "/root/Parent Leaf/other small leaf",
"visible": true,
"width": 269.17550765359243,
"x0": 465.9755076535926,
"y0": 322.66530459215556,
"width": 281.67550765359243,
"x0": 453.4755076535926,
"y0": 306.16530459215556,
"z0": 4,
},
]
Expand Down
9 changes: 7 additions & 2 deletions visualization/app/codeCharta/ui/codeMap/codeMap.render.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,21 @@ import { FileState } from "../../model/files/files"

const ONE_MB = 1024 * 1024

export enum MAP_RESOLUTION_SCALE {
SMALL_MAP = 1,
MEDIUM_MAP = 0.5,
BIG_MAP = 0.25
}
export function getMapResolutionScaleFactor(files: FileState[]) {
let totalFileSize = 0
for (const file of files) {
totalFileSize += file.file.fileMeta.exportedFileSize
}

switch (true) {
case totalFileSize >= 5 * ONE_MB:
case totalFileSize >= 7 * ONE_MB:
return 0.25
case totalFileSize >= ONE_MB:
case totalFileSize >= 2 * ONE_MB:
return 0.5
default:
return 1
Expand Down
2 changes: 1 addition & 1 deletion visualization/app/codeCharta/ui/codeMap/rendering/boxGeometryGenerationHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ export class BoxGeometryGenerationHelper {
} else {
// Collect floors from a depth of 1 until a depth of 3 to be stamped with the folder name as a label
// We skip the root folder because it makes no sense to label it.
if (addingFloor && side === sides.top && node.mapNodeDepth >= 0 && node.mapNodeDepth < 4) {
if (addingFloor && side === sides.top && node.mapNodeDepth >= 0 && node.mapNodeDepth < 3) {
data.saveFloorSurfaceInformation(node, minPos, maxPos)
}

Expand Down
53 changes: 35 additions & 18 deletions visualization/app/codeCharta/ui/codeMap/rendering/geometryGenerator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
RepeatWrapping,
DoubleSide
} from "three"
import { getMapResolutionScaleFactor } from "../codeMap.render.service"
import { getMapResolutionScaleFactor, MAP_RESOLUTION_SCALE } from "../codeMap.render.service"

export interface BoxMeasures {
x: number
Expand All @@ -37,8 +37,12 @@ export class GeometryGenerator {

private floorGradient: string[]
private materials: Material[]
private floorSurfaceLabelFontSizes = [144, 98, 98, 98]
private mapSizeResolutionScaling = 1
private floorSurfaceLabelFontSizes = new Map([
[MAP_RESOLUTION_SCALE.SMALL_MAP, [54, 54, 54]],
[MAP_RESOLUTION_SCALE.MEDIUM_MAP, [72, 54, 54]],
[MAP_RESOLUTION_SCALE.BIG_MAP, [108, 72, 72]]
])
private mapSizeResolutionScaling = MAP_RESOLUTION_SCALE.SMALL_MAP

build(nodes: Node[], material: Material, state: State, isDeltaState: boolean): BuildResult {
const data = new IntermediateVertexData()
Expand Down Expand Up @@ -252,21 +256,34 @@ export class GeometryGenerator {
textCanvas.width = surfaceInfo.maxPos.z - surfaceInfo.minPos.z

const context = textCanvas.getContext("2d")

const fontSizeForDepth = this.floorSurfaceLabelFontSizes[surfaceInfo.node.mapNodeDepth] * this.mapSizeResolutionScaling
context.font = `${fontSizeForDepth}px Arial`

context.fillStyle = this.getMarkingColorWithGradient(surfaceInfo.node)
context.fillRect(0, 0, textCanvas.width, textCanvas.height)

let labelText = surfaceInfo.node.name
const fonSizesForMapSize = this.floorSurfaceLabelFontSizes.get(this.mapSizeResolutionScaling)
const fontSizeForNodeDepth = fonSizesForMapSize[surfaceInfo.node.mapNodeDepth]
context.font = `${fontSizeForNodeDepth}px Arial`

const widthOfText = context.measureText(labelText)
const fontScaleFactor = this.getFontScaleFactor(textCanvas.width, widthOfText.width)
if (fontScaleFactor <= 0.5) {
// Font will be to small.
// So scale text not smaller than 0.5 and shorten it as well
context.font = `${fontSizeForNodeDepth * 0.5}px Arial`
labelText = this.getFittingLabelText(context, textCanvas.width, labelText, context.measureText(labelText).width)
} else {
context.font = `${fontSizeForNodeDepth * fontScaleFactor}px Arial`
}

context.fillStyle = "white"
context.textAlign = "center"
context.textBaseline = "middle"

// consider font size for y position
const textPositionY = textCanvas.height - fontSizeForDepth / 2
const textPositionY = textCanvas.height - fontSizeForNodeDepth / 2
const textPositionX = textCanvas.width / 2
const fittingLabel = this.getFittingLabel(context, textCanvas.width, surfaceInfo.node.name)
context.fillText(fittingLabel, textPositionX, textPositionY)

context.fillText(labelText, textPositionX, textPositionY)

const labelTexture = new CanvasTexture(textCanvas)
// Texture is mirrored (spiegelverkehrt)
Expand All @@ -283,18 +300,18 @@ export class GeometryGenerator {
this.materials.push(floorSurfaceLabelMaterial)
}

private getFittingLabel(context: CanvasRenderingContext2D, canvasWidth: number, text: string) {
const widthOfText = context.measureText(text).width
if (widthOfText < canvasWidth) {
return text
}
private getFontScaleFactor(canvasWidth: number, widthOfText: number) {
return widthOfText < canvasWidth ? 1 : canvasWidth / widthOfText
}

private getFittingLabelText(context: CanvasRenderingContext2D, canvasWidth: number, labelText: string, widthOfText: number) {
let textSplitIndex = Math.floor((labelText.length * canvasWidth) / widthOfText)
let abbreviatedText = `${labelText.slice(0, textSplitIndex)}...`

let textSplitIndex = Math.floor((text.length * canvasWidth) / widthOfText)
let abbreviatedText = `${text.slice(0, textSplitIndex)}...`
while (context.measureText(abbreviatedText).width >= canvasWidth && textSplitIndex > 1) {
// textSplitIndex > 1 to ensure it contains at least one char
textSplitIndex -= 1
abbreviatedText = `${text.slice(0, textSplitIndex)}...`
abbreviatedText = `${labelText.slice(0, textSplitIndex)}...`
}

return abbreviatedText
Expand Down
3 changes: 3 additions & 0 deletions visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber {
}

private updateCorrectMaterial(materials: Material[], nodes: CodeMapBuilding[], select: boolean) {
// TODO This loops introduce performance issues
// refactor it please
return
const allNodes = this.mapMesh.getNodes()

for (const node of allNodes) {
Expand Down
2 changes: 1 addition & 1 deletion visualization/app/codeCharta/ui/fileChooser/fileChooser.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class FileChooserController {
}
reader.onloadend = () => {
readFiles++
this.addNameDataPair(file.name, content)
this.addNameDataPair(file, content)

if (readFiles === element.files.length) {
this.setNewData()
Expand Down
Loading

0 comments on commit 4a9c3dc

Please sign in to comment.