@unovis/ts 1.5.1-xplg.1 → 1.5.1-xplg.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/annotations/style.js.map +1 -1
- package/components/area/style.js.map +1 -1
- package/components/axis/style.js.map +1 -1
- package/components/brush/style.js.map +1 -1
- package/components/bullet-legend/style.js.map +1 -1
- package/components/chord-diagram/style.js.map +1 -1
- package/components/crosshair/style.js.map +1 -1
- package/components/donut/style.js.map +1 -1
- package/components/flow-legend/style.js.map +1 -1
- package/components/free-brush/style.js.map +1 -1
- package/components/graph/config.d.ts +6 -1
- package/components/graph/config.js +2 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +2 -2
- package/components/graph/index.js +37 -14
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/link/style.js.map +1 -1
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/modules/panel/style.js.map +1 -1
- package/components/graph/style.js.map +1 -1
- package/components/graph/types.d.ts +7 -0
- package/components/graph/types.js +10 -2
- package/components/graph/types.js.map +1 -1
- package/components/grouped-bar/style.js.map +1 -1
- package/components/leaflet-flow-map/config.js +1 -0
- package/components/leaflet-flow-map/config.js.map +1 -1
- package/components/leaflet-flow-map/shaders.js.map +1 -1
- package/components/leaflet-map/config.js +1 -0
- package/components/leaflet-map/config.js.map +1 -1
- package/components/leaflet-map/modules/map.js +3 -3
- package/components/leaflet-map/modules/map.js.map +1 -1
- package/components/leaflet-map/renderer/leaflet-maplibre-gl.js.map +1 -1
- package/components/leaflet-map/style.js.map +1 -1
- package/components/line/style.js.map +1 -1
- package/components/nested-donut/style.js.map +1 -1
- package/components/rolling-pin-legend/config.d.ts +19 -0
- package/components/rolling-pin-legend/config.js +9 -0
- package/components/rolling-pin-legend/config.js.map +1 -0
- package/components/rolling-pin-legend/index.d.ts +16 -0
- package/components/rolling-pin-legend/index.js +63 -0
- package/components/rolling-pin-legend/index.js.map +1 -0
- package/components/rolling-pin-legend/style.d.ts +5 -0
- package/components/rolling-pin-legend/style.js +40 -0
- package/components/rolling-pin-legend/style.js.map +1 -0
- package/components/rolling-pin-legend/types.d.ts +1 -0
- package/components/sankey/modules/label.js.map +1 -1
- package/components/sankey/modules/link.js.map +1 -1
- package/components/sankey/style.js.map +1 -1
- package/components/scatter/style.js.map +1 -1
- package/components/stacked-bar/style.js.map +1 -1
- package/components/timeline/index.js +12 -8
- package/components/timeline/index.js.map +1 -1
- package/components/timeline/style.js.map +1 -1
- package/components/tooltip/style.js.map +1 -1
- package/components/topojson-map/index.js.map +1 -1
- package/components/topojson-map/style.js.map +1 -1
- package/components/treemap/style.js.map +1 -1
- package/components/vis-controls/style.js.map +1 -1
- package/components/xy-labels/style.js.map +1 -1
- package/components.d.ts +2 -0
- package/components.js +1 -0
- package/components.js.map +1 -1
- package/containers/xy-container/index.js.map +1 -1
- package/core/container/config.js +1 -0
- package/core/container/config.js.map +1 -1
- package/index.js +2 -1
- package/index.js.map +1 -1
- package/maps/ind-regions.json.js +1 -1
- package/maps/us-counties.json.js +8 -8
- package/package.json +1 -1
- package/styles/index.js.map +1 -1
- package/styles/patterns.js.map +1 -1
- package/styles/sizes.js.map +1 -1
- package/types.js +3 -2
- package/types.js.map +1 -1
- package/utils/path.js.map +1 -1
- package/utils/text.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n '--vis-annotations-text-color': '#282C34',\n\n '--vis-annotations-connector-stroke-color': '#444',\n '--vis-annotations-connector-stroke-width': '1px',\n '--vis-annotations-connector-stroke-dasharray': 'none',\n\n '--vis-annotations-subject-stroke-color': '#444',\n '--vis-annotations-subject-fill-color': 'none',\n '--vis-annotations-subject-stroke-dasharray': 'none',\n\n '--vis-dark-annotations-text-color': '#e8e9ef',\n '--vis-dark-annotations-connector-stroke-color': '#fff',\n '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n label: annotation;\n`\n\nexport const annotationSubject = css`\n label: annotationSubject;\n\n line {\n stroke: var(${variables.annotationsConnectorStrokeColor});\n stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n }\n\n circle {\n stroke: var(${variables.annotationsSubjectStrokeColor});\n fill: var(${variables.annotationsSubjectFillColor});\n stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n }\n`\n\nexport const annotationContent = css`\n label: annotationContent;\n > text {\n fill: var(--vis-annotations-text-color);\n }\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/annotations/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n '--vis-annotations-text-color': '#282C34',\n\n '--vis-annotations-connector-stroke-color': '#444',\n '--vis-annotations-connector-stroke-width': '1px',\n '--vis-annotations-connector-stroke-dasharray': 'none',\n\n '--vis-annotations-subject-stroke-color': '#444',\n '--vis-annotations-subject-fill-color': 'none',\n '--vis-annotations-subject-stroke-dasharray': 'none',\n\n '--vis-dark-annotations-text-color': '#e8e9ef',\n '--vis-dark-annotations-connector-stroke-color': '#fff',\n '--vis-dark-annotations-subject-stroke-color': '#fff',\n}\n\nexport const root = css`\n label: annotations-component;\n`\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const annotation = css`\n label: annotation;\n`\n\nexport const annotationSubject = css`\n label: annotationSubject;\n\n line {\n stroke: var(${variables.annotationsConnectorStrokeColor});\n stroke-width: var(${variables.annotationsConnectorStrokeWidth});\n stroke-dasharray: var(${variables.annotationsConnectorStrokeDasharray});\n }\n\n circle {\n stroke: var(${variables.annotationsSubjectStrokeColor});\n fill: var(${variables.annotationsSubjectFillColor});\n stroke-dasharray: var(${variables.annotationsSubjectStrokeDasharray});\n }\n`\n\nexport const annotationContent = css`\n label: annotationContent;\n > text {\n fill: var(--vis-annotations-text-color);\n }\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,8BAA8B,EAAE,SAAS;AAEzC,IAAA,0CAA0C,EAAE,MAAM;AAClD,IAAA,0CAA0C,EAAE,KAAK;AACjD,IAAA,8CAA8C,EAAE,MAAM;AAEtD,IAAA,wCAAwC,EAAE,MAAM;AAChD,IAAA,sCAAsC,EAAE,MAAM;AAC9C,IAAA,4CAA4C,EAAE,MAAM;AAEpD,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,+CAA+C,EAAE,MAAM;AACvD,IAAA,6CAA6C,EAAE,MAAM;CACtD,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;MACY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;AAIlB,gBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACnC,sBAAA,EAAA,SAAS,CAAC,+BAA+B,CAAA;AACrC,0BAAA,EAAA,SAAS,CAAC,mCAAmC,CAAA;;;;AAIvD,gBAAA,EAAA,SAAS,CAAC,6BAA6B,CAAA;AACzC,cAAA,EAAA,SAAS,CAAC,2BAA2B,CAAA;AACzB,0BAAA,EAAA,SAAS,CAAC,iCAAiC,CAAA;;EAEtE;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-area-cursor: default;\n --vis-area-fill-opacity: 1;\n --vis-area-stroke-color: none;\n --vis-area-stroke-width: 0px;\n --vis-area-stroke-dasharray: none;\n --vis-area-stroke-opacity: 1;\n --vis-area-hover-fill-opacity: none;\n --vis-area-hover-stroke-width: none;\n\n /* Dark Theme */\n --vis-dark-area-stroke-color: none;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n }\n\n`\nexport const area = css`\n label: area;\n cursor: var(--vis-area-cursor);\n fill-opacity: var(--vis-area-fill-opacity);\n stroke-width: var(--vis-area-stroke-width);\n stroke-dasharray: var(--vis-area-stroke-dasharray);\n stroke: var(--vis-area-stroke-color);\n stroke-opacity: var(--vis-area-stroke-opacity);\n\n &:hover {\n fill-opacity: var(--vis-area-hover-fill-opacity);\n stroke-width: var(--vis-area-hover-stroke-width);\n }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/area/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\n\nexport const root = css`\n label: area-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-area-cursor: default;\n --vis-area-fill-opacity: 1;\n --vis-area-stroke-color: none;\n --vis-area-stroke-width: 0px;\n --vis-area-stroke-dasharray: none;\n --vis-area-stroke-opacity: 1;\n --vis-area-hover-fill-opacity: none;\n --vis-area-hover-stroke-width: none;\n\n /* Dark Theme */\n --vis-dark-area-stroke-color: none;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-area-stroke-color: var(--vis-dark-area-stroke-color);\n }\n\n`\nexport const area = css`\n label: area;\n cursor: var(--vis-area-cursor);\n fill-opacity: var(--vis-area-fill-opacity);\n stroke-width: var(--vis-area-stroke-width);\n stroke-dasharray: var(--vis-area-stroke-dasharray);\n stroke: var(--vis-area-stroke-color);\n stroke-opacity: var(--vis-area-stroke-opacity);\n\n &:hover {\n fill-opacity: var(--vis-area-hover-fill-opacity);\n stroke-width: var(--vis-area-hover-stroke-width);\n }\n`\n"],"names":[],"mappings":";;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;AAepB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;EAI7B;AACM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-axis-font-family: */\n --vis-axis-tick-color: #e8e9ef;\n /* --vis-axis-domain-color: // Undefined by default to allow fallback to var(--vis-axis-tick-color) */\n --vis-axis-grid-color: #e8e9ef;\n --vis-axis-label-color: #6c778c;\n --vis-axis-tick-label-color: #6c778c;\n --vis-axis-tick-label-font-size: 12px;\n --vis-axis-tick-label-cursor: default;\n --vis-axis-tick-label-text-decoration: none;\n --vis-axis-label-font-size: 14px;\n --vis-axis-tick-line-width: 1px;\n --vis-axis-tick-label-hide-transition: opacity 400ms ease-in-out;\n --vis-axis-grid-line-width: 1px;\n /* --vis-axis-domain-line-width: // Undefined by default to allow fallback to var(--vis-axis-grid-line-width) */\n\n --vis-dark-axis-tick-color: #6c778c;\n /* --vis-dark-axis-domain-color: // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color) */\n --vis-dark-axis-tick-label-color: #e8e9ef;\n --vis-dark-axis-grid-color: #6c778c;\n --vis-dark-axis-label-color: #fefefe;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n --vis-axis-domain-color: var(--vis-dark-axis-domain-color);\n --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n --vis-axis-label-color: var(--vis-dark-axis-label-color);\n }\n`\n\nexport const hideTickLine = css`\n label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n label: hide-domain;\n`\n\nexport const axis = css`\n label: axis;\n\n user-select: none;\n\n .domain {\n stroke: var(--vis-axis-domain-color, var(--vis-axis-tick-color));\n stroke-width: var(--vis-axis-domain-line-width, var(--vis-axis-grid-line-width));\n }\n\n &${`.${hideTickLine}`} {\n .tick > line {\n opacity: 0;\n }\n }\n\n &${`.${hideDomain}`} {\n .domain {\n opacity: 0;\n }\n }\n`\n\nexport const grid = css`\n label: grid;\n\n .domain {\n opacity: 0;\n }\n\n line {\n stroke: var(--vis-axis-grid-color);\n stroke-width: var(--vis-axis-grid-line-width);\n }\n`\n\nexport const tick = css`\n label: tick;\n\n stroke: none;\n font-size: var(--vis-axis-tick-label-font-size);\n\n line {\n stroke: var(--vis-axis-tick-color);\n stroke-width: var(--vis-axis-tick-line-width);\n }\n\n text {\n fill: var(--vis-axis-tick-label-color);\n cursor: var(--vis-axis-tick-label-cursor);\n font-family: var(--vis-axis-font-family, var(--vis-font-family));\n text-decoration: var(--vis-axis-tick-label-text-decoration);\n stroke: none;\n }\n`\n\nexport const label = css`\n label: label;\n fill: var(--vis-axis-label-color);\n font-size: var(--vis-axis-label-font-size);\n font-family: var(--vis-axis-font-family, var(--vis-font-family));\n text-anchor: middle;\n`\n\nexport const tickLabel = css`\n label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n label: tick-label-hideable;\n opacity: 0;\n transition: var(--vis-axis-tick-label-hide-transition);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/axis/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: axis-component;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-axis-font-family: */\n --vis-axis-tick-color: #e8e9ef;\n /* --vis-axis-domain-color: // Undefined by default to allow fallback to var(--vis-axis-tick-color) */\n --vis-axis-grid-color: #e8e9ef;\n --vis-axis-label-color: #6c778c;\n --vis-axis-tick-label-color: #6c778c;\n --vis-axis-tick-label-font-size: 12px;\n --vis-axis-tick-label-cursor: default;\n --vis-axis-tick-label-text-decoration: none;\n --vis-axis-label-font-size: 14px;\n --vis-axis-tick-line-width: 1px;\n --vis-axis-tick-label-hide-transition: opacity 400ms ease-in-out;\n --vis-axis-grid-line-width: 1px;\n /* --vis-axis-domain-line-width: // Undefined by default to allow fallback to var(--vis-axis-grid-line-width) */\n\n --vis-dark-axis-tick-color: #6c778c;\n /* --vis-dark-axis-domain-color: // Undefined by default to allow fallback to var(--vis-dark-axis-tick-color) */\n --vis-dark-axis-tick-label-color: #e8e9ef;\n --vis-dark-axis-grid-color: #6c778c;\n --vis-dark-axis-label-color: #fefefe;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-axis-tick-color: var(--vis-dark-axis-tick-color);\n --vis-axis-domain-color: var(--vis-dark-axis-domain-color);\n --vis-axis-tick-label-color: var(--vis-dark-axis-tick-label-color);\n --vis-axis-grid-color: var(--vis-dark-axis-grid-color);\n --vis-axis-label-color: var(--vis-dark-axis-label-color);\n }\n`\n\nexport const hideTickLine = css`\n label: hide-tick-line;\n`\n\nexport const hideDomain = css`\n label: hide-domain;\n`\n\nexport const axis = css`\n label: axis;\n\n user-select: none;\n\n .domain {\n stroke: var(--vis-axis-domain-color, var(--vis-axis-tick-color));\n stroke-width: var(--vis-axis-domain-line-width, var(--vis-axis-grid-line-width));\n }\n\n &${`.${hideTickLine}`} {\n .tick > line {\n opacity: 0;\n }\n }\n\n &${`.${hideDomain}`} {\n .domain {\n opacity: 0;\n }\n }\n`\n\nexport const grid = css`\n label: grid;\n\n .domain {\n opacity: 0;\n }\n\n line {\n stroke: var(--vis-axis-grid-color);\n stroke-width: var(--vis-axis-grid-line-width);\n }\n`\n\nexport const tick = css`\n label: tick;\n\n stroke: none;\n font-size: var(--vis-axis-tick-label-font-size);\n\n line {\n stroke: var(--vis-axis-tick-color);\n stroke-width: var(--vis-axis-tick-line-width);\n }\n\n text {\n fill: var(--vis-axis-tick-label-color);\n cursor: var(--vis-axis-tick-label-cursor);\n font-family: var(--vis-axis-font-family, var(--vis-font-family));\n text-decoration: var(--vis-axis-tick-label-text-decoration);\n stroke: none;\n }\n`\n\nexport const label = css`\n label: label;\n fill: var(--vis-axis-label-color);\n font-size: var(--vis-axis-label-font-size);\n font-family: var(--vis-axis-font-family, var(--vis-font-family));\n text-anchor: middle;\n`\n\nexport const tickLabel = css`\n label: tick-label;\n`\n\nexport const tickLabelHideable = css`\n label: tick-label-hideable;\n opacity: 0;\n transition: var(--vis-axis-tick-label-hide-transition);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;EAE9B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;AAUlB,GAAA,EAAA,CAAA,CAAA,EAAI,YAAY,CAAE,CAAA,CAAA;;;;;;AAMlB,GAAA,EAAA,CAAA,CAAA,EAAI,UAAU,CAAE,CAAA,CAAA;;;;;EAKpB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;EAWtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;EAMvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n label: brush-component;\n`\n\nexport const cssVarDefaults = {\n '--vis-brush-selection-fill-color': 'none',\n '--vis-brush-selection-stroke-color': 'none',\n '--vis-brush-selection-stroke-width': '0',\n '--vis-brush-selection-opacity': '0',\n '--vis-brush-unselected-fill-color': '#0b1640',\n '--vis-brush-unselected-stroke-color': '#acb2b9',\n '--vis-brush-unselected-stroke-width': '0',\n '--vis-brush-unselected-opacity': '0.4',\n '--vis-brush-handle-fill-color': '#6d778c',\n '--vis-brush-handle-stroke-color': '#eee',\n\n /* Dark Theme */\n '--vis-dark-brush-selection-fill-color': 'none',\n '--vis-dark-brush-selection-stroke-color': 'none',\n '--vis-dark-brush-selection-stroke-width': '0',\n '--vis-dark-brush-selection-opacity': '0',\n '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n '--vis-dark-brush-unselected-stroke-width': '0',\n '--vis-dark-brush-unselected-opacity': '0.4',\n '--vis-dark-brush-handle-fill-color': '#acb2b9',\n '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n label: brush;\n\n .selection {\n fill: var(${variables.brushSelectionFillColor});\n stroke: var(${variables.brushSelectionStrokeColor});\n stroke-width: var(${variables.brushSelectionStrokeWidth});\n opacity: var(${variables.brushSelectionOpacity});\n }\n\n .handle {\n fill: var(${variables.brushHandleFillColor});\n }\n\n &.non-draggable {\n .selection, .overlay {\n pointer-events: none;\n }\n }\n`\n\nexport const unselected = css`\n label: unselected;\n fill: var(${variables.brushUnselectedFillColor});\n stroke: var(${variables.brushUnselectedStrokeColor});\n stroke-width: var(${variables.brushUnselectedStrokeWidth});\n stroke-opacity: var(${variables.brushUnselectedOpacity});\n opacity: var(${variables.brushUnselectedOpacity});\n pointer-events: none;\n`\n\nexport const handleLine = css`\n label: handle-line;\n stroke: var(${variables.brushHandleStrokeColor});\n stroke-width: 1;\n fill: none;\n pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/brush/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nexport const root = css`\n label: brush-component;\n`\n\nexport const cssVarDefaults = {\n '--vis-brush-selection-fill-color': 'none',\n '--vis-brush-selection-stroke-color': 'none',\n '--vis-brush-selection-stroke-width': '0',\n '--vis-brush-selection-opacity': '0',\n '--vis-brush-unselected-fill-color': '#0b1640',\n '--vis-brush-unselected-stroke-color': '#acb2b9',\n '--vis-brush-unselected-stroke-width': '0',\n '--vis-brush-unselected-opacity': '0.4',\n '--vis-brush-handle-fill-color': '#6d778c',\n '--vis-brush-handle-stroke-color': '#eee',\n\n /* Dark Theme */\n '--vis-dark-brush-selection-fill-color': 'none',\n '--vis-dark-brush-selection-stroke-color': 'none',\n '--vis-dark-brush-selection-stroke-width': '0',\n '--vis-dark-brush-selection-opacity': '0',\n '--vis-dark-brush-unselected-fill-color': '#acb2b9',\n '--vis-dark-brush-unselected-stroke-color': '#0b1640',\n '--vis-dark-brush-unselected-stroke-width': '0',\n '--vis-dark-brush-unselected-opacity': '0.4',\n '--vis-dark-brush-handle-fill-color': '#acb2b9',\n '--vis-dark-brush-handle-stroke-color': 'var(--vis-color-grey)',\n}\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const brush = css`\n label: brush;\n\n .selection {\n fill: var(${variables.brushSelectionFillColor});\n stroke: var(${variables.brushSelectionStrokeColor});\n stroke-width: var(${variables.brushSelectionStrokeWidth});\n opacity: var(${variables.brushSelectionOpacity});\n }\n\n .handle {\n fill: var(${variables.brushHandleFillColor});\n }\n\n &.non-draggable {\n .selection, .overlay {\n pointer-events: none;\n }\n }\n`\n\nexport const unselected = css`\n label: unselected;\n fill: var(${variables.brushUnselectedFillColor});\n stroke: var(${variables.brushUnselectedStrokeColor});\n stroke-width: var(${variables.brushUnselectedStrokeWidth});\n stroke-opacity: var(${variables.brushUnselectedOpacity});\n opacity: var(${variables.brushUnselectedOpacity});\n pointer-events: none;\n`\n\nexport const handleLine = css`\n label: handle-line;\n stroke: var(${variables.brushHandleStrokeColor});\n stroke-width: 1;\n fill: none;\n pointer-events: none;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEY,MAAA,cAAc,GAAG;AAC5B,IAAA,kCAAkC,EAAE,MAAM;AAC1C,IAAA,oCAAoC,EAAE,MAAM;AAC5C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,+BAA+B,EAAE,GAAG;AACpC,IAAA,mCAAmC,EAAE,SAAS;AAC9C,IAAA,qCAAqC,EAAE,SAAS;AAChD,IAAA,qCAAqC,EAAE,GAAG;AAC1C,IAAA,gCAAgC,EAAE,KAAK;AACvC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,iCAAiC,EAAE,MAAM;;AAGzC,IAAA,uCAAuC,EAAE,MAAM;AAC/C,IAAA,yCAAyC,EAAE,MAAM;AACjD,IAAA,yCAAyC,EAAE,GAAG;AAC9C,IAAA,oCAAoC,EAAE,GAAG;AACzC,IAAA,wCAAwC,EAAE,SAAS;AACnD,IAAA,0CAA0C,EAAE,SAAS;AACrD,IAAA,0CAA0C,EAAE,GAAG;AAC/C,IAAA,qCAAqC,EAAE,KAAK;AAC5C,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,sCAAsC,EAAE,uBAAuB;EAChE;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;AAIR,cAAA,EAAA,SAAS,CAAC,uBAAuB,CAAA;AAC/B,gBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AAC7B,sBAAA,EAAA,SAAS,CAAC,yBAAyB,CAAA;AACxC,iBAAA,EAAA,SAAS,CAAC,qBAAqB,CAAA;;;;AAIlC,cAAA,EAAA,SAAS,CAAC,oBAAoB,CAAA;;;;;;;;EAQ7C;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;AAEf,YAAA,EAAA,SAAS,CAAC,wBAAwB,CAAA;AAChC,cAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAC9B,oBAAA,EAAA,SAAS,CAAC,0BAA0B,CAAA;AAClC,sBAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;AACvC,eAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;EAEhD;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;AAEb,cAAA,EAAA,SAAS,CAAC,sBAAsB,CAAA;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-opacity: 0.15;\n --vis-legend-item-spacing: 20px;\n --vis-legend-vertical-item-spacing: 5px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n }\n\n body.theme-patterns {\n --vis-legend-bullet-size: 14px;\n }\n`\n\nexport const item = css`\n label: legendItem;\n display: inline-flex;\n align-items: center;\n font-family: var(--vis-legend-font-family, var(--vis-font-family));\n margin-right: var(--vis-legend-item-spacing);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n max-width: min-content;\n`\n\nexport const itemVertical = css`\n label: legendItemVertical;\n display: flex;\n margin-top: var(--vis-legend-vertical-item-spacing);\n`\n\nexport const clickable = css`\n cursor: pointer;\n`\n\nexport const label = css`\n label: legendItemLabel;\n font-size: var(--vis-legend-label-font-size);\n display: inline-block;\n vertical-align: middle;\n color: var(--vis-legend-label-color);\n max-width: var(--vis-legend-label-max-width);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`\n\nexport const bullet = css`\n flex: 0 0 auto;\n label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n height: var(--vis-legend-bullet-size);\n width: var(--vis-legend-bullet-size);\n\n svg {\n display: block;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-opacity: 0.15;\n --vis-legend-item-spacing: 20px;\n --vis-legend-vertical-item-spacing: 5px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n }\n\n body.theme-patterns {\n --vis-legend-bullet-size: 14px;\n }\n`\n\nexport const item = css`\n label: legendItem;\n display: inline-flex;\n align-items: center;\n font-family: var(--vis-legend-font-family, var(--vis-font-family));\n margin-right: var(--vis-legend-item-spacing);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n max-width: min-content;\n`\n\nexport const itemVertical = css`\n label: legendItemVertical;\n display: flex;\n margin-top: var(--vis-legend-vertical-item-spacing);\n`\n\nexport const clickable = css`\n cursor: pointer;\n`\n\nexport const label = css`\n label: legendItemLabel;\n font-size: var(--vis-legend-label-font-size);\n display: inline-block;\n vertical-align: middle;\n color: var(--vis-legend-label-color);\n max-width: var(--vis-legend-label-max-width);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`\n\nexport const bullet = css`\n flex: 0 0 auto;\n label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n height: var(--vis-legend-bullet-size);\n width: var(--vis-legend-bullet-size);\n\n svg {\n display: block;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;EAO7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;;;EAUtB;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;EAI9B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-chord-diagram-link-fill-color: #cad5f6;\n --vis-chord-diagram-link-stroke-color: #777777;\n --vis-chord-diagram-link-opacity: 0.5;\n --vis-chord-diagram-link-stroke-opacity: 0.15;\n --vis-chord-diagram-link-highlighted-opacity: 0.9;\n --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n --vis-chord-diagram-node-highlighted-opacity: 0.9;\n --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n --vis-chord-diagram-label-text-font-size: 1em;\n\n --vis-dark-chord-diagram-link-fill-color: #575c65;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n }\n`\n\nexport const background = css`\n label: background;\n`\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const links = css`\n label: links;\n`\n\nexport const labels = css`\n label: labels;\n`\n\nexport const node = css`\n label: node;\n stroke-width: 0;\n fill: var(--vis-color-main);\n stroke: var(--vis-color-main);\n transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n label: highlighted;\n fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n stroke-width: 1.5;\n`\n\nexport const label = css`\n label: label;\n`\n\nexport const labelText = css`\n label: label-text;\n\n dominant-baseline: middle;\n user-select: none;\n font-size: var(--vis-chord-diagram-label-text-font-size);\n \n > textPath {\n dominant-baseline: central;\n }\n`\n\nexport const labelExit = css`\n label: label-exit;\n`\n\nexport const link = css`\n label: link;\n\n fill: var(--vis-chord-diagram-link-fill-color);\n fill-opacity: var(--vis-chord-diagram-link-opacity);\n stroke: var(--vis-chord-diagram-link-stroke-color);\n stroke-opacity: var(--vis-chord-diagram-link-stroke-opacity);\n transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n label: highlighted;\n fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n label: transparent;\n\n ${`.${link}`}:not(${`.${highlightedLink}`}) {\n fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n }\n\n ${`.${node}`}:not(${`.${highlightedNode}`}) {\n fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/chord-diagram/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: chord-diagram-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-chord-diagram-link-fill-color: #cad5f6;\n --vis-chord-diagram-link-stroke-color: #777777;\n --vis-chord-diagram-link-opacity: 0.5;\n --vis-chord-diagram-link-stroke-opacity: 0.15;\n --vis-chord-diagram-link-highlighted-opacity: 0.9;\n --vis-chord-diagram-link-dimmed-opacity: 0.25;\n\n --vis-chord-diagram-node-highlighted-opacity: 0.9;\n --vis-chord-diagram-node-dimmed-opacity: 0.25;\n\n --vis-chord-diagram-label-text-fill-color-bright: #ffffff;\n --vis-chord-diagram-label-text-fill-color-dark: #a5abb2;\n --vis-chord-diagram-label-text-font-size: 1em;\n\n --vis-dark-chord-diagram-link-fill-color: #575c65;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-chord-diagram-link-fill-color: var(--vis-dark-chord-diagram-link-fill-color);\n }\n`\n\nexport const background = css`\n label: background;\n`\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const links = css`\n label: links;\n`\n\nexport const labels = css`\n label: labels;\n`\n\nexport const node = css`\n label: node;\n stroke-width: 0;\n fill: var(--vis-color-main);\n stroke: var(--vis-color-main);\n transition: .1s fill-opacity;\n`\n\nexport const highlightedNode = css`\n label: highlighted;\n fill-opacity: var(--vis-chord-diagram-node-highlighted-opacity);\n stroke-width: 1.5;\n`\n\nexport const label = css`\n label: label;\n`\n\nexport const labelText = css`\n label: label-text;\n\n dominant-baseline: middle;\n user-select: none;\n font-size: var(--vis-chord-diagram-label-text-font-size);\n \n > textPath {\n dominant-baseline: central;\n }\n`\n\nexport const labelExit = css`\n label: label-exit;\n`\n\nexport const link = css`\n label: link;\n\n fill: var(--vis-chord-diagram-link-fill-color);\n fill-opacity: var(--vis-chord-diagram-link-opacity);\n stroke: var(--vis-chord-diagram-link-stroke-color);\n stroke-opacity: var(--vis-chord-diagram-link-stroke-opacity);\n transition: .1s fill-opacity;\n`\nexport const highlightedLink = css`\n label: highlighted;\n fill-opacity: var(--vis-chord-diagram-link-highlighted-opacity);\n`\n\nexport const transparent = css`\n label: transparent;\n\n ${`.${link}`}:not(${`.${highlightedLink}`}) {\n fill-opacity: var(--vis-chord-diagram-link-dimmed-opacity);\n }\n\n ${`.${node}`}:not(${`.${highlightedNode}`}) {\n fill-opacity: var(--vis-chord-diagram-node-dimmed-opacity);\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;AAmBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;EAG7B;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA;;EAE5B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;EAExB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;EAMtB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;EAIjC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;EAU3B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;EAE3B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;EAQtB;AACM,MAAM,eAAe,GAAG,GAAG,CAAA;;;EAGjC;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;AAIvC,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE,CAAQ,KAAA,EAAA,CAAA,CAAA,EAAI,eAAe,CAAE,CAAA,CAAA;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-crosshair-line-stroke-color: #888;\n --vis-crosshair-line-stroke-width: 1px;\n --vis-crosshair-line-stroke-opacity: 1;\n --vis-crosshair-circle-stroke-color: #fff;\n --vis-crosshair-circle-stroke-width: 1px;\n --vis-crosshair-circle-stroke-opacity: 0.75;\n }\n`\n\nexport const root = css`\n label: crosshair-component;\n`\n\nexport const line = css`\n stroke: var(--vis-crosshair-line-stroke-color);\n stroke-width: var(--vis-crosshair-line-stroke-width);\n stroke-opacity: var(--vis-crosshair-line-stroke-opacity);\n pointer-events: none;\n`\n\nexport const circle = css`\n stroke: var(--vis-crosshair-circle-stroke-color);\n stroke-width: var(--vis-crosshair-circle-stroke-width);\n stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);\n pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/crosshair/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-crosshair-line-stroke-color: #888;\n --vis-crosshair-line-stroke-width: 1px;\n --vis-crosshair-line-stroke-opacity: 1;\n --vis-crosshair-circle-stroke-color: #fff;\n --vis-crosshair-circle-stroke-width: 1px;\n --vis-crosshair-circle-stroke-opacity: 0.75;\n }\n`\n\nexport const root = css`\n label: crosshair-component;\n`\n\nexport const line = css`\n stroke: var(--vis-crosshair-line-stroke-color);\n stroke-width: var(--vis-crosshair-line-stroke-width);\n stroke-opacity: var(--vis-crosshair-line-stroke-opacity);\n pointer-events: none;\n`\n\nexport const circle = css`\n stroke: var(--vis-crosshair-circle-stroke-color);\n stroke-width: var(--vis-crosshair-circle-stroke-width);\n stroke-opacity: var(--vis-crosshair-circle-stroke-opacity);\n pointer-events: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;EASvC;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;EAKtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: donut-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-donut-central-label-font-size: 16px;\n --vis-donut-central-label-text-color: #5b5f6d;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-donut-central-label-font-family: */\n --vis-donut-central-label-font-weight: 600;\n\n --vis-donut-central-sub-label-font-size: 12px;\n --vis-donut-central-sub-label-text-color: #5b5f6d;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-donut-central-sub-label-font-family: */\n --vis-donut-central-sub-label-font-weight: 500;\n\n --vis-donut-background-color: #E7E9F3;\n --vis-donut-segment-stroke-width: 0;\n // The line segment color variable is not defined by default\n // to allow it to fallback to the donut background color\n /* --vis-donut-segment-stroke-color: none; */\n\n --vis-dark-donut-central-label-text-color: #C2BECE;\n --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n --vis-dark-donut-background-color: #18160C;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n --vis-donut-background-color: var(--vis-dark-donut-background-color);\n }\n`\nexport const background = css`\n label: background;\n fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n label: segment;\n stroke-width: var(--vis-donut-segment-stroke-width);\n stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n label: segment-exit;\n`\n\nexport const centralLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-donut-central-label-font-size);\n font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-donut-central-label-font-weight);\n fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-donut-central-sub-label-font-size);\n font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-donut-central-sub-label-font-weight);\n fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/donut/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: donut-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-donut-central-label-font-size: 16px;\n --vis-donut-central-label-text-color: #5b5f6d;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-donut-central-label-font-family: */\n --vis-donut-central-label-font-weight: 600;\n\n --vis-donut-central-sub-label-font-size: 12px;\n --vis-donut-central-sub-label-text-color: #5b5f6d;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-donut-central-sub-label-font-family: */\n --vis-donut-central-sub-label-font-weight: 500;\n\n --vis-donut-background-color: #E7E9F3;\n --vis-donut-segment-stroke-width: 0;\n // The line segment color variable is not defined by default\n // to allow it to fallback to the donut background color\n /* --vis-donut-segment-stroke-color: none; */\n\n --vis-dark-donut-central-label-text-color: #C2BECE;\n --vis-dark-donut-central-sub-label-text-color: #C2BECE;\n --vis-dark-donut-background-color: #18160C;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-donut-central-label-text-color: var(--vis-dark-donut-central-label-text-color);\n --vis-donut-central-sub-label-text-color: var(--vis-dark-donut-central-sub-label-text-color);\n --vis-donut-background-color: var(--vis-dark-donut-background-color);\n }\n`\nexport const background = css`\n label: background;\n fill: var(--vis-donut-background-color);\n`\n\nexport const segment = css`\n label: segment;\n stroke-width: var(--vis-donut-segment-stroke-width);\n stroke: var(--vis-donut-segment-stroke-color, var(--vis-donut-background-color));\n`\n\nexport const segmentExit = css`\n label: segment-exit;\n`\n\nexport const centralLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-donut-central-label-font-size);\n font-family: var(--vis-donut-central-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-donut-central-label-font-weight);\n fill: var(--vis-donut-central-label-text-color);\n`\n\nexport const centralSubLabel = css`\n label: central-label;\n text-anchor: middle;\n dominant-baseline: middle;\n font-size: var(--vis-donut-central-sub-label-font-size);\n font-family: var(--vis-donut-central-sub-label-font-family, var(--vis-font-family));\n font-weight: var(--vis-donut-central-sub-label-font-weight);\n fill: var(--vis-donut-central-sub-label-text-color);\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AACM,MAAM,UAAU,GAAG,GAAG,CAAA;;;EAG5B;AAEM,MAAM,OAAO,GAAG,GAAG,CAAA;;;;EAIzB;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA;;EAE7B;AAEM,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;EAQ9B;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n label: flow-legend-component;\n\n position: relative;\n user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-flow-legend-label-background: #ffffff;\n --vis-flow-legend-label-color: #71788a;\n --vis-flow-legend-link-color: #E5E9F7;\n --vis-flow-legend-arrow-color: #E5E9F7;\n --vis-flow-legend-label-padding: 5px 15px;\n --vis-flow-legend-arrow-padding: 0 10px;\n /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n --vis-dark-flow-legend-label-background: #292b34;\n --vis-dark-flow-legend-label-color: #E5E9F7;\n --vis-dark-flow-legend-link-color: #71788a;\n --vis-dark-flow-legend-arrow-color: #71788a;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n }\n`\n\nexport const line = (lineColor: string): string => css`\n label: line;\n\n height: 2px;\n width: 100%;\n background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n position: absolute;\n top: 50%;\n`\n\nexport const labels = css`\n label: labels;\n\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\n\nexport const item = css`\n label: item;\n\n position: relative;\n max-width: 50px;\n\n padding: 10px;\n`\n\nexport const clickable = css`\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n label: label;\n\n transform: translate(-50%, 0%);\n margin-left: 7px;\n background-color: var(--vis-flow-legend-label-background);\n padding: var(--vis-flow-legend-label-padding);\n font-size: ${labelFontSize}px;\n color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n display: inline-table;\n text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n label: arrow;\n\n font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n font-size: 9px;\n vertical-align: middle;\n color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n background-color: var(--vis-flow-legend-label-background);\n padding: var(--vis-flow-legend-arrow-padding);\n transform: translate(-25%, 0%);\n display: inline-table;\n text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/flow-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\nimport { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'\n\nexport const root = css`\n label: flow-legend-component;\n\n position: relative;\n user-select: none;\n`\n\nexport const globalStyles = injectGlobal`\n :root {\n --vis-flow-legend-label-background: #ffffff;\n --vis-flow-legend-label-color: #71788a;\n --vis-flow-legend-link-color: #E5E9F7;\n --vis-flow-legend-arrow-color: #E5E9F7;\n --vis-flow-legend-label-padding: 5px 15px;\n --vis-flow-legend-arrow-padding: 0 10px;\n /* --vis-flow-legend-arrow-font-family: Undefined by default to allow proper fallback to var(DEFAULT_ICON_FONT_FAMILY)*/\n\n --vis-dark-flow-legend-label-background: #292b34;\n --vis-dark-flow-legend-label-color: #E5E9F7;\n --vis-dark-flow-legend-link-color: #71788a;\n --vis-dark-flow-legend-arrow-color: #71788a;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-flow-legend-label-background: var(--vis-dark-flow-legend-label-background);\n --vis-flow-legend-label-color: var(--vis-dark-flow-legend-label-color);\n --vis-flow-legend-link-color: var(--vis-dark-flow-legend-link-color);\n --vis-flow-legend-arrow-color: var(--vis-dark-flow-legend-arrow-color);\n }\n`\n\nexport const line = (lineColor: string): string => css`\n label: line;\n\n height: 2px;\n width: 100%;\n background-color: ${lineColor || 'var(--vis-flow-legend-link-color)'};\n position: absolute;\n top: 50%;\n`\n\nexport const labels = css`\n label: labels;\n\n position: relative;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n`\n\nexport const item = css`\n label: item;\n\n position: relative;\n max-width: 50px;\n\n padding: 10px;\n`\n\nexport const clickable = css`\n cursor: pointer;\n\n &:hover {\n text-decoration: underline;\n }\n`\n\nexport const label = (labelFontSize: number, labelColor: string): string => css`\n label: label;\n\n transform: translate(-50%, 0%);\n margin-left: 7px;\n background-color: var(--vis-flow-legend-label-background);\n padding: var(--vis-flow-legend-label-padding);\n font-size: ${labelFontSize}px;\n color: ${labelColor || 'var(--vis-flow-legend-label-color)'};\n display: inline-table;\n text-align: center;\n`\n\nexport const arrow = (arrowColor: string): string => css`\n label: arrow;\n\n font-family: var(--vis-flow-legend-arrow-font-family, ${UNOVIS_ICON_FONT_FAMILY_DEFAULT});\n font-size: 9px;\n vertical-align: middle;\n color: ${arrowColor || 'var(--vis-flow-legend-arrow-color)'};\n background-color: var(--vis-flow-legend-label-background);\n padding: var(--vis-flow-legend-arrow-padding);\n transform: translate(-25%, 0%);\n display: inline-table;\n text-align: center;\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;EAKtB;AAEM,MAAM,YAAY,GAAG,YAAY,CAAA;;;;;;;;;;;;;;;;AAgBpB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;EAM7B;AAEY,MAAA,IAAI,GAAG,CAAC,SAAiB,KAAa,GAAG,CAAA;;;;;AAKhC,oBAAA,EAAA,SAAS,IAAI,mCAAmC,CAAA;;;EAGrE;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;EAQxB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;EAOtB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;EAM3B;AAEM,MAAM,KAAK,GAAG,CAAC,aAAqB,EAAE,UAAkB,KAAa,GAAG,CAAA;;;;;;;eAOhE,aAAa,CAAA;AACjB,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;EAG5D;AAEY,MAAA,KAAK,GAAG,CAAC,UAAkB,KAAa,GAAG,CAAA;;;0DAGE,+BAA+B,CAAA;;;AAG9E,SAAA,EAAA,UAAU,IAAI,oCAAoC,CAAA;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-free-brush-selection-fill-color: #0b1640;\n --vis-free-brush-selection-fill-opacity: 0.4;\n --vis-free-brush-selection-stroke-color: #acb2b9;\n --vis-free-brush-handle-fill-color: #6d778c;\n --vis-free-brush-handle-stroke-color: none;\n\n --vis-dark-free-brush-selection-fill-color: #344174;\n --vis-dark-free-brush-selection-stroke-color: #0b1640;\n --vis-dark-free-brush-handle-fill-color: #6d778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n }\n`\n\nexport const brush = css`\n label: brush;\n fill: none;\n stroke: none;\n\n .selection {\n fill: var(--vis-free-brush-selection-fill-color);\n fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n stroke: var(--vis-free-brush-selection-stroke-color);\n stroke-width: 0;\n stroke-opacity: 0;\n }\n\n .handle {\n fill: var(--vis-free-brush-handle-fill-color);\n stroke: var(--vis-free-brush-handle-stroke-color);\n }\n`\n\nexport const hide = css`\n .selection, .handle {\n display: none;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/free-brush/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: free-brush-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-free-brush-selection-fill-color: #0b1640;\n --vis-free-brush-selection-fill-opacity: 0.4;\n --vis-free-brush-selection-stroke-color: #acb2b9;\n --vis-free-brush-handle-fill-color: #6d778c;\n --vis-free-brush-handle-stroke-color: none;\n\n --vis-dark-free-brush-selection-fill-color: #344174;\n --vis-dark-free-brush-selection-stroke-color: #0b1640;\n --vis-dark-free-brush-handle-fill-color: #6d778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-free-brush-selection-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n --vis-free-brush-selection-stroke-color: var(--vis-dark-free-brush-selection-stroke-color);\n --vis-free-brush-handle-fill-color: var(--vis-dark-free-brush-selection-fill-color);\n }\n`\n\nexport const brush = css`\n label: brush;\n fill: none;\n stroke: none;\n\n .selection {\n fill: var(--vis-free-brush-selection-fill-color);\n fill-opacity: var(--vis-free-brush-selection-fill-opacity);\n stroke: var(--vis-free-brush-selection-stroke-color);\n stroke-width: 0;\n stroke-opacity: 0;\n }\n\n .handle {\n fill: var(--vis-free-brush-handle-fill-color);\n stroke: var(--vis-free-brush-handle-stroke-color);\n }\n`\n\nexport const hide = css`\n .selection, .handle {\n display: none;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA;;;;;;;;;;;;;AAajB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;EAK7B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA;;;;;;;;"}
|
|
@@ -6,9 +6,10 @@ import { ElkShape } from 'elkjs';
|
|
|
6
6
|
import type { GraphDataModel } from "../../data-models/graph";
|
|
7
7
|
import { ComponentConfigInterface } from "../../core/component/config";
|
|
8
8
|
import { TrimMode } from "../../types/text";
|
|
9
|
+
import { Spacing } from "../../types/spacing";
|
|
9
10
|
import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
|
|
10
11
|
import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from "../../types/accessor";
|
|
11
|
-
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink, GraphNodeSelectionHighlightMode } from './types';
|
|
12
|
+
import { GraphLayoutType, GraphCircleLabel, GraphLinkStyle, GraphLinkArrowStyle, GraphPanelConfig, GraphForceLayoutSettings, GraphElkLayoutSettings, GraphNodeShape, GraphDagreLayoutSetting, GraphNode, GraphLink, GraphNodeSelectionHighlightMode, GraphFitViewAlignment } from './types';
|
|
12
13
|
export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
|
|
13
14
|
/** Zoom level constraints. Default: [0.35, 1.25] */
|
|
14
15
|
zoomScaleExtent?: [number, number];
|
|
@@ -24,6 +25,10 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
|
|
|
24
25
|
disableBrush?: boolean;
|
|
25
26
|
/** Interval to re-render the graph when zooming. Default: `100` */
|
|
26
27
|
zoomThrottledUpdateNodeThreshold?: number;
|
|
28
|
+
/** Padding for the graph when fitting to container. Default: `50` */
|
|
29
|
+
fitViewPadding?: Spacing | number;
|
|
30
|
+
/** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */
|
|
31
|
+
fitViewAlign?: GraphFitViewAlignment;
|
|
27
32
|
/** Type of the graph layout. Default: `GraphLayoutType.Force` */
|
|
28
33
|
layoutType?: GraphLayoutType | string;
|
|
29
34
|
/** Fit the graph to container on data or config updates, or on container resize. Default: `true` */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { isEqual } from '../../utils/data.js';
|
|
2
2
|
import { ComponentDefaultConfig } from '../../core/component/config.js';
|
|
3
3
|
import { TrimMode } from '../../types/text.js';
|
|
4
|
-
import { GraphLayoutType, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
|
|
4
|
+
import { GraphLayoutType, GraphFitViewAlignment, GraphLinkStyle, GraphNodeShape, GraphNodeSelectionHighlightMode } from './types.js';
|
|
5
5
|
|
|
6
6
|
// Utils
|
|
7
|
-
const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
|
|
7
|
+
const GraphDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { duration: 1000, zoomScaleExtent: [0.35, 1.25], disableZoom: false, zoomEventFilter: undefined, disableDrag: false, disableBrush: false, zoomThrottledUpdateNodeThreshold: 100, layoutType: GraphLayoutType.Force, layoutAutofit: true, layoutAutofitTolerance: 8.0, layoutNonConnectedAside: false, fitViewPadding: 50, fitViewAlign: GraphFitViewAlignment.Center, layoutGroupOrder: [], layoutParallelSubGroupsPerRow: 1, layoutParallelNodesPerColumn: 6, layoutParallelGroupSpacing: undefined, layoutParallelSortConnectionsByGroup: undefined, layoutNodeGroup: (n) => n.group, layoutParallelNodeSubGroup: (n) => n.subgroup, forceLayoutSettings: {
|
|
8
8
|
linkDistance: 60,
|
|
9
9
|
linkStrength: 0.45,
|
|
10
10
|
charge: -500,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n GraphLayoutType,\n GraphCircleLabel,\n GraphLinkStyle,\n GraphLinkArrowStyle,\n GraphPanelConfig,\n GraphForceLayoutSettings,\n GraphElkLayoutSettings,\n GraphNodeShape,\n GraphDagreLayoutSetting,\n GraphNode,\n GraphLink,\n GraphNodeSelectionHighlightMode,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n // Zoom and drag\n /** Zoom level constraints. Default: [0.35, 1.25] */\n zoomScaleExtent?: [number, number];\n /** Disable zooming. Default: `false` */\n disableZoom?: boolean;\n /** Custom Zoom event filter to better control which actions should trigger zooming.\n * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n * Default: `undefined` */\n zoomEventFilter?: (event: PointerEvent) => boolean;\n /** Disable node dragging. Default: `false` */\n disableDrag?: boolean;\n /** Disable brush for multiple node selection. Default: `false` */\n disableBrush?: boolean;\n /** Interval to re-render the graph when zooming. Default: `100` */\n zoomThrottledUpdateNodeThreshold?: number;\n\n // Layout general settings\n /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n layoutType?: GraphLayoutType | string;\n /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n layoutAutofit?: boolean;\n /** Tolerance constant defining whether the graph should be fitted to container\n * (on data or config update, or container resize) after a zoom / pan interaction or not.\n * `0` — Stop fitting after any pan or zoom\n * `Number.POSITIVE_INFINITY` — Always fit\n * Default: `8.0` */\n layoutAutofitTolerance?: number;\n /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n layoutNonConnectedAside?: boolean;\n\n // Settings for Parallel and Concentric layouts\n /** Node group accessor function.\n * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n * Default: `node => node.group` */\n layoutNodeGroup?: StringAccessor<N>;\n /** Order of the layout groups.\n * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n * Default: `[]` */\n layoutGroupOrder?: string[];\n\n // Setting for Parallel layouts only\n /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n * `GraphLayoutType.ParallelHorizontal`).\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `6` */\n layoutParallelNodesPerColumn?: number;\n /** Node sub-group accessor function.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `node => node.subgroup` */\n layoutParallelNodeSubGroup?: StringAccessor<N>;\n /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `1` */\n layoutParallelSubGroupsPerRow?: number;\n /** Spacing between groups.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `undefined` */\n layoutParallelGroupSpacing?: number;\n /** Set a group by name to have priority in sorting the graph links.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `undefined` */\n layoutParallelSortConnectionsByGroup?: string;\n\n // Force layout\n /** Force Layout settings, see the `d3-force` package for more details */\n forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n // Dagre layout\n /** Darge Layout settings, see the `dagrejs` package\n * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n */\n dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n // ELK layout\n /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n * If you want to specify custom layout option for each node group, you can provide an accessor function that\n * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n * layout options. Default: `undefined`\n */\n layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n * E.g.: `[n => n.group, n => n.subGroup]`.\n * Default: `undefined` */\n layoutElkNodeGroups?: StringAccessor<N>[];\n /** A function to be called per graph node to get the ELK shape object.\n * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n * and coordinates (through the `x` and `y` properties) if needed.\n * Default: `undefined`\n */\n layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n // Links\n /** Link width accessor function ot constant value. Default: `1` */\n linkWidth?: NumericAccessor<L>;\n /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid` */\n linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n /** Link band width accessor function or constant value. Default: `0` */\n linkBandWidth?: NumericAccessor<L>;\n /** Link arrow accessor function or constant value. Default: `undefined` */\n linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n /** Link stroke color accessor function or constant value. Default: `undefined` */\n linkStroke?: ColorAccessor<L>;\n /** Link disabled state accessor function or constant value. Default: `false` */\n linkDisabled?: BooleanAccessor<L>;\n /** Link flow animation accessor function or constant value. Default: `false` */\n linkFlow?: BooleanAccessor<L>;\n /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n linkFlowAnimDuration?: NumericAccessor<L>;\n /** Size of the moving particles that represent traffic flow. Default: `2` */\n linkFlowParticleSize?: NumericAccessor<L>;\n /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n linkFlowParticleSpeed?: NumericAccessor<L>;\n /** Link label accessor function or constant value. Default: `undefined` */\n linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n linkLabelShiftFromCenter?: BooleanAccessor<L>;\n /** Spacing between neighboring links. Default: `8` */\n linkNeighborSpacing?: number;\n /** Curvature of the link. Recommended value range: [0:1.5].\n * `0` - straight line,\n * `1` - nice curvature,\n * `1.5` - very curve.\n * Default: `0` */\n linkCurvature?: NumericAccessor<L>;\n /** Highlight links on hover. Default: `true` */\n linkHighlightOnHover?: boolean;\n /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n /** Set selected link by its unique id. Default: `undefined` */\n selectedLinkId?: number | string;\n\n // Nodes\n /** Node size accessor function or constant value. Default: `30` */\n nodeSize?: NumericAccessor<N>;\n /** Node stroke width accessor function or constant value. Default: `3` */\n nodeStrokeWidth?: NumericAccessor<N>;\n /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n nodeGaugeValue?: NumericAccessor<N>;\n /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n nodeGaugeFill?: ColorAccessor<N>;\n /** Animation duration of the node gauge outline. Default: `1500` */\n nodeGaugeAnimDuration?: number;\n /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n nodeIcon?: StringAccessor<N>;\n /** Node central icon size accessor function or constant value. Default: `undefined` */\n nodeIconSize?: NumericAccessor<N>;\n /** Node label accessor function or constant value. Default: `node => node.label` */\n nodeLabel?: StringAccessor<N>;\n /** Defines whether to trim the node labels or not. Default: `true` */\n nodeLabelTrim?: BooleanAccessor<N>;\n /** Node label trimming mode. Default: `TrimMode.Middle` */\n nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n nodeLabelTrimLength?: NumericAccessor<N>;\n /** Node sub-label accessor function or constant value: Default: `''` */\n nodeSubLabel?: StringAccessor<N>;\n /** Defines whether to trim the node sub-labels or not. Default: `true` */\n nodeSubLabelTrim?: BooleanAccessor<N>;\n /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n nodeSubLabelTrimLength?: NumericAccessor<N>;\n /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n /** Node bottom icon accessor function. Default: `undefined` */\n nodeBottomIcon?: StringAccessor<N>;\n /** Node disabled state accessor function or constant value. Default: `false` */\n nodeDisabled?: BooleanAccessor<N>;\n /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n nodeFill?: ColorAccessor<N>;\n /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n nodeStroke?: ColorAccessor<N>;\n /** Sorting function to determine node placement. Default: `undefined` */\n nodeSort?: ((a: N, b: N) => number);\n /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n nodeEnterScale?: NumericAccessor<N> | undefined;\n /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n nodeExitScale?: NumericAccessor<N> | undefined;\n /** Custom \"enter\" function for node rendering. Default: `undefined` */\n nodeEnterCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom \"update\" function for node rendering. Default: `undefined` */\n nodeUpdateCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n * - Full node update (`nodeUpdateCustomRenderFunction`);\n * - Background click;\n * - Node and Link mouseover and mouseout;\n * - Node brushing,\n * Default: `undefined` */\n nodePartialUpdateCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom \"exit\" function for node rendering. Default: `undefined` */\n nodeExitCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n nodeOnZoomCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n /** Set selected node by unique id. Default: `undefined` */\n selectedNodeId?: number | string;\n /** Set selected nodes by unique id. Default: `undefined` */\n selectedNodeIds?: number[] | string[];\n\n /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n panels?: GraphPanelConfig[] | undefined;\n\n // Events\n /** Graph node drag start callback function. Default: `undefined` */\n onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Graph node drag callback function. Default: `undefined` */\n onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Graph node drag end callback function. Default: `undefined` */\n onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Zoom event callback. Default: `undefined` */\n onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Zoom start event callback. Default: `undefined` */\n onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Zoom end event callback. Default: `undefined` */\n onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n /** Graph node selection brush callback function. Default: `undefined` */\n onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n /** Graph multiple node drag callback function. Default: `undefined` */\n onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n onRenderComplete?: (\n g: Selection<SVGGElement, unknown, null, undefined>,\n nodes: GraphNode<N, L>[],\n links: GraphLink<N, L>[],\n config: GraphConfigInterface<N, L>,\n duration: number,\n zoomLevel: number,\n width: number,\n height: number\n ) => void;\n\n /** Determines whether the component should update when new data is provided.\n * This function takes the previous and new data as parameters and returns a boolean\n * indicating whether the update should proceed. Useful for fine-grained control over\n * update behavior when your data has a complex nested structure.\n * By default the `isEqual` function from Unovis will be used to do the comparison.\n */\n shouldDataUpdate?: (\n prevData: GraphInputData<N, L>,\n nextData: GraphInputData<N, L>,\n datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n ...ComponentDefaultConfig,\n duration: 1000,\n zoomScaleExtent: [0.35, 1.25],\n disableZoom: false,\n zoomEventFilter: undefined,\n disableDrag: false,\n disableBrush: false,\n zoomThrottledUpdateNodeThreshold: 100,\n layoutType: GraphLayoutType.Force,\n layoutAutofit: true,\n layoutAutofitTolerance: 8.0,\n layoutNonConnectedAside: false,\n\n layoutGroupOrder: [],\n layoutParallelSubGroupsPerRow: 1,\n layoutParallelNodesPerColumn: 6,\n layoutParallelGroupSpacing: undefined,\n layoutParallelSortConnectionsByGroup: undefined,\n layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n forceLayoutSettings: {\n linkDistance: 60,\n linkStrength: 0.45,\n charge: -500,\n forceXStrength: 0.15,\n forceYStrength: 0.25,\n numIterations: undefined,\n fixNodePositionAfterSimulation: false,\n },\n\n dagreLayoutSettings: {\n rankdir: 'BT',\n ranker: 'longest-path',\n },\n\n layoutElkSettings: undefined,\n layoutElkNodeGroups: undefined,\n layoutElkGetNodeShape: undefined,\n\n linkFlowAnimDuration: 20000,\n linkFlowParticleSize: 2,\n linkFlowParticleSpeed: undefined,\n linkWidth: 1,\n linkStyle: GraphLinkStyle.Solid,\n linkBandWidth: 0,\n linkArrow: undefined,\n linkStroke: undefined,\n linkFlow: false,\n linkLabel: undefined,\n linkLabelShiftFromCenter: true,\n linkNeighborSpacing: 8,\n linkDisabled: false,\n linkCurvature: 0,\n linkHighlightOnHover: true,\n linkSourcePointOffset: undefined,\n linkTargetPointOffset: undefined,\n selectedLinkId: undefined,\n\n nodeSize: 30,\n nodeStrokeWidth: 3,\n nodeShape: GraphNodeShape.Circle,\n nodeGaugeValue: 0,\n nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n nodeIconSize: undefined,\n nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n nodeLabelTrim: true,\n nodeLabelTrimLength: 15,\n nodeLabelTrimMode: TrimMode.Middle,\n nodeSubLabel: '',\n nodeSubLabelTrim: true,\n nodeSubLabelTrimLength: 15,\n nodeSubLabelTrimMode: TrimMode.Middle,\n nodeSideLabels: undefined,\n nodeBottomIcon: undefined,\n nodeDisabled: false,\n nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n nodeGaugeFill: undefined,\n nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n nodeEnterPosition: undefined,\n nodeEnterScale: 0.75,\n nodeExitPosition: undefined,\n nodeExitScale: 0.75,\n nodeSort: undefined,\n nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n nodeGaugeAnimDuration: 1500,\n\n selectedNodeId: undefined,\n selectedNodeIds: undefined,\n\n panels: undefined,\n\n onNodeDragStart: undefined,\n onNodeDrag: undefined,\n onNodeDragEnd: undefined,\n onZoom: undefined,\n onZoomStart: undefined,\n onZoomEnd: undefined,\n onLayoutCalculated: undefined,\n onNodeSelectionBrush: undefined,\n onNodeSelectionDrag: undefined,\n onRenderComplete: undefined,\n\n shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n return !isEqual(prevData, nextData)\n },\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/graph/config.ts"],"sourcesContent":["import { D3BrushEvent } from 'd3-brush'\nimport { D3DragEvent } from 'd3-drag'\nimport { D3ZoomEvent, ZoomTransform } from 'd3-zoom'\nimport { Selection } from 'd3-selection'\nimport { ElkShape } from 'elkjs'\n\n// Core\nimport type { GraphDataModel } from 'data-models/graph'\n\n// Utils\nimport { isEqual } from 'utils/data'\n\n// Config\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { TrimMode } from 'types/text'\nimport { Spacing } from 'types/spacing'\nimport { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'\nimport { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'\n\n// Local Types\nimport {\n GraphLayoutType,\n GraphCircleLabel,\n GraphLinkStyle,\n GraphLinkArrowStyle,\n GraphPanelConfig,\n GraphForceLayoutSettings,\n GraphElkLayoutSettings,\n GraphNodeShape,\n GraphDagreLayoutSetting,\n GraphNode,\n GraphLink,\n GraphNodeSelectionHighlightMode,\n GraphFitViewAlignment,\n} from './types'\n\nexport interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {\n // Zoom and drag\n /** Zoom level constraints. Default: [0.35, 1.25] */\n zoomScaleExtent?: [number, number];\n /** Disable zooming. Default: `false` */\n disableZoom?: boolean;\n /** Custom Zoom event filter to better control which actions should trigger zooming.\n * Learn more: https://d3js.org/d3-zoom#zoom_filter.\n * Default: `undefined` */\n zoomEventFilter?: (event: PointerEvent) => boolean;\n /** Disable node dragging. Default: `false` */\n disableDrag?: boolean;\n /** Disable brush for multiple node selection. Default: `false` */\n disableBrush?: boolean;\n /** Interval to re-render the graph when zooming. Default: `100` */\n zoomThrottledUpdateNodeThreshold?: number;\n /** Padding for the graph when fitting to container. Default: `50` */\n fitViewPadding?: Spacing | number;\n /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */\n fitViewAlign?: GraphFitViewAlignment;\n\n // Layout general settings\n /** Type of the graph layout. Default: `GraphLayoutType.Force` */\n layoutType?: GraphLayoutType | string;\n /** Fit the graph to container on data or config updates, or on container resize. Default: `true` */\n layoutAutofit?: boolean;\n /** Tolerance constant defining whether the graph should be fitted to container\n * (on data or config update, or container resize) after a zoom / pan interaction or not.\n * `0` — Stop fitting after any pan or zoom\n * `Number.POSITIVE_INFINITY` — Always fit\n * Default: `8.0` */\n layoutAutofitTolerance?: number;\n /** Place non-connected nodes at the bottom of the graph. Default: `false` */\n layoutNonConnectedAside?: boolean;\n\n // Settings for Parallel and Concentric layouts\n /** Node group accessor function.\n * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n * Default: `node => node.group` */\n layoutNodeGroup?: StringAccessor<N>;\n /** Order of the layout groups.\n * Only for `GraphLayoutType.Parallel`, `GraphLayoutType.ParallelHorizontal` and `GraphLayoutType.Concentric` layouts.\n * Default: `[]` */\n layoutGroupOrder?: string[];\n\n // Setting for Parallel layouts only\n /** Sets the number of nodes in a sub-group after which they'll continue on the next column (or row if `layoutType` is\n * `GraphLayoutType.ParallelHorizontal`).\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `6` */\n layoutParallelNodesPerColumn?: number;\n /** Node sub-group accessor function.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `node => node.subgroup` */\n layoutParallelNodeSubGroup?: StringAccessor<N>;\n /** Number of sub-groups per row (or column if `layoutType` is `GraphLayoutType.ParallelHorizontal`) in a group.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `1` */\n layoutParallelSubGroupsPerRow?: number;\n /** Spacing between groups.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `undefined` */\n layoutParallelGroupSpacing?: number;\n /** Set a group by name to have priority in sorting the graph links.\n * Only for `GraphLayoutType.Parallel` and `GraphLayoutType.ParallelHorizontal` layouts.\n * Default: `undefined` */\n layoutParallelSortConnectionsByGroup?: string;\n\n // Force layout\n /** Force Layout settings, see the `d3-force` package for more details */\n forceLayoutSettings?: GraphForceLayoutSettings<N, L>;\n\n // Dagre layout\n /** Darge Layout settings, see the `dagrejs` package\n * for more details: https://github.com/dagrejs/dagre/wiki#configuring-the-layout\n */\n dagreLayoutSettings?: GraphDagreLayoutSetting;\n\n // ELK layout\n /** ELK layout options, see the `elkjs` package for more details: https://github.com/kieler/elkjs.\n * If you want to specify custom layout option for each node group, you can provide an accessor function that\n * receives group name ('root' for the top-level configuration) as the first argument and returns an object containing\n * layout options. Default: `undefined`\n */\n layoutElkSettings?: GenericAccessor<GraphElkLayoutSettings, string> | undefined;\n /** Array of accessor functions to define nested node groups for the ELK Layered layout.\n * E.g.: `[n => n.group, n => n.subGroup]`.\n * Default: `undefined` */\n layoutElkNodeGroups?: StringAccessor<N>[];\n /** A function to be called per graph node to get the ELK shape object.\n * This enables you to provide custom node dimensions (through the `width` and `height` properties)\n * and coordinates (through the `x` and `y` properties) if needed.\n * Default: `undefined`\n */\n layoutElkGetNodeShape?: (d: GraphNode<N, L>, i: number) => ElkShape;\n\n // Links\n /** Link width accessor function ot constant value. Default: `1` */\n linkWidth?: NumericAccessor<L>;\n /** Link style accessor function or constant value. Default: `GraphLinkStyle.Solid` */\n linkStyle?: GenericAccessor<GraphLinkStyle, L>;\n /** Link band width accessor function or constant value. Default: `0` */\n linkBandWidth?: NumericAccessor<L>;\n /** Link arrow accessor function or constant value. Default: `undefined` */\n linkArrow?: GenericAccessor<GraphLinkArrowStyle | string | boolean, L> | undefined;\n /** Link stroke color accessor function or constant value. Default: `undefined` */\n linkStroke?: ColorAccessor<L>;\n /** Link disabled state accessor function or constant value. Default: `false` */\n linkDisabled?: BooleanAccessor<L>;\n /** Link flow animation accessor function or constant value. Default: `false` */\n linkFlow?: BooleanAccessor<L>;\n /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,\n * this duration will be calculated based on the link length and particle speed. Default: `20000` */\n linkFlowAnimDuration?: NumericAccessor<L>;\n /** Size of the moving particles that represent traffic flow. Default: `2` */\n linkFlowParticleSize?: NumericAccessor<L>;\n /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */\n linkFlowParticleSpeed?: NumericAccessor<L>;\n /** Link label accessor function or constant value. Default: `undefined` */\n linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;\n /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */\n linkLabelShiftFromCenter?: BooleanAccessor<L>;\n /** Spacing between neighboring links. Default: `8` */\n linkNeighborSpacing?: number;\n /** Curvature of the link. Recommended value range: [0:1.5].\n * `0` - straight line,\n * `1` - nice curvature,\n * `1.5` - very curve.\n * Default: `0` */\n linkCurvature?: NumericAccessor<L>;\n /** Highlight links on hover. Default: `true` */\n linkHighlightOnHover?: boolean;\n /** Offset [x,y] in pixels from the source node's center point where the link should start. Default: `undefined` */\n linkSourcePointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n /** Offset [x,y] in pixels from the target node's center point where the link should end. Default: `undefined` */\n linkTargetPointOffset?: GenericAccessor<[number, number], GraphLink<N, L>>;\n /** Set selected link by its unique id. Default: `undefined` */\n selectedLinkId?: number | string;\n\n // Nodes\n /** Node size accessor function or constant value. Default: `30` */\n nodeSize?: NumericAccessor<N>;\n /** Node stroke width accessor function or constant value. Default: `3` */\n nodeStrokeWidth?: NumericAccessor<N>;\n /** Node shape accessor function or constant value. Default: `GraphNodeShape.Circle` */\n nodeShape?: GenericAccessor<GraphNodeShape | string, N>;\n /** Node gauge outline accessor function or constant value in the range [0,100]. Default: `0` */\n nodeGaugeValue?: NumericAccessor<N>;\n /** Node gauge outline fill color accessor function or constant value. Default: `undefined` */\n nodeGaugeFill?: ColorAccessor<N>;\n /** Animation duration of the node gauge outline. Default: `1500` */\n nodeGaugeAnimDuration?: number;\n /** Node central icon accessor function or constant value. Default: `node => node.icon` */\n nodeIcon?: StringAccessor<N>;\n /** Node central icon size accessor function or constant value. Default: `undefined` */\n nodeIconSize?: NumericAccessor<N>;\n /** Node label accessor function or constant value. Default: `node => node.label` */\n nodeLabel?: StringAccessor<N>;\n /** Defines whether to trim the node labels or not. Default: `true` */\n nodeLabelTrim?: BooleanAccessor<N>;\n /** Node label trimming mode. Default: `TrimMode.Middle` */\n nodeLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n /** Node label maximum allowed text length above which the label will be trimmed. Default: `15` */\n nodeLabelTrimLength?: NumericAccessor<N>;\n /** Node sub-label accessor function or constant value: Default: `''` */\n nodeSubLabel?: StringAccessor<N>;\n /** Defines whether to trim the node sub-labels or not. Default: `true` */\n nodeSubLabelTrim?: BooleanAccessor<N>;\n /** Node sub-label trimming mode. Default: `TrimMode.Middle` */\n nodeSubLabelTrimMode?: GenericAccessor<TrimMode | string, N>;\n /** Node sub-label maximum allowed text length above which the label will be trimmed. Default: `15` */\n nodeSubLabelTrimLength?: NumericAccessor<N>;\n /** Node circular side labels accessor function. The function should return an array of GraphCircleLabel objects. Default: `undefined` */\n nodeSideLabels?: GenericAccessor<GraphCircleLabel[], N>;\n /** Node bottom icon accessor function. Default: `undefined` */\n nodeBottomIcon?: StringAccessor<N>;\n /** Node disabled state accessor function or constant value. Default: `false` */\n nodeDisabled?: BooleanAccessor<N>;\n /** Node fill color accessor function or constant value. Default: `node => node.fill` */\n nodeFill?: ColorAccessor<N>;\n /** Node stroke color accessor function or constant value. Default: `node => node.stroke` */\n nodeStroke?: ColorAccessor<N>;\n /** Sorting function to determine node placement. Default: `undefined` */\n nodeSort?: ((a: N, b: N) => number);\n /** Specify the initial position for entering nodes as [x, y]. Default: `undefined` */\n nodeEnterPosition?: GenericAccessor<[number, number], N> | undefined;\n /** Specify the initial scale for entering nodes in the range [0,1]. Default: `0.75` */\n nodeEnterScale?: NumericAccessor<N> | undefined;\n /** Specify the destination position for exiting nodes as [x, y]. Default: `undefined` */\n nodeExitPosition?: GenericAccessor<[number, number], N> | undefined;\n /** Specify the destination scale for exiting nodes in the range [0,1]. Default: `0.75` */\n nodeExitScale?: NumericAccessor<N> | undefined;\n /** Custom \"enter\" function for node rendering. Default: `undefined` */\n nodeEnterCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom \"update\" function for node rendering. Default: `undefined` */\n nodeUpdateCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom partial \"update\" function for node rendering which will be triggered after the following events:\n * - Full node update (`nodeUpdateCustomRenderFunction`);\n * - Background click;\n * - Node and Link mouseover and mouseout;\n * - Node brushing,\n * Default: `undefined` */\n nodePartialUpdateCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom \"exit\" function for node rendering. Default: `undefined` */\n nodeExitCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, duration: number, zoomLevel: number) => void;\n /** Custom render function that will be called while zooming / panning the graph. Default: `undefined` */\n nodeOnZoomCustomRenderFunction?:\n (datum: GraphNode<N, L>, nodeGroupElementSelection: Selection<SVGGElement, GraphNode<N, L>, null, unknown>, config: GraphConfigInterface<N, L>, zoomLevel: number) => void;\n /** Define the mode for highlighting selected nodes in the graph. Default: `GraphNodeSelectionHighlightMode.GreyoutNonConnected` */\n nodeSelectionHighlightMode?: GraphNodeSelectionHighlightMode;\n /** Set selected node by unique id. Default: `undefined` */\n selectedNodeId?: number | string;\n /** Set selected nodes by unique id. Default: `undefined` */\n selectedNodeIds?: number[] | string[];\n\n /** Panels configuration. An array of `GraphPanelConfig` objects. Default: `[]` */\n panels?: GraphPanelConfig[] | undefined;\n\n // Events\n /** Graph node drag start callback function. Default: `undefined` */\n onNodeDragStart?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Graph node drag callback function. Default: `undefined` */\n onNodeDrag?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Graph node drag end callback function. Default: `undefined` */\n onNodeDragEnd?: (n: GraphNode<N, L>, event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void | undefined;\n /** Zoom event callback. Default: `undefined` */\n onZoom?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Zoom start event callback. Default: `undefined` */\n onZoomStart?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Zoom end event callback. Default: `undefined` */\n onZoomEnd?: (zoomScale: number, zoomScaleExtent: [number, number], event: D3ZoomEvent<SVGGElement, unknown> | undefined, transform: ZoomTransform) => void;\n /** Callback function to be called when the graph layout is calculated. Default: `undefined` */\n onLayoutCalculated?: (nodes: GraphNode<N, L>[], links: GraphLink<N, L>[]) => void;\n /** Graph node selection brush callback function. Default: `undefined` */\n onNodeSelectionBrush?: (selectedNodes: GraphNode<N, L>[], event: D3BrushEvent<SVGGElement> | undefined) => void;\n /** Graph multiple node drag callback function. Default: `undefined` */\n onNodeSelectionDrag?: (selectedNodes: GraphNode<N, L>[], event: D3DragEvent<SVGGElement, GraphNode<N, L>, unknown>) => void;\n /** Callback function to be called when the graph rendering is complete. Default: `undefined` */\n onRenderComplete?: (\n g: Selection<SVGGElement, unknown, null, undefined>,\n nodes: GraphNode<N, L>[],\n links: GraphLink<N, L>[],\n config: GraphConfigInterface<N, L>,\n duration: number,\n zoomLevel: number,\n width: number,\n height: number\n ) => void;\n\n /** Determines whether the component should update when new data is provided.\n * This function takes the previous and new data as parameters and returns a boolean\n * indicating whether the update should proceed. Useful for fine-grained control over\n * update behavior when your data has a complex nested structure.\n * By default the `isEqual` function from Unovis will be used to do the comparison.\n */\n shouldDataUpdate?: (\n prevData: GraphInputData<N, L>,\n nextData: GraphInputData<N, L>,\n datamodel: GraphDataModel<N, L, GraphNode<N, L>, GraphLink<N, L>>\n ) => boolean;\n}\n\nexport const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {\n ...ComponentDefaultConfig,\n duration: 1000,\n zoomScaleExtent: [0.35, 1.25],\n disableZoom: false,\n zoomEventFilter: undefined,\n disableDrag: false,\n disableBrush: false,\n zoomThrottledUpdateNodeThreshold: 100,\n layoutType: GraphLayoutType.Force,\n layoutAutofit: true,\n layoutAutofitTolerance: 8.0,\n layoutNonConnectedAside: false,\n fitViewPadding: 50,\n fitViewAlign: GraphFitViewAlignment.Center,\n\n layoutGroupOrder: [],\n layoutParallelSubGroupsPerRow: 1,\n layoutParallelNodesPerColumn: 6,\n layoutParallelGroupSpacing: undefined,\n layoutParallelSortConnectionsByGroup: undefined,\n layoutNodeGroup: (n: GraphInputNode): string => (n as { group: string }).group,\n layoutParallelNodeSubGroup: (n: GraphInputNode): string => (n as { subgroup: string }).subgroup,\n\n forceLayoutSettings: {\n linkDistance: 60,\n linkStrength: 0.45,\n charge: -500,\n forceXStrength: 0.15,\n forceYStrength: 0.25,\n numIterations: undefined,\n fixNodePositionAfterSimulation: false,\n },\n\n dagreLayoutSettings: {\n rankdir: 'BT',\n ranker: 'longest-path',\n },\n\n layoutElkSettings: undefined,\n layoutElkNodeGroups: undefined,\n layoutElkGetNodeShape: undefined,\n\n linkFlowAnimDuration: 20000,\n linkFlowParticleSize: 2,\n linkFlowParticleSpeed: undefined,\n linkWidth: 1,\n linkStyle: GraphLinkStyle.Solid,\n linkBandWidth: 0,\n linkArrow: undefined,\n linkStroke: undefined,\n linkFlow: false,\n linkLabel: undefined,\n linkLabelShiftFromCenter: true,\n linkNeighborSpacing: 8,\n linkDisabled: false,\n linkCurvature: 0,\n linkHighlightOnHover: true,\n linkSourcePointOffset: undefined,\n linkTargetPointOffset: undefined,\n selectedLinkId: undefined,\n\n nodeSize: 30,\n nodeStrokeWidth: 3,\n nodeShape: GraphNodeShape.Circle,\n nodeGaugeValue: 0,\n nodeIcon: (n: GraphInputNode): string => (n as { icon: string }).icon,\n nodeIconSize: undefined,\n nodeLabel: (n: GraphInputNode): string => (n as { label: string }).label,\n nodeLabelTrim: true,\n nodeLabelTrimLength: 15,\n nodeLabelTrimMode: TrimMode.Middle,\n nodeSubLabel: '',\n nodeSubLabelTrim: true,\n nodeSubLabelTrimLength: 15,\n nodeSubLabelTrimMode: TrimMode.Middle,\n nodeSideLabels: undefined,\n nodeBottomIcon: undefined,\n nodeDisabled: false,\n nodeFill: (n: GraphInputNode): string => (n as { fill: string }).fill,\n nodeGaugeFill: undefined,\n nodeStroke: (n: GraphInputNode): string => (n as { stroke: string }).stroke,\n nodeEnterPosition: undefined,\n nodeEnterScale: 0.75,\n nodeExitPosition: undefined,\n nodeExitScale: 0.75,\n nodeSort: undefined,\n nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n nodeGaugeAnimDuration: 1500,\n\n selectedNodeId: undefined,\n selectedNodeIds: undefined,\n\n panels: undefined,\n\n onNodeDragStart: undefined,\n onNodeDrag: undefined,\n onNodeDragEnd: undefined,\n onZoom: undefined,\n onZoomStart: undefined,\n onZoomEnd: undefined,\n onLayoutCalculated: undefined,\n onNodeSelectionBrush: undefined,\n onNodeSelectionDrag: undefined,\n onRenderComplete: undefined,\n\n shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {\n return !isEqual(prevData, nextData)\n },\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { ComponentCore } from "../../core/component";
|
|
|
3
3
|
import { GraphDataModel } from "../../data-models/graph";
|
|
4
4
|
import { GraphInputLink, GraphInputNode, GraphInputData } from "../../types/graph";
|
|
5
5
|
import { Spacing } from "../../types/spacing";
|
|
6
|
-
import { GraphNode, GraphLink } from './types';
|
|
6
|
+
import { GraphNode, GraphLink, GraphFitViewAlignment } from './types';
|
|
7
7
|
import { GraphConfigInterface } from './config';
|
|
8
8
|
import * as nodeSelectors from './modules/node/style';
|
|
9
9
|
export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> extends ComponentCore<GraphInputData<N, L>, GraphConfigInterface<N, L>> {
|
|
@@ -124,7 +124,7 @@ export declare class Graph<N extends GraphInputNode, L extends GraphInputLink> e
|
|
|
124
124
|
zoomOut(increment?: number): void;
|
|
125
125
|
setZoom(zoomLevel: number): void;
|
|
126
126
|
getZoom(): number;
|
|
127
|
-
fitView(duration?: number, nodeIds?: (string | number)[]): void;
|
|
127
|
+
fitView(duration?: number, nodeIds?: (string | number)[], alignment?: GraphFitViewAlignment): void;
|
|
128
128
|
/** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
|
|
129
129
|
resetAutofitState(): void;
|
|
130
130
|
/** Get current coordinates of the nodes as an array of { id: string; x: number; y: number } objects */
|
|
@@ -9,7 +9,7 @@ import { ComponentCore } from '../../core/component/index.js';
|
|
|
9
9
|
import { GraphDataModel } from '../../data-models/graph.js';
|
|
10
10
|
import { isNumber, isFunction, clamp, getBoolean, getNumber, shallowDiff, isPlainObject, isEqual } from '../../utils/data.js';
|
|
11
11
|
import { smartTransition } from '../../utils/d3.js';
|
|
12
|
-
import { GraphLayoutType, GraphNodeSelectionHighlightMode, GraphLinkArrowStyle } from './types.js';
|
|
12
|
+
import { GraphLayoutType, GraphFitViewAlignment, GraphNodeSelectionHighlightMode, GraphLinkArrowStyle } from './types.js';
|
|
13
13
|
import { GraphDefaultConfig } from './config.js';
|
|
14
14
|
import { background, graphGroup, brush, root } from './style.js';
|
|
15
15
|
import * as style from './modules/node/style.js';
|
|
@@ -107,8 +107,10 @@ class Graph extends ComponentCore {
|
|
|
107
107
|
this._shouldSetPanels = true;
|
|
108
108
|
}
|
|
109
109
|
get bleed() {
|
|
110
|
-
const
|
|
111
|
-
return
|
|
110
|
+
const padding = this.config.fitViewPadding; // Extra padding to take into account labels and selection outlines
|
|
111
|
+
return isNumber(padding)
|
|
112
|
+
? { top: padding, bottom: padding, left: padding, right: padding }
|
|
113
|
+
: padding;
|
|
112
114
|
}
|
|
113
115
|
_render(customDuration) {
|
|
114
116
|
const { config: { disableBrush, disableZoom, duration, layoutAutofit, zoomEventFilter }, datamodel } = this;
|
|
@@ -334,15 +336,15 @@ class Graph extends ComponentCore {
|
|
|
334
336
|
this._shouldSetPanels = false;
|
|
335
337
|
}
|
|
336
338
|
}
|
|
337
|
-
_fit(duration = 0, nodeIds) {
|
|
339
|
+
_fit(duration = 0, nodeIds, alignment = this.config.fitViewAlign) {
|
|
338
340
|
const { datamodel: { nodes } } = this;
|
|
339
341
|
const fitViewNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.length) ? nodes.filter(n => nodeIds.includes(n.id)) : nodes;
|
|
340
|
-
const transform = this._getTransform(fitViewNodes);
|
|
342
|
+
const transform = this._getTransform(fitViewNodes, alignment);
|
|
341
343
|
smartTransition(this.g, duration)
|
|
342
344
|
.call(this._zoomBehavior.transform, transform);
|
|
343
345
|
this._onZoom(transform);
|
|
344
346
|
}
|
|
345
|
-
_getTransform(nodes) {
|
|
347
|
+
_getTransform(nodes, alignment) {
|
|
346
348
|
const { nodeSize, zoomScaleExtent } = this.config;
|
|
347
349
|
const { left, top, right, bottom } = this.bleed;
|
|
348
350
|
const maxNodeSize = getMaxNodeSize(nodes, nodeSize);
|
|
@@ -360,13 +362,34 @@ class Graph extends ComponentCore {
|
|
|
360
362
|
console.warn('Unovis | Graph: Some of the node coordinates are undefined. This can happen if you try to fit the graph before the layout has been calculated.');
|
|
361
363
|
return zoomIdentity;
|
|
362
364
|
}
|
|
363
|
-
const xScale = w / (xExtent[1] - xExtent[0] + left + right);
|
|
364
|
-
const yScale = h / (yExtent[1] - yExtent[0] + top + bottom);
|
|
365
|
+
const xScale = w / (xExtent[1] - xExtent[0] + (left || 0) + (right || 0));
|
|
366
|
+
const yScale = h / (yExtent[1] - yExtent[0] + (top || 0) + (bottom || 0));
|
|
365
367
|
const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1]);
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
368
|
+
// Calculate translation based on alignment
|
|
369
|
+
let translateX;
|
|
370
|
+
let translateY;
|
|
371
|
+
switch (alignment) {
|
|
372
|
+
case GraphFitViewAlignment.Left:
|
|
373
|
+
translateX = left - xExtent[0] * clampedScale;
|
|
374
|
+
translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale;
|
|
375
|
+
break;
|
|
376
|
+
case GraphFitViewAlignment.Right:
|
|
377
|
+
translateX = this._width - (xExtent[1] - xExtent[0]) * clampedScale - right;
|
|
378
|
+
translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale;
|
|
379
|
+
break;
|
|
380
|
+
case GraphFitViewAlignment.Top:
|
|
381
|
+
translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale;
|
|
382
|
+
translateY = top - yExtent[0] * clampedScale;
|
|
383
|
+
break;
|
|
384
|
+
case GraphFitViewAlignment.Bottom:
|
|
385
|
+
translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale;
|
|
386
|
+
translateY = this._height - (yExtent[1] - yExtent[0]) * clampedScale - bottom;
|
|
387
|
+
break;
|
|
388
|
+
case GraphFitViewAlignment.Center:
|
|
389
|
+
default:
|
|
390
|
+
translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale;
|
|
391
|
+
translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale;
|
|
392
|
+
}
|
|
370
393
|
const transform = zoomIdentity
|
|
371
394
|
.translate(translateX, translateY)
|
|
372
395
|
.scale(clampedScale);
|
|
@@ -783,10 +806,10 @@ class Graph extends ComponentCore {
|
|
|
783
806
|
getZoom() {
|
|
784
807
|
return zoomTransform(this.g.node()).k;
|
|
785
808
|
}
|
|
786
|
-
fitView(duration = this.config.duration, nodeIds) {
|
|
809
|
+
fitView(duration = this.config.duration, nodeIds, alignment) {
|
|
787
810
|
var _a;
|
|
788
811
|
(_a = this._layoutCalculationPromise) === null || _a === void 0 ? void 0 : _a.then(() => {
|
|
789
|
-
this._fit(duration, nodeIds);
|
|
812
|
+
this._fit(duration, nodeIds, alignment);
|
|
790
813
|
});
|
|
791
814
|
}
|
|
792
815
|
/** Enable automatic fitting to container if it was disabled due to previous zoom / pan interactions */
|