summaryrefslogtreecommitdiff
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-rw-r--r--app/components/graph/graph.tsx27
-rw-r--r--app/components/tweaks/tweaks.tsx12
2 files changed, 39 insertions, 0 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 00a4910..bf5aff7 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -198,6 +198,33 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
linkDirectionalParticleWidth={physics.particleWidth}
+ nodeCanvasObject={(node, ctx, globalScale) => {
+ if(physics.labels){
+ if(globalScale > physics.labelScale ) {
+ const label = node.title.substring(0, Math.min(node.title.length, 30));
+ const fontSize = 12/globalScale;
+ ctx.font = `${fontSize}px Sans-Serif`;
+ const textWidth = ctx.measureText(label).width;
+ const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.2); // some padding
+
+ ctx.fillStyle = 'rgba(20, 20, 20, 0.8)';
+ ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = "#ffffff"; //node.color;
+ ctx.fillText(label, node.x, node.y);
+
+ node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
+ }
+ }
+ }}
+ nodePointerAreaPaint={(node, color, ctx) => {
+ ctx.fillStyle = color;
+ const bckgDimensions = node.__bckgDimensions;
+ bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+ }}
+ nodeCanvasObjectMode={()=>'after'}
/>
) : (
<ForceGraph3D
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 2a2e3d3..e235ad4 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -109,6 +109,18 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
onValueChange={(value) => { setPhysics({ ...physics, particleWidth: value }) }}
value={physics.particleWidth}
step={.1} />
+ <Text preset="fieldLabel" text="Labels" />
+ <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+ value={physics.labels}
+ onValueChange={() => { setPhysics({ ...physics, labels: !physics.labels }) }}
+ />
+ <Text preset="fieldLabel" text={"Scale when labels become visible: " + physics.labelScale} />
+ <Slider style={{ height: 40, width: "90%" }}
+ minimumValue={0.1}
+ maximumValue={5}
+ onValueChange={(value) => { setPhysics({ ...physics, labelScale: value }) }}
+ value={physics.labelScale}
+ step={.1} />
</View>,
},
{