@unovis/ts 1.4.2-alpha.4 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/axis/config.d.ts +2 -0
- package/components/axis/config.js.map +1 -1
- package/components/axis/index.js +15 -15
- package/components/axis/index.js.map +1 -1
- package/components/graph/config.d.ts +9 -9
- package/components/graph/config.js +2 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +13 -2
- package/components/graph/index.js +173 -49
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/node/index.d.ts +3 -3
- package/components/graph/modules/node/index.js +24 -46
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/graph/modules/node/style.d.ts +2 -0
- package/components/graph/modules/node/style.js +34 -4
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/style.d.ts +1 -0
- package/components/graph/style.js +22 -1
- package/components/graph/style.js.map +1 -1
- package/components/graph/types.d.ts +1 -0
- package/components/graph/types.js.map +1 -1
- package/components/tooltip/config.d.ts +0 -4
- package/components/tooltip/config.js +0 -2
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +0 -5
- package/components/tooltip/index.js +5 -61
- package/components/tooltip/index.js.map +1 -1
- package/components/tooltip/style.js +8 -6
- package/components/tooltip/style.js.map +1 -1
- package/containers/single-container/index.js +1 -0
- package/containers/single-container/index.js.map +1 -1
- package/containers/xy-container/index.js +1 -0
- package/containers/xy-container/index.js.map +1 -1
- package/core/container/index.d.ts +1 -0
- package/core/container/index.js +5 -4
- package/core/container/index.js.map +1 -1
- package/data-models/graph.d.ts +2 -0
- package/data-models/graph.js +6 -0
- package/data-models/graph.js.map +1 -1
- package/index.d.ts +0 -2
- package/index.js +0 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/types/text.d.ts +2 -0
- package/types/text.js.map +1 -1
- package/utils/text.d.ts +1 -1
- package/utils/text.js +27 -15
- package/utils/text.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/node/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { arc } from 'd3-shape'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { TrimMode } from 'types/text'\n\n// Utils\nimport { trimString } from 'utils/text'\nimport { polygon } from 'utils/path'\nimport { smartTransition } from 'utils/d3'\nimport { getBoolean, getNumber, getString, getValue, throttle } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { isStringSvg } from 'utils/svg'\n\n// Local Types\nimport { GraphNode, GraphCircleLabel, GraphNodeAnimationState, GraphNodeAnimatedElement, GraphNodeShape } from '../../types'\n\n// Config\nimport { GraphConfigInterface } from '../../config'\n\n// Helpers\nimport {\n arcTween,\n polyTween,\n setLabelRect,\n getX,\n getY,\n getSideLabelTextColor,\n getNodeColor,\n getNodeIconColor,\n getNodeSize,\n LABEL_RECT_VERTICAL_PADDING,\n isInternalHref,\n} from './helper'\nimport { appendShape, updateShape } from '../shape'\nimport { ZoomLevel } from '../zoom-levels'\n\n// Styles\nimport * as generalSelectors from '../../style'\nimport * as nodeSelectors from './style'\n\nconst SIDE_LABEL_DEFAULT_RADIUS = 10\n\nexport interface GraphNodeSVGGElement extends SVGGElement {\n nodeShape?: string;\n}\n\nexport function createNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n duration: number,\n scale = 1\n): void {\n const { nodeShape } = config\n\n selection.each((d, i, elements) => {\n const element = elements[i] as GraphNodeSVGGElement\n const group = select<SVGGElement, GraphNode<N, L>>(element)\n group\n .attr('transform', (d: GraphNode<N, L>, i) => {\n const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeEnterPosition, i)\n const scale = getNumber(d, config.nodeEnterScale, i) ?? 0\n const x = configuredPosition?.[0] ?? getX(d)\n const y = configuredPosition?.[1] ?? getY(d)\n return `translate(${x}, ${y}) scale(${scale})`\n })\n .attr('opacity', 0)\n\n // If there's a custom render function, use it\n if (config.nodeEnterCustomRenderFunction) {\n config.nodeEnterCustomRenderFunction(d, element, config, duration, scale)\n } else { // Default node rendering\n const shape = getString(d, nodeShape, d._index) as GraphNodeShape\n /** Todo: The 'nodeShape' storing logic below it a temporary fix, needs a cleaner implementation */\n element.nodeShape = shape\n appendShape(group, shape, nodeSelectors.node, nodeSelectors.customNode, d._index)\n appendShape(group, shape, nodeSelectors.nodeSelection, nodeSelectors.customNode, d._index)\n group.append('path').attr('class', nodeSelectors.nodeGauge)\n group.append('g').attr('class', nodeSelectors.nodeIcon)\n\n group.append('g')\n .attr('class', nodeSelectors.sideLabelsGroup)\n\n group.append('text')\n .attr('class', nodeSelectors.nodeBottomIcon)\n }\n\n // Label\n const label = group.append('g').attr('class', nodeSelectors.label)\n label.append('rect').attr('class', nodeSelectors.labelBackground)\n\n const labelText = label.append('text')\n .attr('class', nodeSelectors.labelText)\n .attr('dy', '0.32em')\n labelText.append('tspan').attr('class', nodeSelectors.labelTextContent)\n labelText.append('tspan')\n .attr('class', nodeSelectors.subLabelTextContent)\n .attr('dy', '1.1em')\n .attr('x', '0')\n })\n}\n\nexport function updateNodeSelectedGreyout<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>\n): void {\n const { nodeDisabled } = config\n\n selection.each((d, i, elements) => {\n const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(elements[i])\n const isGreyout = getBoolean(d, nodeDisabled, d._index) || d._state.greyout\n\n group.classed(nodeSelectors.greyedOutNode, isGreyout)\n .classed(nodeSelectors.draggable, !config.disableDrag)\n\n const nodeSelectionOutline = group.selectAll<SVGGElement, GraphNode<N, L>>(`.${nodeSelectors.nodeSelection}`)\n nodeSelectionOutline.classed(nodeSelectors.nodeSelectionActive, d._state.selected)\n\n group.selectAll<SVGTextElement, GraphCircleLabel>(`.${nodeSelectors.sideLabel}`)\n .style('fill', (l) => isGreyout ? null : getSideLabelTextColor(l, selection.node()))\n\n group.selectAll<SVGRectElement, GraphCircleLabel>(`.${nodeSelectors.sideLabelBackground}`)\n .style('fill', (l) => isGreyout ? null : l.color)\n })\n}\n\nexport function updateNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n duration: number,\n scale = 1\n): Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> | Transition<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> {\n const {\n nodeGaugeAnimDuration, nodeStrokeWidth, nodeShape, nodeSize, nodeGaugeValue, nodeGaugeFill,\n nodeIcon, nodeIconSize, nodeLabel, nodeLabelTrim, nodeLabelTrimMode, nodeLabelTrimLength,\n nodeSubLabel, nodeSubLabelTrim, nodeSubLabelTrimMode, nodeSubLabelTrimLength,\n nodeSideLabels, nodeStroke, nodeFill, nodeBottomIcon,\n } = config\n\n const nodeGroupsUpdate = smartTransition(selection, duration)\n .attr('transform', d => `translate(${getX(d)}, ${getY(d)}) scale(1)`)\n .attr('opacity', 1)\n\n // If there's a custom render function, use it\n if (config.nodeUpdateCustomRenderFunction) {\n selection.each((d, i, elements) => {\n config.nodeUpdateCustomRenderFunction(d, elements[i], config, duration, scale)\n })\n\n return nodeGroupsUpdate\n }\n\n // Default node rendering\n // Re-create nodes to update shapes if they were changed\n selection.each((d, i, elements) => {\n const element = elements[i] as GraphNodeSVGGElement\n const group = select<SVGGElement, GraphNode<N, L>>(element)\n const shape = getString(d, nodeShape, d._index)\n\n if (element.nodeShape !== shape) {\n group.select(`.${nodeSelectors.node}`).remove()\n appendShape(group, nodeShape, nodeSelectors.node, nodeSelectors.customNode, d._index, `.${nodeSelectors.nodeSelection}`)\n group.select(`.${nodeSelectors.nodeSelection}`).remove()\n appendShape(group, shape, nodeSelectors.nodeSelection, null, d._index, `.${nodeSelectors.nodeGauge}`)\n element.nodeShape = shape\n }\n })\n\n // Update nodes themselves\n selection.each((d, i, elements) => {\n const groupElement = elements[i]\n const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(groupElement)\n const node: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = group.select(`.${nodeSelectors.node}`)\n const nodeArc = group.select<GraphNodeAnimatedElement<SVGElement>>(`.${nodeSelectors.nodeGauge}`)\n const icon = group.select<SVGTextElement>(`.${nodeSelectors.nodeIcon}`)\n const sideLabelsGroup = group.select<SVGGElement>(`.${nodeSelectors.sideLabelsGroup}`)\n const label = group.select<SVGGElement>(`.${nodeSelectors.label}`)\n const labelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.labelTextContent}`)\n const sublabelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.subLabelTextContent}`)\n const bottomIcon = group.select<SVGTextElement>(`.${nodeSelectors.nodeBottomIcon}`)\n const nodeSelectionOutline = group.select<SVGGElement>(`.${nodeSelectors.nodeSelection}`)\n const nodeSizeValue = getNodeSize(d, nodeSize, d._index)\n const arcGenerator = arc<GraphNodeAnimationState>()\n .innerRadius(state => state.nodeSize / 2 - state.borderWidth / 2)\n .outerRadius(state => state.nodeSize / 2 + state.borderWidth / 2)\n .startAngle(0 * (Math.PI / 180))\n // eslint-disable-next-line dot-notation\n .endAngle(a => a['endAngle'])\n\n group\n .classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)\n .classed(nodeSelectors.nodeIsDragged, (d: GraphNode<N, L>) => d._state.isDragged)\n\n // Update Group\n group\n .classed(nodeSelectors.nodePolygon, () => {\n const shape = getString(d, nodeShape, d._index)\n return shape === GraphNodeShape.Triangle || shape === GraphNodeShape.Hexagon || shape === GraphNodeShape.Square\n })\n\n // Update Node\n node\n .call(updateShape, nodeShape, nodeSize, d._index)\n .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index) ?? 0)\n .style('fill', getNodeColor(d, nodeFill, d._index))\n .style('stroke', getColor(d, nodeStroke, d._index, true) ?? null)\n\n const nodeBBox = (node.node() as SVGGraphicsElement).getBBox()\n\n nodeArc\n .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index))\n .style('display', !getNumber(d, nodeGaugeValue, d._index) ? 'none' : null)\n .style('fill', getNodeColor(d, nodeGaugeFill, d._index))\n .style('stroke', getNodeColor(d, nodeGaugeFill, d._index))\n .style('stroke-opacity', d => getString(d, nodeShape, d._index) === GraphNodeShape.Circle ? 0 : null)\n\n nodeArc\n .transition()\n .duration(nodeGaugeAnimDuration)\n .attrTween('d', (\n d,\n j,\n arr\n ) => {\n switch (getString(d, nodeShape, d._index)) {\n case GraphNodeShape.Circle: return arcTween(d, config, arcGenerator, arr[j])\n case GraphNodeShape.Hexagon: return polyTween(d, config, polygon, arr[j])\n case GraphNodeShape.Square: return polyTween(d, config, polygon, arr[j])\n case GraphNodeShape.Triangle: return polyTween(d, config, polygon, arr[j])\n default: return null\n }\n })\n\n // Set Node Selection\n updateShape(nodeSelectionOutline, nodeShape, nodeSize, d._index)\n\n // Update Node Icon\n const nodeIconContent = getString(d, nodeIcon, d._index)\n const nodeIconSizeValue = getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)\n const nodeIconColor = getNodeIconColor(d, nodeFill, d._index, selection.node())\n icon.selectAll('*').remove() // Removing all children first\n if (isInternalHref(nodeIconContent)) { // If the icon is a href, we need to append a <use> element and render the icon with it\n icon.append('use')\n .attr('href', nodeIconContent)\n .attr('x', -nodeIconSizeValue / 2)\n .attr('y', -nodeIconSizeValue / 2)\n .attr('width', nodeIconSizeValue)\n .attr('height', nodeIconSizeValue)\n .style('fill', nodeIconColor)\n } else { // If the icon is a text, we need to append a <text> element and render the icon as text\n icon\n .append('text')\n .style('font-size', `${nodeIconSizeValue}px`)\n .attr('dy', '0.1em')\n .style('fill', nodeIconColor)\n .html(nodeIconContent)\n }\n\n // Side Labels\n const sideLabelsData = getValue<GraphNode<N, L>, GraphCircleLabel[]>(d, nodeSideLabels, d._index) || []\n const sideLabels = sideLabelsGroup.selectAll<SVGGElement, GraphCircleLabel>('g').data(sideLabelsData)\n const sideLabelsEnter = sideLabels.enter().append('g')\n .attr('class', nodeSelectors.sideLabelGroup)\n sideLabelsEnter.append('circle')\n .attr('class', nodeSelectors.sideLabelBackground)\n .attr('r', l => l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)\n sideLabelsEnter.append('text')\n .attr('class', nodeSelectors.sideLabel)\n\n const sideLabelsUpdate = sideLabels.merge(sideLabelsEnter)\n .style('cursor', l => l.cursor ?? null)\n\n // Side label text\n sideLabelsUpdate.select(`.${nodeSelectors.sideLabel}`).html(d => d.text)\n .attr('dy', '0.1em')\n .style('fill', l => l.textColor ?? getSideLabelTextColor(l, selection.node()))\n .style('font-size', l => l.fontSize ?? `${(2 + (l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)) / Math.pow(l.text.toString().length, 0.3)}px`)\n // Side label circle background\n sideLabelsUpdate.select(`.${nodeSelectors.sideLabelBackground}`)\n .style('fill', l => l.color)\n\n sideLabelsUpdate.attr('transform', (l, j) => {\n if (sideLabelsData.length === 1) return `translate(${nodeSizeValue / 2.5}, ${-nodeSizeValue / 2.5})`\n const r = 1.05 * nodeSizeValue / 2\n const angle = j * 1.15 * 2 * Math.atan2(l.radius ?? SIDE_LABEL_DEFAULT_RADIUS, r) - Math.PI / 3\n return `translate(${r * Math.cos(angle)}, ${r * Math.sin(angle)})`\n })\n\n sideLabels.exit().remove()\n\n // Set label and sub-label text\n const labelText = getString(d, nodeLabel, d._index)\n const sublabelText = getString(d, nodeSubLabel, d._index)\n const labelTextTrimmed = getBoolean(d, nodeLabelTrim, d._index)\n ? trimString(labelText, getNumber(d, nodeLabelTrimLength, d._index), getValue(d, nodeLabelTrimMode as TrimMode, d._index))\n : labelText\n const sublabelTextTrimmed = getBoolean(d, nodeSubLabelTrim, d._index)\n ? trimString(sublabelText, getNumber(d, nodeSubLabelTrimLength, d._index), getValue(d, nodeSubLabelTrimMode as TrimMode, d._index))\n : sublabelText\n\n labelTextContent.text(labelTextTrimmed)\n sublabelTextContent.text(sublabelTextTrimmed)\n group\n .on('mouseenter', () => {\n labelTextContent.text(labelText)\n sublabelTextContent.text(sublabelText)\n setLabelRect(label, labelText, nodeSelectors.labelText)\n group.raise()\n })\n .on('mouseleave', () => {\n labelTextContent.text(labelTextTrimmed)\n sublabelTextContent.text(sublabelTextTrimmed)\n setLabelRect(label, labelTextTrimmed, nodeSelectors.labelText)\n })\n\n // Position label\n const labelFontSize = parseFloat(window.getComputedStyle(groupElement).getPropertyValue('--vis-graph-node-label-font-size')) || 12\n const labelMargin = LABEL_RECT_VERTICAL_PADDING + 1.25 * labelFontSize ** 1.03\n const nodeHeight = isStringSvg((getString(d, nodeShape, d._index)) as GraphNodeShape) ? nodeBBox.height : nodeSizeValue\n label.attr('transform', `translate(0, ${nodeHeight / 2 + labelMargin})`)\n if (scale >= ZoomLevel.Level3) setLabelRect(label, getString(d, nodeLabel, d._index), nodeSelectors.labelText)\n\n // Bottom Icon\n bottomIcon.html(getString(d, nodeBottomIcon, d._index))\n .attr('transform', `translate(0, ${nodeHeight / 2})`)\n })\n\n updateNodeSelectedGreyout(selection, config)\n\n return nodeGroupsUpdate\n}\n\nexport function removeNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n duration: number,\n scale = 1\n): void {\n smartTransition(selection, duration / 2)\n .attr('opacity', 0)\n .attr('transform', (d, i) => {\n const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeExitPosition, i)\n const scale = getNumber(d, config.nodeExitScale, i) ?? 0\n const x = configuredPosition?.[0] ?? getX(d)\n const y = configuredPosition?.[1] ?? getY(d)\n return `translate(${x}, ${y}) scale(${scale})`\n })\n .remove()\n\n // If there's a custom render function, use it\n if (config.nodeExitCustomRenderFunction) {\n selection.each((d, i, elements) => {\n config.nodeExitCustomRenderFunction(d, elements[i], config, duration, scale)\n })\n }\n}\n\nfunction setLabelBackgroundRect<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>\n): void {\n const { nodeLabel } = config\n\n selection.each((d, i, elements) => {\n const group: Selection<SVGGElement, N, SVGGElement, N> = select(elements[i])\n const label: Selection<SVGGElement, N, SVGGElement, N> = group.select(`.${nodeSelectors.label}`)\n setLabelRect(label, getString(d, nodeLabel, i), nodeSelectors.labelText)\n })\n}\n\nconst setLabelBackgroundRectThrottled = throttle(setLabelBackgroundRect, 1000) as typeof setLabelBackgroundRect\n\nexport function zoomNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n scale: number\n): void {\n selection.classed(generalSelectors.zoomOutLevel1, scale < ZoomLevel.Level1)\n selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)\n\n selection.selectAll(`${nodeSelectors.sideLabelBackground}`)\n .attr('transform', `scale(${1 / Math.pow(scale, 0.35)})`)\n selection.selectAll(`.${nodeSelectors.sideLabel}`)\n .attr('transform', `scale(${1 / Math.pow(scale, 0.45)})`)\n\n if (scale >= ZoomLevel.Level3 && !config.nodeEnterCustomRenderFunction) selection.call(setLabelBackgroundRectThrottled, config)\n}\n\nexport const zoomNodesThrottled = throttle(zoomNodes, 500)\n"],"names":["nodeSelectors.node","nodeSelectors.customNode","nodeSelectors.nodeSelection","nodeSelectors.nodeGauge","nodeSelectors.nodeIcon","nodeSelectors.sideLabelsGroup","nodeSelectors.nodeBottomIcon","label","nodeSelectors.label","nodeSelectors.labelBackground","labelText","nodeSelectors.labelText","nodeSelectors.labelTextContent","nodeSelectors.subLabelTextContent","nodeSelectors.greyedOutNode","nodeSelectors.draggable","nodeSelectors.nodeSelectionActive","nodeSelectors.sideLabel","nodeSelectors.sideLabelBackground","nodeIcon","nodeBottomIcon","node","sideLabelsGroup","labelTextContent","generalSelectors.zoomOutLevel2","nodeSelectors.nodeIsDragged","nodeSelectors.nodePolygon","nodeSelectors.sideLabelGroup","generalSelectors.zoomOutLevel1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/node/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\nimport { Transition } from 'd3-transition'\nimport { arc } from 'd3-shape'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\nimport { TrimMode } from 'types/text'\n\n// Utils\nimport { trimString } from 'utils/text'\nimport { polygon } from 'utils/path'\nimport { smartTransition } from 'utils/d3'\nimport { getBoolean, getNumber, getString, getValue, throttle } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { isStringSvg } from 'utils/svg'\n\n// Local Types\nimport { GraphNode, GraphCircleLabel, GraphNodeAnimationState, GraphNodeAnimatedElement, GraphNodeShape } from '../../types'\n\n// Config\nimport { GraphConfigInterface } from '../../config'\n\n// Helpers\nimport {\n arcTween,\n polyTween,\n setLabelRect,\n getX,\n getY,\n getSideLabelTextColor,\n getNodeColor,\n getNodeIconColor,\n getNodeSize,\n LABEL_RECT_VERTICAL_PADDING,\n isInternalHref,\n} from './helper'\nimport { appendShape, updateShape } from '../shape'\nimport { ZoomLevel } from '../zoom-levels'\n\n// Styles\nimport * as generalSelectors from '../../style'\nimport * as nodeSelectors from './style'\n\nconst SIDE_LABEL_DEFAULT_RADIUS = 10\n\nexport interface GraphNodeSVGGElement extends SVGGElement {\n nodeShape?: string;\n}\n\nexport function createNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>\n): void {\n const { nodeShape } = config\n\n selection.each((d, i, elements) => {\n const element = elements[i] as GraphNodeSVGGElement\n const group = select<SVGGElement, GraphNode<N, L>>(element)\n group\n .attr('transform', (d: GraphNode<N, L>, i) => {\n const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeEnterPosition, i)\n const scale = getNumber(d, config.nodeEnterScale, i) ?? 0\n const x = configuredPosition?.[0] ?? getX(d)\n const y = configuredPosition?.[1] ?? getY(d)\n return `translate(${x}, ${y}) scale(${scale})`\n })\n .attr('opacity', 0)\n\n const shape = getString(d, nodeShape, d._index)\n /** Todo: The 'nodeShape' storing logic below it a temporary fix, needs a cleaner implementation */\n element.nodeShape = shape\n appendShape(group, shape, nodeSelectors.node, nodeSelectors.customNode, d._index)\n appendShape(group, shape, nodeSelectors.nodeSelection, nodeSelectors.customNode, d._index)\n group.append('path').attr('class', nodeSelectors.nodeGauge)\n group.append('g').attr('class', nodeSelectors.nodeIcon)\n\n const label = group.append('g').attr('class', nodeSelectors.label)\n label.append('rect').attr('class', nodeSelectors.labelBackground)\n\n const labelText = label.append('text')\n .attr('class', nodeSelectors.labelText)\n .attr('dy', '0.32em')\n labelText.append('tspan').attr('class', nodeSelectors.labelTextContent)\n labelText.append('tspan')\n .attr('class', nodeSelectors.subLabelTextContent)\n .attr('dy', '1.1em')\n .attr('x', '0')\n\n group.append('g')\n .attr('class', nodeSelectors.sideLabelsGroup)\n\n group.append('text')\n .attr('class', nodeSelectors.nodeBottomIcon)\n })\n}\n\nexport function updateSelectedNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>\n): void {\n const { nodeDisabled } = config\n\n selection.each((d, i, elements) => {\n const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(elements[i])\n const isGreyout = getBoolean(d, nodeDisabled, d._index) || d._state.greyout\n\n group.classed(nodeSelectors.greyedOutNode, isGreyout && !d._state.brushed)\n .classed(nodeSelectors.draggable, !config.disableDrag)\n\n const nodeSelectionOutline = group.selectAll<SVGGElement, GraphNode<N, L>>(`.${nodeSelectors.nodeSelection}`)\n nodeSelectionOutline.classed(nodeSelectors.nodeSelectionActive, d._state.selected || d._state.brushed)\n\n group.selectAll<SVGTextElement, GraphCircleLabel>(`.${nodeSelectors.sideLabel}`)\n .style('fill', (l) => isGreyout ? null : getSideLabelTextColor(l, selection.node()))\n\n group.selectAll<SVGRectElement, GraphCircleLabel>(`.${nodeSelectors.sideLabelBackground}`)\n .style('fill', (l) => isGreyout ? null : l.color)\n })\n}\n\nexport function updateNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n duration: number,\n scale = 1\n): Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> | Transition<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> {\n const {\n nodeGaugeAnimDuration, nodeStrokeWidth, nodeShape, nodeSize, nodeGaugeValue, nodeGaugeFill,\n nodeIcon, nodeIconSize, nodeLabel, nodeLabelTrim, nodeLabelTrimMode, nodeLabelTrimLength,\n nodeSubLabel, nodeSubLabelTrim, nodeSubLabelTrimMode, nodeSubLabelTrimLength,\n nodeSideLabels, nodeStroke, nodeFill, nodeBottomIcon,\n } = config\n\n // Re-create nodes to update shapes if they were changes\n selection.each((d, i, elements) => {\n const element = elements[i] as GraphNodeSVGGElement\n const group = select<SVGGElement, GraphNode<N, L>>(element)\n const shape = getString(d, nodeShape, d._index)\n\n if (element.nodeShape !== shape) {\n group.select(`.${nodeSelectors.node}`).remove()\n appendShape(group, nodeShape, nodeSelectors.node, nodeSelectors.customNode, d._index, `.${nodeSelectors.nodeSelection}`)\n group.select(`.${nodeSelectors.nodeSelection}`).remove()\n appendShape(group, shape, nodeSelectors.nodeSelection, null, d._index, `.${nodeSelectors.nodeGauge}`)\n element.nodeShape = shape\n }\n })\n\n // Update nodes themselves\n selection.each((d, i, elements) => {\n const groupElement = elements[i]\n const group: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = select(groupElement)\n const node: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown> = group.select(`.${nodeSelectors.node}`)\n const nodeArc = group.select<GraphNodeAnimatedElement<SVGElement>>(`.${nodeSelectors.nodeGauge}`)\n const icon = group.select<SVGTextElement>(`.${nodeSelectors.nodeIcon}`)\n const sideLabelsGroup = group.select<SVGGElement>(`.${nodeSelectors.sideLabelsGroup}`)\n const label = group.select<SVGGElement>(`.${nodeSelectors.label}`)\n const labelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.labelTextContent}`)\n const sublabelTextContent = label.select<SVGTextElement>(`.${nodeSelectors.subLabelTextContent}`)\n const bottomIcon = group.select<SVGTextElement>(`.${nodeSelectors.nodeBottomIcon}`)\n const nodeSelectionOutline = group.select<SVGGElement>(`.${nodeSelectors.nodeSelection}`)\n const nodeSizeValue = getNodeSize(d, nodeSize, d._index)\n const arcGenerator = arc<GraphNodeAnimationState>()\n .innerRadius(state => state.nodeSize / 2 - state.borderWidth / 2)\n .outerRadius(state => state.nodeSize / 2 + state.borderWidth / 2)\n .startAngle(0 * (Math.PI / 180))\n // eslint-disable-next-line dot-notation\n .endAngle(a => a['endAngle'])\n\n group\n .classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)\n .classed(nodeSelectors.nodeIsDragged, (d: GraphNode<N, L>) => d._state.isDragged)\n\n // Update Group\n group\n .classed(nodeSelectors.nodePolygon, () => {\n const shape = getString(d, nodeShape, d._index)\n return shape === GraphNodeShape.Triangle || shape === GraphNodeShape.Hexagon || shape === GraphNodeShape.Square\n })\n\n // Update Node\n node\n .call(updateShape, nodeShape, nodeSize, d._index)\n .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index) ?? 0)\n .style('fill', getNodeColor(d, nodeFill, d._index))\n .style('stroke', getColor(d, nodeStroke, d._index, true) ?? null)\n\n const nodeBBox = (node.node() as SVGGraphicsElement).getBBox()\n\n nodeArc\n .attr('stroke-width', getNumber(d, nodeStrokeWidth, d._index))\n .style('display', !getNumber(d, nodeGaugeValue, d._index) ? 'none' : null)\n .style('fill', getNodeColor(d, nodeGaugeFill, d._index))\n .style('stroke', getNodeColor(d, nodeGaugeFill, d._index))\n .style('stroke-opacity', d => getString(d, nodeShape, d._index) === GraphNodeShape.Circle ? 0 : null)\n\n nodeArc\n .transition()\n .duration(nodeGaugeAnimDuration)\n .attrTween('d', (\n d,\n j,\n arr\n ) => {\n switch (getString(d, nodeShape, d._index)) {\n case GraphNodeShape.Circle: return arcTween(d, config, arcGenerator, arr[j])\n case GraphNodeShape.Hexagon: return polyTween(d, config, polygon, arr[j])\n case GraphNodeShape.Square: return polyTween(d, config, polygon, arr[j])\n case GraphNodeShape.Triangle: return polyTween(d, config, polygon, arr[j])\n default: return null\n }\n })\n\n // Set Node Selection\n updateShape(nodeSelectionOutline, nodeShape, nodeSize, d._index)\n\n // Update Node Icon\n const nodeIconContent = getString(d, nodeIcon, d._index)\n const nodeIconSizeValue = getNumber(d, nodeIconSize, d._index) ?? 2.5 * Math.sqrt(nodeSizeValue)\n const nodeIconColor = getNodeIconColor(d, nodeFill, d._index, selection.node())\n icon.selectAll('*').remove() // Removing all children first\n if (isInternalHref(nodeIconContent)) { // If the icon is a href, we need to append a <use> element and render the icon with it\n icon.append('use')\n .attr('href', nodeIconContent)\n .attr('x', -nodeIconSizeValue / 2)\n .attr('y', -nodeIconSizeValue / 2)\n .attr('width', nodeIconSizeValue)\n .attr('height', nodeIconSizeValue)\n .style('fill', nodeIconColor)\n } else { // If the icon is a text, we need to append a <text> element and render the icon as text\n icon\n .append('text')\n .style('font-size', `${nodeIconSizeValue}px`)\n .attr('dy', '0.1em')\n .style('fill', nodeIconColor)\n .html(nodeIconContent)\n }\n\n // Side Labels\n const sideLabelsData = getValue<GraphNode<N, L>, GraphCircleLabel[]>(d, nodeSideLabels, d._index) || []\n const sideLabels = sideLabelsGroup.selectAll<SVGGElement, GraphCircleLabel>('g').data(sideLabelsData)\n const sideLabelsEnter = sideLabels.enter().append('g')\n .attr('class', nodeSelectors.sideLabelGroup)\n sideLabelsEnter.append('circle')\n .attr('class', nodeSelectors.sideLabelBackground)\n .attr('r', l => l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)\n sideLabelsEnter.append('text')\n .attr('class', nodeSelectors.sideLabel)\n\n const sideLabelsUpdate = sideLabels.merge(sideLabelsEnter)\n .style('cursor', l => l.cursor ?? null)\n\n // Side label text\n sideLabelsUpdate.select(`.${nodeSelectors.sideLabel}`).html(d => d.text)\n .attr('dy', '0.1em')\n .style('fill', l => l.textColor ?? getSideLabelTextColor(l, selection.node()))\n .style('font-size', l => l.fontSize ?? `${(2 + (l.radius ?? SIDE_LABEL_DEFAULT_RADIUS)) / Math.pow(l.text.toString().length, 0.3)}px`)\n // Side label circle background\n sideLabelsUpdate.select(`.${nodeSelectors.sideLabelBackground}`)\n .style('fill', l => l.color)\n\n sideLabelsUpdate.attr('transform', (l, j) => {\n if (sideLabelsData.length === 1) return `translate(${nodeSizeValue / 2.5}, ${-nodeSizeValue / 2.5})`\n const r = 1.05 * nodeSizeValue / 2\n const angle = j * 1.15 * 2 * Math.atan2(l.radius ?? SIDE_LABEL_DEFAULT_RADIUS, r) - Math.PI / 3\n return `translate(${r * Math.cos(angle)}, ${r * Math.sin(angle)})`\n })\n\n sideLabels.exit().remove()\n\n // Set label and sub-label text\n const labelText = getString(d, nodeLabel, d._index)\n const sublabelText = getString(d, nodeSubLabel, d._index)\n const labelTextTrimmed = getBoolean(d, nodeLabelTrim, d._index)\n ? trimString(labelText, getNumber(d, nodeLabelTrimLength, d._index), getValue(d, nodeLabelTrimMode as TrimMode, d._index))\n : labelText\n const sublabelTextTrimmed = getBoolean(d, nodeSubLabelTrim, d._index)\n ? trimString(sublabelText, getNumber(d, nodeSubLabelTrimLength, d._index), getValue(d, nodeSubLabelTrimMode as TrimMode, d._index))\n : sublabelText\n\n labelTextContent.text(labelTextTrimmed)\n sublabelTextContent.text(sublabelTextTrimmed)\n group\n .on('mouseenter', () => {\n labelTextContent.text(labelText)\n sublabelTextContent.text(sublabelText)\n setLabelRect(label, labelText, nodeSelectors.labelText)\n group.raise()\n })\n .on('mouseleave', () => {\n labelTextContent.text(labelTextTrimmed)\n sublabelTextContent.text(sublabelTextTrimmed)\n setLabelRect(label, labelTextTrimmed, nodeSelectors.labelText)\n })\n\n // Position label\n const labelFontSize = parseFloat(window.getComputedStyle(groupElement).getPropertyValue('--vis-graph-node-label-font-size')) || 12\n const labelMargin = LABEL_RECT_VERTICAL_PADDING + 1.25 * labelFontSize ** 1.03\n const nodeHeight = isStringSvg((getString(d, nodeShape, d._index)) as GraphNodeShape) ? nodeBBox.height : nodeSizeValue\n label.attr('transform', `translate(0, ${nodeHeight / 2 + labelMargin})`)\n if (scale >= ZoomLevel.Level3) setLabelRect(label, getString(d, nodeLabel, d._index), nodeSelectors.labelText)\n\n // Bottom Icon\n bottomIcon.html(getString(d, nodeBottomIcon, d._index))\n .attr('transform', `translate(0, ${nodeHeight / 2})`)\n })\n\n updateSelectedNodes(selection, config)\n\n return smartTransition(selection, duration)\n .attr('transform', d => `translate(${getX(d)}, ${getY(d)}) scale(1)`)\n .attr('opacity', 1)\n}\n\nexport function removeNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n duration: number\n): void {\n smartTransition(selection, duration / 2)\n .attr('opacity', 0)\n .attr('transform', (d, i) => {\n const configuredPosition = getValue<GraphNode<N, L>, [number, number] | undefined>(d, config.nodeExitPosition, i)\n const scale = getNumber(d, config.nodeExitScale, i) ?? 0\n const x = configuredPosition?.[0] ?? getX(d)\n const y = configuredPosition?.[1] ?? getY(d)\n return `translate(${x}, ${y}) scale(${scale})`\n })\n .remove()\n}\n\nfunction setLabelBackgroundRect<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>\n): void {\n const { nodeLabel } = config\n\n selection.each((d, i, elements) => {\n const group: Selection<SVGGElement, N, SVGGElement, N> = select(elements[i])\n const label: Selection<SVGGElement, N, SVGGElement, N> = group.select(`.${nodeSelectors.label}`)\n setLabelRect(label, getString(d, nodeLabel, i), nodeSelectors.labelText)\n })\n}\n\nconst setLabelBackgroundRectThrottled = throttle(setLabelBackgroundRect, 1000) as typeof setLabelBackgroundRect\n\nexport function zoomNodes<N extends GraphInputNode, L extends GraphInputLink> (\n selection: Selection<SVGGElement, GraphNode<N, L>, SVGGElement, unknown>,\n config: GraphConfigInterface<N, L>,\n scale: number\n): void {\n selection.classed(generalSelectors.zoomOutLevel1, scale < ZoomLevel.Level1)\n selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)\n\n selection.selectAll(`${nodeSelectors.sideLabelBackground}`)\n .attr('transform', `scale(${1 / Math.pow(scale, 0.35)})`)\n selection.selectAll(`.${nodeSelectors.sideLabel}`)\n .attr('transform', `scale(${1 / Math.pow(scale, 0.45)})`)\n\n if (scale >= ZoomLevel.Level3) selection.call(setLabelBackgroundRectThrottled, config)\n}\n\nexport const zoomNodesThrottled = throttle(zoomNodes, 500)\n"],"names":["nodeSelectors.node","nodeSelectors.customNode","nodeSelectors.nodeSelection","nodeSelectors.nodeGauge","nodeSelectors.nodeIcon","label","nodeSelectors.label","nodeSelectors.labelBackground","labelText","nodeSelectors.labelText","nodeSelectors.labelTextContent","nodeSelectors.subLabelTextContent","nodeSelectors.sideLabelsGroup","nodeSelectors.nodeBottomIcon","nodeSelectors.greyedOutNode","nodeSelectors.draggable","nodeSelectors.nodeSelectionActive","nodeSelectors.sideLabel","nodeSelectors.sideLabelBackground","nodeIcon","nodeBottomIcon","node","sideLabelsGroup","labelTextContent","generalSelectors.zoomOutLevel2","nodeSelectors.nodeIsDragged","nodeSelectors.nodePolygon","nodeSelectors.sideLabelGroup","generalSelectors.zoomOutLevel1"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const nodes: string;
|
|
2
2
|
export declare const variables: void;
|
|
3
|
+
export declare const brushable: string;
|
|
3
4
|
export declare const node: string;
|
|
4
5
|
export declare const nodeIcon: string;
|
|
5
6
|
export declare const nodeBottomIcon: string;
|
|
@@ -22,3 +23,4 @@ export declare const nodeGauge: string;
|
|
|
22
23
|
export declare const nodePolygon: string;
|
|
23
24
|
export declare const customNode: string;
|
|
24
25
|
export declare const greyedOutNode: string;
|
|
26
|
+
export declare const brushed: string;
|
|
@@ -67,6 +67,11 @@ const variables = injectGlobal `
|
|
|
67
67
|
--vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);
|
|
68
68
|
--vis-dark-graph-node-side-label-background-greyout-color: #494B56;
|
|
69
69
|
|
|
70
|
+
/* Brushed */
|
|
71
|
+
--vis-graph-brushed-node-stroke-color: var(--vis-color-main);
|
|
72
|
+
--vis-graph-brushed-node-label-text-color: var(--vis-color-main);
|
|
73
|
+
--vis-graph-brushed-node-icon-fill-color: var(--vis-color-main);
|
|
74
|
+
|
|
70
75
|
/* Misc */
|
|
71
76
|
--vis-graph-node-dominant-baseline: middle;
|
|
72
77
|
}
|
|
@@ -96,12 +101,18 @@ const variables = injectGlobal `
|
|
|
96
101
|
--vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);
|
|
97
102
|
}
|
|
98
103
|
`;
|
|
104
|
+
const brushable = css `
|
|
105
|
+
label: brushable;
|
|
106
|
+
`;
|
|
99
107
|
const node = css `
|
|
100
108
|
label: node-shape;
|
|
101
109
|
|
|
102
110
|
stroke: var(--vis-graph-node-stroke-color);
|
|
103
111
|
fill: var(--vis-graph-node-fill-color);
|
|
104
|
-
|
|
112
|
+
|
|
113
|
+
:not(.${brushable}) {
|
|
114
|
+
transition: .4s fill, 4s stroke;
|
|
115
|
+
}
|
|
105
116
|
`;
|
|
106
117
|
const nodeIcon = css `
|
|
107
118
|
label: icon;
|
|
@@ -110,8 +121,11 @@ const nodeIcon = css `
|
|
|
110
121
|
dominant-baseline: var(--vis-graph-node-dominant-baseline);
|
|
111
122
|
text-anchor: middle;
|
|
112
123
|
pointer-events: none;
|
|
113
|
-
transition: .4s all;
|
|
114
124
|
fill: var(--vis-graph-node-icon-fill-color);
|
|
125
|
+
|
|
126
|
+
:not(.${brushable}) {
|
|
127
|
+
transition: .4s all;
|
|
128
|
+
}
|
|
115
129
|
`;
|
|
116
130
|
const nodeBottomIcon = css `
|
|
117
131
|
label: node-bottom-icon;
|
|
@@ -120,10 +134,13 @@ const nodeBottomIcon = css `
|
|
|
120
134
|
dominant-baseline: var(--vis-graph-node-dominant-baseline);
|
|
121
135
|
text-anchor: middle;
|
|
122
136
|
pointer-events: none;
|
|
123
|
-
transition: .4s fill;
|
|
124
137
|
fill: var(--vis-graph-node-bottom-icon-fill-color);
|
|
125
138
|
stroke: var(--vis-graph-node-bottom-icon-stroke-color);
|
|
126
139
|
stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);
|
|
140
|
+
|
|
141
|
+
:not(.${brushable}) {
|
|
142
|
+
transition: .4s all;
|
|
143
|
+
}
|
|
127
144
|
`;
|
|
128
145
|
const nodeIsDragged = css `
|
|
129
146
|
label: dragged;
|
|
@@ -276,7 +293,20 @@ const greyedOutNode = css `
|
|
|
276
293
|
fill: var(--vis-graph-node-side-label-fill-color-bright) !important;
|
|
277
294
|
opacity: 0.25;
|
|
278
295
|
}
|
|
296
|
+
`;
|
|
297
|
+
const brushed = css `
|
|
298
|
+
label: brushed-node;
|
|
299
|
+
|
|
300
|
+
${`.${node}`} {
|
|
301
|
+
stroke: var(--vis-graph-brushed-node-stroke-color);
|
|
302
|
+
}
|
|
303
|
+
${`.${nodeIcon}`} {
|
|
304
|
+
fill: var(--vis-graph-brushed-node-icon-fill-color);
|
|
305
|
+
}
|
|
306
|
+
${`.${labelTextContent}`} {
|
|
307
|
+
fill: var(--vis-graph-brushed-node-label-text-color);
|
|
308
|
+
}
|
|
279
309
|
`;
|
|
280
310
|
|
|
281
|
-
export { customNode, draggable, gNode, gNodeExit, greyedOutNode, label, labelBackground, labelText, labelTextContent, node, nodeBottomIcon, nodeGauge, nodeIcon, nodeIsDragged, nodePolygon, nodeSelection, nodeSelectionActive, nodes, sideLabel, sideLabelBackground, sideLabelGroup, sideLabelsGroup, subLabelTextContent, variables };
|
|
311
|
+
export { brushable, brushed, customNode, draggable, gNode, gNodeExit, greyedOutNode, label, labelBackground, labelText, labelTextContent, node, nodeBottomIcon, nodeGauge, nodeIcon, nodeIsDragged, nodePolygon, nodeSelection, nodeSelectionActive, nodes, sideLabel, sideLabelBackground, sideLabelGroup, sideLabelsGroup, subLabelTextContent, variables };
|
|
282
312
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Node Fill */\n --vis-graph-node-stroke-color: rgb(206, 211, 222);\n --vis-graph-node-fill-color: #fff;\n --vis-graph-node-gauge-color: #adb4c2;\n --vis-graph-node-selection-color: #acb3b8;\n\n --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n --vis-dark-graph-node-fill-color: #494b56;\n --vis-dark-graph-node-gauge-color: #989aa3;\n --vis-dark-graph-node-selection-color: #494b56;\n\n /* Node Central Icon */\n --vis-graph-node-icon-fill-color-bright: #ffffff;\n --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n --vis-graph-node-icon-fill-color: #9ea7b8;\n\n --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n /* Node Bottom Icon */\n --vis-graph-node-bottom-icon-font-size: 14pt;\n --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-graph-node-bottom-icon-stroke-color: #fff;\n --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n /* Node Label */\n --vis-graph-node-label-font-size: 9pt;\n --vis-graph-node-label-background: #ffffff;\n --vis-graph-node-label-text-color: #0F1E57;\n --vis-graph-node-sublabel-text-color: #989aa3;\n --vis-graph-node-sublabel-font-size: 8pt;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-graph-node-label-font-family: */\n\n --vis-dark-graph-node-label-background: var(--vis-color-grey);\n --vis-dark-graph-node-label-text-color: #ffffff;\n --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n /* Node Side Labels (circular labels)*/\n --vis-graph-node-side-label-background-fill-color: #a0a9af;\n --vis-graph-node-side-label-background-stroke-color: #ffffff;\n --vis-graph-node-side-label-fill-color-bright: #ffffff;\n --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n /* Greyout */\n --vis-graph-node-greyout-opacity: 0.9;\n --vis-graph-node-greyout-filter: none;\n --vis-graph-node-greyout-color: #ebeff7;\n --vis-graph-node-icon-greyout-color: #c6cad1;\n --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n --vis-dark-graph-node-greyout-color: #494b56;\n --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n\n /* Misc */\n --vis-graph-node-dominant-baseline: middle;\n }\n\n body.theme-dark ${`.${nodes}`} {\n --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n }\n`\n\nexport const node = css`\n label: node-shape;\n\n stroke: var(--vis-graph-node-stroke-color);\n fill: var(--vis-graph-node-fill-color);\n transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s all;\n fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n label: node-bottom-icon;\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n font-size: var(--vis-graph-node-bottom-icon-font-size);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s fill;\n fill: var(--vis-graph-node-bottom-icon-fill-color);\n stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n label: dragged;\n`\n\nexport const label = css`\n label: label;\n\n text-anchor: middle;\n font-weight: 300;\n font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n label: background;\n\n opacity: 0.9;\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n label: label-text;\n`\n\nexport const labelTextContent = css`\n label: label-text-content;\n\n fill: var(--vis-graph-node-label-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n`\n\nexport const subLabelTextContent = css`\n label: sublabel-text-content;\n\n fill: var(--vis-graph-node-sublabel-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n label: side-label-background;\n\n stroke-opacity: 0.8;\n stroke: var(--vis-graph-node-side-label-background-stroke-color);\n fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n label: side-label;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n font-size: 16px;\n fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n label: side-label-group;\n cursor: default;\n`\n\nexport const gNode = css`\n label: g-node;\n\n transition: .25s opacity;\n`\n\nexport const draggable = css`\n label: draggable;\n\n &:hover {\n cursor: grab;\n }\n\n &${`.${nodeIsDragged}`} {\n cursor: grabbing;\n }\n`\n\nexport const gNodeExit = css`\n label: g-node-exit;\n pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n label: active;\n`\n\nexport const nodeSelection = css`\n label: node-selection;\n\n fill: none;\n stroke-width: 1;\n stroke-dasharray: 3 3;\n opacity: 0;\n transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n transform: scale(.5);\n fill: var(--vis-graph-node-selection-color);\n fill-opacity: 0.1;\n stroke: var(--vis-graph-node-selection-color);\n stroke-opacity: 0.75;\n\n &${`.${nodeSelectionActive}`} {\n opacity: 1;\n transform: scale(1.2);\n }\n`\n\nexport const nodeGauge = css`\n label: node-gauge;\n\n fill: var(--vis-graph-node-gauge-color);\n transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n label: polygon;\n\n ${`.${nodeGauge}`} {\n fill-opacity: 0;\n stroke-linecap: round;\n pointer-events: none;\n }\n`\n\nexport const customNode = css`\n label: custom-node;\n\n stroke-width: 0;\n`\n\nexport const greyedOutNode = css`\n label: greyed-out;\n opacity: var(--vis-graph-node-greyout-opacity);\n filter: var(--vis-graph-node-greyout-filter);\n\n ${`.${node}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${nodeIcon}`} {\n fill: var(--vis-graph-node-icon-greyout-color) !important;\n }\n\n ${`.${nodeGauge}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${label}`} {\n opacity: 0.5;\n }\n\n ${`.${sideLabelBackground}`} {\n fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n stroke-opacity: 0.5;\n }\n\n ${`.${sideLabel}`} {\n fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n opacity: 0.25;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;AAK5B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Node Fill */\n --vis-graph-node-stroke-color: rgb(206, 211, 222);\n --vis-graph-node-fill-color: #fff;\n --vis-graph-node-gauge-color: #adb4c2;\n --vis-graph-node-selection-color: #acb3b8;\n\n --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n --vis-dark-graph-node-fill-color: #494b56;\n --vis-dark-graph-node-gauge-color: #989aa3;\n --vis-dark-graph-node-selection-color: #494b56;\n\n /* Node Central Icon */\n --vis-graph-node-icon-fill-color-bright: #ffffff;\n --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n --vis-graph-node-icon-fill-color: #9ea7b8;\n\n --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n /* Node Bottom Icon */\n --vis-graph-node-bottom-icon-font-size: 14pt;\n --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-graph-node-bottom-icon-stroke-color: #fff;\n --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n /* Node Label */\n --vis-graph-node-label-font-size: 9pt;\n --vis-graph-node-label-background: #ffffff;\n --vis-graph-node-label-text-color: #0F1E57;\n --vis-graph-node-sublabel-text-color: #989aa3;\n --vis-graph-node-sublabel-font-size: 8pt;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-graph-node-label-font-family: */\n\n --vis-dark-graph-node-label-background: var(--vis-color-grey);\n --vis-dark-graph-node-label-text-color: #ffffff;\n --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n /* Node Side Labels (circular labels)*/\n --vis-graph-node-side-label-background-fill-color: #a0a9af;\n --vis-graph-node-side-label-background-stroke-color: #ffffff;\n --vis-graph-node-side-label-fill-color-bright: #ffffff;\n --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n /* Greyout */\n --vis-graph-node-greyout-opacity: 0.9;\n --vis-graph-node-greyout-filter: none;\n --vis-graph-node-greyout-color: #ebeff7;\n --vis-graph-node-icon-greyout-color: #c6cad1;\n --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n --vis-dark-graph-node-greyout-color: #494b56;\n --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n\n /* Brushed */\n --vis-graph-brushed-node-stroke-color: var(--vis-color-main);\n --vis-graph-brushed-node-label-text-color: var(--vis-color-main);\n --vis-graph-brushed-node-icon-fill-color: var(--vis-color-main);\n \n /* Misc */\n --vis-graph-node-dominant-baseline: middle;\n }\n\n body.theme-dark ${`.${nodes}`} {\n --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n }\n`\n\nexport const brushable = css`\n label: brushable;\n`\n\n\nexport const node = css`\n label: node-shape;\n\n stroke: var(--vis-graph-node-stroke-color);\n fill: var(--vis-graph-node-fill-color);\n\n :not(.${brushable}) {\n transition: .4s fill, 4s stroke;\n }\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n fill: var(--vis-graph-node-icon-fill-color);\n\n :not(.${brushable}) {\n transition: .4s all;\n }\n`\n\nexport const nodeBottomIcon = css`\n label: node-bottom-icon;\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n font-size: var(--vis-graph-node-bottom-icon-font-size);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n fill: var(--vis-graph-node-bottom-icon-fill-color);\n stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n\n :not(.${brushable}) {\n transition: .4s all;\n }\n`\n\nexport const nodeIsDragged = css`\n label: dragged;\n`\n\nexport const label = css`\n label: label;\n\n text-anchor: middle;\n font-weight: 300;\n font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n label: background;\n\n opacity: 0.9;\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n label: label-text;\n`\n\nexport const labelTextContent = css`\n label: label-text-content;\n\n fill: var(--vis-graph-node-label-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n`\n\nexport const subLabelTextContent = css`\n label: sublabel-text-content;\n\n fill: var(--vis-graph-node-sublabel-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n label: side-label-background;\n\n stroke-opacity: 0.8;\n stroke: var(--vis-graph-node-side-label-background-stroke-color);\n fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n label: side-label;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n font-size: 16px;\n fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n label: side-label-group;\n cursor: default;\n`\n\nexport const gNode = css`\n label: g-node;\n\n transition: .25s opacity;\n`\n\nexport const draggable = css`\n label: draggable;\n\n &:hover {\n cursor: grab;\n }\n\n &${`.${nodeIsDragged}`} {\n cursor: grabbing;\n }\n`\n\nexport const gNodeExit = css`\n label: g-node-exit;\n pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n label: active;\n`\n\nexport const nodeSelection = css`\n label: node-selection;\n\n fill: none;\n stroke-width: 1;\n stroke-dasharray: 3 3;\n opacity: 0;\n transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n transform: scale(.5);\n fill: var(--vis-graph-node-selection-color);\n fill-opacity: 0.1;\n stroke: var(--vis-graph-node-selection-color);\n stroke-opacity: 0.75;\n\n &${`.${nodeSelectionActive}`} {\n opacity: 1;\n transform: scale(1.2);\n }\n`\n\nexport const nodeGauge = css`\n label: node-gauge;\n\n fill: var(--vis-graph-node-gauge-color);\n transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n label: polygon;\n\n ${`.${nodeGauge}`} {\n fill-opacity: 0;\n stroke-linecap: round;\n pointer-events: none;\n }\n`\n\nexport const customNode = css`\n label: custom-node;\n\n stroke-width: 0;\n`\n\nexport const greyedOutNode = css`\n label: greyed-out;\n opacity: var(--vis-graph-node-greyout-opacity);\n filter: var(--vis-graph-node-greyout-filter);\n\n ${`.${node}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${nodeIcon}`} {\n fill: var(--vis-graph-node-icon-greyout-color) !important;\n }\n\n ${`.${nodeGauge}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${label}`} {\n opacity: 0.5;\n }\n\n ${`.${sideLabelBackground}`} {\n fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n stroke-opacity: 0.5;\n }\n\n ${`.${sideLabel}`} {\n fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n opacity: 0.25;\n }\n`\n\nexport const brushed = css`\n label: brushed-node;\n\n ${`.${node}`} {\n stroke: var(--vis-graph-brushed-node-stroke-color);\n }\n ${`.${nodeIcon}`} {\n fill: var(--vis-graph-brushed-node-icon-fill-color);\n }\n ${`.${labelTextContent}`} {\n fill: var(--vis-graph-brushed-node-label-text-color);\n }\n`\n"],"names":[],"mappings":"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"}
|
|
@@ -2,5 +2,6 @@ export declare const variables: void;
|
|
|
2
2
|
export declare const root: string;
|
|
3
3
|
export declare const background: string;
|
|
4
4
|
export declare const graphGroup: string;
|
|
5
|
+
export declare const brush: string;
|
|
5
6
|
export declare const zoomOutLevel1: string;
|
|
6
7
|
export declare const zoomOutLevel2: string;
|
|
@@ -6,6 +6,9 @@ import { gLink, flowCircle } from './modules/link/style.js';
|
|
|
6
6
|
const variables = injectGlobal `
|
|
7
7
|
:root {
|
|
8
8
|
--vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};
|
|
9
|
+
|
|
10
|
+
/* Brush */
|
|
11
|
+
--vis-graph-brush-selection-opacity: 0.2;
|
|
9
12
|
}
|
|
10
13
|
`;
|
|
11
14
|
// General
|
|
@@ -18,6 +21,24 @@ const background = css `
|
|
|
18
21
|
const graphGroup = css `
|
|
19
22
|
label: graph-group;
|
|
20
23
|
`;
|
|
24
|
+
const brush = css `
|
|
25
|
+
label: brush;
|
|
26
|
+
|
|
27
|
+
:not(.active) {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.active {
|
|
32
|
+
.selection {
|
|
33
|
+
fill-opacity: 0;
|
|
34
|
+
stroke: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.handle {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
21
42
|
const zoomOutLevel1 = css `
|
|
22
43
|
label: zoom-out-level-1;
|
|
23
44
|
|
|
@@ -62,5 +83,5 @@ const zoomOutLevel2 = css `
|
|
|
62
83
|
}
|
|
63
84
|
`;
|
|
64
85
|
|
|
65
|
-
export { background, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
|
|
86
|
+
export { background, brush, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
|
|
66
87
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/graph/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\n// Nodes\nimport * as nodeSelectors from './modules/node/style'\n\n// Links\nimport * as linkSelectors from './modules/link/style'\n\nexport const variables = injectGlobal`\n :root {\n --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n }\n`\n\n// General\nexport const root = css`\n label: graph-component;\n`\n\nexport const background = css`\n label: background;\n`\n\nexport const graphGroup = css`\n label: graph-group;\n`\n\nexport const zoomOutLevel1 = css`\n label: zoom-out-level-1;\n\n ${`.${nodeSelectors.label}`} {\n rect {\n stroke: none;\n }\n }\n`\n\nexport const zoomOutLevel2 = css`\n label: zoom-out-level-2;\n\n ${`.${nodeSelectors.label}`} {\n visibility: visible;\n }\n\n ${`.${nodeSelectors.nodeGauge}`} {\n visibility: visible;\n }\n\n ${`.${nodeSelectors.node}`} {\n stroke-width: 4px;\n }\n\n rect${`.${nodeSelectors.node}`} {\n stroke-width: 2px;\n }\n\n ${`.${linkSelectors.gLink}`} {\n animation: none;\n stroke-dasharray: none;\n }\n\n ${`.${linkSelectors.flowCircle}`} {\n display: none;\n }\n\n ${`.${nodeSelectors.nodeSelection}`} {\n &${`.${nodeSelectors.nodeSelectionActive}`} {\n transform: scale(1.15);\n }\n }\n`\n"],"names":["nodeSelectors.label","nodeSelectors.nodeGauge","nodeSelectors.node","linkSelectors.gLink","linkSelectors.flowCircle","nodeSelectors.nodeSelection","nodeSelectors.nodeSelectionActive"],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;oCAED,+BAA+B,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/graph/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\n// Nodes\nimport * as nodeSelectors from './modules/node/style'\n\n// Links\nimport * as linkSelectors from './modules/link/style'\n\nexport const variables = injectGlobal`\n :root {\n --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};\n\n /* Brush */\n --vis-graph-brush-selection-opacity: 0.2;\n }\n`\n\n// General\nexport const root = css`\n label: graph-component;\n`\n\nexport const background = css`\n label: background;\n`\n\nexport const graphGroup = css`\n label: graph-group;\n`\n\nexport const brush = css`\n label: brush;\n\n :not(.active) {\n display: none;\n }\n\n .active {\n .selection {\n fill-opacity: 0;\n stroke: none;\n }\n\n .handle {\n display: none;\n }\n }\n`\n\nexport const zoomOutLevel1 = css`\n label: zoom-out-level-1;\n\n ${`.${nodeSelectors.label}`} {\n rect {\n stroke: none;\n }\n }\n`\n\nexport const zoomOutLevel2 = css`\n label: zoom-out-level-2;\n\n ${`.${nodeSelectors.label}`} {\n visibility: visible;\n }\n\n ${`.${nodeSelectors.nodeGauge}`} {\n visibility: visible;\n }\n\n ${`.${nodeSelectors.node}`} {\n stroke-width: 4px;\n }\n\n rect${`.${nodeSelectors.node}`} {\n stroke-width: 2px;\n }\n\n ${`.${linkSelectors.gLink}`} {\n animation: none;\n stroke-dasharray: none;\n }\n\n ${`.${linkSelectors.flowCircle}`} {\n display: none;\n }\n\n ${`.${nodeSelectors.nodeSelection}`} {\n &${`.${nodeSelectors.nodeSelectionActive}`} {\n transform: scale(1.15);\n }\n }\n`\n"],"names":["nodeSelectors.label","nodeSelectors.nodeGauge","nodeSelectors.node","linkSelectors.gLink","linkSelectors.flowCircle","nodeSelectors.nodeSelection","nodeSelectors.nodeSelectionActive"],"mappings":";;;;;AASO,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;oCAED,+BAA+B,CAAA;;;;;EAKlE;AAED;AACO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;;EAK5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;IAG5B,CAAI,CAAA,EAAAA,KAAmB,CAAE,CAAA,CAAA;;;;IAIzB,CAAI,CAAA,EAAAC,SAAuB,CAAE,CAAA,CAAA;;;;IAI7B,CAAI,CAAA,EAAAC,IAAkB,CAAE,CAAA,CAAA;;;;QAIpB,CAAI,CAAA,EAAAA,IAAkB,CAAE,CAAA,CAAA;;;;IAI5B,CAAI,CAAA,EAAAC,KAAmB,CAAE,CAAA,CAAA;;;;;IAKzB,CAAI,CAAA,EAAAC,UAAwB,CAAE,CAAA,CAAA;;;;IAI9B,CAAI,CAAA,EAAAC,aAA2B,CAAE,CAAA,CAAA;OAC9B,CAAI,CAAA,EAAAC,mBAAiC,CAAE,CAAA,CAAA;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/graph/types.ts"],"sourcesContent":["// Types\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\nexport type GraphNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNodeCore<N, L> & {\n x?: number;\n y?: number;\n\n _id?: number | string;\n _index?: number;\n _state?: {\n isDragged?: boolean;\n fx?: number;\n fy?: number;\n selected?: boolean;\n greyout?: boolean;\n };\n\n _panels?: GraphPanel<N, L>[];\n _isConnected?: boolean;\n}\n\nexport type GraphForceSimulationNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNode<N, L> & {\n fx?: number;\n fy?: number;\n}\n\nexport type GraphLink<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphLinkCore<N, L> & {\n id?: number | string;\n source: number | string | GraphNode<N>;\n target: number | string | GraphNode<N>;\n\n _id?: number | string;\n _direction?: number;\n _index?: number;\n _neighbours?: number;\n\n _state?: {\n flowAnimTime?: number;\n hovered?: boolean;\n selected?: boolean;\n greyout?: boolean;\n };\n}\n\nexport enum GraphLayoutType {\n Circular = 'circular',\n Concentric = 'concentric',\n Parallel = 'parallel',\n ParallelHorizontal = 'parallel horizontal',\n Dagre = 'dagre',\n Force = 'force',\n Elk = 'elk',\n Precalculated = 'precalculated',\n}\n\nexport type GraphCircleLabel = {\n text: string;\n textColor?: string | null;\n color?: string | null;\n cursor?: string | null;\n fontSize?: string | null;\n radius?: number;\n}\n\nexport type GraphLinkLabel = GraphCircleLabel\n\nexport enum GraphLinkStyle {\n Dashed = 'dashed',\n Solid = 'solid',\n}\n\nexport enum GraphLinkArrowStyle {\n Single = 'single',\n Double = 'double',\n}\n\nexport enum GraphNodeShape {\n Circle = 'circle',\n Square = 'square',\n Hexagon = 'hexagon',\n Triangle = 'triangle',\n}\n\nexport type GraphPanelConfig = {\n /** Panel nodes references by unique ids */\n nodes: (string|number)[];\n /** Panel label */\n label?: string;\n /** Position of the label */\n labelPosition?: Position.Top | Position.Bottom | string;\n /** Color of the panel's border */\n borderColor?: string;\n /** Border width of the panel in pixels */\n borderWidth?: number;\n /** Inner padding */\n padding?: number | Spacing;\n /** Dashed outline showing that the panel is selected */\n dashedOutline?: boolean;\n /** Side icon symbol */\n sideIconSymbol?: string;\n /** Size of the icon as a CSS string. e.g.: `12pt` or `12px` */\n sideIconFontSize?: string;\n /** Color of the icon */\n sideIconSymbolColor?: string;\n /** Shape of the icon's background */\n sideIconShape?: GraphNodeShape | string;\n /** Size of the icon's background shape */\n sideIconShapeSize?: number;\n /** Stroke color of the icon's background shape */\n sideIconShapeStroke?: string;\n /** Cursor, when hovering over the icon */\n sideIconCursor?: string;\n}\n\nexport type GraphPanel<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphPanelConfig & {\n _numNodes?: number;\n _x?: number;\n _y?: number;\n _width?: number;\n _height?: number;\n _disabled?: boolean;\n _padding?: Spacing;\n}\n\nexport type GraphNodeAnimationState = {\n endAngle: number;\n nodeIndex: number;\n nodeSize?: number;\n borderWidth?: number;\n}\n\nexport type GraphNodeAnimatedElement<T = SVGElement> = T & {\n _animState: GraphNodeAnimationState;\n}\n\nexport type GraphForceLayoutSettings<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = {\n /** Preferred Link Distance. Default: `60` */\n linkDistance?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Link Strength [0:1]. Default: `0.45` */\n linkStrength?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */\n charge?: number | ((l: GraphNode<N, L>, i: number) => number);\n /** X-centring force. Default: `0.15` */\n forceXStrength?: number;\n /** Y-centring force. Default: `0.25` */\n forceYStrength?: number;\n /** Number if simulation iterations. Default: automatic */\n numIterations?: number;\n /** Set to true if you want to fix the node positions after the simulation\n * Helpful when you want to update graph settings without re-calculating the layout.\n * Default: `false` */\n fixNodePositionAfterSimulation?: boolean;\n}\n\nexport type GraphElkLayoutSettings = Record<string, string>\n\n/**\n * Settings for configuring the layout of a Dagre graph.\n */\nexport type GraphDagreLayoutSetting = {\n /**\n * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n rankdir?: 'TB' | 'BT' | 'LR' | 'RL' | string;\n\n /**\n * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n align?: 'UL' | 'UR' | 'DL' | 'DR' | string;\n\n /**\n * Number of pixels that separate nodes horizontally in the layout.\n */\n nodesep?: number;\n\n /**\n * Number of pixels that separate edges horizontally in the layout.\n */\n edgesep?: number;\n\n /**\n * Number of pixels between each rank in the layout.\n */\n ranksep?: number;\n\n /**\n * Number of pixels to use as a margin around the left and right of the graph.\n */\n marginx?: number;\n\n /**\n * Number of pixels to use as a margin around the top and bottom of the graph.\n */\n marginy?: number;\n\n /**\n * If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.\n * A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n */\n acyclicer?: 'greedy' | undefined;\n\n /**\n * Type of algorithm to assign a rank to each node in the input graph.\n * Possible values are 'network-simplex', 'tight-tree', or 'longest-path'.\n * Additional custom values can also be provided as a string.\n */\n ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;\n}\n\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/graph/types.ts"],"sourcesContent":["// Types\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\nexport type GraphNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNodeCore<N, L> & {\n x?: number;\n y?: number;\n\n _id?: number | string;\n _index?: number;\n _state?: {\n isDragged?: boolean;\n fx?: number;\n fy?: number;\n selected?: boolean;\n greyout?: boolean;\n brushed?: boolean;\n };\n\n _panels?: GraphPanel<N, L>[];\n _isConnected?: boolean;\n}\n\nexport type GraphForceSimulationNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNode<N, L> & {\n fx?: number;\n fy?: number;\n}\n\nexport type GraphLink<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphLinkCore<N, L> & {\n id?: number | string;\n source: number | string | GraphNode<N>;\n target: number | string | GraphNode<N>;\n\n _id?: number | string;\n _direction?: number;\n _index?: number;\n _neighbours?: number;\n\n _state?: {\n flowAnimTime?: number;\n hovered?: boolean;\n selected?: boolean;\n greyout?: boolean;\n };\n}\n\nexport enum GraphLayoutType {\n Circular = 'circular',\n Concentric = 'concentric',\n Parallel = 'parallel',\n ParallelHorizontal = 'parallel horizontal',\n Dagre = 'dagre',\n Force = 'force',\n Elk = 'elk',\n Precalculated = 'precalculated',\n}\n\nexport type GraphCircleLabel = {\n text: string;\n textColor?: string | null;\n color?: string | null;\n cursor?: string | null;\n fontSize?: string | null;\n radius?: number;\n}\n\nexport type GraphLinkLabel = GraphCircleLabel\n\nexport enum GraphLinkStyle {\n Dashed = 'dashed',\n Solid = 'solid',\n}\n\nexport enum GraphLinkArrowStyle {\n Single = 'single',\n Double = 'double',\n}\n\nexport enum GraphNodeShape {\n Circle = 'circle',\n Square = 'square',\n Hexagon = 'hexagon',\n Triangle = 'triangle',\n}\n\nexport type GraphPanelConfig = {\n /** Panel nodes references by unique ids */\n nodes: (string|number)[];\n /** Panel label */\n label?: string;\n /** Position of the label */\n labelPosition?: Position.Top | Position.Bottom | string;\n /** Color of the panel's border */\n borderColor?: string;\n /** Border width of the panel in pixels */\n borderWidth?: number;\n /** Inner padding */\n padding?: number | Spacing;\n /** Dashed outline showing that the panel is selected */\n dashedOutline?: boolean;\n /** Side icon symbol */\n sideIconSymbol?: string;\n /** Size of the icon as a CSS string. e.g.: `12pt` or `12px` */\n sideIconFontSize?: string;\n /** Color of the icon */\n sideIconSymbolColor?: string;\n /** Shape of the icon's background */\n sideIconShape?: GraphNodeShape | string;\n /** Size of the icon's background shape */\n sideIconShapeSize?: number;\n /** Stroke color of the icon's background shape */\n sideIconShapeStroke?: string;\n /** Cursor, when hovering over the icon */\n sideIconCursor?: string;\n}\n\nexport type GraphPanel<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphPanelConfig & {\n _numNodes?: number;\n _x?: number;\n _y?: number;\n _width?: number;\n _height?: number;\n _disabled?: boolean;\n _padding?: Spacing;\n}\n\nexport type GraphNodeAnimationState = {\n endAngle: number;\n nodeIndex: number;\n nodeSize?: number;\n borderWidth?: number;\n}\n\nexport type GraphNodeAnimatedElement<T = SVGElement> = T & {\n _animState: GraphNodeAnimationState;\n}\n\nexport type GraphForceLayoutSettings<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = {\n /** Preferred Link Distance. Default: `60` */\n linkDistance?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Link Strength [0:1]. Default: `0.45` */\n linkStrength?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */\n charge?: number | ((l: GraphNode<N, L>, i: number) => number);\n /** X-centring force. Default: `0.15` */\n forceXStrength?: number;\n /** Y-centring force. Default: `0.25` */\n forceYStrength?: number;\n /** Number if simulation iterations. Default: automatic */\n numIterations?: number;\n /** Set to true if you want to fix the node positions after the simulation\n * Helpful when you want to update graph settings without re-calculating the layout.\n * Default: `false` */\n fixNodePositionAfterSimulation?: boolean;\n}\n\nexport type GraphElkLayoutSettings = Record<string, string>\n\n/**\n * Settings for configuring the layout of a Dagre graph.\n */\nexport type GraphDagreLayoutSetting = {\n /**\n * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n rankdir?: 'TB' | 'BT' | 'LR' | 'RL' | string;\n\n /**\n * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n align?: 'UL' | 'UR' | 'DL' | 'DR' | string;\n\n /**\n * Number of pixels that separate nodes horizontally in the layout.\n */\n nodesep?: number;\n\n /**\n * Number of pixels that separate edges horizontally in the layout.\n */\n edgesep?: number;\n\n /**\n * Number of pixels between each rank in the layout.\n */\n ranksep?: number;\n\n /**\n * Number of pixels to use as a margin around the left and right of the graph.\n */\n marginx?: number;\n\n /**\n * Number of pixels to use as a margin around the top and bottom of the graph.\n */\n marginy?: number;\n\n /**\n * If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.\n * A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n */\n acyclicer?: 'greedy' | undefined;\n\n /**\n * Type of algorithm to assign a rank to each node in the input graph.\n * Possible values are 'network-simplex', 'tight-tree', or 'longest-path'.\n * Additional custom values can also be provided as a string.\n */\n ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;\n}\n\n"],"names":[],"mappings":"IAwDY,gBASX;AATD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,eAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,eAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,eAAA,CAAA,oBAAA,CAAA,GAAA,qBAA0C,CAAA;AAC1C,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,eAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EATW,eAAe,KAAf,eAAe,GAS1B,EAAA,CAAA,CAAA,CAAA;IAaW,eAGX;AAHD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,cAAc,KAAd,cAAc,GAGzB,EAAA,CAAA,CAAA,CAAA;IAEW,oBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA,CAAA;IAEW,eAKX;AALD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,cAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,GAKzB,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -5,10 +5,6 @@ export interface TooltipConfigInterface {
|
|
|
5
5
|
components?: ComponentCore<unknown>[];
|
|
6
6
|
/** Container to where the Tooltip component should be inserted. Default: `undefined` */
|
|
7
7
|
container?: HTMLElement;
|
|
8
|
-
/** Follow the mouse cursor. Default: `true` */
|
|
9
|
-
followCursor?: boolean;
|
|
10
|
-
/** Allow the tooltip to hovered over and interacted with. Default: `true` */
|
|
11
|
-
allowHover?: boolean;
|
|
12
8
|
/** Horizontal placement of the tooltip. Default: `Position.Auto` */
|
|
13
9
|
horizontalPlacement?: Position | string | undefined;
|
|
14
10
|
/** Horizontal shift of the tooltip in pixels. Default: `0` */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /**
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AAqDa,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;IACpB,mBAAmB,EAAE,QAAQ,CAAC,IAAI;AAClC,IAAA,eAAe,EAAE,CAAC;IAClB,iBAAiB,EAAE,QAAQ,CAAC,GAAG;AAC/B,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,QAAQ,EAAE,EAAE;;;;;"}
|
|
@@ -21,15 +21,11 @@ export declare class Tooltip {
|
|
|
21
21
|
hasContainer(): boolean;
|
|
22
22
|
setComponents(components: ComponentCore<unknown>[]): void;
|
|
23
23
|
update(): void;
|
|
24
|
-
/** Show the tooltip ny providing its content and position */
|
|
25
24
|
show(html: string | HTMLElement, pos: {
|
|
26
25
|
x: number;
|
|
27
26
|
y: number;
|
|
28
27
|
}): void;
|
|
29
|
-
/** Hide the tooltip */
|
|
30
28
|
hide(): void;
|
|
31
|
-
/** Simply displays the tooltip with its previous content on position */
|
|
32
|
-
display(): void;
|
|
33
29
|
place(pos: {
|
|
34
30
|
x: number;
|
|
35
31
|
y: number;
|
|
@@ -37,7 +33,6 @@ export declare class Tooltip {
|
|
|
37
33
|
isContainerBody(): boolean;
|
|
38
34
|
private _setContainerPosition;
|
|
39
35
|
private _setUpEvents;
|
|
40
|
-
private _getTooltipPosition;
|
|
41
36
|
private _setUpAttributes;
|
|
42
37
|
destroy(): void;
|
|
43
38
|
}
|
|
@@ -48,7 +48,6 @@ class Tooltip {
|
|
|
48
48
|
return;
|
|
49
49
|
this._setUpEventsThrottled();
|
|
50
50
|
}
|
|
51
|
-
/** Show the tooltip ny providing its content and position */
|
|
52
51
|
show(html, pos) {
|
|
53
52
|
if (html instanceof HTMLElement) {
|
|
54
53
|
const node = this.div.select(':first-child').node();
|
|
@@ -64,7 +63,6 @@ class Tooltip {
|
|
|
64
63
|
this._isShown = true;
|
|
65
64
|
this.place(pos);
|
|
66
65
|
}
|
|
67
|
-
/** Hide the tooltip */
|
|
68
66
|
hide() {
|
|
69
67
|
this.div.classed(show, false)
|
|
70
68
|
.on('transitionend', () => {
|
|
@@ -74,13 +72,6 @@ class Tooltip {
|
|
|
74
72
|
});
|
|
75
73
|
this._isShown = false;
|
|
76
74
|
}
|
|
77
|
-
/** Simply displays the tooltip with its previous content on position */
|
|
78
|
-
display() {
|
|
79
|
-
this.div
|
|
80
|
-
.classed(hidden, false)
|
|
81
|
-
.classed(show, true);
|
|
82
|
-
this._isShown = true;
|
|
83
|
-
}
|
|
84
75
|
place(pos) {
|
|
85
76
|
if (!this.hasContainer()) {
|
|
86
77
|
console.warn('Unovis | Tooltip: Container was not set or is not initialized yet');
|
|
@@ -139,7 +130,8 @@ class Tooltip {
|
|
|
139
130
|
}
|
|
140
131
|
}
|
|
141
132
|
_setUpEvents() {
|
|
142
|
-
const { config } = this;
|
|
133
|
+
const { config: { triggers } } = this;
|
|
134
|
+
const isContainerBody = this.isContainerBody();
|
|
143
135
|
// We use the Event Delegation pattern to set up Tooltip events
|
|
144
136
|
// Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
|
|
145
137
|
// the `path` of the event and trigger corresponding callbacks
|
|
@@ -147,10 +139,11 @@ class Tooltip {
|
|
|
147
139
|
const selection = select(component.element);
|
|
148
140
|
selection
|
|
149
141
|
.on('mousemove.tooltip', (e) => {
|
|
142
|
+
const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
150
143
|
const path = (e.composedPath && e.composedPath()) || e.path || [e.target];
|
|
151
144
|
// Go through all of the configured triggers
|
|
152
|
-
for (const className of Object.keys(
|
|
153
|
-
const template =
|
|
145
|
+
for (const className of Object.keys(triggers)) {
|
|
146
|
+
const template = triggers[className];
|
|
154
147
|
if (!template)
|
|
155
148
|
continue; // Skip if the trigger is not configured
|
|
156
149
|
const els = selection.selectAll(`.${className}`).nodes();
|
|
@@ -161,7 +154,6 @@ class Tooltip {
|
|
|
161
154
|
if (el.classList.contains(className)) { // If there's a match, show the tooltip
|
|
162
155
|
const i = els.indexOf(el);
|
|
163
156
|
const d = select(el).datum();
|
|
164
|
-
const [x, y] = this._getTooltipPosition(e, el);
|
|
165
157
|
const content = template(d, i, els);
|
|
166
158
|
if (content)
|
|
167
159
|
this.show(content, { x, y });
|
|
@@ -183,54 +175,6 @@ class Tooltip {
|
|
|
183
175
|
this.hide();
|
|
184
176
|
});
|
|
185
177
|
});
|
|
186
|
-
// Set up Tooltip hover
|
|
187
|
-
if (config.allowHover) {
|
|
188
|
-
this.div
|
|
189
|
-
.on('mouseenter.tooltip', this.display.bind(this))
|
|
190
|
-
.on('mouseleave.tooltip', this.hide.bind(this));
|
|
191
|
-
}
|
|
192
|
-
else {
|
|
193
|
-
this.div
|
|
194
|
-
.on('mouseenter.tooltip', null)
|
|
195
|
-
.on('mouseleave.tooltip', null);
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
_getTooltipPosition(e, hoveredElement) {
|
|
199
|
-
const { config } = this;
|
|
200
|
-
const isContainerBody = this.isContainerBody();
|
|
201
|
-
const clientRect = hoveredElement.getBoundingClientRect();
|
|
202
|
-
let tooltipPosition = [0, 0];
|
|
203
|
-
if (config.followCursor) {
|
|
204
|
-
tooltipPosition = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
205
|
-
}
|
|
206
|
-
else {
|
|
207
|
-
// We use D3's point transformation to get the correct position of the element by pretending it's a pointer event
|
|
208
|
-
// See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js
|
|
209
|
-
const elementPos = pointer({ clientX: clientRect.x, clientY: clientRect.y, pageX: clientRect.x, pageY: clientRect.y }, this._container);
|
|
210
|
-
switch (config.horizontalPlacement) {
|
|
211
|
-
case Position.Left:
|
|
212
|
-
tooltipPosition[0] = elementPos[0];
|
|
213
|
-
break;
|
|
214
|
-
case Position.Right:
|
|
215
|
-
tooltipPosition[0] = elementPos[0] + clientRect.width;
|
|
216
|
-
break;
|
|
217
|
-
default:
|
|
218
|
-
tooltipPosition[0] = elementPos[0] + clientRect.width / 2;
|
|
219
|
-
break;
|
|
220
|
-
}
|
|
221
|
-
switch (config.verticalPlacement) {
|
|
222
|
-
case Position.Top:
|
|
223
|
-
tooltipPosition[1] = elementPos[1];
|
|
224
|
-
break;
|
|
225
|
-
case Position.Bottom:
|
|
226
|
-
tooltipPosition[1] = elementPos[1] + clientRect.height;
|
|
227
|
-
break;
|
|
228
|
-
default:
|
|
229
|
-
tooltipPosition[1] = elementPos[1] + clientRect.height / 2;
|
|
230
|
-
break;
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
return tooltipPosition;
|
|
234
178
|
}
|
|
235
179
|
_setUpAttributes() {
|
|
236
180
|
const attributesMap = this.config.attributes;
|