@unovis/ts 1.4.2-beta.0 → 1.5.0-alpha.1
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 +16 -17
- package/components/axis/index.js.map +1 -1
- package/components/brush/index.js +4 -4
- package/components/brush/index.js.map +1 -1
- package/components/brush/style.d.ts +44 -1
- package/components/brush/style.js +39 -32
- package/components/brush/style.js.map +1 -1
- package/components/graph/config.d.ts +10 -13
- package/components/graph/config.js +2 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +3 -13
- package/components/graph/index.js +63 -173
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/layout.js +14 -6
- package/components/graph/modules/layout.js.map +1 -1
- package/components/graph/modules/link/index.js +2 -2
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/node/index.d.ts +4 -3
- package/components/graph/modules/node/index.js +63 -34
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/graph/modules/node/style.d.ts +0 -2
- package/components/graph/modules/node/style.js +4 -34
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/style.d.ts +0 -1
- package/components/graph/style.js +1 -22
- package/components/graph/style.js.map +1 -1
- package/components/graph/types.d.ts +0 -1
- package/components/graph/types.js.map +1 -1
- package/components/tooltip/config.d.ts +7 -1
- package/components/tooltip/config.js +2 -0
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +11 -1
- package/components/tooltip/index.js +160 -44
- package/components/tooltip/index.js.map +1 -1
- package/components/tooltip/style.d.ts +5 -1
- package/components/tooltip/style.js +29 -25
- 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 +0 -2
- package/data-models/graph.js +0 -6
- package/data-models/graph.js.map +1 -1
- package/index.d.ts +2 -0
- package/index.js +2 -0
- 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":"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":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAGM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;UAMb,SAAS,CAAA;;;EAGlB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;UASjB,SAAS,CAAA;;;EAGlB;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;UAWvB,SAAS,CAAA;;;EAGlB;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;;;;EAInB;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;AAGtB,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;AAGV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;AAGd,EAAA,EAAA,CAAA,CAAA,EAAI,gBAAgB,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 /* 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;;;;;;;;"}
|
|
@@ -2,6 +2,5 @@ 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;
|
|
6
5
|
export declare const zoomOutLevel1: string;
|
|
7
6
|
export declare const zoomOutLevel2: string;
|
|
@@ -6,9 +6,6 @@ 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;
|
|
12
9
|
}
|
|
13
10
|
`;
|
|
14
11
|
// General
|
|
@@ -21,24 +18,6 @@ const background = css `
|
|
|
21
18
|
const graphGroup = css `
|
|
22
19
|
label: graph-group;
|
|
23
20
|
`;
|
|
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
|
-
`;
|
|
42
21
|
const zoomOutLevel1 = css `
|
|
43
22
|
label: zoom-out-level-1;
|
|
44
23
|
|
|
@@ -83,5 +62,5 @@ const zoomOutLevel2 = css `
|
|
|
83
62
|
}
|
|
84
63
|
`;
|
|
85
64
|
|
|
86
|
-
export { background,
|
|
65
|
+
export { background, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
|
|
87
66
|
//# 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
|
|
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;;EAElE;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,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
|
|
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":"IAuDY,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,6 +5,12 @@ 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. If `true`, the tooltip can't be hovered over
|
|
9
|
+
* even when `allowHover` is set to `true`. Default: `true` */
|
|
10
|
+
followCursor?: boolean;
|
|
11
|
+
/** Allow the tooltip to be hovered over and interacted with when `followCursor` is set to `false`.
|
|
12
|
+
* Default: `true` */
|
|
13
|
+
allowHover?: boolean;
|
|
8
14
|
/** Horizontal placement of the tooltip. Default: `Position.Auto` */
|
|
9
15
|
horizontalPlacement?: Position | string | undefined;
|
|
10
16
|
/** Horizontal shift of the tooltip in pixels. Default: `0` */
|
|
@@ -29,7 +35,7 @@ export interface TooltipConfigInterface {
|
|
|
29
35
|
* ```
|
|
30
36
|
*/
|
|
31
37
|
triggers?: {
|
|
32
|
-
[selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;
|
|
38
|
+
[selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null | void) | undefined | null;
|
|
33
39
|
};
|
|
34
40
|
/** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance
|
|
35
41
|
* by using a CSS selector. Attributes configuration object has the following structure:
|
|
@@ -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 /** 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;
|
|
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 /** Follow the mouse cursor. If `true`, the tooltip can't be hovered over\n * even when `allowHover` is set to `true`. Default: `true` */\n followCursor?: boolean;\n /** Allow the tooltip to be hovered over and interacted with when `followCursor` is set to `false`.\n * Default: `true` */\n allowHover?: boolean;\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 | void) | 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 followCursor: true,\n allowHover: true,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AA2Da,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,UAAU,EAAE,IAAI;IAChB,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;;;;;"}
|
|
@@ -14,6 +14,9 @@ export declare class Tooltip {
|
|
|
14
14
|
private _setContainerPositionThrottled;
|
|
15
15
|
private _isShown;
|
|
16
16
|
private _container;
|
|
17
|
+
private _mutationObserver;
|
|
18
|
+
private _hoveredElement;
|
|
19
|
+
private _position;
|
|
17
20
|
constructor(config?: TooltipConfigInterface);
|
|
18
21
|
setConfig(config: TooltipConfigInterface): void;
|
|
19
22
|
setContainer(container: HTMLElement): void;
|
|
@@ -21,16 +24,23 @@ export declare class Tooltip {
|
|
|
21
24
|
hasContainer(): boolean;
|
|
22
25
|
setComponents(components: ComponentCore<unknown>[]): void;
|
|
23
26
|
update(): void;
|
|
24
|
-
|
|
27
|
+
/** Show the tooltip by providing content and position */
|
|
28
|
+
show(html: string | HTMLElement | null | void, pos: {
|
|
25
29
|
x: number;
|
|
26
30
|
y: number;
|
|
27
31
|
}): void;
|
|
32
|
+
/** Hide the tooltip */
|
|
28
33
|
hide(): void;
|
|
34
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
35
|
+
display(): void;
|
|
29
36
|
place(pos: {
|
|
30
37
|
x: number;
|
|
31
38
|
y: number;
|
|
32
39
|
}): void;
|
|
40
|
+
placeByElement(hoveredElement: SVGElement | HTMLElement): void;
|
|
33
41
|
isContainerBody(): boolean;
|
|
42
|
+
private _render;
|
|
43
|
+
private _applyPosition;
|
|
34
44
|
private _setContainerPosition;
|
|
35
45
|
private _setUpEvents;
|
|
36
46
|
private _setUpAttributes;
|
|
@@ -3,7 +3,7 @@ import { Position } from '../../types/position.js';
|
|
|
3
3
|
import { throttle, merge } from '../../utils/data.js';
|
|
4
4
|
import { TooltipDefaultConfig } from './config.js';
|
|
5
5
|
import * as style from './style.js';
|
|
6
|
-
import {
|
|
6
|
+
import { root, show, hidden, nonInteractive, positionFixed } from './style.js';
|
|
7
7
|
|
|
8
8
|
class Tooltip {
|
|
9
9
|
constructor(config = {}) {
|
|
@@ -14,9 +14,24 @@ class Tooltip {
|
|
|
14
14
|
this._isShown = false;
|
|
15
15
|
this.element = document.createElement('div');
|
|
16
16
|
this.div = select(this.element)
|
|
17
|
-
.attr('class',
|
|
17
|
+
.attr('class', root);
|
|
18
18
|
this.setConfig(config);
|
|
19
19
|
this.components = this.config.components;
|
|
20
|
+
// Set up MutationObserver to automatically re-position the tooltip
|
|
21
|
+
// if the content has been dynamically changed
|
|
22
|
+
this._mutationObserver = new MutationObserver(() => {
|
|
23
|
+
if (!this._isShown)
|
|
24
|
+
return;
|
|
25
|
+
// Handle changes to the content of this.div
|
|
26
|
+
// Add your logic here
|
|
27
|
+
if (!this.config.followCursor && this._hoveredElement) {
|
|
28
|
+
this.placeByElement(this._hoveredElement);
|
|
29
|
+
}
|
|
30
|
+
else if (this._position) {
|
|
31
|
+
this.place({ x: this._position[0], y: this._position[1] });
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
this._mutationObserver.observe(this.div.node(), { childList: true, subtree: true });
|
|
20
35
|
}
|
|
21
36
|
setConfig(config) {
|
|
22
37
|
var _a;
|
|
@@ -48,23 +63,15 @@ class Tooltip {
|
|
|
48
63
|
return;
|
|
49
64
|
this._setUpEventsThrottled();
|
|
50
65
|
}
|
|
66
|
+
/** Show the tooltip by providing content and position */
|
|
51
67
|
show(html, pos) {
|
|
52
|
-
|
|
53
|
-
const node = this.div.select(':first-child').node();
|
|
54
|
-
if (node !== html)
|
|
55
|
-
this.div.html('').append(() => html);
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this.div.html(html);
|
|
59
|
-
}
|
|
60
|
-
this.div
|
|
61
|
-
.classed(hidden, false)
|
|
62
|
-
.classed(show, true);
|
|
63
|
-
this._isShown = true;
|
|
68
|
+
this._render(html);
|
|
64
69
|
this.place(pos);
|
|
65
70
|
}
|
|
71
|
+
/** Hide the tooltip */
|
|
66
72
|
hide() {
|
|
67
|
-
this.div
|
|
73
|
+
this.div
|
|
74
|
+
.classed(show, false) // The `show` class triggers the opacity transition
|
|
68
75
|
.on('transitionend', () => {
|
|
69
76
|
// We hide the element once the transition completes
|
|
70
77
|
// This ensures container overflow will not occur when the window is resized
|
|
@@ -72,6 +79,13 @@ class Tooltip {
|
|
|
72
79
|
});
|
|
73
80
|
this._isShown = false;
|
|
74
81
|
}
|
|
82
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
83
|
+
display() {
|
|
84
|
+
this.div
|
|
85
|
+
.classed(hidden, false) // The `hidden` class sets `display: none;`
|
|
86
|
+
.classed(show, true); // The `show` class triggers the opacity transition
|
|
87
|
+
this._isShown = true;
|
|
88
|
+
}
|
|
75
89
|
place(pos) {
|
|
76
90
|
if (!this.hasContainer()) {
|
|
77
91
|
console.warn('Unovis | Tooltip: Container was not set or is not initialized yet');
|
|
@@ -79,48 +93,123 @@ class Tooltip {
|
|
|
79
93
|
}
|
|
80
94
|
const { config } = this;
|
|
81
95
|
const isContainerBody = this.isContainerBody();
|
|
82
|
-
const
|
|
83
|
-
const
|
|
96
|
+
const tooltipWidth = this.element.offsetWidth;
|
|
97
|
+
const tooltipHeight = this.element.offsetHeight;
|
|
84
98
|
const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight;
|
|
85
99
|
const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth;
|
|
86
100
|
const horizontalPlacement = config.horizontalPlacement === Position.Auto
|
|
87
|
-
?
|
|
101
|
+
? Position.Center
|
|
88
102
|
: config.horizontalPlacement;
|
|
89
103
|
const verticalPlacement = config.verticalPlacement === Position.Auto
|
|
90
|
-
? (pos.y > containerHeight /
|
|
104
|
+
? ((pos.y - tooltipHeight) > containerHeight / 8 ? Position.Top : Position.Bottom)
|
|
91
105
|
: config.verticalPlacement;
|
|
92
106
|
// dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)
|
|
93
107
|
const margin = 5;
|
|
94
|
-
const dx = horizontalPlacement === Position.Left ? -
|
|
95
|
-
: horizontalPlacement === Position.Center ? -
|
|
108
|
+
const dx = horizontalPlacement === Position.Left ? -tooltipWidth - margin - config.horizontalShift
|
|
109
|
+
: horizontalPlacement === Position.Center ? -tooltipWidth / 2
|
|
96
110
|
: margin + config.horizontalShift;
|
|
97
|
-
const dy = verticalPlacement === Position.Bottom ?
|
|
98
|
-
: verticalPlacement === Position.Center ?
|
|
111
|
+
const dy = verticalPlacement === Position.Bottom ? tooltipHeight + margin + config.verticalShift
|
|
112
|
+
: verticalPlacement === Position.Center ? tooltipHeight / 2
|
|
99
113
|
: -margin - config.verticalShift;
|
|
100
114
|
// Constraint to container
|
|
101
115
|
const paddingX = 10;
|
|
102
|
-
const hitRight = pos.x > (containerWidth -
|
|
116
|
+
const hitRight = pos.x > (containerWidth - tooltipWidth - dx - paddingX);
|
|
103
117
|
const hitLeft = pos.x < -dx + paddingX;
|
|
104
|
-
const constraintX = hitRight ? (containerWidth -
|
|
118
|
+
const constraintX = hitRight ? (containerWidth - tooltipWidth - dx) - pos.x - paddingX
|
|
105
119
|
: hitLeft ? -dx - pos.x + paddingX : 0;
|
|
106
120
|
const paddingY = 10;
|
|
107
121
|
const hitBottom = pos.y > (containerHeight - dy - paddingY);
|
|
108
|
-
const hitTop = pos.y < (
|
|
122
|
+
const hitTop = pos.y < (tooltipHeight - dy + paddingY);
|
|
109
123
|
const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY
|
|
110
|
-
: hitTop ?
|
|
124
|
+
: hitTop ? tooltipHeight - dy - pos.y + paddingY : 0;
|
|
111
125
|
// Placing
|
|
112
126
|
// If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left
|
|
113
|
-
const x = containerWidth <
|
|
114
|
-
const y = containerHeight <
|
|
115
|
-
this.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
127
|
+
const x = containerWidth < tooltipWidth ? 0 : pos.x + constraintX + dx;
|
|
128
|
+
const y = containerHeight < tooltipHeight ? tooltipHeight : pos.y + constraintY + dy;
|
|
129
|
+
this._applyPosition(x, y, null, tooltipHeight);
|
|
130
|
+
}
|
|
131
|
+
placeByElement(hoveredElement) {
|
|
132
|
+
const { config } = this;
|
|
133
|
+
const margin = 5;
|
|
134
|
+
const tooltipWidth = this.element.offsetWidth;
|
|
135
|
+
const tooltipHeight = this.element.offsetHeight;
|
|
136
|
+
const isContainerBody = this.isContainerBody();
|
|
137
|
+
const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth;
|
|
138
|
+
const hoveredElementRect = hoveredElement.getBoundingClientRect();
|
|
139
|
+
// We use D3's point transformation to get the correct position of the element by pretending it's a pointer event
|
|
140
|
+
// See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js
|
|
141
|
+
const elementPos = pointer({
|
|
142
|
+
clientX: hoveredElementRect.x,
|
|
143
|
+
clientY: hoveredElementRect.y,
|
|
144
|
+
pageX: hoveredElementRect.x,
|
|
145
|
+
pageY: hoveredElementRect.y,
|
|
146
|
+
}, this._container);
|
|
147
|
+
const horizontalPlacement = config.horizontalPlacement === Position.Auto
|
|
148
|
+
? (elementPos[0] - tooltipWidth < 0 ? Position.Right
|
|
149
|
+
: elementPos[0] + tooltipWidth > containerWidth ? Position.Left : Position.Center)
|
|
150
|
+
: config.horizontalPlacement;
|
|
151
|
+
let translateX = '';
|
|
152
|
+
switch (horizontalPlacement) {
|
|
153
|
+
case Position.Left:
|
|
154
|
+
translateX = `calc(-100% - ${margin}px)`;
|
|
155
|
+
break;
|
|
156
|
+
case Position.Right:
|
|
157
|
+
translateX = `calc(${hoveredElementRect.width}px + ${margin}px)`;
|
|
158
|
+
break;
|
|
159
|
+
case Position.Center:
|
|
160
|
+
default:
|
|
161
|
+
translateX = `calc(-50% + ${hoveredElementRect.width / 2}px)`;
|
|
162
|
+
break;
|
|
163
|
+
}
|
|
164
|
+
const verticalPlacement = config.verticalPlacement === Position.Auto
|
|
165
|
+
? (horizontalPlacement !== Position.Center ? Position.Center
|
|
166
|
+
: elementPos[1] - tooltipHeight < 0 ? Position.Bottom : Position.Top)
|
|
167
|
+
: config.verticalPlacement;
|
|
168
|
+
let translateY = '';
|
|
169
|
+
switch (verticalPlacement) {
|
|
170
|
+
case Position.Center:
|
|
171
|
+
translateY = `calc(50% + ${hoveredElementRect.height / 2}px)`; // `calc(-50% + ${hoveredElementRect.height / 2}px)`
|
|
172
|
+
break;
|
|
173
|
+
case Position.Bottom:
|
|
174
|
+
translateY = `calc(100% + ${hoveredElementRect.height}px + ${margin}px)`; // `calc(${hoveredElementRect.height}px + ${margin}px)`
|
|
175
|
+
break;
|
|
176
|
+
case Position.Top:
|
|
177
|
+
default:
|
|
178
|
+
translateY = `${-margin}px`; // `calc(-100% - ${margin}px)`
|
|
179
|
+
break;
|
|
180
|
+
}
|
|
181
|
+
const translate = `translate(${translateX}, ${translateY})`;
|
|
182
|
+
this._applyPosition(elementPos[0], elementPos[1], translate, tooltipHeight);
|
|
120
183
|
}
|
|
121
184
|
isContainerBody() {
|
|
122
185
|
return this._container === document.body;
|
|
123
186
|
}
|
|
187
|
+
_render(html) {
|
|
188
|
+
const { config } = this;
|
|
189
|
+
if (html instanceof HTMLElement) {
|
|
190
|
+
const node = this.div.select(':first-child').node();
|
|
191
|
+
if (node !== html)
|
|
192
|
+
this.div.html('').append(() => html);
|
|
193
|
+
}
|
|
194
|
+
else if (html) {
|
|
195
|
+
this.div.html(html);
|
|
196
|
+
}
|
|
197
|
+
this.div
|
|
198
|
+
.classed(nonInteractive, !config.allowHover || config.followCursor);
|
|
199
|
+
this.display();
|
|
200
|
+
}
|
|
201
|
+
_applyPosition(x, y, transform, tooltipHeight) {
|
|
202
|
+
const isContainerBody = this.isContainerBody();
|
|
203
|
+
const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight;
|
|
204
|
+
this.div
|
|
205
|
+
.classed(positionFixed, isContainerBody)
|
|
206
|
+
.style('top', isContainerBody ? `${y - tooltipHeight}px` : 'unset')
|
|
207
|
+
.style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')
|
|
208
|
+
.style('left', `${x}px`)
|
|
209
|
+
// We use `transform` to position the tooltip with relative units like percentages,
|
|
210
|
+
// this way it works automatically with dynamic content that can change the tooltip's size
|
|
211
|
+
.style('transform', transform);
|
|
212
|
+
}
|
|
124
213
|
_setContainerPosition() {
|
|
125
214
|
var _a;
|
|
126
215
|
// Tooltip position calculation relies on the parent position
|
|
@@ -130,8 +219,7 @@ class Tooltip {
|
|
|
130
219
|
}
|
|
131
220
|
}
|
|
132
221
|
_setUpEvents() {
|
|
133
|
-
const { config
|
|
134
|
-
const isContainerBody = this.isContainerBody();
|
|
222
|
+
const { config } = this;
|
|
135
223
|
// We use the Event Delegation pattern to set up Tooltip events
|
|
136
224
|
// Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
|
|
137
225
|
// the `path` of the event and trigger corresponding callbacks
|
|
@@ -139,11 +227,10 @@ class Tooltip {
|
|
|
139
227
|
const selection = select(component.element);
|
|
140
228
|
selection
|
|
141
229
|
.on('mousemove.tooltip', (e) => {
|
|
142
|
-
const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
143
230
|
const path = (e.composedPath && e.composedPath()) || e.path || [e.target];
|
|
144
231
|
// Go through all of the configured triggers
|
|
145
|
-
for (const className of Object.keys(triggers)) {
|
|
146
|
-
const template = triggers[className];
|
|
232
|
+
for (const className of Object.keys(config.triggers)) {
|
|
233
|
+
const template = config.triggers[className];
|
|
147
234
|
if (!template)
|
|
148
235
|
continue; // Skip if the trigger is not configured
|
|
149
236
|
const els = selection.selectAll(`.${className}`).nodes();
|
|
@@ -155,12 +242,29 @@ class Tooltip {
|
|
|
155
242
|
const i = els.indexOf(el);
|
|
156
243
|
const d = select(el).datum();
|
|
157
244
|
const content = template(d, i, els);
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
245
|
+
const [x, y] = this.isContainerBody() ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
246
|
+
if (content === null) {
|
|
247
|
+
// If the content is `null`, we hide the tooltip
|
|
161
248
|
this.hide();
|
|
162
|
-
|
|
163
|
-
|
|
249
|
+
}
|
|
250
|
+
else {
|
|
251
|
+
// Otherwise we show the tooltip, but don't render the content if it's `undefined` or
|
|
252
|
+
// an empty string. This way we can allow it to work with things like `createPortal` in React
|
|
253
|
+
this._render(content);
|
|
254
|
+
if (config.followCursor)
|
|
255
|
+
this.place({ x, y });
|
|
256
|
+
else
|
|
257
|
+
this.placeByElement(el);
|
|
258
|
+
}
|
|
259
|
+
// Store the hovered element and the event for future reference,
|
|
260
|
+
// i.e. to re-position the tooltip if the content has been changed
|
|
261
|
+
// by something else and it was captured by the MutationObserver
|
|
262
|
+
this._hoveredElement = el;
|
|
263
|
+
this._position = this.isContainerBody() ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
264
|
+
// Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
|
|
265
|
+
e.stopPropagation();
|
|
266
|
+
// Stop looking for other matches
|
|
267
|
+
return;
|
|
164
268
|
}
|
|
165
269
|
}
|
|
166
270
|
}
|
|
@@ -175,6 +279,17 @@ class Tooltip {
|
|
|
175
279
|
this.hide();
|
|
176
280
|
});
|
|
177
281
|
});
|
|
282
|
+
// Set up Tooltip hover
|
|
283
|
+
if (config.allowHover && !config.followCursor) {
|
|
284
|
+
this.div
|
|
285
|
+
.on('mouseenter.tooltip', this.display.bind(this))
|
|
286
|
+
.on('mouseleave.tooltip', this.hide.bind(this));
|
|
287
|
+
}
|
|
288
|
+
else {
|
|
289
|
+
this.div
|
|
290
|
+
.on('mouseenter.tooltip', null)
|
|
291
|
+
.on('mouseleave.tooltip', null);
|
|
292
|
+
}
|
|
178
293
|
}
|
|
179
294
|
_setUpAttributes() {
|
|
180
295
|
const attributesMap = this.config.attributes;
|
|
@@ -186,6 +301,7 @@ class Tooltip {
|
|
|
186
301
|
}
|
|
187
302
|
destroy() {
|
|
188
303
|
var _a;
|
|
304
|
+
this._mutationObserver.disconnect();
|
|
189
305
|
(_a = this.div) === null || _a === void 0 ? void 0 : _a.remove();
|
|
190
306
|
}
|
|
191
307
|
}
|