diff --git a/examples/native/index.html b/examples/native/index.html index fae189c6..9cad059b 100644 --- a/examples/native/index.html +++ b/examples/native/index.html @@ -16,6 +16,9 @@

Native Examples

  • Label Styles
    • +
  • + Annotations +
    • diff --git a/examples/native/src/annotations/annotations.html b/examples/native/src/annotations/annotations.html new file mode 100644 index 00000000..f9c4e1ea --- /dev/null +++ b/examples/native/src/annotations/annotations.html @@ -0,0 +1,14 @@ + + + + + + + + Trellis Example: Annotations + + +
    + + + diff --git a/examples/native/src/annotations/index.ts b/examples/native/src/annotations/index.ts new file mode 100644 index 00000000..dcc65bb1 --- /dev/null +++ b/examples/native/src/annotations/index.ts @@ -0,0 +1,169 @@ +import * as Renderer from '@trellis/renderers/webgl' +import * as Graph from '@trellis/index' + +const WHITE = '#FFF' +const GREEN = '#91AD49' +const GREEN_LIGHT = '#C6D336' +const DARK_GREEN = '#607330' + +const edges: Graph.Edge[] = [] +const nodes: Graph.Node[] = [] +const annotations: Graph.Annotation[] = [ + { + id: 'rect-anno-0', + type: 'rectangle', + width: 100, + height: 100, + x: -100, + y: -100, + style: { color: GREEN } + }, + { + id: 'rect-anno-2', + type: 'rectangle', + width: 100, + height: 100, + x: 0, + y: -100, + style: { + color: GREEN_LIGHT + } + }, + { + id: 'rect-anno-3', + type: 'rectangle', + width: 100, + height: 100, + x: -100, + y: 0, + style: { + color: GREEN_LIGHT + } + }, + { + id: 'rect-anno-4', + type: 'rectangle', + width: 100, + height: 100, + x: 0, + y: 0, + style: { + color: GREEN + } + }, + { + id: 'text-anno-2', + type: 'rectangle', + content: 'Hello, World!', + width: 200, + height: 100, + x: -300, + y: -200, + style: { + color: DARK_GREEN, + stroke: [ + { width: 1, color: WHITE }, + { width: 2, color: GREEN_LIGHT } + ], + text: { + fontSize: 14, + fontWeight: '400', + color: WHITE + } + } + }, + { + id: 'circle-anno-0', + type: 'circle', + radius: 50, + x: 250, + y: 250, + style: { + color: GREEN, + stroke: [ + { width: 1, color: WHITE }, + { width: 2, color: GREEN_LIGHT } + ] + } + }, + { + id: 'circle-anno-1', + type: 'circle', + radius: 50, + content: 'CIRCLE!', + x: -250, + y: 250, + style: { + color: GREEN, + stroke: [ + { width: 1, color: WHITE }, + { width: 2, color: GREEN_LIGHT } + ], + text: { + fontSize: 14, + fontWeight: '400', + color: WHITE, + highlight: { + color: DARK_GREEN, + padding: 0 + } + } + } + }, + { + id: 'line-anno-0', + type: 'line', + points: [ + { x: 0, y: -400 }, + { x: 0, y: 400 } + ], + style: { + color: DARK_GREEN, + width: 2 + } + }, + { + id: 'line-anno-1', + type: 'line', + content: 'LINE!', + points: [ + { x: -400, y: 0 }, + { x: 400, y: 0 } + ], + style: { + color: GREEN_LIGHT, + width: 2 + } + } +] + +const container = document.querySelector('#graph') as HTMLDivElement + +const options: Renderer.Options = { + width: 1250, + height: 650, + x: 0, + y: 0, + zoom: 1, + minZoom: 0.025, + onViewportDrag: (event: Renderer.ViewportDragEvent | Renderer.ViewportDragDecelerateEvent) => { + // console.log('viewport drag', `x: ${event.dx}, y: ${event.dy}`) + options.x! += event.dx + options.y! += event.dy + renderer.update({ nodes, edges, annotations, options }) + }, + onViewportWheel: ({ dx, dy, dz }) => { + options.x! += dx + options.y! += dy + options.zoom! += dz + renderer.update({ nodes, edges, annotations, options }) + } +} + +const renderer = new Renderer.Renderer({ container, width: options.width, height: options.height, debug: true }).update({ + nodes, + edges, + annotations, + options +}) +;(window as any).renderer = renderer diff --git a/examples/native/src/labels/index.ts b/examples/native/src/labels/index.ts index 5147f0ce..51f89f62 100644 --- a/examples/native/src/labels/index.ts +++ b/examples/native/src/labels/index.ts @@ -26,7 +26,10 @@ const TEXT_ICON: Graph.TextIcon = { const NODE_STYLE: Graph.NodeStyle = { color: GREEN, icon: TEXT_ICON, - stroke: [{ width: 2, color: GREEN_LIGHT }], + stroke: [ + { width: 1, color: '#FFF' }, + { width: 2, color: GREEN_LIGHT } + ], label: { position: 'bottom', fontName: 'NodeLabel', @@ -39,7 +42,11 @@ const NODE_STYLE: Graph.NodeStyle = { const NODE_HOVER_STYLE: Graph.NodeStyle = { color: DARK_GREEN, icon: IMAGE_ICON, - stroke: [{ width: 2, color: GREEN_LIGHT }], + stroke: [ + { width: 1, color: '#FFF' }, + { width: 2, color: GREEN_LIGHT }, + { width: 1, color: DARK_GREEN } + ], label: { position: 'bottom', fontName: 'NodeLabelHover', @@ -50,6 +57,28 @@ const NODE_HOVER_STYLE: Graph.NodeStyle = { } } +const EDGE_STYLE: Graph.EdgeStyle = { + arrow: 'both', + label: { + fontName: 'EdgeLabel', + fontFamily: 'Roboto', + fontSize: 10, + color: DARK_GREEN, + margin: 4 + } +} +const EDGE_HOVER_STYLE: Graph.EdgeStyle = { + arrow: 'both', + stroke: [{ width: 1, color: DARK_GREEN }], + label: { + fontName: 'EdgeLabel', + fontFamily: 'Roboto', + fontSize: 10, + color: DARK_GREEN, + margin: 4 + } +} + const data = [ 'Myriel', 'Napoleon', @@ -67,22 +96,13 @@ const data = [ const collide = Collide.Layout() -const edges: Graph.Edge[] = [ +let edges: Graph.Edge[] = [ { id: '0::1', source: '0', target: '1', label: '0 <- EDGE LABEL -> 1', - style: { - arrow: 'both', - label: { - fontName: 'EdgeLabel', - fontFamily: 'Roboto', - fontSize: 10, - color: DARK_GREEN, - margin: 4 - } - } + style: EDGE_STYLE } ] @@ -119,7 +139,9 @@ const options: Renderer.Options = { }, onNodePointerEnter: (event: Renderer.NodePointerEvent) => { // console.log('node pointer enter', `x: ${event.x}, y: ${event.y}`) - nodes = nodes.map((node) => (node.id === event.target.id ? { ...node, label: node.label + ' 北京', style: NODE_HOVER_STYLE } : node)) + nodes = nodes.map((node) => + node.id === event.target.id ? { ...node, radius: 15, label: node.label + ' 北京', style: NODE_HOVER_STYLE } : node + ) renderer.update({ nodes, edges, options }) }, onNodeDrag: (event: Renderer.NodeDragEvent) => { @@ -132,8 +154,28 @@ const options: Renderer.Options = { onNodePointerLeave: (event: Renderer.NodePointerEvent) => { // console.log('node pointer leave', `x: ${event.x}, y: ${event.y}`) nodes = nodes.map((node) => - node.id === event.target.id ? { ...node, label: node.label?.slice(0, node.label.length - 3), style: NODE_STYLE } : node + node.id === event.target.id ? { ...node, radius: 10, label: node.label?.slice(0, node.label.length - 3), style: NODE_STYLE } : node ) + renderer.update({ nodes, edges, options }) + }, + onEdgePointerEnter: (event: Renderer.EdgePointerEvent) => { + edges = edges.map((edge) => { + if (edge.id === event.target.id) { + return { ...edge, style: EDGE_HOVER_STYLE } + } + return edge + }) + + renderer.update({ nodes, edges, options }) + }, + onEdgePointerLeave: (event: Renderer.EdgePointerEvent) => { + edges = edges.map((edge) => { + if (edge.id === event.target.id) { + return { ...edge, style: EDGE_STYLE } + } + return edge + }) + renderer.update({ nodes, edges, options }) } } diff --git a/examples/native/src/perf/index.ts b/examples/native/src/perf/index.ts index 1555127f..c56cb859 100644 --- a/examples/native/src/perf/index.ts +++ b/examples/native/src/perf/index.ts @@ -53,13 +53,13 @@ const NODE_HOVER_STYLE: Graph.NodeStyle = { const EDGE_STYLE: Graph.EdgeStyle = { width: 1, - stroke: '#aaa', + color: '#aaa', arrow: 'reverse' } const EDGE_HOVER_STYLE: Graph.EdgeStyle = { width: 2, - stroke: '#f66', + color: '#f66', arrow: 'reverse' } diff --git a/src/renderers/webgl/LifecycleManager.ts b/src/renderers/webgl/LifecycleManager.ts index fbdc4735..c4f1b031 100644 --- a/src/renderers/webgl/LifecycleManager.ts +++ b/src/renderers/webgl/LifecycleManager.ts @@ -1,18 +1,23 @@ -import { NodeStrokes } from './objects/nodeStrokes' -import { LineSegment } from './objects/lineSegment' -import { NodeFill } from './objects/nodeFill' -import { Arrow } from './objects/arrow' +import LineSegment from './objects/line/LineSegment' +import LineStrokes from './objects/line/LineStrokes' import ObjectManager from './objects/ObjectManager' +import CircleStrokes from './objects/circle/CircleStrokes' +import Circle from './objects/circle/Circle' +import Arrow from './objects/Arrow' import Icon from './objects/Icon' import Text from './objects/text/Text' +import RectangleStrokes from './objects/rectangle/RectangleStrokes' +import Rectangle from './objects/rectangle/Rectangle' export default class LifecycleManager { - nodes = new ObjectManager(2000) + nodes = new ObjectManager(2000) + edges = new ObjectManager(2000) icons = new ObjectManager(1000) - edges = new ObjectManager(2000) arrows = new ObjectManager(1000) labels = new ObjectManager(2000) interactions = new ObjectManager(2000) + annotations = new ObjectManager(2000) + text = new ObjectManager(1000) // interactions = new ObjectManager(2000) // TODO render() { @@ -22,5 +27,7 @@ export default class LifecycleManager { this.arrows.render() this.labels.render() this.interactions.render() + this.annotations.render() + this.text.render() } } diff --git a/src/renderers/webgl/annotations/AnnotationsRenderer.ts b/src/renderers/webgl/annotations/AnnotationsRenderer.ts new file mode 100644 index 00000000..71adfafd --- /dev/null +++ b/src/renderers/webgl/annotations/AnnotationsRenderer.ts @@ -0,0 +1,65 @@ +import { Renderer } from '..' +import { Annotation } from '../../../types' +import CircleAnnotationRenderer from './CircleAnnotationRenderer' +import LineAnnotationRenderer from './LineAnnotationRenderer' +import RectangleAnnotationRenderer from './RectangleAnnotationRenderer' + +type AnnotationRendererLookup = Record + +export default class AnnotationsRenderer { + private annotations: Annotation[] = [] + private lookup: AnnotationRendererLookup = {} + + constructor(private renderer: Renderer) { + this.renderer = renderer + } + + update(annotations: Annotation[] = []) { + if (this.annotations === annotations || (this.annotations.length === 0 && annotations.length === 0)) { + return this + } + + const lookup: AnnotationRendererLookup = {} + + for (const annotation of annotations) { + const renderer = this.lookup[annotation.id] + + if (annotation.type === 'circle' && renderer instanceof CircleAnnotationRenderer) { + renderer.update(annotation) + } else if (annotation.type === 'circle') { + renderer?.delete() + lookup[annotation.id] = new CircleAnnotationRenderer(this.renderer, annotation) + } else if (annotation.type === 'rectangle' && renderer instanceof RectangleAnnotationRenderer) { + renderer.update(annotation) + } else if (annotation.type === 'rectangle') { + renderer?.delete() + lookup[annotation.id] = new RectangleAnnotationRenderer(this.renderer, annotation) + } else if (annotation.type === 'line' && renderer instanceof LineAnnotationRenderer) { + renderer.update(annotation) + } else if (annotation.type === 'line') { + renderer?.delete() + lookup[annotation.id] = new LineAnnotationRenderer(this.renderer, annotation) + } + } + + for (const annotation of this.annotations) { + if (lookup[annotation.id] === undefined && this.lookup[annotation.id]) { + // exit + this.lookup[annotation.id].delete() + } + } + + this.lookup = lookup + this.annotations = annotations + + return this + } + + render(dt: number) { + for (const id in this.lookup) { + this.lookup[id].render(dt) + } + + return this + } +} diff --git a/src/renderers/webgl/annotations/CircleAnnotationRenderer.ts b/src/renderers/webgl/annotations/CircleAnnotationRenderer.ts new file mode 100644 index 00000000..f8951c82 --- /dev/null +++ b/src/renderers/webgl/annotations/CircleAnnotationRenderer.ts @@ -0,0 +1,215 @@ +import { DEFAULT_ANIMATE_RESIZE, MIN_ANNOTATION_ZOOM, MIN_STROKE_ZOOM } from '../../../utils/constants' +import { CircleAnnotation, InterpolateFn } from '../../../types' +import { interpolate } from '../../../utils/helpers' +import { Renderer } from '..' +import CircleStrokes from '../objects/circle/CircleStrokes' +import Circle from '../objects/circle/Circle' +import Text from '../objects/text/Text' + +export default class CircleAnnotationRenderer { + annotation: CircleAnnotation + + private x = 0 + private y = 0 + private _radius = 0 + + private fill: Circle + private strokes?: CircleStrokes + private text?: Text + + private interpolateX?: InterpolateFn + private interpolateY?: InterpolateFn + private interpolateRadius?: InterpolateFn + + constructor( + private renderer: Renderer, + annotation: CircleAnnotation + ) { + this.renderer = renderer + this.fill = new Circle(renderer.annotationsContainer, renderer.circle, annotation.style) + this.resize(annotation.radius).moveTo(annotation.x, annotation.y) + this.annotation = annotation + } + + update(annotation: CircleAnnotation) { + this.annotation = annotation + + this.fill.update(annotation.style.color, annotation.style.opacity) + this.strokes?.update(annotation.style.stroke) + + if (annotation.content && this.text) { + this.text.update(annotation.content, annotation.style.text) + } else if (!annotation.content && this.text) { + this.text = this.managers.text.delete(this.text) + } + + const x = annotation.x + const y = annotation.y + const radius = annotation.radius + const xChanged = x !== this.x + const yChanged = y !== this.y + const radiusChanged = radius !== this._radius + + if (xChanged || yChanged || radiusChanged) { + if (xChanged) { + this.interpolateX = interpolate(this.x, x, DEFAULT_ANIMATE_RESIZE) + } + if (yChanged) { + this.interpolateY = interpolate(this.y, y, DEFAULT_ANIMATE_RESIZE) + } + if (radiusChanged) { + this.interpolateRadius = interpolate(this._radius, radius, DEFAULT_ANIMATE_RESIZE) + } + } else { + this.resize(radius).moveTo(x, y) + this.interpolateX = undefined + this.interpolateY = undefined + this.interpolateRadius = undefined + } + + return this + } + + render(dt: number) { + if (this.interpolateRadius) { + const { value, done } = this.interpolateRadius(dt) + + this.resize(value) + + if (done) { + this.interpolateRadius = undefined + } + } + + if (this.interpolateX || this.interpolateY) { + let x = this.x + let y = this.y + + if (this.interpolateX) { + const { value, done } = this.interpolateX(dt) + x = value + + if (done) { + this.interpolateX = undefined + } + } + + if (this.interpolateY) { + const { value, done } = this.interpolateY(dt) + y = value + + if (done) { + this.interpolateY = undefined + } + } + + this.moveTo(x, y) + } + + const isVisible = this.visible() + + if (isVisible && this.annotation.content && !this.text) { + this.text = new Text( + this.renderer.assets, + this.renderer.annotationsContainer, + this.annotation.content, + this.annotation.style.text + ).moveTo(this.x, this.y) + } + + const fillMounted = this.managers.annotations.isMounted(this.fill) + + if (isVisible && !fillMounted) { + this.managers.annotations.mount(this.fill) + } else if (!isVisible && fillMounted) { + this.managers.annotations.unmount(this.fill) + } + + const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM + if (shouldStrokesMount && !this.strokes && this.annotation.style.stroke) { + this.strokes = new CircleStrokes( + this.renderer.annotationsContainer, + this.renderer.circle, + this.fill, + this.annotation.style.stroke + ).moveTo(this.x, this.y) + } + + if (this.strokes) { + const strokesMounted = this.managers.annotations.isMounted(this.strokes) + + if (shouldStrokesMount && !strokesMounted) { + this.managers.annotations.mount(this.strokes) + } else if (!shouldStrokesMount && strokesMounted) { + this.managers.annotations.unmount(this.strokes) + } + } + + if (this.text) { + const textMounted = this.managers.text.isMounted(this.text) + + if (isVisible && !textMounted) { + this.managers.text.mount(this.text) + } else if (!isVisible && textMounted) { + this.managers.text.unmount(this.text) + } + } + + return this + } + + delete() { + this.managers.annotations.delete(this.fill) + + if (this.strokes) { + this.strokes = this.managers.annotations.delete(this.strokes) + } + + if (this.text) { + this.text = this.managers.text.delete(this.text) + } + return undefined + } + + private get radius() { + return this.strokes?.radius ?? this._radius + } + + private get managers() { + return this.renderer.managers + } + + private resize(radius: number) { + if (radius !== this._radius) { + this._radius = radius + this.fill.resize(radius) + this.strokes?.resize(radius) + } + + return this + } + + private moveTo(x: number, y: number) { + if (x !== this.x || y !== this.y) { + this.x = x + this.y = y + this.fill.moveTo(x, y) + this.strokes?.moveTo(x, y) + this.text?.moveTo(x, y) + } + + return this + } + + private visible() { + const [left, right, top, bottom] = [this.x - this.radius, this.x + this.radius, this.y - this.radius, this.y + this.radius] + + return ( + this.renderer.zoom > MIN_ANNOTATION_ZOOM && + right >= this.renderer.minX && + left <= this.renderer.maxX && + bottom >= this.renderer.minY && + top <= this.renderer.maxY + ) + } +} diff --git a/src/renderers/webgl/annotations/LineAnnotationRenderer.ts b/src/renderers/webgl/annotations/LineAnnotationRenderer.ts new file mode 100644 index 00000000..32eabc10 --- /dev/null +++ b/src/renderers/webgl/annotations/LineAnnotationRenderer.ts @@ -0,0 +1,180 @@ +import { LineAnnotation, Coordinates, LinePoints } from '../../../types' +import { DEFAULT_LABEL_STYLE, MIN_ANNOTATION_ZOOM, MIN_STROKE_ZOOM } from '../../../utils/constants' +import { angle, distance } from '../../../utils/api' +import { midPoint } from '../../../utils/webgl' +import { Renderer } from '..' +import LineSegment from '../objects/line/LineSegment' +import LineStrokes from '../objects/line/LineStrokes' +import Text from '../objects/text/Text' + +export default class LineAnnotationRenderer { + annotation: LineAnnotation + + private _points: LinePoints = [0, 0, 0, 0] + private length = 0 + private theta = 0 + + private fill: LineSegment + private strokes?: LineStrokes + private text?: Text + + constructor( + private renderer: Renderer, + annotation: LineAnnotation + ) { + this.renderer = renderer + this.annotation = annotation + this.fill = new LineSegment(renderer.annotationsContainer, annotation.style) + this.setPoints(annotation.points) + } + + update(annotation: LineAnnotation) { + this.annotation = annotation + + this.fill.update(annotation.style.color, annotation.style.width, annotation.style.opacity) + + if (this.strokes) { + this.strokes.update(annotation.style.stroke) + } + + if (this.text) { + if (annotation.content) { + this.text.update(annotation.content, annotation.style.text) + } else { + this.text = this.managers.text.delete(this.text) + } + } + + this.setPoints(annotation.points) + + return this + } + + render() { + const isVisible = this.visible() + + if (isVisible && this.annotation.content && !this.text) { + this.text = new Text( + this.renderer.assets, + this.renderer.annotationsContainer, + this.annotation.content, + this.annotation.style.text, + DEFAULT_LABEL_STYLE + ) + this.text.offset = this.width + this.text.rotate(this.theta).moveTo(...this.getCenter()) + } + + const fillMounted = this.managers.annotations.isMounted(this.fill) + + if (isVisible && !fillMounted) { + this.managers.annotations.mount(this.fill) + } else if (!isVisible && fillMounted) { + this.managers.annotations.unmount(this.fill) + } + + const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM + + if (shouldStrokesMount && !this.strokes && this.annotation.style.stroke) { + this.strokes = new LineStrokes(this.renderer.annotationsContainer, this.fill, this.annotation.style.stroke).moveTo(this.x, this.y) + } + + if (this.strokes) { + const strokesMounted = this.managers.annotations.isMounted(this.strokes) + if (shouldStrokesMount && !strokesMounted) { + this.managers.annotations.mount(this.strokes) + } else if (!shouldStrokesMount && strokesMounted) { + this.managers.annotations.unmount(this.strokes) + } + } + + if (this.text) { + const textMounted = this.managers.text.isMounted(this.text) + + if (isVisible && !textMounted) { + this.managers.text.mount(this.text) + } else if (!isVisible && textMounted) { + this.managers.text.unmount(this.text) + } + } + + return this + } + + delete() { + this.managers.annotations.delete(this.fill) + + if (this.strokes) { + this.strokes = this.managers.annotations.delete(this.strokes) + } + + if (this.text) { + this.managers.text.delete(this.text) + this.text = undefined + } + } + + get x() { + return this._points[0] + } + + get y() { + return this._points[1] + } + + get width() { + return this.strokes?.width ?? this.fill.width + } + + private compare(points: [Coordinates, Coordinates]) { + return ( + this._points[0] === points[0].x && + this._points[1] === points[0].y && + this._points[2] === points[1].x && + this._points[3] === points[1].y + ) + } + + private setPoints([a, b]: [Coordinates, Coordinates]) { + const points: [Coordinates, Coordinates] = a.x > b.x ? [a, b] : [b, a] + + if (!this.compare(points)) { + this._points = [points[0].x, points[0].y, points[1].x, points[1].y] + + this.theta = angle(...this._points) + this.length = distance(...this._points) + this.fill.rotate(this.theta).resize(this.length).moveTo(this.x, this.y) + + if (this.strokes) { + this.strokes.rotate(this.theta).resize(this.length).moveTo(this.x, this.y) + } + + if (this.text) { + this.text.offset = this.width + this.text.rotate(this.theta).moveTo(...this.getCenter()) + } + } + + return this + } + + private visible() { + const [x0, y0, x1, y1] = this._points + const [minX, minY, maxX, maxY] = [Math.min(x0, x1), Math.min(y0, y1), Math.max(x0, x1), Math.max(y0, y1)] + return ( + this.renderer.zoom > MIN_ANNOTATION_ZOOM && + maxX >= this.renderer.minX && + minX <= this.renderer.maxX && + maxY >= this.renderer.minY && + minY <= this.renderer.maxY + ) + } + + private getCenter() { + return midPoint(...this._points) + } + + private get managers() { + return this.renderer.managers + } +} diff --git a/src/renderers/webgl/annotations/RectangleAnnotationRenderer.ts b/src/renderers/webgl/annotations/RectangleAnnotationRenderer.ts new file mode 100644 index 00000000..7d55fdbd --- /dev/null +++ b/src/renderers/webgl/annotations/RectangleAnnotationRenderer.ts @@ -0,0 +1,243 @@ +import { InterpolateFn, PointTuple, RectangleAnnotation } from '../../../types' +import { DEFAULT_ANIMATE_RESIZE, MIN_ANNOTATION_ZOOM, MIN_STROKE_ZOOM } from '../../../utils/constants' +import { interpolate } from '../../../utils/helpers' +import { Renderer } from '..' +import RectangleStrokes from '../objects/rectangle/RectangleStrokes' +import Rectangle from '../objects/rectangle/Rectangle' +import Text from '../objects/text/Text' + +export default class RectangleAnnotationRenderer { + annotation: RectangleAnnotation + + private x = 0 + private y = 0 + private width = 0 + private height = 0 + + private fill: Rectangle + private strokes?: RectangleStrokes + private text?: Text + + private interpolateX?: InterpolateFn + private interpolateY?: InterpolateFn + private interpolateWidth?: InterpolateFn + private interpolateHeight?: InterpolateFn + + constructor( + private renderer: Renderer, + annotation: RectangleAnnotation + ) { + this.renderer = renderer + this.fill = new Rectangle(renderer.annotationsContainer, annotation.style) + this.resize(annotation.width, annotation.height).moveTo(annotation.x, annotation.y) + this.annotation = annotation + } + + update(annotation: RectangleAnnotation) { + this.annotation = annotation + + this.fill.update(annotation.style.color, annotation.style.opacity) + this.strokes?.update(annotation.style.stroke) + + if (annotation.content && this.text) { + this.text.update(annotation.content, annotation.style.text) + } else if (!annotation.content && this.text) { + this.managers.text.delete(this.text) + this.text = undefined + } + + const x = annotation.x + const y = annotation.y + const width = annotation.width + const height = annotation.height + const xChanged = x !== this.x + const yChanged = y !== this.y + const widthChanged = width !== this.width + const heightChanged = height !== this.height + + if (xChanged || yChanged || widthChanged || heightChanged) { + // TODO -> enable in renderer options + if (xChanged) { + this.interpolateX = interpolate(this.x, x, DEFAULT_ANIMATE_RESIZE) + } + if (yChanged) { + this.interpolateY = interpolate(this.y, y, DEFAULT_ANIMATE_RESIZE) + } + if (widthChanged) { + this.interpolateWidth = interpolate(this.width, width, DEFAULT_ANIMATE_RESIZE) + } + if (heightChanged) { + this.interpolateHeight = interpolate(this.height, height, DEFAULT_ANIMATE_RESIZE) + } + } else { + this.resize(width, height).moveTo(x, y) + this.interpolateX = undefined + this.interpolateY = undefined + this.interpolateWidth = undefined + this.interpolateHeight = undefined + } + + return this + } + + render(dt: number) { + if (this.interpolateX || this.interpolateY) { + let x = this.x + let y = this.y + + if (this.interpolateX) { + const { value, done } = this.interpolateX(dt) + x = value + + if (done) { + this.interpolateX = undefined + } + } + + if (this.interpolateY) { + const { value, done } = this.interpolateY(dt) + y = value + + if (done) { + this.interpolateY = undefined + } + } + + this.moveTo(x, y) + } + + if (this.interpolateWidth || this.interpolateHeight) { + let width = this.width + let height = this.height + + if (this.interpolateWidth) { + const { value, done } = this.interpolateWidth(dt) + width = value + + if (done) { + this.interpolateWidth = undefined + } + } + + if (this.interpolateHeight) { + const { value, done } = this.interpolateHeight(dt) + height = value + + if (done) { + this.interpolateHeight = undefined + } + } + + this.resize(width, height) + } + + const isVisible = this.visible() + + if (isVisible && this.annotation.content && !this.text) { + this.text = new Text( + this.renderer.assets, + this.renderer.annotationsContainer, + this.annotation.content, + this.annotation.style.text + ).moveTo(...this.center) + } + + const fillMounted = this.managers.annotations.isMounted(this.fill) + + if (isVisible && !fillMounted) { + this.managers.annotations.mount(this.fill) + } else if (!isVisible && fillMounted) { + this.managers.annotations.unmount(this.fill) + } + + const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM + if (shouldStrokesMount && !this.strokes && this.annotation.style.stroke) { + this.strokes = new RectangleStrokes(this.renderer.annotationsContainer, this.fill, this.annotation.style.stroke).moveTo( + this.x, + this.y + ) + } + + if (this.strokes) { + const strokesMounted = this.managers.annotations.isMounted(this.strokes) + + if (shouldStrokesMount && !strokesMounted) { + this.managers.annotations.mount(this.strokes) + } else if (!shouldStrokesMount && strokesMounted) { + this.managers.annotations.unmount(this.strokes) + } + } + + if (this.text) { + const textMounted = this.managers.text.isMounted(this.text) + + if (isVisible && !textMounted) { + this.managers.text.mount(this.text) + } else if (!isVisible && textMounted) { + this.managers.text.unmount(this.text) + } + } + + return this + } + + delete() { + this.managers.annotations.delete(this.fill) + + if (this.strokes) { + this.strokes = this.managers.annotations.delete(this.strokes) + } + + if (this.text) { + this.managers.text.delete(this.text) + this.text = undefined + } + } + + resize(width: number, height: number) { + if (this.width !== width || this.height !== height) { + this.width = width + this.height = height + this.fill.resize({ width, height }) + this.strokes?.resize({ width, height }) + } + + return this + } + + moveTo(x: number, y: number) { + if (x !== this.x || y !== this.y) { + this.x = x + this.y = y + this.fill.moveTo(x, y) + this.strokes?.moveTo(x, y) + this.text?.moveTo(...this.center) + } + return this + } + + private visible() { + const [halfWidth, halfHeight] = this.halfSize + const [left, right, top, bottom] = [this.x - halfWidth, this.x + halfWidth, this.y - halfHeight, this.y + halfHeight] + return ( + this.renderer.zoom > MIN_ANNOTATION_ZOOM && + right >= this.renderer.minX && + left <= this.renderer.maxX && + bottom >= this.renderer.minY && + top <= this.renderer.maxY + ) + } + + private get halfSize(): PointTuple { + return [this.width / 2, this.height / 2] + } + + private get center(): PointTuple { + const [halfWidth, halfHeight] = this.halfSize + return [this.x + halfWidth, this.y + halfHeight] + } + + private get managers() { + return this.renderer.managers + } +} diff --git a/src/renderers/webgl/edge.ts b/src/renderers/webgl/edge.ts index 3a46e679..6bdaa655 100644 --- a/src/renderers/webgl/edge.ts +++ b/src/renderers/webgl/edge.ts @@ -1,46 +1,52 @@ -import { DEFAULT_LABEL_STYLE, MIN_EDGES_ZOOM, MIN_INTERACTION_ZOOM, MIN_LABEL_ZOOM } from '../../utils/constants' -import { type Renderer } from '.' -import { midPoint } from './utils' -import { movePoint } from './utils' -import { NodeRenderer } from './node' -import type { ArrowStyle, Edge } from '../../types' -import { Arrow } from './objects/arrow' -import { LineSegment } from './objects/lineSegment' +import { + DEFAULT_ARROW, + DEFAULT_LABEL_STYLE, + MIN_EDGES_ZOOM, + MIN_INTERACTION_ZOOM, + MIN_LABEL_ZOOM, + MIN_STROKE_ZOOM +} from '../../utils/constants' +import type { ArrowStyle, Edge, PointTuple } from '../../types' import { FederatedPointerEvent } from 'pixi.js' +import { midPoint, movePoint } from '../../utils/webgl' +import { angle, distance } from '../../utils/api' +import { NodeRenderer } from './node' +import { type Renderer } from '.' import { EdgeHitArea } from './interaction/edgeHitArea' -import { angle } from '../../utils/api' +import Arrow from './objects/Arrow' +import LineSegment from './objects/line/LineSegment' +import LineStrokes from './objects/line/LineStrokes' import Text from './objects/text/Text' -const DEFAULT_EDGE_WIDTH = 1 -const DEFAULT_EDGE_COLOR = 0xaaaaaa -const DEFAULT_ARROW = 'none' - export class EdgeRenderer { edge!: Edge source!: NodeRenderer target!: NodeRenderer - label?: Text - renderer: Renderer - lineSegment: LineSegment - x0 = 0 - y0 = 0 - x1 = 0 - y1 = 0 - theta = 0 - center: [x: number, y: number] = [0, 0] - width?: number - stroke?: string | number - strokeOpacity?: number sourceRadius?: number targetRadius?: number + private x0 = 0 + private y0 = 0 + private x1 = 0 + private y1 = 0 + private length = 0 + private theta = 0 + private center: PointTuple = [0, 0] + private lineSegment: LineSegment private hitArea: EdgeHitArea + private strokes?: LineStrokes + private label?: Text private forwardArrow?: Arrow private reverseArrow?: Arrow private doubleClickTimeout: NodeJS.Timeout | undefined private doubleClick = false - constructor(renderer: Renderer, edge: Edge, source: NodeRenderer, target: NodeRenderer) { + constructor( + private renderer: Renderer, + edge: Edge, + source: NodeRenderer, + target: NodeRenderer + ) { this.renderer = renderer this.lineSegment = new LineSegment(this.renderer.edgesContainer) this.hitArea = new EdgeHitArea(this.renderer.interactionContainer, this) @@ -52,6 +58,12 @@ export class EdgeRenderer { this.source = source this.target = target + this.lineSegment.update(edge.style?.color, edge.style?.width, edge.style?.opacity) + + if (this.strokes) { + this.strokes.update(edge.style?.stroke) + } + const arrow = edge.style?.arrow ?? DEFAULT_ARROW if (arrow !== this.arrow) { @@ -74,10 +86,12 @@ export class EdgeRenderer { } } + this.forwardArrow?.update(edge.style?.color, edge.style?.opacity) + this.reverseArrow?.update(edge.style?.color, edge.style?.opacity) + if (this.label) { if (edge.label === undefined || edge.label.trim() === '') { - this.managers.labels.delete(this.label) - this.label = undefined + this.label = this.managers.labels.delete(this.label) } else { this.label.update(edge.label, edge.style?.label) } @@ -91,30 +105,20 @@ export class EdgeRenderer { const y0 = this.source.y const x1 = this.target.x const y1 = this.target.y - const sourceRadius = this.source.strokes.radius - const targetRadius = this.target.strokes.radius + const sourceRadius = this.source.radius + const targetRadius = this.target.radius const isVisible = this.visible(x0, y0, x1, y1) if (isVisible) { - const width = this.edge?.style?.width ?? DEFAULT_EDGE_WIDTH - const stroke = this.edge?.style?.stroke ?? DEFAULT_EDGE_COLOR - const strokeOpacity = this.edge?.style?.strokeOpacity ?? 1 - if ( x0 !== this.x0 || y0 !== this.y0 || x1 !== this.x1 || y1 !== this.y1 || sourceRadius !== this.sourceRadius || - targetRadius !== this.targetRadius || - width !== this.width || - stroke !== this.stroke || - strokeOpacity !== this.strokeOpacity + targetRadius !== this.targetRadius ) { - this.width = width - this.stroke = stroke - this.strokeOpacity = strokeOpacity this.sourceRadius = sourceRadius this.targetRadius = targetRadius this.x0 = x0 @@ -131,8 +135,8 @@ export class EdgeRenderer { const edgePoint = movePoint(x1, y1, this.theta, this.targetRadius + this.forwardArrow.height) edgeX1 = edgePoint[0] edgeY1 = edgePoint[1] - const [arrowX1, arrowY1] = movePoint(x1, y1, this.theta, this.targetRadius) - this.forwardArrow.update(arrowX1, arrowY1, this.theta, this.stroke, this.strokeOpacity) + + this.forwardArrow.rotate(this.theta).moveTo(...movePoint(x1, y1, this.theta, this.targetRadius)) } else { const edgePoint = movePoint(x1, y1, this.theta, this.targetRadius) edgeX1 = edgePoint[0] @@ -143,8 +147,8 @@ export class EdgeRenderer { const edgePoint = movePoint(x0, y0, this.theta, -this.sourceRadius - this.reverseArrow.height) edgeX0 = edgePoint[0] edgeY0 = edgePoint[1] - const [arrowX0, arrowY0] = movePoint(x0, y0, this.theta, -this.sourceRadius) - this.reverseArrow.update(arrowX0, arrowY0, this.theta + Math.PI, this.stroke, this.strokeOpacity) + + this.reverseArrow.rotate(this.theta + Math.PI).moveTo(...movePoint(x0, y0, this.theta, -this.sourceRadius)) } else { const edgePoint = movePoint(x0, y0, this.theta, -this.sourceRadius) edgeX0 = edgePoint[0] @@ -152,15 +156,19 @@ export class EdgeRenderer { } this.center = midPoint(edgeX0, edgeY0, edgeX1, edgeY1) + this.length = distance(edgeX0, edgeY0, edgeX1, edgeY1) - if (this.label) { - this.label.rotation = this.theta - this.label.moveTo(...this.center) - } + // TODO -> draw hitArea/strokes over arrows + this.lineSegment.rotate(this.theta).resize(this.length).moveTo(edgeX0, edgeY0) + + this.strokes?.rotate(this.theta).resize(this.length).moveTo(edgeX0, edgeY0) - // TODO - draw hitArea over arrow - this.lineSegment.update(edgeX0, edgeY0, edgeX1, edgeY1, this.width, this.stroke, this.strokeOpacity) this.hitArea.update(edgeX0, edgeY0, edgeX1, edgeY1, this.width, this.theta) + + if (this.label) { + this.label.offset = this.width + this.label.rotate(this.theta).moveTo(...this.center) + } } } @@ -181,6 +189,21 @@ export class EdgeRenderer { this.managers.edges.unmount(this.lineSegment) } + const strokesShouldMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM + + if (strokesShouldMount && !this.strokes && this.edge.style?.stroke) { + this.strokes = new LineStrokes(this.renderer.edgesContainer, this.lineSegment, this.edge.style.stroke).moveTo(this.x0, this.y0) + } + + if (this.strokes) { + const strokesMounted = this.managers.edges.isMounted(this.strokes) + if (strokesShouldMount && !strokesMounted) { + this.managers.edges.mount(this.strokes) + } else if (!strokesShouldMount && strokesMounted) { + this.managers.edges.unmount(this.strokes) + } + } + if (this.forwardArrow) { const forwardArrowMounted = this.managers.arrows.isMounted(this.forwardArrow) if (isVisible && !forwardArrowMounted) { @@ -220,14 +243,25 @@ export class EdgeRenderer { this.managers.edges.delete(this.lineSegment) this.managers.interactions.delete(this.hitArea) + + if (this.strokes) { + this.strokes = this.managers.edges.delete(this.strokes) + } + if (this.label) { + this.label = this.managers.labels.delete(this.label) + } if (this.forwardArrow) { - this.managers.arrows.delete(this.forwardArrow) + this.forwardArrow = this.managers.arrows.delete(this.forwardArrow) } if (this.reverseArrow) { - this.managers.arrows.delete(this.reverseArrow) + this.reverseArrow = this.managers.arrows.delete(this.reverseArrow) } } + get width() { + return this.strokes?.width ?? this.lineSegment.width + } + pointerEnter = (event: FederatedPointerEvent) => { if (this.renderer.draggedNode || this.renderer.dragInteraction.dragging || this.renderer.zoomInteraction.zooming) { return @@ -428,8 +462,8 @@ export class EdgeRenderer { const style = this.edge.style?.label if (label !== undefined && label.trim() !== '' && this.label === undefined) { this.label = new Text(this.renderer.assets, this.renderer.labelsContainer, label, style, DEFAULT_LABEL_STYLE) - this.label.rotation = this.theta - this.label.moveTo(...this.center) + this.label.offset = this.width + this.label.rotate(this.theta).moveTo(...this.center) } return this diff --git a/src/renderers/webgl/index.ts b/src/renderers/webgl/index.ts index a42730d3..0935ad4e 100644 --- a/src/renderers/webgl/index.ts +++ b/src/renderers/webgl/index.ts @@ -9,12 +9,14 @@ import { Grid } from './grid' import { NodeRenderer } from './node' import { EdgeRenderer } from './edge' import { interpolate } from '../../utils/helpers' -import { logUnknownEdgeError } from './utils' +import { logUnknownEdgeError } from '../../utils/webgl' import ArrowTexture from './textures/ArrowTexture' import CircleTexture from './textures/CircleTexture' import TextIconTexture from './textures/TextIconTexture' import AssetManager from './loaders/AssetManager' import LifecycleManager from './LifecycleManager' +import RectangleTexture from './textures/RectangleTexture' +import AnnotationsRenderer from './annotations/AnnotationsRenderer' export type Keys = { altKey?: boolean; ctrlKey?: boolean; metaKey?: boolean; shiftKey?: boolean } export type MousePosition = { x: number; y: number; clientX: number; clientY: number } @@ -127,12 +129,14 @@ export class Renderer { zoomInteraction = new Zoom(this) dragInteraction = new Drag(this) decelerateInteraction = new Decelerate(this) + annotationsContainer = new Container() managers = new LifecycleManager() eventSystem: EventSystem nodes: Node[] = [] nodeRenderersById: Record = {} edges: Edge[] = [] edgeRenderersById: Record = {} + annotations: AnnotationsRenderer renderedNodes = false dragInertia = defaultOptions.dragInertia animateViewport: number | false = defaultOptions.animateViewport @@ -141,6 +145,7 @@ export class Renderer { circle: CircleTexture arrow: ArrowTexture textIcon: TextIconTexture + rectangle: RectangleTexture draggedNode?: NodeRenderer hoveredNode?: NodeRenderer assets = new AssetManager() @@ -220,15 +225,18 @@ export class Renderer { this.circle = new CircleTexture(this) this.arrow = new ArrowTexture(this) this.textIcon = new TextIconTexture(this) + this.rectangle = new RectangleTexture(this) this.eventSystem = new EventSystem(this.app.renderer) this.eventSystem.domElement = view this.root.eventMode = 'static' // 'passive' // TODO - add viewport events to interactionContainer this.edgesContainer.eventMode = 'none' this.nodesContainer.eventMode = 'none' this.labelsContainer.eventMode = 'none' + this.annotationsContainer.eventMode = 'none' this.interactionContainer.eventMode = 'passive' const MIN_COORDINATE = Number.MIN_SAFE_INTEGER / 2 this.root.hitArea = new Rectangle(MIN_COORDINATE, MIN_COORDINATE, Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER) + this.root.addChild(this.annotationsContainer) this.root.addChild(this.edgesContainer) this.root.addChild(this.nodesContainer) this.root.addChild(this.labelsContainer) @@ -242,6 +250,8 @@ export class Renderer { this.root.addEventListener('pointerupoutside', this.pointerReleaseNode) view.addEventListener!('wheel', this.zoomInteraction.wheel, { passive: false }) + this.annotations = new AnnotationsRenderer(this) + if (debug) { // this.grid = new Grid(this, 24000, 24000, 100, { hideText: false }) this.stats = new Stats() @@ -256,7 +266,7 @@ export class Renderer { } } - update({ nodes, edges, options }: { nodes: Node[]; edges: Edge[]; annotations?: Annotation[]; options: Options }) { + update({ nodes, edges, annotations, options }: { nodes: Node[]; edges: Edge[]; annotations?: Annotation[]; options: Options }) { this.animateViewport = options.animateViewport === true || options.animateViewport === undefined ? defaultOptions.animateViewport : options.animateViewport this.animateNodePosition = @@ -434,6 +444,8 @@ export class Renderer { } } + this.annotations.update(annotations) + this.zoomInteraction.zooming = false return this @@ -500,6 +512,7 @@ export class Renderer { this.edgeRenderersById[edge.id].render() } + this.annotations.render(dt) this.managers.render() this.app.render() } diff --git a/src/renderers/webgl/interaction/edgeHitArea.ts b/src/renderers/webgl/interaction/edgeHitArea.ts index 5bb2f189..64b7d9bc 100644 --- a/src/renderers/webgl/interaction/edgeHitArea.ts +++ b/src/renderers/webgl/interaction/edgeHitArea.ts @@ -1,6 +1,7 @@ import { Container, Polygon } from 'pixi.js' -import { HALF_PI, movePoint } from '../utils' +import { movePoint } from '../../../utils/webgl' import { EdgeRenderer } from '../edge' +import { HALF_PI } from '../../../utils/constants' const MIN_LINE_HOVER_RADIUS = 2 diff --git a/src/renderers/webgl/node.ts b/src/renderers/webgl/node.ts index f03e7b5d..b333408d 100644 --- a/src/renderers/webgl/node.ts +++ b/src/renderers/webgl/node.ts @@ -1,23 +1,25 @@ -import { DEFAULT_LABEL_STYLE, MIN_LABEL_ZOOM, MIN_INTERACTION_ZOOM, MIN_NODE_STROKE_ZOOM, MIN_NODE_ICON_ZOOM } from '../../utils/constants' +import { DEFAULT_LABEL_STYLE, MIN_LABEL_ZOOM, MIN_INTERACTION_ZOOM, MIN_STROKE_ZOOM, MIN_NODE_ICON_ZOOM } from '../../utils/constants' import { FederatedPointerEvent } from 'pixi.js' -import { NodeStrokes } from './objects/nodeStrokes' import { NodeHitArea } from './interaction/nodeHitArea' import { interpolate } from '../../utils/helpers' -import { NodeFill } from './objects/nodeFill' import { type Renderer } from '.' import type { Node } from '../../types' +import Circle from './objects/circle/Circle' +import CircleStrokes from './objects/circle/CircleStrokes' import Text from './objects/text/Text' import Icon from './objects/Icon' export class NodeRenderer { - node!: Node - x!: number - y!: number - fill: NodeFill + x = 0 + y = 0 + + node: Node + fill: Circle + strokes?: CircleStrokes label?: Text icon?: Icon - strokes: NodeStrokes + private _radius = 0 private hitArea: NodeHitArea private renderer: Renderer private doubleClickTimeout: NodeJS.Timeout | undefined @@ -32,13 +34,21 @@ export class NodeRenderer { constructor(renderer: Renderer, node: Node) { this.renderer = renderer - this.fill = new NodeFill(this.renderer.nodesContainer, this.renderer.circle) - this.strokes = new NodeStrokes(this.renderer.nodesContainer, this.renderer.circle, this.fill) + this.fill = new Circle(renderer.nodesContainer, renderer.circle, node.style) this.hitArea = new NodeHitArea(this.renderer.interactionContainer, this) - this.update(node) + this.resize(node.radius).moveTo(node.x ?? 0, node.y ?? 0) + this.node = node } update(node: Node) { + this.node = node + + this.fill.update(node.style?.color, node.style?.opacity) + + if (this.strokes) { + this.strokes.update(node.style?.stroke) + } + if (this.label) { if (node.label === undefined || node.label.trim() === '') { this.managers.labels.delete(this.label) @@ -67,9 +77,10 @@ export class NodeRenderer { const x = node.x ?? 0 const y = node.y ?? 0 + const radius = node.radius const xChanged = x !== this.x const yChanged = y !== this.y - const radiusChanged = node.radius !== this.node?.radius + const radiusChanged = radius !== this._radius if ( (xChanged || yChanged || radiusChanged) && @@ -84,54 +95,56 @@ export class NodeRenderer { this.interpolateY = interpolate(this.y, y, this.renderer.animateNodePosition) } if (radiusChanged && this.renderer.animateNodeRadius) { - this.interpolateRadius = interpolate(this.y, y, this.renderer.animateNodeRadius) + this.interpolateRadius = interpolate(this._radius, radius, this.renderer.animateNodeRadius) } } else { - this.setPosition(node, x, y, node.radius) + this.resize(radius).moveTo(x, y) this.interpolateX = undefined this.interpolateY = undefined this.interpolateRadius = undefined } - this.node = node - return this } render(dt: number) { - let _x: number | undefined - let _y: number | undefined - let _radius: number | undefined + if (this.interpolateRadius) { + const { value, done } = this.interpolateRadius(dt) - if (this.interpolateX) { - const { value, done } = this.interpolateX(dt) - _x = value + this.resize(value) if (done) { - this.interpolateX = undefined + this.interpolateRadius = undefined + } + + if (this.label && !this.interpolateX && !this.interpolateY) { + this.label.moveTo(this.x, this.y) } } - if (this.interpolateY) { - const { value, done } = this.interpolateY(dt) - _y = value + if (this.interpolateX || this.interpolateY) { + let x = this.x + let y = this.y - if (done) { - this.interpolateY = undefined + if (this.interpolateX) { + const { value, done } = this.interpolateX(dt) + x = value + + if (done) { + this.interpolateX = undefined + } } - } - if (this.interpolateRadius) { - const { value, done } = this.interpolateRadius(dt) - _radius = value + if (this.interpolateY) { + const { value, done } = this.interpolateY(dt) + y = value - if (done) { - this.interpolateRadius = undefined + if (done) { + this.interpolateY = undefined + } } - } - if (_x !== undefined || _y !== undefined || _radius !== undefined) { - this.setPosition(this.node, _x ?? this.x, _y ?? this.y, _radius ?? this.node.radius) + this.moveTo(x, y) } const isVisible = this.visible() @@ -156,13 +169,23 @@ export class NodeRenderer { this.managers.nodes.unmount(this.fill) } - const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_NODE_STROKE_ZOOM - const strokesMounted = this.managers.nodes.isMounted(this.strokes) + const shouldStrokesMount = isVisible && this.renderer.zoom > MIN_STROKE_ZOOM - if (shouldStrokesMount && !strokesMounted) { - this.managers.nodes.mount(this.strokes) - } else if (!shouldStrokesMount && strokesMounted) { - this.managers.nodes.unmount(this.strokes) + if (shouldStrokesMount && !this.strokes && this.node.style?.stroke) { + this.strokes = new CircleStrokes(this.renderer.nodesContainer, this.renderer.circle, this.fill, this.node.style.stroke).moveTo( + this.x, + this.y + ) + } + + if (this.strokes) { + const strokesMounted = this.managers.nodes.isMounted(this.strokes) + + if (shouldStrokesMount && !strokesMounted) { + this.managers.nodes.mount(this.strokes) + } else if (!shouldStrokesMount && strokesMounted) { + this.managers.nodes.unmount(this.strokes) + } } const shouldLabelMount = isVisible && this.renderer.zoom > MIN_LABEL_ZOOM @@ -200,9 +223,13 @@ export class NodeRenderer { clearTimeout(this.doubleClickTimeout) this.managers.nodes.delete(this.fill) - this.managers.nodes.delete(this.strokes) + this.managers.interactions.delete(this.hitArea) + if (this.strokes) { + this.strokes = this.managers.nodes.delete(this.strokes) + } + if (this.label) { this.managers.labels.delete(this.label) } @@ -211,6 +238,10 @@ export class NodeRenderer { } } + get radius() { + return this.strokes?.radius ?? this._radius + } + pointerEnter = (event: FederatedPointerEvent) => { if (this.renderer.draggedNode === this) { this.pointerLeftBeforeDragComplete = false @@ -487,35 +518,49 @@ export class NodeRenderer { this.doubleClick = false } - private setPosition(node: Node, x: number, y: number, radius: number) { - this.x = x - this.y = y + private resize(radius: number) { + if (radius !== this._radius) { + this._radius = radius + this.fill.resize(radius) + this.strokes?.resize(radius) - this.fill.update(this.x, this.y, radius, node.style) - this.strokes.update(this.x, this.y, radius, node.style) + if (this.label) { + this.label.offset = this.radius + } - if (this.label) { - this.label.offset = this.strokes.radius - this.label.moveTo(this.x, this.y) + this.hitArea.update(this.x, this.y, radius) + } + + return this + } + + private moveTo(x: number, y: number) { + if (x !== this.x || y !== this.y) { + this.x = x + this.y = y + this.fill.moveTo(x, y) + this.strokes?.moveTo(x, y) + this.label?.moveTo(x, y) + this.icon?.moveTo(x, y) + this.hitArea.update(x, y, this._radius) } - this.icon?.moveTo(this.x, this.y) - this.hitArea.update(this.x, this.y, radius) + return this } private visible() { let left: number, right: number, top: number, bottom: number if (this.label) { - left = this.x - Math.max(this.strokes.radius, this.label.rect.left) - right = this.x + Math.max(this.strokes.radius, this.label.rect.right) - top = this.y - Math.max(this.strokes.radius, this.label.rect.top) - bottom = this.y + Math.max(this.strokes.radius, this.label.rect.bottom) + left = this.x - Math.max(this.radius, this.label.rect.left) + right = this.x + Math.max(this.radius, this.label.rect.right) + top = this.y - Math.max(this.radius, this.label.rect.top) + bottom = this.y + Math.max(this.radius, this.label.rect.bottom) } else { - left = this.x - this.strokes.radius - right = this.x + this.strokes.radius - top = this.y - this.strokes.radius - bottom = this.y + this.strokes.radius + left = this.x - this.radius + right = this.x + this.radius + top = this.y - this.radius + bottom = this.y + this.radius } const { minX, maxX, minY, maxY } = this.renderer @@ -532,7 +577,7 @@ export class NodeRenderer { const style = this.node.style?.label if (label !== undefined && label.trim() !== '' && this.label === undefined) { this.label = new Text(this.renderer.assets, this.renderer.labelsContainer, label, style, DEFAULT_LABEL_STYLE) - this.label.offset = this.strokes.radius + this.label.offset = this.radius this.label.moveTo(this.x, this.y) } @@ -542,8 +587,10 @@ export class NodeRenderer { private applyIcon() { const icon = this.node.style?.icon if (icon !== undefined && this.icon === undefined) { - this.icon = new Icon(this.renderer.assets, this.renderer.textIcon, this.renderer.nodesContainer, this.fill, icon) - this.icon.moveTo(this.x, this.y) + this.icon = new Icon(this.renderer.assets, this.renderer.textIcon, this.renderer.nodesContainer, this.fill, icon).moveTo( + this.x, + this.y + ) } return this diff --git a/src/renderers/webgl/objects/Arrow.ts b/src/renderers/webgl/objects/Arrow.ts new file mode 100644 index 00000000..bcf2db52 --- /dev/null +++ b/src/renderers/webgl/objects/Arrow.ts @@ -0,0 +1,94 @@ +import { Container, Sprite } from 'pixi.js' +import { FillStyle, RenderObject } from '../../../types' +import ArrowTexture from '../textures/ArrowTexture' +import { DEFAULT_FILL, DEFAULT_FILL_STYLE, DEFAULT_OPACITY } from '../../../utils/constants' + +export default class Arrow implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private object: Sprite + private style: Required = DEFAULT_FILL_STYLE + + constructor( + private container: Container, + private texture: ArrowTexture + ) { + this.container = container + this.texture = texture + this.object = this.create() + } + + update(color = DEFAULT_FILL, opacity = DEFAULT_OPACITY) { + this.style = { color, opacity } + this.object.tint = this.style.color + this.object.alpha = this.style.opacity + return this + } + + moveTo(x: number, y: number) { + if (x !== this.x) { + this.x = x + this.object.x = x + } + + if (y !== this.y) { + this.y = y + this.object.y = y + } + + return this + } + + rotate(angle: number) { + this.object.rotation = angle + return this + } + + mount() { + if (!this.mounted) { + this.container.addChild(this.object) + this.mounted = true + } + + return this + } + + unmount() { + if (this.mounted) { + this.container.removeChild(this.object) + this.mounted = false + } + + return this + } + + delete() { + this.unmount() + this.object.destroy() + + return undefined + } + + get width() { + return this.texture.width + } + + get height() { + return this.texture.height + } + + private get scale() { + return 1 / this.texture.scaleFactor + } + + private create() { + const object = new Sprite(this.texture.get()) + object.anchor.set(0, 0.5) + object.scale.set(this.scale) + object.tint = this.style.color + object.alpha = this.style.opacity + return object + } +} diff --git a/src/renderers/webgl/objects/Icon.ts b/src/renderers/webgl/objects/Icon.ts index fb8667d6..5b01b5ef 100644 --- a/src/renderers/webgl/objects/Icon.ts +++ b/src/renderers/webgl/objects/Icon.ts @@ -1,10 +1,10 @@ import { Container, Sprite, Texture } from 'pixi.js' -import { IconStyle } from '../../../types' +import { IconStyle, RenderObject } from '../../../types' import { equals } from '../../../utils/api' import AssetManager, { AssetSubscription, FontSubscription } from '../loaders/AssetManager' import TextIconTexture from '../textures/TextIconTexture' -export default class Icon { +export default class Icon implements RenderObject { mounted = false private x = 0 diff --git a/src/renderers/webgl/objects/ObjectManager.ts b/src/renderers/webgl/objects/ObjectManager.ts index 6d754f96..87e56ded 100644 --- a/src/renderers/webgl/objects/ObjectManager.ts +++ b/src/renderers/webgl/objects/ObjectManager.ts @@ -9,14 +9,17 @@ export default class ObjectManager { mount(object: T) { this.batch.set(object, 0) + return object } unmount(object: T) { this.batch.set(object, 1) + return object } delete(object: T) { this.batch.set(object, 2) + return undefined } render() { diff --git a/src/renderers/webgl/objects/arrow.ts b/src/renderers/webgl/objects/arrow.ts deleted file mode 100644 index 3895ba32..00000000 --- a/src/renderers/webgl/objects/arrow.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { Container, Sprite } from 'pixi.js' -import ArrowTexture from '../textures/ArrowTexture' - -export class Arrow { - mounted = false - height: number - width: number - - private container: Container - private arrowTexture: ArrowTexture - private arrow: Sprite - - constructor(container: Container, arrowTexture: ArrowTexture) { - this.container = container - this.arrowTexture = arrowTexture - this.arrow = new Sprite(this.arrowTexture.get()) - this.height = this.arrowTexture.height - this.width = this.arrowTexture.width - this.arrow.anchor.set(0, 0.5) - this.arrow.scale.set(1 / this.arrowTexture.scaleFactor) - } - - update(x: number, y: number, rotation: number, color: string | number, opacity: number) { - this.arrow.x = x - this.arrow.y = y - this.arrow.rotation = rotation - this.arrow.tint = color - this.arrow.alpha = opacity - - return this - } - - mount() { - if (!this.mounted) { - this.container.addChild(this.arrow) - this.mounted = true - } - - return this - } - - unmount() { - if (this.mounted) { - this.container.removeChild(this.arrow) - this.mounted = false - } - - return this - } - - delete() { - this.unmount() - this.arrow.destroy() - - return undefined - } -} diff --git a/src/renderers/webgl/objects/circle/Circle.ts b/src/renderers/webgl/objects/circle/Circle.ts new file mode 100644 index 00000000..9ce6ce11 --- /dev/null +++ b/src/renderers/webgl/objects/circle/Circle.ts @@ -0,0 +1,112 @@ +import { FillStyle, RenderObject } from '../../../../types' +import { DEFAULT_FILL, DEFAULT_OPACITY } from '../../../../utils/constants' +import { Container, Sprite } from 'pixi.js' +import CircleTexture from '../../textures/CircleTexture' +import { isNumber } from '../../../../utils/helpers' + +export default class Circle implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private _radius = 0 + + private object: Sprite + private style: Required + + constructor( + private container: Container, + private texture: CircleTexture, + { color = DEFAULT_FILL, opacity = DEFAULT_OPACITY }: Partial = {}, + index?: number + ) { + this.container = container + this.texture = texture + this.style = { color, opacity } + this.object = this.create(index) + } + + update(color = DEFAULT_FILL, opacity = DEFAULT_OPACITY) { + this.style = { color, opacity } + this.object.tint = this.style.color + this.object.alpha = this.style.opacity + return this + } + + moveTo(x: number, y: number) { + if (x !== this.x) { + this.x = x + this.object.x = x + } + + if (y !== this.y) { + this.y = y + this.object.y = y + } + + return this + } + + resize(radius: number) { + if (this._radius !== radius) { + this._radius = radius + this.object.scale.set(radius / this.texture.scaleFactor) + } + + return this + } + + mount() { + // TODO - why is mounting/unmouting fill Sprite less efficient? + if (!this.mounted) { + this.mounted = true + this.object.visible = this.mounted + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + this.object.visible = this.mounted + } + + return this + } + + delete() { + this.unmount() + this.container.removeChild(this.object) + this.object.destroy() + + return undefined + } + + getContainerIndex() { + return this.container.getChildIndex(this.object) + } + + get radius() { + return this._radius + } + + private create(index?: number) { + const object = new Sprite(this.texture.get()) + + object.anchor.set(0.5, 0.5) + object.x = this.x + object.y = this.y + object.visible = this.mounted + object.tint = this.style.color + object.alpha = this.style.opacity + + if (isNumber(index)) { + this.container.addChildAt(object, index) + } else { + this.container.addChild(object) + } + + return object + } +} diff --git a/src/renderers/webgl/objects/circle/CircleStrokes.ts b/src/renderers/webgl/objects/circle/CircleStrokes.ts new file mode 100644 index 00000000..de1930d6 --- /dev/null +++ b/src/renderers/webgl/objects/circle/CircleStrokes.ts @@ -0,0 +1,133 @@ +import { RenderObject, Stroke } from '../../../../types' +import { Container } from 'pixi.js' +import { equals } from '../../../../utils/api' +import CircleTexture from '../../textures/CircleTexture' +import Circle from './Circle' + +export default class CircleStrokes implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private minRadius = 0 + private maxRadius = 0 + private objects: Circle[] = [] + + constructor( + private container: Container, + private texture: CircleTexture, + private fill: Circle, + private strokes: Stroke[] = [] + ) { + this.container = container + this.texture = texture + this.fill = fill + this.applyStrokes(strokes) + } + + update(strokes: Stroke[] = []) { + if (!equals(this.strokes, strokes)) { + const isMounted = this.mounted + + this.delete() + this.applyStrokes(strokes) + + if (isMounted) { + this.mount() + } + } + + return this + } + + moveTo(x: number, y: number) { + const dirty = x !== this.x || y !== this.y + + if (dirty) { + this.x = x + this.y = y + + for (const object of this.objects) { + object.moveTo(x, y) + } + } + + return this + } + + resize(radius: number) { + if (radius !== this.minRadius) { + this.minRadius = radius + this.maxRadius = radius + + for (let i = 0; i < this.strokes.length; i += 1) { + this.objects[i].resize(this.increment(this.strokes[i].width)) + } + } + + return this + } + + mount() { + if (!this.mounted) { + this.mounted = true + + for (const object of this.objects) { + object.mount() + } + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + + for (const object of this.objects) { + object.unmount() + } + } + + return this + } + + delete() { + this.mounted = false + + for (const object of this.objects) { + object.delete() + } + + this.strokes = [] + this.objects = [] + this.maxRadius = this.minRadius + + return undefined + } + + get radius() { + return this.maxRadius + } + + private increment(width: number) { + this.maxRadius += width + return this.maxRadius + } + + private applyStrokes(strokes: Stroke[]) { + this.objects = [] + this.strokes = strokes + this.minRadius = this.fill.radius + this.maxRadius = this.minRadius + + const index = this.fill.getContainerIndex() + + for (const { width, ...style } of strokes) { + const object = new Circle(this.container, this.texture, style, index) + this.objects.push(object.resize(this.increment(width)).moveTo(this.x, this.y)) + } + + return this + } +} diff --git a/src/renderers/webgl/objects/line/LineSegment.ts b/src/renderers/webgl/objects/line/LineSegment.ts new file mode 100644 index 00000000..92eefeb9 --- /dev/null +++ b/src/renderers/webgl/objects/line/LineSegment.ts @@ -0,0 +1,117 @@ +import { Container, Sprite, Texture } from 'pixi.js' +import { RenderObject, Stroke } from '../../../../types' +import { DEFAULT_FILL, DEFAULT_OPACITY, DEFAULT_STROKE_WIDTH, HALF_PI } from '../../../../utils/constants' +import { isNumber } from '../../../../utils/helpers' + +// TODO -> let LineSegment own arrow rendering +export default class LineSegment implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private _length = 0 + private object: Sprite + private style: Required + + constructor( + private container: Container, + { color = DEFAULT_FILL, width = DEFAULT_STROKE_WIDTH, opacity = DEFAULT_OPACITY }: Partial = {} + ) { + this.container = container + this.style = { color, width, opacity } + this.object = this.create() + } + + update(color = DEFAULT_FILL, width = DEFAULT_STROKE_WIDTH, opacity = DEFAULT_OPACITY) { + this.style = { color, width, opacity } + this.object.tint = color + this.object.width = width + this.object.alpha = opacity + + return this + } + + rotate(angle: number) { + this.object.rotation = angle + HALF_PI + return this + } + + resize(length: number) { + if (length !== this._length) { + this._length = length + this.object.height = length + } + + return this + } + + moveTo(x: number, y: number) { + if (x !== this.x) { + this.x = x + this.object.x = x + } + if (y !== this.y) { + this.y = y + this.object.y = y + } + + return this + } + + mount(index?: number) { + if (!this.mounted) { + this.mounted = true + + if (isNumber(index)) { + this.container.addChildAt(this.object, index) + } else { + this.container.addChild(this.object) + } + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + this.container.removeChild(this.object) + } + + return this + } + + delete() { + this.unmount() + this.object.destroy() + + return undefined + } + + getContainerIndex() { + if (this.mounted) { + return this.container.getChildIndex(this.object) + } + + return -1 + } + + get width() { + return this.style.width + } + + get length() { + return this._length + } + + private create() { + const object = new Sprite(Texture.WHITE) + object.tint = this.style.color + object.alpha = this.style.opacity + object.width = this.style.width + object.height = this._length + object.anchor.set(0.5, 0) + + return object + } +} diff --git a/src/renderers/webgl/objects/line/LineStrokes.ts b/src/renderers/webgl/objects/line/LineStrokes.ts new file mode 100644 index 00000000..99dac0e7 --- /dev/null +++ b/src/renderers/webgl/objects/line/LineStrokes.ts @@ -0,0 +1,149 @@ +import { RenderObject, Stroke } from '../../../../types' +import { Container } from 'pixi.js' +import { equals } from '../../../../utils/api' +import LineSegment from './LineSegment' + +export default class LineStrokes implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private length = 0 + private angle = 0 + private minWidth = 0 + private maxWidth = 0 + private objects: LineSegment[] = [] + + constructor( + private container: Container, + private fill: LineSegment, + private strokes: Stroke[] = [] + ) { + this.container = container + this.fill = fill + this.length = fill.length + this.applyStrokes(strokes) + } + + update(strokes: Stroke[] = []) { + if (!equals(this.strokes, strokes)) { + const isMounted = this.mounted + + this.delete() + this.applyStrokes(strokes) + + if (isMounted) { + this.mount() + } + } else if (this.fill.width !== this.minWidth) { + this.minWidth = this.fill.width + this.maxWidth = this.minWidth + + for (let i = 0; i < this.strokes.length; i += 1) { + const { color, width, opacity } = this.strokes[i] + this.objects[i].update(color, this.increment(width), opacity) + } + } + + return this + } + + moveTo(x: number, y: number) { + const dirty = x !== this.x || y !== this.y + + if (dirty) { + this.x = x + this.y = y + + for (const object of this.objects) { + object.moveTo(x, y) + } + } + + return this + } + + resize(length: number) { + if (length !== this.length) { + this.length = length + + for (const object of this.objects) { + object.resize(length) + } + } + + return this + } + + rotate(angle: number) { + if (angle !== this.angle) { + this.angle = angle + for (const object of this.objects) { + object.rotate(angle) + } + } + return this + } + + mount() { + if (!this.mounted) { + this.mounted = true + + const index = this.fill.getContainerIndex() + for (const object of this.objects) { + object.mount(index) + } + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + + for (const object of this.objects) { + object.unmount() + } + } + + return this + } + + delete() { + this.mounted = false + + for (const object of this.objects) { + object.delete() + } + + this.strokes = [] + this.objects = [] + this.maxWidth = this.minWidth + + return undefined + } + + get width() { + return this.maxWidth + } + + private increment(value: number) { + this.maxWidth += value + return this.maxWidth + } + + private applyStrokes(strokes: Stroke[]) { + this.objects = [] + this.strokes = strokes + this.minWidth = this.fill.width + this.maxWidth = this.minWidth + + for (const stroke of strokes) { + const object = new LineSegment(this.container, { ...stroke, width: this.increment(stroke.width) }) + this.objects.push(object.rotate(this.angle).resize(this.length).moveTo(this.x, this.y)) + } + + return this + } +} diff --git a/src/renderers/webgl/objects/lineSegment.ts b/src/renderers/webgl/objects/lineSegment.ts deleted file mode 100644 index a8f5596d..00000000 --- a/src/renderers/webgl/objects/lineSegment.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Container, Sprite, Texture } from 'pixi.js' -import { HALF_PI } from '../utils' -import { angle, distance } from '../../../utils/api' - -export class LineSegment { - mounted = false - - private container: Container - private lineSegment: Sprite - - constructor(container: Container) { - this.container = container - this.lineSegment = new Sprite(Texture.WHITE) - } - - update(x0: number, y0: number, x1: number, y1: number, width: number, color: string | number, opacity: number) { - this.lineSegment.x = x0 - this.lineSegment.y = y0 - this.lineSegment.width = width - this.lineSegment.height = distance(x0, y0, x1, y1) - this.lineSegment.rotation = angle(x0, y0, x1, y1) + HALF_PI - this.lineSegment.tint = color - this.lineSegment.alpha = opacity - this.lineSegment.anchor.set(0.5, 0) - - return this - } - - mount() { - if (!this.mounted) { - this.container.addChild(this.lineSegment) - this.mounted = true - } - - return this - } - - unmount() { - if (this.mounted) { - this.container.removeChild(this.lineSegment) - this.mounted = false - } - - return this - } - - delete() { - this.unmount() - this.lineSegment.destroy() - - return undefined - } -} diff --git a/src/renderers/webgl/objects/nodeFill.ts b/src/renderers/webgl/objects/nodeFill.ts deleted file mode 100644 index e5a940a2..00000000 --- a/src/renderers/webgl/objects/nodeFill.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Container, Sprite } from 'pixi.js' -import type { NodeStyle } from '../../../types' -import CircleTexture from '../textures/CircleTexture' - -const DEFAULT_NODE_FILL = 0xaaaaaa - -export class NodeFill { - mounted = false - fill: Sprite // TODO - make private - - private container: Container - private circleTexture: CircleTexture - private radius?: number - private style?: NodeStyle - - constructor(container: Container, circleTexture: CircleTexture) { - this.container = container - this.circleTexture = circleTexture - this.fill = new Sprite(this.circleTexture.get()) - this.fill.anchor.set(0.5) - this.fill.visible = false - - this.container.addChild(this.fill) - } - - update(x: number, y: number, radius: number, style?: NodeStyle) { - if ((style?.color ?? DEFAULT_NODE_FILL) !== (this.style?.color ?? DEFAULT_NODE_FILL)) { - this.fill.tint = style?.color ?? DEFAULT_NODE_FILL - } - - if (radius !== this.radius) { - this.fill.scale.set(radius / this.circleTexture.scaleFactor) - this.radius = radius - } - - this.fill.x = x - this.fill.y = y - - this.style = style - - return this - } - - mount() { - if (!this.mounted) { - // TODO - why is mounting/unmouting fill Sprite less efficient? - this.fill.visible = true - // this.container.addChild(this.fill) - this.mounted = true - } - - return this - } - - unmount() { - if (this.mounted) { - this.fill.visible = false - // this.container.removeChild(this.fill) - this.mounted = false - } - - return this - } - - delete() { - this.unmount() - this.container.removeChild(this.fill) - this.fill.destroy() - - return undefined - } - - getContainerIndex() { - return this.container.getChildIndex(this.fill) - } -} diff --git a/src/renderers/webgl/objects/nodeStrokes.ts b/src/renderers/webgl/objects/nodeStrokes.ts deleted file mode 100644 index 00243b64..00000000 --- a/src/renderers/webgl/objects/nodeStrokes.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { Container, Sprite } from 'pixi.js' -import CircleTexture from '../textures/CircleTexture' -import { NodeFill } from './nodeFill' -import type { NodeStyle } from '../../../types' - -export class NodeStrokes { - mounted = false - radius = 0 - sprites?: Sprite[] // TODO - make private - - private container: Container - private circleTexture: CircleTexture - private fill: NodeFill - private style?: NodeStyle - - constructor(container: Container, circleTexture: CircleTexture, fill: NodeFill) { - this.container = container - this.circleTexture = circleTexture - this.fill = fill - } - - update(x: number, y: number, radius: number, style?: NodeStyle) { - if (style?.stroke !== this.style?.stroke) { - // exit - const isMounted = this.mounted - this.delete() - - if (style?.stroke?.length) { - // enter - - this.sprites = Array(style.stroke.length) - - this.radius = radius - - for (let i = 0; i < style.stroke.length; i++) { - this.radius += style.stroke[i].width - const circle = new Sprite(this.circleTexture.get()) - circle.anchor.set(0.5) - circle.scale.set(this.radius / this.circleTexture.scaleFactor) - circle.tint = style.stroke[i].color - circle.x = x - circle.y = y - this.sprites[i] = circle - } - if (isMounted) { - this.mount() - } - } - } else if (this.sprites && this.style?.stroke) { - // reposition - this.radius = radius - - for (let i = 0; i < this.sprites.length; i++) { - this.radius += this.style.stroke[i].width - const scale = this.radius / this.circleTexture.scaleFactor - if (scale !== this.sprites[i].scale.x) { - this.sprites[i].scale.set(this.radius / this.circleTexture.scaleFactor) - } - this.sprites[i].x = x - this.sprites[i].y = y - } - } - - this.style = style - - return this - } - - mount() { - if (!this.mounted && this.sprites) { - const strokeContainerIndex = this.fill.getContainerIndex() - - for (let i = this.sprites.length - 1; i >= 0; i--) { - this.container.addChildAt(this.sprites[i], strokeContainerIndex) - } - this.mounted = true - } - - return this - } - - unmount() { - if (this.mounted && this.sprites) { - for (let i = this.sprites.length - 1; i >= 0; i--) { - this.container.removeChild(this.sprites[i]) - } - this.mounted = false - } - - return this - } - - delete() { - this.radius = 0 - this.unmount() - - if (this.sprites) { - for (const stroke of this.sprites) { - stroke.destroy() - } - } - - return undefined - } -} diff --git a/src/renderers/webgl/objects/rectangle/Rectangle.ts b/src/renderers/webgl/objects/rectangle/Rectangle.ts new file mode 100644 index 00000000..d93a6181 --- /dev/null +++ b/src/renderers/webgl/objects/rectangle/Rectangle.ts @@ -0,0 +1,115 @@ +import { Dimensions, FillStyle, RenderObject } from '../../../../types' +import { DEFAULT_FILL, DEFAULT_OPACITY } from '../../../../utils/constants' +import { Container, Sprite, Texture } from 'pixi.js' +import { isNumber } from '../../../../utils/helpers' + +export default class Rectangle implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + private width = 0 + private height = 0 + private object: Sprite + private style: Required + + constructor( + private container: Container, + { color = DEFAULT_FILL, opacity = DEFAULT_OPACITY }: Partial = {} + ) { + this.container = container + this.style = { color, opacity } + this.object = this.create() + } + + update(color = DEFAULT_FILL, opacity = DEFAULT_OPACITY) { + this.style = { color, opacity } + this.object.tint = color + this.object.alpha = opacity + + return this + } + + moveTo(x: number, y: number) { + if (x !== this.x) { + this.x = x + this.object.x = x + } + + if (y !== this.y) { + this.y = y + this.object.y = y + } + + return this + } + + resize({ width, height }: Dimensions) { + if (this.width !== width) { + this.width = width + this.object.width = width + } + + if (this.height !== height) { + this.height = height + this.object.height = height + } + + return this + } + + mount(index?: number) { + if (!this.mounted) { + this.mounted = true + + if (isNumber(index)) { + this.container.addChildAt(this.object, index) + } else { + this.container.addChild(this.object) + } + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + this.container.removeChild(this.object) + } + + return this + } + + delete() { + this.unmount() + this.container.removeChild(this.object) + this.object.destroy() + + return undefined + } + + getContainerIndex() { + return this.container.getChildIndex(this.object) + } + + get size(): Dimensions { + return { width: this.width, height: this.height } + } + + get anchor() { + return this.object.anchor + } + + private create() { + const object = new Sprite(Texture.WHITE) + + object.anchor.set(0, 0) + object.x = this.x + object.y = this.y + object.tint = this.style.color + object.alpha = this.style.opacity + + return object + } +} diff --git a/src/renderers/webgl/objects/rectangle/RectangleStrokes.ts b/src/renderers/webgl/objects/rectangle/RectangleStrokes.ts new file mode 100644 index 00000000..7cfbdc5d --- /dev/null +++ b/src/renderers/webgl/objects/rectangle/RectangleStrokes.ts @@ -0,0 +1,141 @@ +import { Dimensions, RenderObject, Stroke } from '../../../../types' +import { Container } from 'pixi.js' +import { equals } from '../../../../utils/api' +import Rectangle from './Rectangle' + +export default class RectangleStrokes implements RenderObject { + mounted = false + + private x = 0 + private y = 0 + + private minSize: Dimensions = { width: 0, height: 0 } + private maxSize: Dimensions = { width: 0, height: 0 } + private objects: Rectangle[] = [] + + constructor( + private container: Container, + private fill: Rectangle, + private strokes: Stroke[] = [] + ) { + this.container = container + this.fill = fill + this.applyStrokes(strokes) + } + + update(strokes: Stroke[] = []) { + if (!equals(this.strokes, strokes)) { + const isMounted = this.mounted + + this.delete() + this.applyStrokes(strokes) + + if (isMounted) { + this.mount() + } + } + + return this + } + + moveTo(x: number, y: number) { + const dirty = x !== this.x || y !== this.y + + if (dirty) { + this.x = x + this.y = y + let _x = x + let _y = y + + for (let i = 0; i < this.strokes.length; i += 1) { + _x -= this.strokes[i].width + _y -= this.strokes[i].width + this.objects[i].moveTo(_x, _y) + } + } + + return this + } + + resize({ width, height }: Dimensions) { + if (width !== this.minSize.width || height !== this.minSize.height) { + this.minSize = { width, height } + this.maxSize = this.minSize + + for (let i = 0; i < this.strokes.length; i += 1) { + this.objects[i].resize(this.increment(this.strokes[i].width)) + } + } + + return this + } + + mount() { + if (!this.mounted) { + this.mounted = true + + const index = this.fill.getContainerIndex() + + for (const object of this.objects) { + object.mount(index) + } + } + + return this + } + + unmount() { + if (this.mounted) { + this.mounted = false + + for (const object of this.objects) { + object.unmount() + } + } + + return this + } + + delete() { + this.mounted = false + + for (const object of this.objects) { + object.delete() + } + + this.strokes = [] + this.objects = [] + this.maxSize = this.minSize + + return undefined + } + + get size() { + return this.maxSize + } + + private increment(value: number) { + const { width, height } = this.size + this.maxSize = { width: width + value * 2, height: height + value * 2 } + return this.maxSize + } + + private applyStrokes(strokes: Stroke[]) { + this.objects = [] + this.strokes = strokes + this.minSize = this.fill.size + this.maxSize = this.minSize + + let x = this.x + let y = this.y + + for (const { width, ...style } of strokes) { + x -= width + y -= width + const object = new Rectangle(this.container, style) + this.objects.push(object.resize(this.increment(width)).moveTo(x, y)) + } + + return this + } +} diff --git a/src/renderers/webgl/objects/text/Text.ts b/src/renderers/webgl/objects/text/Text.ts index 06b61dd8..a07745a6 100644 --- a/src/renderers/webgl/objects/text/Text.ts +++ b/src/renderers/webgl/objects/text/Text.ts @@ -1,11 +1,11 @@ -import type { Bounds, TextStyle, TextObject, FontWeight } from '../../../../types' +import type { Bounds, TextStyle, TextObject, FontWeight, RenderObject, PointTuple } from '../../../../types' import { BitmapText, Container, Text as PixiText } from 'pixi.js' import { equals } from '../../../../utils/api' import TextTexture, { TextTextureOptions } from '../../textures/TextTexture' import AssetManager, { FontSubscription } from '../../loaders/AssetManager' import TextHighlight from './TextHighlight' -export default class Text { +export default class Text implements RenderObject { mounted = false offset = 0 @@ -169,21 +169,20 @@ export default class Text { this.font = undefined } - get rotation() { - return this.object.rotation - } - - set rotation(rotation: number) { + rotate(rotation: number) { this.object.rotation = rotation - if (this.highlight) { - this.highlight.rotation = rotation - } + this.highlight?.rotate(rotation) + return this } get rect() { return this._rect } + get anchor() { + return this.object.anchor + } + private get size(): [width: number, height: number] { const [px, py] = this.style.getHighlightPadding() return [this.object.width + px * 2, this.object.height + py * 2] @@ -264,7 +263,7 @@ export default class Text { return this } - private offsetPosition(x: number, y: number, offset: number): [x: number, y: number] { + private offsetPosition(x: number, y: number, offset: number): PointTuple { switch (this.style.position) { case 'bottom': return [x, y + offset] diff --git a/src/renderers/webgl/objects/text/TextHighlight.ts b/src/renderers/webgl/objects/text/TextHighlight.ts index c96ce704..b5d6b331 100644 --- a/src/renderers/webgl/objects/text/TextHighlight.ts +++ b/src/renderers/webgl/objects/text/TextHighlight.ts @@ -1,7 +1,7 @@ import { Container, Sprite, Texture } from 'pixi.js' -import { FillStyle, TextObject } from '../../../../types' +import { FillStyle, RenderObject, TextObject } from '../../../../types' -export default class TextHighlight { +export default class TextHighlight implements RenderObject { mounted = false private x = 0 @@ -84,6 +84,11 @@ export default class TextHighlight { return undefined } + rotate(rotation: number) { + this.object.rotation = rotation + return this + } + get text() { return this.textObject } @@ -96,14 +101,6 @@ export default class TextHighlight { return this.object.anchor } - get rotation() { - return this.object.rotation - } - - set rotation(rotation: number) { - this.object.rotation = rotation - } - private create() { const object = Sprite.from(Texture.WHITE) object.width = this.width diff --git a/src/renderers/webgl/textures/ArrowTexture.ts b/src/renderers/webgl/textures/ArrowTexture.ts index 7d11d113..6a4448b8 100644 --- a/src/renderers/webgl/textures/ArrowTexture.ts +++ b/src/renderers/webgl/textures/ArrowTexture.ts @@ -1,7 +1,8 @@ -import { RenderTexture, Graphics, Matrix, MSAA_QUALITY, Renderer as PixiRenderer } from 'pixi.js' +import { RenderTexture, Graphics, Matrix } from 'pixi.js' +import { createRenderTexture } from '../../../utils/webgl' import { MIN_TEXTURE_ZOOM } from '../../../utils/constants' -import { Texture } from '../../../types' import { Renderer } from '..' +import { Texture } from '../../../types' export default class ArrowTexture implements Texture { private texture: RenderTexture @@ -12,23 +13,7 @@ export default class ArrowTexture implements Texture { .lineTo(this.height * this.scaleFactor, this.width * this.scaleFactor * 0.5) .lineTo(this.height * this.scaleFactor, -this.width * this.scaleFactor * 0.5) - this.texture = RenderTexture.create({ - width: graphic.width, - height: graphic.height, - multisample: MSAA_QUALITY.HIGH, - resolution: 2 - }) - - renderer.app.renderer.render(graphic, { - renderTexture: this.texture, - transform: new Matrix(1, 0, 0, 1, 0, graphic.height / 2) - }) - - if (renderer.app.renderer instanceof PixiRenderer) { - renderer.app.renderer.framebuffer.blit() - } - - graphic.destroy(true) + this.texture = createRenderTexture(renderer.app, graphic, new Matrix(1, 0, 0, 1, 0, graphic.height / 2)) } get() { diff --git a/src/renderers/webgl/textures/CircleTexture.ts b/src/renderers/webgl/textures/CircleTexture.ts index e1c6b5b1..e9f6a07d 100644 --- a/src/renderers/webgl/textures/CircleTexture.ts +++ b/src/renderers/webgl/textures/CircleTexture.ts @@ -1,4 +1,5 @@ -import { RenderTexture, Graphics, Matrix, MSAA_QUALITY, Renderer as PixiRenderer } from 'pixi.js' +import { RenderTexture, Graphics, Matrix } from 'pixi.js' +import { createRenderTexture } from '../../../utils/webgl' import { MIN_TEXTURE_ZOOM } from '../../../utils/constants' import { Texture } from '../../../types' import { Renderer } from '..' @@ -9,23 +10,7 @@ export default class CircleTexture implements Texture { constructor(renderer: Renderer) { const graphic = new Graphics().beginFill(0xffffff).drawCircle(0, 0, this.scaleFactor) - this.texture = RenderTexture.create({ - width: graphic.width, - height: graphic.height, - multisample: MSAA_QUALITY.HIGH, - resolution: 2 - }) - - renderer.app.renderer.render(graphic, { - renderTexture: this.texture, - transform: new Matrix(1, 0, 0, 1, graphic.width / 2, graphic.height / 2) - }) - - if (renderer.app.renderer instanceof PixiRenderer) { - renderer.app.renderer.framebuffer.blit() - } - - graphic.destroy(true) + this.texture = createRenderTexture(renderer.app, graphic, new Matrix(1, 0, 0, 1, graphic.width / 2, graphic.height / 2)) } get() { diff --git a/src/renderers/webgl/textures/RectangleTexture.ts b/src/renderers/webgl/textures/RectangleTexture.ts new file mode 100644 index 00000000..e89382e7 --- /dev/null +++ b/src/renderers/webgl/textures/RectangleTexture.ts @@ -0,0 +1,32 @@ +import { Graphics, Matrix, RenderTexture } from 'pixi.js' +import { createRenderTexture } from '../../../utils/webgl' +import { MIN_TEXTURE_ZOOM } from '../../../utils/constants' +import { Renderer } from '..' +import { Texture } from '../../../types' + +export default class RectangleTexture implements Texture { + scaleFactor: number + private texture: RenderTexture + + constructor(renderer: Renderer) { + this.scaleFactor = Math.max(renderer.width, renderer.height) * this.minTextureZoom + + const graphic = new Graphics().beginFill(0xffffff).drawRect(0, 0, this.scaleFactor, this.scaleFactor) + + this.texture = createRenderTexture(renderer.app, graphic, new Matrix(1, 0, 0, 1, graphic.width / 2, graphic.height / 2)) + } + + get() { + return this.texture + } + + delete() { + this.texture.destroy() + return undefined + } + + // TODO -> make configurable + private get minTextureZoom() { + return MIN_TEXTURE_ZOOM + } +} diff --git a/src/renderers/webgl/textures/TextIconTexture.ts b/src/renderers/webgl/textures/TextIconTexture.ts index 07d7be2f..35e35285 100644 --- a/src/renderers/webgl/textures/TextIconTexture.ts +++ b/src/renderers/webgl/textures/TextIconTexture.ts @@ -1,13 +1,11 @@ -import { RenderTexture, Text as PixiText, MSAA_QUALITY, Matrix, Renderer as PixiRenderer } from 'pixi.js' -import { DEFAULT_RESOLUTION, DEFAULT_TEXT_STYLE, MIN_TEXTURE_ZOOM } from '../../../utils/constants' +import { RenderTexture, Text as PixiText } from 'pixi.js' +import { createRenderTexture } from '../../../utils/webgl' import { TextIcon, Texture } from '../../../types' +import { MIN_TEXTURE_ZOOM } from '../../../utils/constants' import { Renderer } from '..' import TextTexture from './TextTexture' -const getCacheKey = ({ content, style = {} }: TextIcon) => { - const { color, stroke, fontFamily, fontSize, fontWeight } = { ...style, ...DEFAULT_TEXT_STYLE } - return [content, color, stroke.color, stroke.width, fontFamily, fontSize, fontWeight].join('-') -} +const join = (...args: (string | number)[]) => args.join('-') export default class TextIconTexture implements Texture { protected cache: { [key: string]: RenderTexture } = {} @@ -17,10 +15,16 @@ export default class TextIconTexture implements Texture { } get(icon: TextIcon) { - const key = getCacheKey(icon) + const style = new TextTexture(icon.style, { defaultTextStyle: { align: 'center' } }) + const key = join(icon.content, style.color, style.stroke.color, style.stroke.width, style.fontFamily, style.fontSize, style.fontWeight) if (this.cache[key] === undefined) { - this.cache[key] = this.createTexture(icon) + style.fontSize = style.fontSize * this.scaleFactor + + const object = new PixiText(icon.content, style.getTextStyle()) + object.updateText(true) + + this.cache[key] = createRenderTexture(this.renderer.app, object) } return this.cache[key] @@ -39,33 +43,4 @@ export default class TextIconTexture implements Texture { get scaleFactor() { return MIN_TEXTURE_ZOOM } - get resolution() { - return DEFAULT_RESOLUTION - } - - private createTexture(icon: TextIcon) { - const style = new TextTexture(icon.style, { defaultTextStyle: { align: 'center' } }) - style.fontSize = style.fontSize * this.scaleFactor - - const object = new PixiText(icon.content, style.getTextStyle()) - - object.updateText(true) - - const renderTexture = RenderTexture.create({ - width: object.width, - height: object.height, - multisample: MSAA_QUALITY.HIGH, - resolution: this.resolution - }) - - this.renderer.app.renderer.render(object, { renderTexture, transform: new Matrix() }) - - if (this.renderer.app.renderer instanceof PixiRenderer) { - this.renderer.app.renderer.framebuffer.blit() - } - - object.destroy(true) - - return renderTexture - } } diff --git a/src/renderers/webgl/textures/TextTexture.ts b/src/renderers/webgl/textures/TextTexture.ts index 9d09e9b0..a19048e7 100644 --- a/src/renderers/webgl/textures/TextTexture.ts +++ b/src/renderers/webgl/textures/TextTexture.ts @@ -3,6 +3,7 @@ import { TextStyle as PixiTextStyle, ITextStyle as IPixiTextStyle, BitmapFont, I import { DEFAULT_HIGHLIGHT_STYLE, DEFAULT_TEXT_STYLE, MIN_TEXTURE_ZOOM, DEFAULT_RESOLUTION } from '../../../utils/constants' import { isNumber } from '../../../utils/helpers' import { equals } from '../../../utils/api' +import { PointTuple } from '../../../types' export type TextTextureOptions = { defaultTextStyle?: Omit @@ -116,7 +117,7 @@ export default class TextTexture { } } - get anchor(): [x: number, y: number] { + get anchor(): PointTuple { switch (this.position) { case 'bottom': return [0.5, 0] diff --git a/src/renderers/webgl/utils.ts b/src/renderers/webgl/utils.ts deleted file mode 100644 index f96be923..00000000 --- a/src/renderers/webgl/utils.ts +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable no-console */ -import type { Node } from '../../types' - -export const HALF_PI = Math.PI / 2 - -export const TWO_PI = Math.PI * 2 - -export const THREE_HALF_PI = HALF_PI * 3 - -export const RADIANS_PER_DEGREE = Math.PI / 180 - -export const logUnknownEdgeError = (source: Node | undefined, target: Node | undefined) => { - if (source === undefined && target === undefined) { - console.error(`Error: Cannot render edge between unknown nodes ${source} and ${target}`) - } else if (source === undefined) { - console.error(`Error: Cannot render edge from unknown node ${source}`) - } else if (target === undefined) { - console.error(`Error: Cannot render edge to unknown node ${target}`) - } -} - -export const movePoint = (x: number, y: number, angle: number, distance: number): [x: number, y: number] => [ - x + Math.cos(angle) * distance, - y + Math.sin(angle) * distance -] - -export const midPoint = (x0: number, y0: number, x1: number, y1: number): [x: number, y: number] => [(x0 + x1) / 2, (y0 + y1) / 2] - -export const length = (x0: number, y0: number, x1: number, y1: number) => Math.hypot(x1 - x0, y1 - y0) diff --git a/src/types/api.ts b/src/types/api.ts index 78aaae54..7e08b95a 100644 --- a/src/types/api.ts +++ b/src/types/api.ts @@ -3,12 +3,14 @@ export type Bounds = { left: number; top: number; right: number; bottom: number export type Dimensions = { width: number; height: number } +export type Coordinates = { x: number; y: number } + export type Viewport = { x: number; y: number; zoom: number } // style export type FillStyle = { color: string; opacity?: number } -export type Stroke = { color: string; width: number } +export type Stroke = FillStyle & { width: number } export type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' @@ -35,7 +37,7 @@ export type TextStyle = Partial<{ align: TextAlign }> -export type LabelStyle = Omit & { +export type LabelStyle = Omit & { position?: Exclude } @@ -58,8 +60,7 @@ export type TextIcon = IconBase<'textIcon'> & { export type IconStyle = ImageIcon | TextIcon // nodes -export type NodeStyle = { - color?: string +export type NodeStyle = Partial & { icon?: IconStyle stroke?: Stroke[] badge?: { @@ -96,10 +97,8 @@ export type EdgeLabelStyle = LabelStyle & { position?: Exclude } -export type EdgeStyle = { - width?: number - stroke?: string - strokeOpacity?: number +export type EdgeStyle = Partial & { + stroke?: Stroke[] arrow?: ArrowStyle label?: EdgeLabelStyle } @@ -113,23 +112,20 @@ export type Edge = { } // annotations -export type AnnotationStyle = FillStyle & { - stroke?: Stroke[] -} - -export type TextAnnotationStyle = AnnotationStyle & { - text?: Omit - padding?: number | [px: number, py: number] -} - type AnnotationBase = { type: Type id: string x: number y: number + content?: string resize?: boolean } +export type AnnotationStyle = FillStyle & { + stroke?: Stroke[] + text?: Omit +} + export type CircleAnnotation = AnnotationBase<'circle'> & { radius: number style: AnnotationStyle @@ -141,11 +137,14 @@ export type RectangleAnnotation = AnnotationBase<'rectangle'> & { style: AnnotationStyle } -export type TextAnnotation = AnnotationBase<'text'> & { - width: number - height: number - content: string - style: TextAnnotationStyle +export type LineAnnotationStyle = Stroke & { + stroke?: Stroke[] + text?: EdgeLabelStyle +} + +export type LineAnnotation = Omit, 'x' | 'y'> & { + points: [{ x: number; y: number }, { x: number; y: number }] + style: LineAnnotationStyle } -export type Annotation = CircleAnnotation | RectangleAnnotation | TextAnnotation +export type Annotation = CircleAnnotation | RectangleAnnotation | LineAnnotation diff --git a/src/types/internal.ts b/src/types/internal.ts index d31e657e..77803988 100644 --- a/src/types/internal.ts +++ b/src/types/internal.ts @@ -6,6 +6,10 @@ export type Extend = { export type TextObject = PixiText | BitmapText +export type PointTuple = [x: number, y: number] + +export type LinePoints = [x0: number, y0: number, x1: number, y1: number] + export type Texture = { get(...args: unknown[]): RenderTexture delete(): void @@ -15,5 +19,11 @@ export interface RenderObjectLifecycle { mounted: boolean mount(index?: number): this unmount(): this - delete(): void + delete(): undefined } + +export interface RenderObject extends RenderObjectLifecycle { + moveTo(...args: number[]): this +} + +export type InterpolateFn = (dt: number) => { value: number; done: boolean } diff --git a/src/utils/api.ts b/src/utils/api.ts index 987211bd..017c8b51 100644 --- a/src/utils/api.ts +++ b/src/utils/api.ts @@ -1,4 +1,4 @@ -import { TWO_PI } from '../renderers/webgl/utils' +import { TWO_PI } from './constants' import type { Node, Annotation, Edge, Bounds, Viewport, Dimensions } from '../types' export const getSelectionBounds = (elements: (Node | Annotation)[], padding: number = 0): Bounds => { diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 8e8bd810..49e650a8 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -1,29 +1,51 @@ +// math +export const HALF_PI = Math.PI / 2 +export const TWO_PI = Math.PI * 2 +export const THREE_HALF_PI = HALF_PI * 3 +export const RADIANS_PER_DEGREE = Math.PI / 180 + // zoom limits // TODO - extends to renderer options export const MIN_LABEL_ZOOM = 0.25 -export const MIN_NODE_STROKE_ZOOM = 0.3 +export const MIN_STROKE_ZOOM = 0.3 export const MIN_NODE_ICON_ZOOM = 0.3 export const MIN_INTERACTION_ZOOM = 0.15 export const MIN_EDGES_ZOOM = 0.1 +export const MIN_ANNOTATION_ZOOM = 0.25 export const MIN_TEXTURE_ZOOM = 3 // style +export const COLORS = { + BLACK: '#000000', + WHITE: '#FFFFFF', + GREY: '#AAAAAA' +} + export const DEFAULT_RESOLUTION = 2 +export const DEFAULT_FILL = COLORS.GREY export const DEFAULT_OPACITY = 1 +export const DEFAULT_STROKE_WIDTH = 1 +export const DEFAULT_ARROW = 'none' -export const COLORS = { - BLACK: '#000000', - WHITE: '#FFFFFF' +export const DEFAULT_FILL_STYLE = { + color: DEFAULT_FILL, + opacity: DEFAULT_OPACITY +} + +export const DEFAULT_STROKE_STYLE = { + color: DEFAULT_FILL, + opacity: DEFAULT_OPACITY, + width: DEFAULT_STROKE_WIDTH } export const DEFAULT_TEXT_STYLE = { - margin: 2, + margin: 0, fontSize: 10, color: COLORS.BLACK, letterSpacing: 0.5, fontName: 'Font', fontFamily: 'sans-serif', - align: 'left' as const, + align: 'center' as const, wordWrap: false as const, position: 'center' as const, fontWeight: 'normal' as const, @@ -31,7 +53,7 @@ export const DEFAULT_TEXT_STYLE = { } export const DEFAULT_LABEL_STYLE = { - defaultTextStyle: { position: 'bottom' as const, align: 'center' as const } + defaultTextStyle: { position: 'bottom' as const, margin: 2 } } export const DEFAULT_HIGHLIGHT_STYLE = { @@ -41,3 +63,6 @@ export const DEFAULT_HIGHLIGHT_STYLE = { } export const GENERIC_FONT_FAMILIES = new Set(['serif', 'sans-serif', 'monospace', 'cursive']) + +// animations +export const DEFAULT_ANIMATE_RESIZE = 800 diff --git a/src/utils/webgl.ts b/src/utils/webgl.ts new file mode 100644 index 00000000..132ec0fd --- /dev/null +++ b/src/utils/webgl.ts @@ -0,0 +1,51 @@ +import { Application, Renderer, Container, Matrix, RenderTexture, IBaseTextureOptions, MSAA_QUALITY, SCALE_MODES } from 'pixi.js' +import { DEFAULT_RESOLUTION } from './constants' +import { Node, PointTuple } from '../types' + +export const logUnknownEdgeError = (source: Node | undefined, target: Node | undefined) => { + if (source === undefined && target === undefined) { + // eslint-disable-next-line no-console + console.error(`Error: Cannot render edge between unknown nodes ${source} and ${target}`) + } else if (source === undefined) { + // eslint-disable-next-line no-console + console.error(`Error: Cannot render edge from unknown node ${source}`) + } else if (target === undefined) { + // eslint-disable-next-line no-console + console.error(`Error: Cannot render edge to unknown node ${target}`) + } +} + +export const movePoint = (x: number, y: number, angle: number, distance: number): PointTuple => [ + x + Math.cos(angle) * distance, + y + Math.sin(angle) * distance +] + +export const midPoint = (x0: number, y0: number, x1: number, y1: number): PointTuple => [(x0 + x1) / 2, (y0 + y1) / 2] + +export const length = (x0: number, y0: number, x1: number, y1: number) => Math.hypot(x1 - x0, y1 - y0) + +export const createRenderTexture = ( + app: A, + graphic: G, + transform = new Matrix(), + options: IBaseTextureOptions = {} +) => { + const renderTexture = RenderTexture.create({ + width: graphic.width, + height: graphic.height, + resolution: DEFAULT_RESOLUTION, + multisample: MSAA_QUALITY.HIGH, + scaleMode: SCALE_MODES.LINEAR, + ...options + }) + + app.renderer.render(graphic, { renderTexture, transform }) + + if (app.renderer instanceof Renderer) { + app.renderer.framebuffer.blit() + } + + graphic.destroy(true) + + return renderTexture +}