Skip to content
Snippets Groups Projects
Commit 39b025b5 authored by Alexander Rose's avatar Alexander Rose
Browse files

text tether tweaks

parent af8cf066
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/mol-geo/geometry/text/text-builder.ts
+ 27
− 4
View file @ 39b025b5
...@@ -133,79 +133,100 @@ export namespace TextBuilder { ...@@ -133,79 +133,100 @@ export namespace TextBuilder {
} }
if (tether) { if (tether) {
let xTip: number, yTip: number, xBaseA: number, yBaseA: number, xBaseB: number, yBaseB: number let xTip: number, yTip: number
let xBaseA: number, yBaseA: number
let xBaseB: number, yBaseB: number
let xBaseCenter: number, yBaseCenter: number
switch (attachment) { switch (attachment) {
case 'bottom-left': case 'bottom-left':
xTip = xLeft - tetherLength / 2 xTip = xLeft - tetherLength / 2
xBaseA = xLeft + tetherBaseWidth / 2 xBaseA = xLeft + tetherBaseWidth / 2
xBaseB = xLeft xBaseB = xLeft
xBaseCenter = xLeft
yTip = yBottom - tetherLength / 2 yTip = yBottom - tetherLength / 2
yBaseA = yBottom yBaseA = yBottom
yBaseB = yBottom + tetherBaseWidth / 2 yBaseB = yBottom + tetherBaseWidth / 2
yBaseCenter = yBottom
break break
case 'bottom-center': case 'bottom-center':
xTip = 0 xTip = 0
xBaseA = tetherBaseWidth / 2 xBaseA = tetherBaseWidth / 2
xBaseB = -tetherBaseWidth / 2 xBaseB = -tetherBaseWidth / 2
xBaseCenter = 0
yTip = yBottom - tetherLength yTip = yBottom - tetherLength
yBaseA = yBottom yBaseA = yBottom
yBaseB = yBottom yBaseB = yBottom
yBaseCenter = yBottom
break break
case 'bottom-right': case 'bottom-right':
xTip = xRight + tetherLength / 2 xTip = xRight + tetherLength / 2
xBaseA = xRight xBaseA = xRight
xBaseB = xRight - tetherBaseWidth / 2 xBaseB = xRight - tetherBaseWidth / 2
xBaseCenter = xRight
yTip = yBottom - tetherLength / 2 yTip = yBottom - tetherLength / 2
yBaseA = yBottom + tetherBaseWidth / 2 yBaseA = yBottom + tetherBaseWidth / 2
yBaseB = yBottom yBaseB = yBottom
yBaseCenter = yBottom
break break
case 'middle-left': case 'middle-left':
xTip = xLeft - tetherLength xTip = xLeft - tetherLength
xBaseA = xLeft xBaseA = xLeft
xBaseB = xLeft xBaseB = xLeft
xBaseCenter = xLeft
yTip = 0 yTip = 0
yBaseA = -tetherBaseWidth / 2 yBaseA = -tetherBaseWidth / 2
yBaseB = tetherBaseWidth / 2 yBaseB = tetherBaseWidth / 2
yBaseCenter = 0
break break
case 'middle-center': case 'middle-center':
xTip = 0 xTip = 0
xBaseA = 0 xBaseA = 0
xBaseB = 0 xBaseB = 0
xBaseCenter = 0
yTip = 0 yTip = 0
yBaseA = 0 yBaseA = 0
yBaseB = 0 yBaseB = 0
yBaseCenter = 0
break break
case 'middle-right': case 'middle-right':
xTip = xRight + tetherLength xTip = xRight + tetherLength
xBaseA = xRight xBaseA = xRight
xBaseB = xRight - tetherBaseWidth / 2 xBaseB = xRight
xBaseCenter = xRight
yTip = 0 yTip = 0
yBaseA = tetherBaseWidth / 2 yBaseA = tetherBaseWidth / 2
yBaseB = -tetherBaseWidth / 2 yBaseB = -tetherBaseWidth / 2
yBaseCenter = 0
break break
case 'top-left': case 'top-left':
xTip = xLeft - tetherLength / 2 xTip = xLeft - tetherLength / 2
xBaseA = xLeft + tetherBaseWidth / 2 xBaseA = xLeft + tetherBaseWidth / 2
xBaseB = xLeft xBaseB = xLeft
xBaseCenter = xLeft
yTip = yTop + tetherLength / 2 yTip = yTop + tetherLength / 2
yBaseA = yTop yBaseA = yTop
yBaseB = yTop - tetherBaseWidth / 2 yBaseB = yTop - tetherBaseWidth / 2
yBaseCenter = yTop
break break
case 'top-center': case 'top-center':
xTip = 0 xTip = 0
xBaseA = tetherBaseWidth / 2 xBaseA = tetherBaseWidth / 2
xBaseB = -tetherBaseWidth / 2 xBaseB = -tetherBaseWidth / 2
xBaseCenter = 0
yTip = yTop + tetherLength yTip = yTop + tetherLength
yBaseA = yTop yBaseA = yTop
yBaseB = yTop yBaseB = yTop
yBaseCenter = yTop
break break
case 'top-right': case 'top-right':
xTip = xRight + tetherLength / 2 xTip = xRight + tetherLength / 2
xBaseA = xRight xBaseA = xRight
xBaseB = xRight - tetherBaseWidth / 2 xBaseB = xRight - tetherBaseWidth / 2
xBaseCenter = xRight
yTip = yTop + tetherLength / 2 yTip = yTop + tetherLength / 2
yBaseA = yTop - tetherBaseWidth / 2 yBaseA = yTop - tetherBaseWidth / 2
yBaseB = yTop yBaseB = yTop
yBaseCenter = yTop
break break
default: default:
throw new Error('unsupported attachment') throw new Error('unsupported attachment')
...@@ -213,13 +234,15 @@ export namespace TextBuilder { ...@@ -213,13 +234,15 @@ export namespace TextBuilder {
ChunkedArray.add2(mappings, xTip, yTip) // tip ChunkedArray.add2(mappings, xTip, yTip) // tip
ChunkedArray.add2(mappings, xBaseA, yBaseA) // base A ChunkedArray.add2(mappings, xBaseA, yBaseA) // base A
ChunkedArray.add2(mappings, xBaseB, yBaseB) // base B ChunkedArray.add2(mappings, xBaseB, yBaseB) // base B
ChunkedArray.add2(mappings, xBaseCenter, yBaseCenter) // base center
const offset = centers.elementCount const offset = centers.elementCount
for (let i = 0; i < 3; ++i) { for (let i = 0; i < 4; ++i) {
ChunkedArray.add2(tcoords, 10, 10) ChunkedArray.add2(tcoords, 10, 10)
add(x, y, z, depth, group) add(x, y, z, depth, group)
} }
ChunkedArray.add3(indices, offset, offset + 1, offset + 2) ChunkedArray.add3(indices, offset, offset + 1, offset + 3)
ChunkedArray.add3(indices, offset, offset + 3, offset + 2)
} }
xShift += outline xShift += outline
......
src/mol-geo/geometry/text/text.ts
+ 1
− 1
View file @ 39b025b5
...@@ -166,7 +166,7 @@ export namespace Text { ...@@ -166,7 +166,7 @@ export namespace Text {
function createValuesSimple(text: Text, props: Partial<PD.Values<Params>>, colorValue: Color, sizeValue: number, transform?: TransformData) { function createValuesSimple(text: Text, props: Partial<PD.Values<Params>>, colorValue: Color, sizeValue: number, transform?: TransformData) {
const s = BaseGeometry.createSimple(colorValue, sizeValue, transform) const s = BaseGeometry.createSimple(colorValue, sizeValue, transform)
const p = { ...PD.getDefaultValues(Params), props } const p = { ...PD.getDefaultValues(Params), ...props }
return createValues(text, s.transform, s.locationIterator, s.theme, p) return createValues(text, s.transform, s.locationIterator, s.theme, p)
} }
......
src/tests/browser/render-text.ts
+ 4
− 2
View file @ 39b025b5
...@@ -35,8 +35,10 @@ function textRepr() { ...@@ -35,8 +35,10 @@ function textRepr() {
fontWeight: 'normal', fontWeight: 'normal',
borderWidth: 0.3, borderWidth: 0.3,
background: true, background: true,
backgroundOpacity: 0.5,
tether: true, tether: true,
tetherLength: 0.5, tetherLength: 1.5,
tetherBaseWidth: 0.5,
} }
const textBuilder = TextBuilder.create(props, 1, 1) const textBuilder = TextBuilder.create(props, 1, 1)
...@@ -50,7 +52,7 @@ function textRepr() { ...@@ -50,7 +52,7 @@ function textRepr() {
const values = Text.Utils.createValuesSimple(text, props, Color(0xFFDD00), 1) const values = Text.Utils.createValuesSimple(text, props, Color(0xFFDD00), 1)
const state = Text.Utils.createRenderableState(props) const state = Text.Utils.createRenderableState(props)
const renderObject = createRenderObject('text', values, state) const renderObject = createRenderObject('text', values, state)
console.log('text', renderObject) console.log('text', renderObject, props)
const repr = Representation.fromRenderObject('text', renderObject) const repr = Representation.fromRenderObject('text', renderObject)
return repr return repr
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment