@unovis/ts 1.5.0-version.9 → 1.5.1-exf.0

package/components/graph/modules/node/style.js.map

@@ -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;;;;;;;;"}
+{"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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"}

package/components/graph/modules/panel/index.js

@@ -44,6 +44,7 @@ function updatePanels(selection, config, duration) {
         .attr('width', d => d._width)
         .attr('height', d => d._height)
         .style('stroke', d => d.borderColor)
+        .style('fill', d => d.fillColor)
         .style('stroke-width', d => d.borderWidth);
     const panelSelection$1 = selection.select(`.${panelSelection}`)
         .classed(panelSelectionActive, d => d.dashedOutline);

package/components/graph/modules/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/panel/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { trimString } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphNode, GraphLink, GraphPanel } from '../../types'\n\n// Config\nimport { GraphConfigInterface } from '../../config'\n\n// Helpers\nimport { setLabelRect } from '../node/helper'\nimport { getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper'\n\n// Styles\nimport * as panelSelectors from './style'\nimport { appendShape, updateShape } from '../shape'\n\nexport function createPanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>\n): void {\n  selection\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', 0)\n\n  selection.append('rect').attr('class', panelSelectors.panelSelection)\n    .attr('rx', 9)\n    .attr('ry', 9)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  selection.append('rect').attr('class', panelSelectors.panel)\n    .attr('rx', 7)\n    .attr('ry', 7)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  const panelLabel = selection.append('g').attr('class', panelSelectors.label)\n    .attr('transform', getLabelTranslateTransform)\n  panelLabel.append('rect').attr('class', panelSelectors.background)\n  panelLabel.append('text').attr('class', panelSelectors.labelText)\n    .attr('dy', '0.32em')\n\n  const sideIcon = selection.append('g')\n    .attr('class', panelSelectors.sideIconGroup)\n    .attr('transform', (d, i, elements) => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n  appendShape(sideIcon, (d: GraphPanel) => d.sideIconShape, panelSelectors.sideIconShape, panelSelectors.customSideIcon)\n  sideIcon.append('text').attr('class', panelSelectors.sideIconSymbol)\n}\n\nexport function updatePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfigInterface<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', d => d._disabled ? 0.4 : 1)\n\n  const panels = selection.selectAll<SVGRectElement, GraphPanel>(`.${panelSelectors.panel}`).data(d => [d])\n  smartTransition(panels, duration)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n    .style('stroke', d => d.borderColor)\n    .style('stroke-width', d => d.borderWidth)\n\n  const panelSelection = selection.select<SVGRectElement>(`.${panelSelectors.panelSelection}`)\n    .classed(panelSelectors.panelSelectionActive, d => d.dashedOutline)\n\n  smartTransition(panelSelection, duration)\n    .attr('x', d => -OUTLINE_SELECTION_PADDING)\n    .attr('y', d => -OUTLINE_SELECTION_PADDING)\n    .attr('width', d => d._width + OUTLINE_SELECTION_PADDING * 2)\n    .attr('height', d => d._height + OUTLINE_SELECTION_PADDING * 2)\n\n  const sideIcon = selection.select<SVGGElement>(`.${panelSelectors.sideIconGroup}`)\n\n  sideIcon.select<SVGGElement>(`.${panelSelectors.sideIconShape}`)\n    .call(updateShape, (d: GraphPanel) => d.sideIconShape, (d: GraphPanel) => d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE)\n    .style('stroke', d => d.sideIconShapeStroke)\n    .style('cursor', d => d.sideIconCursor ?? null)\n    .style('opacity', d => d.sideIconShape ? 1 : 0)\n\n  sideIcon.select(`.${panelSelectors.sideIconSymbol}`)\n    .html(d => d.sideIconSymbol)\n    .attr('dy', 1)\n    .style('fill', d => d.sideIconSymbolColor)\n    .style('font-size', d => d.sideIconFontSize ?? ((d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE) / 2.5))\n\n  smartTransition(sideIcon, duration)\n    .attr('transform', d => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n\n  const panelLabel = selection.select<SVGGElement>(`.${panelSelectors.label}`)\n\n  panelLabel.select<SVGTextElement>(`.${panelSelectors.labelText}`)\n    .text(d => trimString(d.label))\n\n  smartTransition(panelLabel, duration)\n    .attr('transform', getLabelTranslateTransform)\n\n  panelLabel\n    .on('mouseover', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = d.label\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n    .on('mouseleave', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = trimString(d.label)\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n}\n\nexport function removePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfigInterface<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration / 2)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["panelSelectors.panelSelection","panelSelectors.panel","panelSelectors.label","panelSelectors.background","panelSelectors.labelText","panelSelectors.sideIconGroup","panelSelectors.sideIconShape","panelSelectors.customSideIcon","panelSelectors.sideIconSymbol","panelSelection","panelSelectors.panelSelectionActive"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/graph/modules/panel/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { trimString } from 'utils/text'\nimport { smartTransition } from 'utils/d3'\n\n// Types\nimport { GraphInputLink, GraphInputNode } from 'types/graph'\n\n// Local Types\nimport { GraphNode, GraphLink, GraphPanel } from '../../types'\n\n// Config\nimport { GraphConfigInterface } from '../../config'\n\n// Helpers\nimport { setLabelRect } from '../node/helper'\nimport { getLabelTranslateTransform, OUTLINE_SELECTION_PADDING, DEFAULT_SIDE_LABEL_SIZE } from './helper'\n\n// Styles\nimport * as panelSelectors from './style'\nimport { appendShape, updateShape } from '../shape'\n\nexport function createPanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>\n): void {\n  selection\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', 0)\n\n  selection.append('rect').attr('class', panelSelectors.panelSelection)\n    .attr('rx', 9)\n    .attr('ry', 9)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  selection.append('rect').attr('class', panelSelectors.panel)\n    .attr('rx', 7)\n    .attr('ry', 7)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n\n  const panelLabel = selection.append('g').attr('class', panelSelectors.label)\n    .attr('transform', getLabelTranslateTransform)\n  panelLabel.append('rect').attr('class', panelSelectors.background)\n  panelLabel.append('text').attr('class', panelSelectors.labelText)\n    .attr('dy', '0.32em')\n\n  const sideIcon = selection.append('g')\n    .attr('class', panelSelectors.sideIconGroup)\n    .attr('transform', (d, i, elements) => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n  appendShape(sideIcon, (d: GraphPanel) => d.sideIconShape, panelSelectors.sideIconShape, panelSelectors.customSideIcon)\n  sideIcon.append('text').attr('class', panelSelectors.sideIconSymbol)\n}\n\nexport function updatePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfigInterface<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration)\n    .attr('transform', d => `translate(${d._x}, ${d._y})`)\n    .style('opacity', d => d._disabled ? 0.4 : 1)\n\n  const panels = selection.selectAll<SVGRectElement, GraphPanel>(`.${panelSelectors.panel}`).data(d => [d])\n  smartTransition(panels, duration)\n    .attr('width', d => d._width)\n    .attr('height', d => d._height)\n    .style('stroke', d => d.borderColor)\n    .style('fill', d => d.fillColor)\n    .style('stroke-width', d => d.borderWidth)\n\n  const panelSelection = selection.select<SVGRectElement>(`.${panelSelectors.panelSelection}`)\n    .classed(panelSelectors.panelSelectionActive, d => d.dashedOutline)\n\n  smartTransition(panelSelection, duration)\n    .attr('x', d => -OUTLINE_SELECTION_PADDING)\n    .attr('y', d => -OUTLINE_SELECTION_PADDING)\n    .attr('width', d => d._width + OUTLINE_SELECTION_PADDING * 2)\n    .attr('height', d => d._height + OUTLINE_SELECTION_PADDING * 2)\n\n  const sideIcon = selection.select<SVGGElement>(`.${panelSelectors.sideIconGroup}`)\n\n  sideIcon.select<SVGGElement>(`.${panelSelectors.sideIconShape}`)\n    .call(updateShape, (d: GraphPanel) => d.sideIconShape, (d: GraphPanel) => d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE)\n    .style('stroke', d => d.sideIconShapeStroke)\n    .style('cursor', d => d.sideIconCursor ?? null)\n    .style('opacity', d => d.sideIconShape ? 1 : 0)\n\n  sideIcon.select(`.${panelSelectors.sideIconSymbol}`)\n    .html(d => d.sideIconSymbol)\n    .attr('dy', 1)\n    .style('fill', d => d.sideIconSymbolColor)\n    .style('font-size', d => d.sideIconFontSize ?? ((d.sideIconShapeSize ?? DEFAULT_SIDE_LABEL_SIZE) / 2.5))\n\n  smartTransition(sideIcon, duration)\n    .attr('transform', d => {\n      const dx = -OUTLINE_SELECTION_PADDING\n      const dy = -OUTLINE_SELECTION_PADDING\n      return `translate(${d._width + dx}, ${-dy})`\n    })\n\n  const panelLabel = selection.select<SVGGElement>(`.${panelSelectors.label}`)\n\n  panelLabel.select<SVGTextElement>(`.${panelSelectors.labelText}`)\n    .text(d => trimString(d.label))\n\n  smartTransition(panelLabel, duration)\n    .attr('transform', getLabelTranslateTransform)\n\n  panelLabel\n    .on('mouseover', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = d.label\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n    .on('mouseleave', (event: MouseEvent, d) => {\n      const label = select<SVGGElement, GraphPanel<N, L>>(event.currentTarget as SVGGElement)\n      const labelContent = trimString(d.label)\n      label.select('text').text(labelContent)\n      setLabelRect(label, labelContent, panelSelectors.labelText)\n    })\n}\n\nexport function removePanels<N extends GraphNode, L extends GraphLink> (\n  selection: Selection<SVGGElement, GraphPanel, SVGGElement, unknown>,\n  config: GraphConfigInterface<GraphInputNode, GraphInputLink>,\n  duration: number\n): void {\n  smartTransition(selection, duration / 2)\n    .style('opacity', 0)\n    .remove()\n}\n"],"names":["panelSelectors.panelSelection","panelSelectors.panel","panelSelectors.label","panelSelectors.background","panelSelectors.labelText","panelSelectors.sideIconGroup","panelSelectors.sideIconShape","panelSelectors.customSideIcon","panelSelectors.sideIconSymbol","panelSelection","panelSelectors.panelSelectionActive"],"mappings":"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"}

