Glyph

The Glyph component is very similar to a Section. The main difference between two is how they are positioned: where Sections use the x1, x2, y1 and y2 props, Glyphs use x, y, width and height.

<script>
  import { Graphic, Glyph, polar, RectangleLayer } from '@snlab/florence'

  const glyphs = Array(50).fill(0).map(() => ({
    x: Math.random(),
    y: Math.random(),
    radius: Math.random() * 20
   }))
</script>

<Graphic width={200} height={200} backgroundColor={'#f3f3f3'}>
  {#each glyphs as {x, y, radius}}
    <Glyph 
      {x} {y} width={radius} height={radius}
      coordinates={polar()}
    >
      <RectangleLayer 
        x1={[0, 0.3, 0.7, 0.85]}
        x2={[0.3, 0.7, 0.85, 1]}
        fill={['#c84669', '#388077', '#92d82b', '#20609b']}
      />
    </Glyph>
  {/each}
</Graphic>

Unlike Sections, Glyphs can be placed inside polar coordinate systems!

Properties

Positioning

Prop	Required	Types	Default	Unit(s)
x	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y	`true`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
width	`true`	`Number`	`undefined`	Pixel
height	`true`	`Number`	`undefined`	Pixel

x and y control the center of the Glyph, while width and height control the dimensions of the Glyph in pixels.

Aesthetics

Prop	Required	Type(s)	Default	Units
backgroundColor	`false`	`String`	`undefined`	Named, hex, rgb or hsl color

Local coordinate system

Prop	Required	Type(s)	Default	Unit(s)
scaleX	`false`	`Function`	`undefined`	d3 scale
scaleY	`false`	`Function`	`undefined`	d3 scale
coordinates	`false`	`CoordinateTransformation`	`cartesian()`	-
flipX	`false`	`Boolean`	`false`	-
flipY	`false`	`Boolean`	`false`	-
padding	`false`	`Number`, `Object`	`undefined`	Pixel
zoomIdentity	`false`	`Object`	`undefined`	-

For more how to use these props, see the local coordinates documentation.

Interactions

Mouse events

Prop	Required	Type(s)	Default	Unit(s)
onClick	`false`	`Function`	`undefined`	-
onMousedown	`false`	`Function`	`undefined`	-
onMouseup	`false`	`Function`	`undefined`	-
onMouseover	`false`	`Function`	`undefined`	-
onMouseout	`false`	`Function`	`undefined`	-
onMousedrag	`false`	`Function`	`undefined`	-

Touch events

Prop	Required	Type(s)	Default	Unit(s)
onTouchdown	`false`	`Function`	`undefined`	-
onTouchup	`false`	`Function`	`undefined`	-
onTouchover	`false`	`Function`	`undefined`	-
onTouchout	`false`	`Function`	`undefined`	-
onTouchdrag	`false`	`Function`	`undefined`	-

Select events

Prop	Required	Type(s)	Default	Unit(s)
onSelect	`false`	`Function`	`undefined`	-
onDeselect	`false`	`Function`	`undefined`	-

See the interactivity documentation for more information.

Other

Prop	Required	Type(s)	Default	Unit(s)
clip	`false`	`String`	`'padding'`	Either `'padding' or 'outer'`

clip controls how the marks, layers and other visual elements inside of this Glyph should be clipped off. To clip off everything within the padding, 'padding' should be used. To only clip off everything outside of the Glyph’s outer border (determined by the positioning props), 'outer' should be used.

Methods

selectRectangle
updateSelectRectangle
resetSelectRectangle
startSelectPolygon
addPointToSelectPolygon
moveSelectPolygon
resetSelectPolygon

Glyph methods can be used as follows:

<script>
  let glyph
  glyph.selectRectangle(...)
</script>

<Glyph bind:this={glyph}>

</Glyph>

For more information on Glyph methods and how to use them to create advanced interactions like selection or brushing, check out the interactivity documentation.