package/components/graph/style.d.ts

@@ -2,5 +2,6 @@ export declare const variables: void;
 export declare const root: string;
 export declare const background: string;
 export declare const graphGroup: string;
+export declare const brush: string;
 export declare const zoomOutLevel1: string;
 export declare const zoomOutLevel2: string;

package/components/graph/style.js

@@ -6,6 +6,9 @@ import { gLink, flowCircle } from './modules/link/style.js';
 const variables = injectGlobal `
   :root {
     --vis-graph-icon-font-family: ${UNOVIS_ICON_FONT_FAMILY_DEFAULT};
+
+    /* Brush */
+    --vis-graph-brush-selection-opacity: 0.2;
   }
 `;
 // General
@@ -18,6 +21,24 @@ const background = css `
 const graphGroup = css `
   label: graph-group;
 `;
+const brush = css `
+  label: brush;
+
+  :not(.active) {
+    display: none;
+  }
+
+  .active {
+    .selection {
+      fill-opacity: 0;
+      stroke: none;
+    }
+
+    .handle {
+      display: none;
+    }
+  }
+`;
 const zoomOutLevel1 = css `
   label: zoom-out-level-1;
 
@@ -62,5 +83,5 @@ const zoomOutLevel2 = css `
   }
 `;
 
-export { background, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
+export { background, brush, graphGroup, root, variables, zoomOutLevel1, zoomOutLevel2 };
 //# sourceMappingURL=style.js.map

package/components/graph/style.js.map

@@ -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;;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;;;;;;;;"}
+{"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;;;;;;;;"}

package/components/graph/types.d.ts

@@ -12,6 +12,7 @@ export declare type GraphNode<N extends GraphInputNode = GraphInputNode, L exten
         fy?: number;
         selected?: boolean;
         greyout?: boolean;
+        brushed?: boolean;
     };
     _panels?: GraphPanel<N, L>[];
     _isConnected?: boolean;
@@ -75,6 +76,8 @@ export declare type GraphPanelConfig = {
     label?: string;
     /** Position of the label */
     labelPosition?: Position.Top | Position.Bottom | string;
+    /** Fill color of the panel */
+    fillColor?: string;
     /** Color of the panel's border */
     borderColor?: string;
     /** Border width of the panel in pixels */
@@ -181,3 +184,8 @@ export declare type GraphDagreLayoutSetting = {
      */
     ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;
 };
+export declare enum GraphNodeSelectionHighlightMode {
+    None = "none",
+    Greyout = "greyout",
+    GreyoutNonConnected = "greyout-non-connected"
+}

package/components/graph/types.js

@@ -25,7 +25,13 @@ var GraphNodeShape;
     GraphNodeShape["Square"] = "square";
     GraphNodeShape["Hexagon"] = "hexagon";
     GraphNodeShape["Triangle"] = "triangle";
-})(GraphNodeShape || (GraphNodeShape = {}));
+})(GraphNodeShape || (GraphNodeShape = {}));
+var GraphNodeSelectionHighlightMode;
+(function (GraphNodeSelectionHighlightMode) {
+    GraphNodeSelectionHighlightMode["None"] = "none";
+    GraphNodeSelectionHighlightMode["Greyout"] = "greyout";
+    GraphNodeSelectionHighlightMode["GreyoutNonConnected"] = "greyout-non-connected";
+})(GraphNodeSelectionHighlightMode || (GraphNodeSelectionHighlightMode = {}));
 
-export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeShape };
+export { GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeSelectionHighlightMode, GraphNodeShape };
 //# sourceMappingURL=types.js.map

package/components/graph/types.js.map

@@ -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":"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;;;;"}
+{"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  /** Fill color of the panel */\n  fillColor?: 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\nexport enum GraphNodeSelectionHighlightMode {\n  None = 'none',\n  Greyout ='greyout',\n  GreyoutNonConnected ='greyout-non-connected',\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,CAAA;IA0IW,gCAIX;AAJD,CAAA,UAAY,+BAA+B,EAAA;AACzC,IAAA,+BAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb,IAAA,+BAAA,CAAA,SAAA,CAAA,GAAA,SAAkB,CAAA;AAClB,IAAA,+BAAA,CAAA,qBAAA,CAAA,GAAA,uBAA4C,CAAA;AAC9C,CAAC,EAJW,+BAA+B,KAA/B,+BAA+B,GAI1C,EAAA,CAAA,CAAA;;;;"}

package/components/leaflet-map/modules/map.js

@@ -108,6 +108,7 @@ function setupMap(mapContainer, config) {
                 // eslint-disable-next-line no-case-declarations
                 const { getMaplibreGLLayer } = yield import('../renderer/mapboxgl-layer.js');
                 layer = getMaplibreGLLayer(config, L, maplibre.default);
+                layer.addTo(leafletMap);
                 maplibreMap = (_b = (_a = layer).getMaplibreMap) === null || _b === void 0 ? void 0 : _b.call(_a);
                 select(mapContainer).on('wheel', (event) => {
                     event.preventDefault();
@@ -116,9 +117,9 @@ function setupMap(mapContainer, config) {
                 break;
             case LeafletMapRenderer.Raster:
                 layer = L.tileLayer(style);
+                layer.addTo(leafletMap);
                 break;
         }
-        layer.addTo(leafletMap);
         // leaflet-mapbox-gl has a layer positioning issue on far zoom levels which leads to having wrong
         //   map points projection. We constrain the view to prevent that.
         constraintMapView(leafletMap);

package/components/leaflet-map/modules/map.js.map

@@ -1 +1 @@
-{"version":3,"file":"map.js","sources":["../../../../src/components/leaflet-map/modules/map.ts"],"sourcesContent":["import type L from 'leaflet'\nimport { select, Selection } from 'd3-selection'\nimport type { GeoJSONSource, Map } from 'maplibre-gl'\nimport { feature } from 'topojson-client'\n\n// Types\nimport { GenericDataRecord } from 'types/data'\n\n// Config\nimport { LeafletMapConfigInterface } from '../config'\n\n// Local Types\n\n// Utils\nimport { constraintMapView, mapboxglWheelEventThrottled } from '../renderer/mapboxgl-utils'\n\n// Styles\nimport * as s from '../style'\nimport { LeafletMapRenderer } from '../types'\n\nexport const initialMapCenter: L.LatLngExpression = [36, 14]\nexport const initialMapZoom = 1.9\n\nexport function updateTopoJson<T extends GenericDataRecord> (maplibreMap: Map, config: LeafletMapConfigInterface<T>): void {\n  const { topoJSONLayer } = config\n\n  if (topoJSONLayer.sources) {\n    const featureObject = topoJSONLayer.sources?.objects?.[topoJSONLayer.featureName]\n    if (featureObject) {\n      const mapSource = maplibreMap.getSource(topoJSONLayer.featureName) as GeoJSONSource\n      const featureCollection = feature(topoJSONLayer.sources, featureObject)\n      if (mapSource) {\n        mapSource.setData(featureCollection)\n      } else {\n        maplibreMap.addSource(topoJSONLayer.featureName, { type: 'geojson', data: featureCollection })\n      }\n    }\n  }\n\n  const fillLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-area`)\n  if (topoJSONLayer.fillProperty) {\n    if (!fillLayer) {\n      maplibreMap.addLayer({\n        id: `${topoJSONLayer.featureName}-area`,\n        type: 'fill',\n        source: topoJSONLayer.featureName,\n        paint: {\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'fill-antialias': false,\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'fill-opacity': topoJSONLayer.fillOpacity,\n        },\n      })\n    }\n    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-area`, 'fill-color', [\n      'case',\n      ['!', ['has', topoJSONLayer.fillProperty]],\n      'rgba(255, 255, 255, 0)',\n      ['get', topoJSONLayer.fillProperty],\n    ])\n  } else if (fillLayer) maplibreMap.removeLayer(`${topoJSONLayer.featureName}-area`)\n\n  const strokeLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-stroke`)\n  if (topoJSONLayer.strokeProperty) {\n    if (!strokeLayer) {\n      maplibreMap.addLayer({\n        id: `${topoJSONLayer.featureName}-stroke`,\n        type: 'line',\n        source: topoJSONLayer.featureName,\n        paint: {\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'line-opacity': topoJSONLayer.strokeOpacity,\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'line-width': topoJSONLayer.strokeWidth,\n        },\n      })\n    }\n    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-stroke`, 'line-color', [\n      'case',\n      ['!', ['has', topoJSONLayer.strokeProperty]],\n      'rgba(255, 255, 255, 0)',\n      ['get', topoJSONLayer.strokeProperty],\n    ])\n  } else if (strokeLayer) { maplibreMap.removeLayer(`${topoJSONLayer.featureName}-stroke`) }\n}\n\nexport async function setupMap<T extends GenericDataRecord> (mapContainer: HTMLElement, config: LeafletMapConfigInterface<T>): Promise<{\n  leaflet: L.Map;\n  layer: L.Layer;\n  svgOverlay: Selection<SVGSVGElement, unknown, null, undefined>;\n  svgGroup: Selection<SVGGElement, unknown, SVGElement, undefined>;\n}> {\n  const { style, renderer, topoJSONLayer } = config\n  const leaflet = await import('leaflet')\n  const L = leaflet.default\n\n  if (!style) {\n    console.error('Unovis | Leaflet Map: Please provide style settings in the map configuration object')\n    return\n  }\n\n  const leafletMap = L.map(mapContainer, {\n    scrollWheelZoom: renderer === LeafletMapRenderer.Raster, // We define custom scroll event for MapboxGL to enabling smooth zooming\n    zoomControl: false,\n    zoomDelta: renderer === LeafletMapRenderer.Raster ? 1 : 0.5,\n    zoomSnap: renderer === LeafletMapRenderer.Raster ? 1 : 0,\n    attributionControl: true,\n    center: initialMapCenter,\n    zoom: initialMapZoom,\n    minZoom: Math.sqrt(mapContainer.offsetWidth) / 17,\n    maxZoom: 23,\n    maxBounds: L.latLngBounds(\n      [-75, -290],\n      [85, 290]\n    ),\n    maxBoundsViscosity: 1,\n  })\n\n  for (const attr of config.attribution) {\n    leafletMap.attributionControl.addAttribution(attr)\n  }\n\n  let layer: L.Layer | (L.Layer & { getMaplibreMap(): Map })\n  let maplibreMap: Map = null\n\n  switch (renderer) {\n    case LeafletMapRenderer.MapLibre:\n      // eslint-disable-next-line no-case-declarations\n      const maplibre = await import('maplibre-gl')\n      // eslint-disable-next-line no-case-declarations\n      const { getMaplibreGLLayer } = await import('../renderer/mapboxgl-layer')\n      layer = getMaplibreGLLayer(config, L, maplibre.default)\n      maplibreMap = (layer as ReturnType<typeof getMaplibreGLLayer>).getMaplibreMap?.()\n\n      select(mapContainer).on('wheel', (event: WheelEvent) => {\n        event.preventDefault()\n        mapboxglWheelEventThrottled(leafletMap, layer as (L.Layer & { getMaplibreMap(): Map }), event)\n      })\n      break\n    case LeafletMapRenderer.Raster:\n      layer = L.tileLayer(style as string)\n      break\n  }\n  layer.addTo(leafletMap)\n\n  // leaflet-mapbox-gl has a layer positioning issue on far zoom levels which leads to having wrong\n  //   map points projection. We constrain the view to prevent that.\n  constraintMapView(leafletMap)\n\n  if (maplibreMap && topoJSONLayer?.sources) {\n    const canvas = maplibreMap.getCanvas()\n    const canvasSelection = select(canvas).classed(s.mapboxglCanvas, true)\n    const tilePaneSelection = select(leafletMap.getPanes().tilePane)\n\n    maplibreMap.on('mousemove', (event) => {\n      const layerName = `${topoJSONLayer.featureName}-area`\n      const layer = maplibreMap.getLayer(layerName)\n      if (!layer) return\n\n      const features = maplibreMap.queryRenderedFeatures(event.point, { layers: [layerName] })\n      tilePaneSelection.datum(features[0])\n      canvasSelection.classed(s.onFeatureHover, Boolean(features[0]))\n    })\n\n    maplibreMap.on('load', () => {\n      updateTopoJson(maplibreMap, config)\n    })\n  }\n\n  const svgOverlay = select(leafletMap.getPanes().overlayPane).append('svg')\n  const svgGroup = svgOverlay.append('g')\n\n  return {\n    leaflet: leafletMap,\n    layer,\n    svgOverlay,\n    svgGroup,\n  }\n}\n"],"names":["s.mapboxglCanvas","s.onFeatureHover"],"mappings":";;;;;;;MAoBa,gBAAgB,GAAuB,CAAC,EAAE,EAAE,EAAE,EAAC;AACrD,MAAM,cAAc,GAAG,IAAG;AAEjB,SAAA,cAAc,CAA+B,WAAgB,EAAE,MAAoC,EAAA;;AACjH,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAA;IAEhC,IAAI,aAAa,CAAC,OAAO,EAAE;AACzB,QAAA,MAAM,aAAa,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAO,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAa,CAAC,WAAW,CAAC,CAAA;AACjF,QAAA,IAAI,aAAa,EAAE;YACjB,MAAM,SAAS,GAAG,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,CAAkB,CAAA;YACnF,MAAM,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAA;AACvE,YAAA,IAAI,SAAS,EAAE;AACb,gBAAA,SAAS,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;AACrC,aAAA;AAAM,iBAAA;AACL,gBAAA,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAC/F,aAAA;AACF,SAAA;AACF,KAAA;AAED,IAAA,MAAM,SAAS,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAG,EAAA,aAAa,CAAC,WAAW,CAAO,KAAA,CAAA,CAAC,CAAA;IAC3E,IAAI,aAAa,CAAC,YAAY,EAAE;QAC9B,IAAI,CAAC,SAAS,EAAE;YACd,WAAW,CAAC,QAAQ,CAAC;AACnB,gBAAA,EAAE,EAAE,CAAA,EAAG,aAAa,CAAC,WAAW,CAAO,KAAA,CAAA;AACvC,gBAAA,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,aAAa,CAAC,WAAW;AACjC,gBAAA,KAAK,EAAE;;AAEL,oBAAA,gBAAgB,EAAE,KAAK;;oBAEvB,cAAc,EAAE,aAAa,CAAC,WAAW;AAC1C,iBAAA;AACF,aAAA,CAAC,CAAA;AACH,SAAA;QACD,WAAW,CAAC,gBAAgB,CAAC,CAAG,EAAA,aAAa,CAAC,WAAW,CAAA,KAAA,CAAO,EAAE,YAAY,EAAE;YAC9E,MAAM;YACN,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;YAC1C,wBAAwB;AACxB,YAAA,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC;AACpC,SAAA,CAAC,CAAA;AACH,KAAA;AAAM,SAAA,IAAI,SAAS;QAAE,WAAW,CAAC,WAAW,CAAC,CAAA,EAAG,aAAa,CAAC,WAAW,CAAO,KAAA,CAAA,CAAC,CAAA;AAElF,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAG,EAAA,aAAa,CAAC,WAAW,CAAS,OAAA,CAAA,CAAC,CAAA;IAC/E,IAAI,aAAa,CAAC,cAAc,EAAE;QAChC,IAAI,CAAC,WAAW,EAAE;YAChB,WAAW,CAAC,QAAQ,CAAC;AACnB,gBAAA,EAAE,EAAE,CAAA,EAAG,aAAa,CAAC,WAAW,CAAS,OAAA,CAAA;AACzC,gBAAA,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,aAAa,CAAC,WAAW;AACjC,gBAAA,KAAK,EAAE;;oBAEL,cAAc,EAAE,aAAa,CAAC,aAAa;;oBAE3C,YAAY,EAAE,aAAa,CAAC,WAAW;AACxC,iBAAA;AACF,aAAA,CAAC,CAAA;AACH,SAAA;QACD,WAAW,CAAC,gBAAgB,CAAC,CAAG,EAAA,aAAa,CAAC,WAAW,CAAA,OAAA,CAAS,EAAE,YAAY,EAAE;YAChF,MAAM;YACN,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;YAC5C,wBAAwB;AACxB,YAAA,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC;AACtC,SAAA,CAAC,CAAA;AACH,KAAA;AAAM,SAAA,IAAI,WAAW,EAAE;QAAE,WAAW,CAAC,WAAW,CAAC,CAAA,EAAG,aAAa,CAAC,WAAW,CAAS,OAAA,CAAA,CAAC,CAAA;AAAE,KAAA;AAC5F,CAAC;AAEqB,SAAA,QAAQ,CAA+B,YAAyB,EAAE,MAAoC,EAAA;;;QAM1H,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,MAAM,CAAA;AACjD,QAAA,MAAM,OAAO,GAAG,MAAM,OAAO,SAAS,CAAC,CAAA;AACvC,QAAA,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAA;QAEzB,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,CAAC,KAAK,CAAC,qFAAqF,CAAC,CAAA;YACpG,OAAM;AACP,SAAA;AAED,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE;AACrC,YAAA,eAAe,EAAE,QAAQ,KAAK,kBAAkB,CAAC,MAAM;AACvD,YAAA,WAAW,EAAE,KAAK;AAClB,YAAA,SAAS,EAAE,QAAQ,KAAK,kBAAkB,CAAC,MAAM,GAAG,CAAC,GAAG,GAAG;AAC3D,YAAA,QAAQ,EAAE,QAAQ,KAAK,kBAAkB,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC;AACxD,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,EAAE;AACjD,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,SAAS,EAAE,CAAC,CAAC,YAAY,CACvB,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,EACX,CAAC,EAAE,EAAE,GAAG,CAAC,CACV;AACD,YAAA,kBAAkB,EAAE,CAAC;AACtB,SAAA,CAAC,CAAA;AAEF,QAAA,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,WAAW,EAAE;AACrC,YAAA,UAAU,CAAC,kBAAkB,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AACnD,SAAA;AAED,QAAA,IAAI,KAAsD,CAAA;QAC1D,IAAI,WAAW,GAAQ,IAAI,CAAA;AAE3B,QAAA,QAAQ,QAAQ;YACd,KAAK,kBAAkB,CAAC,QAAQ;;AAE9B,gBAAA,MAAM,QAAQ,GAAG,MAAM,OAAO,aAAa,CAAC,CAAA;;gBAE5C,MAAM,EAAE,kBAAkB,EAAE,GAAG,MAAM,OAAO,+BAA4B,CAAC,CAAA;gBACzE,KAAK,GAAG,kBAAkB,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;AACvD,gBAAA,WAAW,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAC,KAA+C,EAAC,cAAc,kDAAI,CAAA;gBAEjF,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAiB,KAAI;oBACrD,KAAK,CAAC,cAAc,EAAE,CAAA;AACtB,oBAAA,2BAA2B,CAAC,UAAU,EAAE,KAA8C,EAAE,KAAK,CAAC,CAAA;AAChG,iBAAC,CAAC,CAAA;gBACF,MAAK;YACP,KAAK,kBAAkB,CAAC,MAAM;AAC5B,gBAAA,KAAK,GAAG,CAAC,CAAC,SAAS,CAAC,KAAe,CAAC,CAAA;gBACpC,MAAK;AACR,SAAA;AACD,QAAA,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;;;QAIvB,iBAAiB,CAAC,UAAU,CAAC,CAAA;QAE7B,IAAI,WAAW,KAAI,aAAa,KAAb,IAAA,IAAA,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAA,EAAE;AACzC,YAAA,MAAM,MAAM,GAAG,WAAW,CAAC,SAAS,EAAE,CAAA;AACtC,YAAA,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,OAAO,CAACA,cAAgB,EAAE,IAAI,CAAC,CAAA;YACtE,MAAM,iBAAiB,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAA;YAEhE,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,KAAI;AACpC,gBAAA,MAAM,SAAS,GAAG,CAAA,EAAG,aAAa,CAAC,WAAW,OAAO,CAAA;gBACrD,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC7C,gBAAA,IAAI,CAAC,KAAK;oBAAE,OAAM;AAElB,gBAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,qBAAqB,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAA;gBACxF,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AACpC,gBAAA,eAAe,CAAC,OAAO,CAACC,cAAgB,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACjE,aAAC,CAAC,CAAA;AAEF,YAAA,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAK;AAC1B,gBAAA,cAAc,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;AACrC,aAAC,CAAC,CAAA;AACH,SAAA;AAED,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC1E,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAEvC,OAAO;AACL,YAAA,OAAO,EAAE,UAAU;YACnB,KAAK;YACL,UAAU;YACV,QAAQ;SACT,CAAA;;AACF;;;;"}
+{"version":3,"file":"map.js","sources":["../../../../src/components/leaflet-map/modules/map.ts"],"sourcesContent":["import type L from 'leaflet'\nimport { select, Selection } from 'd3-selection'\nimport type { GeoJSONSource, Map } from 'maplibre-gl'\nimport { feature } from 'topojson-client'\n\n// Types\nimport { GenericDataRecord } from 'types/data'\n\n// Config\nimport { LeafletMapConfigInterface } from '../config'\n\n// Local Types\n\n// Utils\nimport { constraintMapView, mapboxglWheelEventThrottled } from '../renderer/mapboxgl-utils'\n\n// Styles\nimport * as s from '../style'\nimport { LeafletMapRenderer } from '../types'\n\nexport const initialMapCenter: L.LatLngExpression = [36, 14]\nexport const initialMapZoom = 1.9\n\nexport function updateTopoJson<T extends GenericDataRecord> (maplibreMap: Map, config: LeafletMapConfigInterface<T>): void {\n  const { topoJSONLayer } = config\n\n  if (topoJSONLayer.sources) {\n    const featureObject = topoJSONLayer.sources?.objects?.[topoJSONLayer.featureName]\n    if (featureObject) {\n      const mapSource = maplibreMap.getSource(topoJSONLayer.featureName) as GeoJSONSource\n      const featureCollection = feature(topoJSONLayer.sources, featureObject)\n      if (mapSource) {\n        mapSource.setData(featureCollection)\n      } else {\n        maplibreMap.addSource(topoJSONLayer.featureName, { type: 'geojson', data: featureCollection })\n      }\n    }\n  }\n\n  const fillLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-area`)\n  if (topoJSONLayer.fillProperty) {\n    if (!fillLayer) {\n      maplibreMap.addLayer({\n        id: `${topoJSONLayer.featureName}-area`,\n        type: 'fill',\n        source: topoJSONLayer.featureName,\n        paint: {\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'fill-antialias': false,\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'fill-opacity': topoJSONLayer.fillOpacity,\n        },\n      })\n    }\n    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-area`, 'fill-color', [\n      'case',\n      ['!', ['has', topoJSONLayer.fillProperty]],\n      'rgba(255, 255, 255, 0)',\n      ['get', topoJSONLayer.fillProperty],\n    ])\n  } else if (fillLayer) maplibreMap.removeLayer(`${topoJSONLayer.featureName}-area`)\n\n  const strokeLayer = maplibreMap.getLayer(`${topoJSONLayer.featureName}-stroke`)\n  if (topoJSONLayer.strokeProperty) {\n    if (!strokeLayer) {\n      maplibreMap.addLayer({\n        id: `${topoJSONLayer.featureName}-stroke`,\n        type: 'line',\n        source: topoJSONLayer.featureName,\n        paint: {\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'line-opacity': topoJSONLayer.strokeOpacity,\n          // eslint-disable-next-line @typescript-eslint/naming-convention\n          'line-width': topoJSONLayer.strokeWidth,\n        },\n      })\n    }\n    maplibreMap.setPaintProperty(`${topoJSONLayer.featureName}-stroke`, 'line-color', [\n      'case',\n      ['!', ['has', topoJSONLayer.strokeProperty]],\n      'rgba(255, 255, 255, 0)',\n      ['get', topoJSONLayer.strokeProperty],\n    ])\n  } else if (strokeLayer) { maplibreMap.removeLayer(`${topoJSONLayer.featureName}-stroke`) }\n}\n\nexport async function setupMap<T extends GenericDataRecord> (mapContainer: HTMLElement, config: LeafletMapConfigInterface<T>): Promise<{\n  leaflet: L.Map;\n  layer: L.Layer;\n  svgOverlay: Selection<SVGSVGElement, unknown, null, undefined>;\n  svgGroup: Selection<SVGGElement, unknown, SVGElement, undefined>;\n}> {\n  const { style, renderer, topoJSONLayer } = config\n  const leaflet = await import('leaflet')\n  const L = leaflet.default\n\n  if (!style) {\n    console.error('Unovis | Leaflet Map: Please provide style settings in the map configuration object')\n    return\n  }\n\n  const leafletMap = L.map(mapContainer, {\n    scrollWheelZoom: renderer === LeafletMapRenderer.Raster, // We define custom scroll event for MapboxGL to enabling smooth zooming\n    zoomControl: false,\n    zoomDelta: renderer === LeafletMapRenderer.Raster ? 1 : 0.5,\n    zoomSnap: renderer === LeafletMapRenderer.Raster ? 1 : 0,\n    attributionControl: true,\n    center: initialMapCenter,\n    zoom: initialMapZoom,\n    minZoom: Math.sqrt(mapContainer.offsetWidth) / 17,\n    maxZoom: 23,\n    maxBounds: L.latLngBounds(\n      [-75, -290],\n      [85, 290]\n    ),\n    maxBoundsViscosity: 1,\n  })\n\n  for (const attr of config.attribution) {\n    leafletMap.attributionControl.addAttribution(attr)\n  }\n\n  let layer: L.Layer | (L.Layer & { getMaplibreMap(): Map })\n  let maplibreMap: Map = null\n\n  switch (renderer) {\n    case LeafletMapRenderer.MapLibre:\n      // eslint-disable-next-line no-case-declarations\n      const maplibre = await import('maplibre-gl')\n      // eslint-disable-next-line no-case-declarations\n      const { getMaplibreGLLayer } = await import('../renderer/mapboxgl-layer')\n      layer = getMaplibreGLLayer(config, L, maplibre.default)\n      layer.addTo(leafletMap)\n      maplibreMap = (layer as ReturnType<typeof getMaplibreGLLayer>).getMaplibreMap?.()\n\n      select(mapContainer).on('wheel', (event: WheelEvent) => {\n        event.preventDefault()\n        mapboxglWheelEventThrottled(leafletMap, layer as (L.Layer & { getMaplibreMap(): Map }), event)\n      })\n      break\n    case LeafletMapRenderer.Raster:\n      layer = L.tileLayer(style as string)\n      layer.addTo(leafletMap)\n      break\n  }\n  // leaflet-mapbox-gl has a layer positioning issue on far zoom levels which leads to having wrong\n  //   map points projection. We constrain the view to prevent that.\n  constraintMapView(leafletMap)\n\n  if (maplibreMap && topoJSONLayer?.sources) {\n    const canvas = maplibreMap.getCanvas()\n    const canvasSelection = select(canvas).classed(s.mapboxglCanvas, true)\n    const tilePaneSelection = select(leafletMap.getPanes().tilePane)\n\n    maplibreMap.on('mousemove', (event) => {\n      const layerName = `${topoJSONLayer.featureName}-area`\n      const layer = maplibreMap.getLayer(layerName)\n      if (!layer) return\n\n      const features = maplibreMap.queryRenderedFeatures(event.point, { layers: [layerName] })\n      tilePaneSelection.datum(features[0])\n      canvasSelection.classed(s.onFeatureHover, Boolean(features[0]))\n    })\n\n    maplibreMap.on('load', () => {\n      updateTopoJson(maplibreMap, config)\n    })\n  }\n\n  const svgOverlay = select(leafletMap.getPanes().overlayPane).append('svg')\n  const svgGroup = svgOverlay.append('g')\n\n  return {\n    leaflet: leafletMap,\n    layer,\n    svgOverlay,\n    svgGroup,\n  }\n}\n"],"names":["s.mapboxglCanvas","s.onFeatureHover"],"mappings":"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"}

package/components/scatter/index.d.ts

@@ -15,6 +15,7 @@ export declare class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfig
     };
     private _pointData;
     private _points;
+    private _sizeScale;
     private _collideLabelsAnimFrameId;
     constructor(config?: ScatterConfigInterface<Datum>);
     setConfig(config: ScatterConfigInterface<Datum>): void;

package/components/scatter/index.js

@@ -1,7 +1,7 @@
 import { select } from 'd3-selection';
 import { min, max } from 'd3-array';
 import { XYComponentCore } from '../../core/xy-component/index.js';
-import { flatten, getValue, isNumber, getString, getExtent, isArray, getNumber } from '../../utils/data.js';
+import { flatten, isNumber, getString, getExtent, isArray, getNumber, getValue } from '../../utils/data.js';
 import { getColor } from '../../utils/color.js';
 import { smartTransition } from '../../utils/d3.js';
 import { getCSSVariableValueInPixels } from '../../utils/misc.js';
@@ -43,15 +43,20 @@ class Scatter extends XYComponentCore {
         const xRangeEnd = this.xScale.range()[1];
         const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element);
         const extent = pointDataFlat.reduce((ext, d) => {
-            const labelPosition = getValue(d, this.config.labelPosition, d._point.pointIndex);
-            const labelBBox = getEstimatedLabelBBox(d, labelPosition, this.xScale, this.yScale, fontSizePx);
             const x = this.xScale(d._point.xValue);
             const y = this.yScale(d._point.yValue);
             const r = d._point.sizePx / 2;
-            ext.minX = Math.min(ext.minX, x - r, labelBBox.x);
-            ext.maxX = Math.max(ext.maxX, x + r, labelBBox.x + labelBBox.width);
-            ext.minY = Math.min(ext.minY, y - r, labelBBox.y);
-            ext.maxY = Math.max(ext.maxY, y + r, labelBBox.y + labelBBox.height);
+            ext.minX = Math.min(ext.minX, x - r);
+            ext.maxX = Math.max(ext.maxX, x + r);
+            ext.minY = Math.min(ext.minY, y - r);
+            ext.maxY = Math.max(ext.maxY, y + r);
+            if (d._point.label) {
+                const labelBBox = getEstimatedLabelBBox(d, d._point.labelPosition, this.xScale, this.yScale, fontSizePx);
+                ext.minX = Math.min(ext.minX, labelBBox.x);
+                ext.maxX = Math.max(ext.maxX, labelBBox.x + labelBBox.width);
+                ext.minY = Math.min(ext.minY, labelBBox.y);
+                ext.maxY = Math.max(ext.maxY, labelBBox.y + labelBBox.height);
+            }
             return ext;
         }, {
             minX: Number.POSITIVE_INFINITY,
@@ -109,8 +114,9 @@ class Scatter extends XYComponentCore {
     _updateSizeScale() {
         var _a;
         const { config, datamodel } = this;
-        config.sizeScale.domain(getExtent(datamodel.data, config.size));
-        config.sizeScale.range((_a = config.sizeRange) !== null && _a !== void 0 ? _a : [0, 0]);
+        this._sizeScale = config.sizeScale.copy();
+        this._sizeScale.domain(getExtent(datamodel.data, config.size));
+        this._sizeScale.range((_a = config.sizeRange) !== null && _a !== void 0 ? _a : [0, 0]);
     }
     _getOnScreenData() {
         const { config, datamodel: { data } } = this;
@@ -118,7 +124,7 @@ class Scatter extends XYComponentCore {
         const yDomain = this.yScale.domain().map((d) => +d); // Convert Date to number
         const yAccessors = (isArray(config.y) ? config.y : [config.y]);
         const maxSizeValue = max(flatten(yAccessors.map((y, j) => data === null || data === void 0 ? void 0 : data.map(d => getNumber(d, config.size, j)))));
-        const maxSizePx = config.sizeRange ? config.sizeScale(maxSizeValue) : maxSizeValue;
+        const maxSizePx = config.sizeRange ? this._sizeScale(maxSizeValue) : maxSizeValue;
         const maxSizeXDomain = this.xScale.invert(maxSizePx) - this.xScale.invert(0);
         const maxSizeYDomain = Math.abs(this.yScale.invert(maxSizePx) - this.yScale.invert(0));
         return yAccessors.map((y, j) => {
@@ -127,7 +133,7 @@ class Scatter extends XYComponentCore {
                 const xValue = getNumber(d, config.x, i);
                 const yValue = getNumber(d, y, j);
                 const pointSize = getNumber(d, config.size, i);
-                const pointSizeScaled = config.sizeRange ? config.sizeScale(pointSize) : pointSize;
+                const pointSizeScaled = config.sizeRange ? this._sizeScale(pointSize) : pointSize;
                 const pointSizeXDomain = this.xScale.invert(pointSizeScaled) - this.xScale.invert(0);
                 const pointSizeYDomain = Math.abs(this.yScale.invert(pointSizeScaled) - this.yScale.invert(0));
                 if (((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&
@@ -143,7 +149,8 @@ class Scatter extends XYComponentCore {
                             strokeWidthPx: getNumber(d, config.strokeWidth, j),
                             shape: getString(d, config.shape, j),
                             label: getString(d, config.label, j),
-                            labelColor: getColor(d, config.labelColor, j),
+                            labelColor: getColor(d, config.labelColor, j, true),
+                            labelPosition: getValue(d, config.labelPosition, i),
                             cursor: getString(d, config.cursor, j),
                             groupIndex: j,
                             pointIndex: i,

package/components/scatter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterDefaultConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = ScatterDefaultConfig as ScatterConfigInterface<Datum>\n  public config: ScatterConfigInterface<Datum> = this._defaultConfig\n\n  events = {\n    [Scatter.selectors.point]: {\n      mouseenter: this._onPointMouseOver.bind(this),\n      mouseleave: this._onPointMouseOut.bind(this),\n    },\n  }\n\n  private _pointData: ScatterPoint<Datum>[][] = []\n  private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n  private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n  constructor (config?: ScatterConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  setConfig (config: ScatterConfigInterface<Datum>): void {\n    super.setConfig(config)\n    this._updateSizeScale()\n  }\n\n  setData (data: Datum[]): void {\n    super.setData(data)\n    this._updateSizeScale()\n  }\n\n  get bleed (): Spacing {\n    this._pointData = this._getOnScreenData()\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n    const yRangeStart = min(this.yScale.range())\n    const yRangeEnd = max(this.yScale.range())\n    const xRangeStart = this.xScale.range()[0]\n    const xRangeEnd = this.xScale.range()[1]\n\n    const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n    const extent = pointDataFlat.reduce((ext, d) => {\n      const labelPosition = getValue(d, this.config.labelPosition, d._point.pointIndex)\n      const labelBBox = getEstimatedLabelBBox(d, labelPosition as Position, this.xScale, this.yScale, fontSizePx)\n      const x = this.xScale(d._point.xValue)\n      const y = this.yScale(d._point.yValue)\n      const r = d._point.sizePx / 2\n\n      ext.minX = Math.min(ext.minX, x - r, labelBBox.x)\n      ext.maxX = Math.max(ext.maxX, x + r, labelBBox.x + labelBBox.width)\n      ext.minY = Math.min(ext.minY, y - r, labelBBox.y)\n      ext.maxY = Math.max(ext.maxY, y + r, labelBBox.y + labelBBox.height)\n      return ext\n    }, {\n      minX: Number.POSITIVE_INFINITY,\n      maxX: Number.NEGATIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n    })\n\n    const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n    const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n    const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n    const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n    const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n    return { top, bottom, left, right }\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    // Groups\n    const pointGroups = this.g\n      .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n      .data(this._pointData)\n\n    const pointGroupsEnter = pointGroups\n      .enter()\n      .append('g')\n      .attr('class', s.pointGroup)\n\n    const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n    smartTransition(pointGroupsMerged, duration)\n      .style('opacity', 1)\n\n    const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n    smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n    // Points\n    const points = pointGroupsMerged\n      .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n      .data(\n        d => d,\n        d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n      )\n\n    const pointsEnter = points.enter().append('g')\n      .attr('class', s.point)\n    createPoints(pointsEnter, this.xScale, this.yScale)\n\n    this._points = pointsEnter.merge(points)\n    updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n    removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n    // Take care of overlapping labels\n    this._resolveLabelOverlap()\n  }\n\n  private _resolveLabelOverlap (): void {\n    if (!this.config.labelHideOverlapping) {\n      const label = this._points.selectAll<SVGTextElement, ScatterPoint<Datum>>('text')\n      label.attr('opacity', null)\n      return\n    }\n\n    cancelAnimationFrame(this._collideLabelsAnimFrameId)\n    this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n      collideLabels(this._points, this.config, this.xScale, this.yScale)\n    })\n  }\n\n  private _updateSizeScale (): void {\n    const { config, datamodel } = this\n\n    config.sizeScale.domain(getExtent(datamodel.data, config.size))\n    config.sizeScale.range(config.sizeRange ?? [0, 0])\n  }\n\n  private _getOnScreenData (): ScatterPoint<Datum>[][] {\n    const { config, datamodel: { data } } = this\n\n    const xDomain = this.xScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yDomain = this.yScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n    const maxSizePx = config.sizeRange ? config.sizeScale(maxSizeValue) : maxSizeValue\n    const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n    const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n    return yAccessors.map((y, j) => {\n      return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n        const xValue = getNumber(d, config.x, i)\n        const yValue = getNumber(d, y, j)\n        const pointSize = getNumber(d, config.size, i)\n        const pointSizeScaled = config.sizeRange ? config.sizeScale(pointSize) : pointSize\n        const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n        const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n        if (\n          ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n          ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n          ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n          ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n        ) {\n          acc.push({\n            ...d,\n            _point: {\n              xValue: xValue,\n              yValue: yValue,\n              sizePx: pointSizeScaled,\n              color: getColor(d, config.color, j),\n              strokeColor: getColor(d, config.strokeColor, j, true),\n              strokeWidthPx: getNumber(d, config.strokeWidth, j),\n              shape: getString(d, config.shape, j) as SymbolType,\n              label: getString(d, config.label, j),\n              labelColor: getColor(d, config.labelColor, j),\n              cursor: getString(d, config.cursor, j),\n              groupIndex: j,\n              pointIndex: i,\n            },\n          })\n        }\n\n        return acc\n      }, []) ?? []\n    })\n  }\n\n  private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const point = select(event.target as SVGGElement)\n    const pointNode = point.node() as ScatterPointGroupNode | null\n    if (pointNode) pointNode._forceShowLabel = true\n\n    point.raise()\n    this._resolveLabelOverlap()\n  }\n\n  private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n    if (pointNode) delete pointNode._forceShowLabel\n\n    this._resolveLabelOverlap()\n  }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/scatter/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { max, min } from 'd3-array'\n\n// Core\nimport { XYComponentCore } from 'core/xy-component'\n\n// Utils\nimport { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'\nimport { getColor } from 'utils/color'\nimport { smartTransition } from 'utils/d3'\nimport { getCSSVariableValueInPixels } from 'utils/misc'\n\n// Types\nimport { Spacing } from 'types/spacing'\nimport { SymbolType } from 'types/symbol'\nimport { NumericAccessor } from 'types/accessor'\nimport { Position } from 'types/position'\nimport { ContinuousScale } from 'types/scale'\n\n// Local Types\nimport { ScatterPointGroupNode, ScatterPoint } from './types'\n\n// Config\nimport { ScatterDefaultConfig, ScatterConfigInterface } from './config'\n\n// Modules\nimport { createPoints, updatePoints, removePoints } from './modules/point'\nimport { collideLabels, getEstimatedLabelBBox } from './modules/utils'\n\n// Styles\nimport * as s from './style'\n\n\nexport class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = ScatterDefaultConfig as ScatterConfigInterface<Datum>\n  public config: ScatterConfigInterface<Datum> = this._defaultConfig\n\n  events = {\n    [Scatter.selectors.point]: {\n      mouseenter: this._onPointMouseOver.bind(this),\n      mouseleave: this._onPointMouseOut.bind(this),\n    },\n  }\n\n  private _pointData: ScatterPoint<Datum>[][] = []\n  private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>\n  private _sizeScale: ContinuousScale\n  private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>\n\n  constructor (config?: ScatterConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n  }\n\n  setConfig (config: ScatterConfigInterface<Datum>): void {\n    super.setConfig(config)\n    this._updateSizeScale()\n  }\n\n  setData (data: Datum[]): void {\n    super.setData(data)\n    this._updateSizeScale()\n  }\n\n  get bleed (): Spacing {\n    this._pointData = this._getOnScreenData()\n    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)\n\n    const yRangeStart = min(this.yScale.range())\n    const yRangeEnd = max(this.yScale.range())\n    const xRangeStart = this.xScale.range()[0]\n    const xRangeEnd = this.xScale.range()[1]\n\n    const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)\n\n    const extent = pointDataFlat.reduce((ext, d) => {\n      const x = this.xScale(d._point.xValue)\n      const y = this.yScale(d._point.yValue)\n      const r = d._point.sizePx / 2\n\n      ext.minX = Math.min(ext.minX, x - r)\n      ext.maxX = Math.max(ext.maxX, x + r)\n      ext.minY = Math.min(ext.minY, y - r)\n      ext.maxY = Math.max(ext.maxY, y + r)\n\n      if (d._point.label) {\n        const labelBBox = getEstimatedLabelBBox(d, d._point.labelPosition, this.xScale, this.yScale, fontSizePx)\n        ext.minX = Math.min(ext.minX, labelBBox.x)\n        ext.maxX = Math.max(ext.maxX, labelBBox.x + labelBBox.width)\n        ext.minY = Math.min(ext.minY, labelBBox.y)\n        ext.maxY = Math.max(ext.maxY, labelBBox.y + labelBBox.height)\n      }\n      return ext\n    }, {\n      minX: Number.POSITIVE_INFINITY,\n      maxX: Number.NEGATIVE_INFINITY,\n      minY: Number.POSITIVE_INFINITY,\n      maxY: Number.NEGATIVE_INFINITY,\n    })\n\n    const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities\n    const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0\n    const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0\n    const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0\n    const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0\n\n    return { top, bottom, left, right }\n  }\n\n  _render (customDuration?: number): void {\n    const { config } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    // Groups\n    const pointGroups = this.g\n      .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)\n      .data(this._pointData)\n\n    const pointGroupsEnter = pointGroups\n      .enter()\n      .append('g')\n      .attr('class', s.pointGroup)\n\n    const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)\n    smartTransition(pointGroupsMerged, duration)\n      .style('opacity', 1)\n\n    const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)\n    smartTransition(pointGroupExit, duration).style('opacity', 0).remove()\n\n    // Points\n    const points = pointGroupsMerged\n      .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)\n      .data(\n        d => d,\n        d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`\n      )\n\n    const pointsEnter = points.enter().append('g')\n      .attr('class', s.point)\n    createPoints(pointsEnter, this.xScale, this.yScale)\n\n    this._points = pointsEnter.merge(points)\n    updatePoints(this._points, config, this.xScale, this.yScale, duration)\n\n    removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)\n\n    // Take care of overlapping labels\n    this._resolveLabelOverlap()\n  }\n\n  private _resolveLabelOverlap (): void {\n    if (!this.config.labelHideOverlapping) {\n      const label = this._points.selectAll<SVGTextElement, ScatterPoint<Datum>>('text')\n      label.attr('opacity', null)\n      return\n    }\n\n    cancelAnimationFrame(this._collideLabelsAnimFrameId)\n    this._collideLabelsAnimFrameId = requestAnimationFrame(() => {\n      collideLabels(this._points, this.config, this.xScale, this.yScale)\n    })\n  }\n\n  private _updateSizeScale (): void {\n    const { config, datamodel } = this\n\n    this._sizeScale = config.sizeScale.copy()\n    this._sizeScale.domain(getExtent(datamodel.data, config.size))\n    this._sizeScale.range(config.sizeRange ?? [0, 0])\n  }\n\n  private _getOnScreenData (): ScatterPoint<Datum>[][] {\n    const { config, datamodel: { data } } = this\n\n    const xDomain = this.xScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yDomain = this.yScale.domain().map((d: number | Date) => +d) // Convert Date to number\n    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]\n\n    const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))\n    const maxSizePx = config.sizeRange ? this._sizeScale(maxSizeValue) : maxSizeValue\n\n    const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)\n    const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))\n\n    return yAccessors.map((y, j) => {\n      return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {\n        const xValue = getNumber(d, config.x, i)\n        const yValue = getNumber(d, y, j)\n        const pointSize = getNumber(d, config.size, i)\n        const pointSizeScaled = config.sizeRange ? this._sizeScale(pointSize) : pointSize\n        const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)\n        const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))\n\n        if (\n          ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&\n          ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&\n          ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&\n          ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))\n        ) {\n          acc.push({\n            ...d,\n            _point: {\n              xValue: xValue,\n              yValue: yValue,\n              sizePx: pointSizeScaled,\n              color: getColor(d, config.color, j),\n              strokeColor: getColor(d, config.strokeColor, j, true),\n              strokeWidthPx: getNumber(d, config.strokeWidth, j),\n              shape: getString(d, config.shape, j) as SymbolType,\n              label: getString(d, config.label, j),\n              labelColor: getColor(d, config.labelColor, j, true),\n              labelPosition: getValue(d, config.labelPosition, i) as Position,\n              cursor: getString(d, config.cursor, j),\n              groupIndex: j,\n              pointIndex: i,\n            },\n          })\n        }\n\n        return acc\n      }, []) ?? []\n    })\n  }\n\n  private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const point = select(event.target as SVGGElement)\n    const pointNode = point.node() as ScatterPointGroupNode | null\n    if (pointNode) pointNode._forceShowLabel = true\n\n    point.raise()\n    this._resolveLabelOverlap()\n  }\n\n  private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {\n    const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null\n    if (pointNode) delete pointNode._forceShowLabel\n\n    this._resolveLabelOverlap()\n  }\n}\n"],"names":["s.pointGroup","pointGroupExit","s.pointGroupExit","s.point","s"],"mappings":"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"}

package/components/scatter/modules/point.js

@@ -6,7 +6,6 @@ import { Symbol } from '../../../types/symbol.js';
 import { smartTransition } from '../../../utils/d3.js';
 import { isStringCSSVariable, getCSSVariableValue } from '../../../utils/misc.js';
 import { hexToBrightness } from '../../../utils/color.js';
-import { getValue } from '../../../utils/data.js';
 import { getCentralLabelFontSize, getLabelShift } from './utils.js';
 
 function createPoints(selection, xScale, yScale) {
@@ -20,7 +19,6 @@ function updatePoints(selection, config, xScale, yScale, duration) {
     const symbolGenerator = symbol();
     selection.each((d, index, elements) => {
         var _a, _b, _c, _d;
-        const i = d._point.pointIndex;
         const group = select(elements[index]);
         const label = group.select('text');
         const path = group.select('path');
@@ -40,7 +38,7 @@ function updatePoints(selection, config, xScale, yScale, duration) {
             .style('stroke', pointStrokeColor)
             .style('stroke-width', `${pointStrokeWidth}px`);
         // Label
-        const labelPosition = getValue(d, config.labelPosition, i);
+        const labelPosition = d._point.labelPosition;
         const isLabelPositionCenter = (labelPosition !== Position.Top) && (labelPosition !== Position.Bottom) &&
             (labelPosition !== Position.Left) && (labelPosition !== Position.Right);
         const pointLabelText = (_c = d._point.label) !== null && _c !== void 0 ? _c : '';