@unovis/ts 1.4.0-alpha.1 → 1.4.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/graph/config.d.ts +11 -3
- package/components/graph/config.js +2 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +2 -0
- package/components/graph/index.js +14 -4
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/layout.js +1 -8
- package/components/graph/modules/layout.js.map +1 -1
- package/components/graph/modules/link/index.js +2 -2
- package/components/graph/modules/link/index.js.map +1 -1
- package/components/graph/modules/link/style.d.ts +1 -1
- package/components/graph/modules/link/style.js +3 -3
- package/components/graph/modules/link/style.js.map +1 -1
- package/components/graph/modules/node/index.js +2 -2
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/graph/modules/node/style.d.ts +1 -1
- package/components/graph/modules/node/style.js +7 -3
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/types.d.ts +2 -1
- package/components/graph/types.js +1 -0
- package/components/graph/types.js.map +1 -1
- package/components/vis-controls/index.d.ts +3 -0
- package/components/vis-controls/index.js +6 -1
- package/components/vis-controls/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -57,6 +57,8 @@ const variables = injectGlobal `
|
|
|
57
57
|
--vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);
|
|
58
58
|
|
|
59
59
|
/* Greyout */
|
|
60
|
+
--vis-graph-node-greyout-opacity: 0.9;
|
|
61
|
+
--vis-graph-node-greyout-filter: none;
|
|
60
62
|
--vis-graph-node-greyout-color: #ebeff7;
|
|
61
63
|
--vis-graph-node-icon-greyout-color: #c6cad1;
|
|
62
64
|
--vis-graph-node-side-label-background-greyout-color: #f1f4f7;
|
|
@@ -242,8 +244,10 @@ const customNode = css `
|
|
|
242
244
|
|
|
243
245
|
stroke-width: 0;
|
|
244
246
|
`;
|
|
245
|
-
const
|
|
246
|
-
label:
|
|
247
|
+
const greyedOutNode = css `
|
|
248
|
+
label: greyed-out;
|
|
249
|
+
opacity: var(--vis-graph-node-greyout-opacity);
|
|
250
|
+
filter: var(--vis-graph-node-greyout-filter);
|
|
247
251
|
|
|
248
252
|
${`.${node}`} {
|
|
249
253
|
fill: var(--vis-graph-node-greyout-color) !important;
|
|
@@ -274,5 +278,5 @@ const greyoutNode = css `
|
|
|
274
278
|
}
|
|
275
279
|
`;
|
|
276
280
|
|
|
277
|
-
export { customNode, draggable, gNode, gNodeExit,
|
|
281
|
+
export { customNode, draggable, gNode, gNodeExit, greyedOutNode, label, labelBackground, labelText, labelTextContent, node, nodeBottomIcon, nodeGauge, nodeIcon, nodeIsDragged, nodePolygon, nodeSelection, nodeSelectionActive, nodes, sideLabel, sideLabelBackground, sideLabelGroup, sideLabelsGroup, subLabelTextContent, variables };
|
|
278
282
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Node Fill */\n --vis-graph-node-stroke-color: rgb(206, 211, 222);\n --vis-graph-node-fill-color: #fff;\n --vis-graph-node-gauge-color: #adb4c2;\n --vis-graph-node-selection-color: #acb3b8;\n\n --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n --vis-dark-graph-node-fill-color: #494b56;\n --vis-dark-graph-node-gauge-color: #989aa3;\n --vis-dark-graph-node-selection-color: #494b56;\n\n /* Node Central Icon */\n --vis-graph-node-icon-fill-color-bright: #ffffff;\n --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n --vis-graph-node-icon-fill-color: #9ea7b8;\n\n --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n /* Node Bottom Icon */\n --vis-graph-node-bottom-icon-font-size: 14pt;\n --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-graph-node-bottom-icon-stroke-color: #fff;\n --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n /* Node Label */\n --vis-graph-node-label-font-size: 9pt;\n --vis-graph-node-label-background: #ffffff;\n --vis-graph-node-label-text-color: #0F1E57;\n --vis-graph-node-sublabel-text-color: #989aa3;\n --vis-graph-node-sublabel-font-size: 8pt;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-graph-node-label-font-family: */\n\n --vis-dark-graph-node-label-background: var(--vis-color-grey);\n --vis-dark-graph-node-label-text-color: #ffffff;\n --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n /* Node Side Labels (circular labels)*/\n --vis-graph-node-side-label-background-fill-color: #a0a9af;\n --vis-graph-node-side-label-background-stroke-color: #ffffff;\n --vis-graph-node-side-label-fill-color-bright: #ffffff;\n --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n /* Greyout */\n --vis-graph-node-greyout-color: #ebeff7;\n --vis-graph-node-icon-greyout-color: #c6cad1;\n --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n --vis-dark-graph-node-greyout-color: #494b56;\n --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n\n /* Misc */\n --vis-graph-node-dominant-baseline: middle;\n }\n\n body.theme-dark ${`.${nodes}`} {\n --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n }\n`\n\nexport const node = css`\n label: node-shape;\n\n stroke: var(--vis-graph-node-stroke-color);\n fill: var(--vis-graph-node-fill-color);\n transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s all;\n fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n label: node-bottom-icon;\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n font-size: var(--vis-graph-node-bottom-icon-font-size);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s fill;\n fill: var(--vis-graph-node-bottom-icon-fill-color);\n stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n label: dragged;\n`\n\nexport const label = css`\n label: label;\n\n text-anchor: middle;\n font-weight: 300;\n font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n label: background;\n\n opacity: 0.9;\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n label: label-text;\n`\n\nexport const labelTextContent = css`\n label: label-text-content;\n\n fill: var(--vis-graph-node-label-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n`\n\nexport const subLabelTextContent = css`\n label: sublabel-text-content;\n\n fill: var(--vis-graph-node-sublabel-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n label: side-label-background;\n\n stroke-opacity: 0.8;\n stroke: var(--vis-graph-node-side-label-background-stroke-color);\n fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n label: side-label;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n font-size: 16px;\n fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n label: side-label-group;\n cursor: default;\n`\n\nexport const gNode = css`\n label: g-node;\n\n transition: .25s opacity;\n`\n\nexport const draggable = css`\n label: draggable;\n\n &:hover {\n cursor: grab;\n }\n\n &${`.${nodeIsDragged}`} {\n cursor: grabbing;\n }\n`\n\nexport const gNodeExit = css`\n label: g-node-exit;\n pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n label: active;\n`\n\nexport const nodeSelection = css`\n label: node-selection;\n\n fill: none;\n stroke-width: 1;\n stroke-dasharray: 3 3;\n opacity: 0;\n transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n transform: scale(.5);\n fill: var(--vis-graph-node-selection-color);\n fill-opacity: 0.1;\n stroke: var(--vis-graph-node-selection-color);\n stroke-opacity: 0.75;\n\n &${`.${nodeSelectionActive}`} {\n opacity: 1;\n transform: scale(1.2);\n }\n`\n\nexport const nodeGauge = css`\n label: node-gauge;\n\n fill: var(--vis-graph-node-gauge-color);\n transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n label: polygon;\n\n ${`.${nodeGauge}`} {\n fill-opacity: 0;\n stroke-linecap: round;\n pointer-events: none;\n }\n`\n\nexport const customNode = css`\n label: custom-node;\n\n stroke-width: 0;\n`\n\nexport const greyoutNode = css`\n label: greyout;\n\n ${`.${node}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${nodeIcon}`} {\n fill: var(--vis-graph-node-icon-greyout-color) !important;\n }\n\n ${`.${nodeGauge}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${label}`} {\n opacity: 0.5;\n }\n\n ${`.${sideLabelBackground}`} {\n fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n stroke-opacity: 0.5;\n }\n\n ${`.${sideLabel}`} {\n fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n opacity: 0.25;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../../src/components/graph/modules/node/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const nodes = css`\n label: nodes;\n`\n\nexport const variables = injectGlobal`\n :root {\n /* Node Fill */\n --vis-graph-node-stroke-color: rgb(206, 211, 222);\n --vis-graph-node-fill-color: #fff;\n --vis-graph-node-gauge-color: #adb4c2;\n --vis-graph-node-selection-color: #acb3b8;\n\n --vis-dark-graph-node-stroke-color: rgba(30,30,30,.25);\n --vis-dark-graph-node-fill-color: #494b56;\n --vis-dark-graph-node-gauge-color: #989aa3;\n --vis-dark-graph-node-selection-color: #494b56;\n\n /* Node Central Icon */\n --vis-graph-node-icon-fill-color-bright: #ffffff;\n --vis-graph-node-icon-fill-color-dark: var(--vis-color-grey);\n --vis-graph-node-icon-fill-color: #9ea7b8;\n\n --vis-dark-graph-node-icon-fill-color: var(--vis-graph-node-icon-fill-color-bright);\n\n /* Node Bottom Icon */\n --vis-graph-node-bottom-icon-font-size: 14pt;\n --vis-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-graph-node-bottom-icon-stroke-color: #fff;\n --vis-graph-node-bottom-icon-stroke-width: 2px;\n\n --vis-dark-graph-node-bottom-icon-fill-color: #a0a6ad;\n --vis-dark-graph-node-bottom-icon-stroke-color: #fff;\n\n /* Node Label */\n --vis-graph-node-label-font-size: 9pt;\n --vis-graph-node-label-background: #ffffff;\n --vis-graph-node-label-text-color: #0F1E57;\n --vis-graph-node-sublabel-text-color: #989aa3;\n --vis-graph-node-sublabel-font-size: 8pt;\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-graph-node-label-font-family: */\n\n --vis-dark-graph-node-label-background: var(--vis-color-grey);\n --vis-dark-graph-node-label-text-color: #ffffff;\n --vis-dark-graph-node-sublabel-text-color: #989aa3;\n\n /* Node Side Labels (circular labels)*/\n --vis-graph-node-side-label-background-fill-color: #a0a9af;\n --vis-graph-node-side-label-background-stroke-color: #ffffff;\n --vis-graph-node-side-label-fill-color-bright: #ffffff;\n --vis-graph-node-side-label-fill-color-dark: #494b56;\n\n --vis-dark-graph-node-side-label-background-fill-color: #989aa3;\n --vis-dark-graph-node-side-label-background-stroke-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-fill-color-bright: #f1f4f7;\n --vis-dark-graph-node-side-label-fill-color-dark: var(--vis-color-grey);\n\n /* Greyout */\n --vis-graph-node-greyout-opacity: 0.9;\n --vis-graph-node-greyout-filter: none;\n --vis-graph-node-greyout-color: #ebeff7;\n --vis-graph-node-icon-greyout-color: #c6cad1;\n --vis-graph-node-side-label-background-greyout-color: #f1f4f7;\n\n --vis-dark-graph-node-greyout-color: #494b56;\n --vis-dark-graph-node-icon-greyout-color: var(--vis-color-grey);\n --vis-dark-graph-node-side-label-background-greyout-color: #494B56;\n\n /* Misc */\n --vis-graph-node-dominant-baseline: middle;\n }\n\n body.theme-dark ${`.${nodes}`} {\n --vis-graph-node-stroke-color: var(--vis-dark-graph-node-stroke-color);\n --vis-graph-node-fill-color: var(--vis-dark-graph-node-fill-color);\n --vis-graph-node-gauge-color: var(--vis-dark-graph-node-gauge-color);\n --vis-graph-node-selection-color: var(--vis-dark-graph-node-selection-color);\n\n --vis-graph-node-icon-fill-color: var(--vis-dark-graph-node-icon-fill-color);\n\n --vis-graph-node-bottom-icon-fill-color: var(--vis-dark-graph-node-bottom-icon-fill-color);\n --vis-graph-node-bottom-icon-stroke-color: var(--vis-dark-graph-node-bottom-icon-stroke-color);\n\n --vis-graph-node-label-background: var(--vis-dark-graph-node-label-background);\n --vis-graph-node-label-text-color: var(--vis-dark-graph-node-label-text-color);\n --vis-graph-node-sublabel-text-color: var(--vis-dark-graph-node-sublabel-text-color);\n\n --vis-graph-node-side-label-background-fill-color: var(--vis-dark-graph-node-side-label-background-fill-color);\n --vis-graph-node-side-label-background-stroke-color: var(--vis-dark-graph-side-label-background-stroke-color);\n --vis-graph-node-side-label-fill-color-bright: var(--vis-dark-graph-node-side-label-fill-color-bright);\n --vis-graph-node-side-label-fill-color-dark: var(vis-dark-graph-node-side-label-fill-color-dark);\n\n --vis-graph-node-greyout-color: var(--vis-dark-graph-node-greyout-color);\n --vis-graph-node-icon-greyout-color: var(--vis-dark-graph-node-icon-greyout-color);\n --vis-graph-node-side-label-background-greyout-color: var(--vis-dark-graph-node-side-label-background-greyout-color);\n }\n`\n\nexport const node = css`\n label: node-shape;\n\n stroke: var(--vis-graph-node-stroke-color);\n fill: var(--vis-graph-node-fill-color);\n transition: .4s fill, .4s stroke;\n`\n\nexport const nodeIcon = css`\n label: icon;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s all;\n fill: var(--vis-graph-node-icon-fill-color);\n`\n\nexport const nodeBottomIcon = css`\n label: node-bottom-icon;\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n font-size: var(--vis-graph-node-bottom-icon-font-size);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n pointer-events: none;\n transition: .4s fill;\n fill: var(--vis-graph-node-bottom-icon-fill-color);\n stroke: var(--vis-graph-node-bottom-icon-stroke-color);\n stroke-width: var(--vis-graph-node-bottom-icon-stroke-width);\n`\n\nexport const nodeIsDragged = css`\n label: dragged;\n`\n\nexport const label = css`\n label: label;\n\n text-anchor: middle;\n font-weight: 300;\n font-size: var(--vis-graph-node-label-font-size);\n`\n\nexport const labelBackground = css`\n label: background;\n\n opacity: 0.9;\n -webkit-backdrop-filter: blur(2px);\n backdrop-filter: blur(2px);\n fill: var(--vis-graph-node-label-background);\n`\n\nexport const labelText = css`\n label: label-text;\n`\n\nexport const labelTextContent = css`\n label: label-text-content;\n\n fill: var(--vis-graph-node-label-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n`\n\nexport const subLabelTextContent = css`\n label: sublabel-text-content;\n\n fill: var(--vis-graph-node-sublabel-text-color);\n font-family: var(--vis-graph-node-label-font-family, var(--vis-font-family));\n font-size: var(--vis-graph-node-sublabel-font-size);\n`\n\nexport const sideLabelsGroup = css`\n label: side-labels-group;\n`\n\nexport const sideLabelBackground = css`\n label: side-label-background;\n\n stroke-opacity: 0.8;\n stroke: var(--vis-graph-node-side-label-background-stroke-color);\n fill: var(--vis-graph-node-side-label-background-fill-color);\n`\n\nexport const sideLabel = css`\n label: side-label;\n\n font-family: var(--vis-graph-icon-font-family), var(--vis-font-family);\n dominant-baseline: var(--vis-graph-node-dominant-baseline);\n text-anchor: middle;\n font-size: 16px;\n fill: var(--vis-graph-node-side-label-fill-color-bright);\n`\n\nexport const sideLabelGroup = css`\n label: side-label-group;\n cursor: default;\n`\n\nexport const gNode = css`\n label: g-node;\n\n transition: .25s opacity;\n`\n\nexport const draggable = css`\n label: draggable;\n\n &:hover {\n cursor: grab;\n }\n\n &${`.${nodeIsDragged}`} {\n cursor: grabbing;\n }\n`\n\nexport const gNodeExit = css`\n label: g-node-exit;\n pointer-events: none;\n`\n\nexport const nodeSelectionActive = css`\n label: active;\n`\n\nexport const nodeSelection = css`\n label: node-selection;\n\n fill: none;\n stroke-width: 1;\n stroke-dasharray: 3 3;\n opacity: 0;\n transition: 350ms cubic-bezier(0.165, 0.840, 0.440, 1.000);\n transform: scale(.5);\n fill: var(--vis-graph-node-selection-color);\n fill-opacity: 0.1;\n stroke: var(--vis-graph-node-selection-color);\n stroke-opacity: 0.75;\n\n &${`.${nodeSelectionActive}`} {\n opacity: 1;\n transform: scale(1.2);\n }\n`\n\nexport const nodeGauge = css`\n label: node-gauge;\n\n fill: var(--vis-graph-node-gauge-color);\n transition: .4s fill;\n`\n\nexport const nodePolygon = css`\n label: polygon;\n\n ${`.${nodeGauge}`} {\n fill-opacity: 0;\n stroke-linecap: round;\n pointer-events: none;\n }\n`\n\nexport const customNode = css`\n label: custom-node;\n\n stroke-width: 0;\n`\n\nexport const greyedOutNode = css`\n label: greyed-out;\n opacity: var(--vis-graph-node-greyout-opacity);\n filter: var(--vis-graph-node-greyout-filter);\n\n ${`.${node}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${nodeIcon}`} {\n fill: var(--vis-graph-node-icon-greyout-color) !important;\n }\n\n ${`.${nodeGauge}`} {\n fill: var(--vis-graph-node-greyout-color) !important;\n stroke: var(--vis-graph-node-greyout-color) !important;\n }\n\n ${`.${label}`} {\n opacity: 0.5;\n }\n\n ${`.${sideLabelBackground}`} {\n fill: var(--vis-graph-node-side-label-background-greyout-color) !important;\n stroke-opacity: 0.5;\n }\n\n ${`.${sideLabel}`} {\n fill: var(--vis-graph-node-side-label-fill-color-bright) !important;\n opacity: 0.25;\n }\n`\n"],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEjB,kBAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;EAwB9B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;EAMtB;AAEM,MAAM,QAAQ,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAS1B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;EAWhC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;EAE/B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;EAMvB;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;;;;;;EAOjC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,gBAAgB,GAAG,GAAG,CAAA,CAAA;;;;;EAKlC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,eAAe,GAAG,GAAG,CAAA,CAAA;;EAEjC;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;;;;;EAMrC;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;;EAQ3B;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;EAIvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;;;AAOvB,GAAA,EAAA,CAAA,CAAA,EAAI,aAAa,CAAE,CAAA,CAAA;;;EAGvB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;EAG3B;AAEM,MAAM,mBAAmB,GAAG,GAAG,CAAA,CAAA;;EAErC;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;AAc3B,GAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;EAI7B;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;;;;EAK3B;AAEM,MAAM,WAAW,GAAG,GAAG,CAAA,CAAA;;;AAG1B,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;EAKlB;AAEM,MAAM,UAAU,GAAG,GAAG,CAAA,CAAA;;;;EAI5B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;;;AAK5B,EAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;AAKV,EAAA,EAAA,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;;;;AAId,EAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;AAKf,EAAA,EAAA,CAAA,CAAA,EAAI,KAAK,CAAE,CAAA,CAAA;;;;AAIX,EAAA,EAAA,CAAA,CAAA,EAAI,mBAAmB,CAAE,CAAA,CAAA;;;;;AAKxB,GAAA,EAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;;;;;;;;"}
|
|
@@ -7,6 +7,7 @@ var GraphLayoutType;
|
|
|
7
7
|
GraphLayoutType["Dagre"] = "dagre";
|
|
8
8
|
GraphLayoutType["Force"] = "force";
|
|
9
9
|
GraphLayoutType["Elk"] = "elk";
|
|
10
|
+
GraphLayoutType["Precalculated"] = "precalculated";
|
|
10
11
|
})(GraphLayoutType || (GraphLayoutType = {}));
|
|
11
12
|
var GraphLinkStyle;
|
|
12
13
|
(function (GraphLinkStyle) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/components/graph/types.ts"],"sourcesContent":["// Types\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\nexport type GraphNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNodeCore<N, L> & {\n x?: number;\n y?: number;\n\n _id?: number | string;\n _index?: number;\n _state?: {\n isDragged?: boolean;\n fx?: number;\n fy?: number;\n selected?: boolean;\n greyout?: boolean;\n };\n\n _panels?: GraphPanel<N, L>[];\n _isConnected?: boolean;\n}\n\nexport type GraphForceSimulationNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNode<N, L> & {\n fx?: number;\n fy?: number;\n}\n\nexport type GraphLink<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphLinkCore<N, L> & {\n id?: number | string;\n source: number | string | GraphNode<N>;\n target: number | string | GraphNode<N>;\n\n _id?: number | string;\n _direction?: number;\n _index?: number;\n _neighbours?: number;\n\n _state?: {\n flowAnimTime?: number;\n hovered?: boolean;\n selected?: boolean;\n greyout?: boolean;\n };\n}\n\nexport enum GraphLayoutType {\n Circular = 'circular',\n Concentric = 'concentric',\n Parallel = 'parallel',\n ParallelHorizontal = 'parallel horizontal',\n Dagre = 'dagre',\n Force = 'force',\n Elk = 'elk',\n}\n\nexport type GraphCircleLabel = {\n text: string;\n textColor?: string | null;\n color?: string | null;\n cursor?: string | null;\n fontSize?: string | null;\n radius?: number;\n}\n\nexport type GraphLinkLabel = GraphCircleLabel\n\nexport enum GraphLinkStyle {\n Dashed = 'dashed',\n Solid = 'solid',\n}\n\nexport enum GraphLinkArrowStyle {\n Single = 'single',\n Double = 'double',\n}\n\nexport enum GraphNodeShape {\n Circle = 'circle',\n Square = 'square',\n Hexagon = 'hexagon',\n Triangle = 'triangle',\n}\n\nexport type GraphPanelConfig = {\n /** Panel nodes references by unique ids */\n nodes: (string|number)[];\n /** Panel label */\n label?: string;\n /** Position of the label */\n labelPosition?: Position.Top | Position.Bottom | string;\n /** Color of the panel's border */\n borderColor?: string;\n /** Border width of the panel in pixels */\n borderWidth?: number;\n /** Inner padding */\n padding?: number | Spacing;\n /** Dashed outline showing that the panel is selected */\n dashedOutline?: boolean;\n /** Side icon symbol */\n sideIconSymbol?: string;\n /** Size of the icon as a CSS string. e.g.: `12pt` or `12px` */\n sideIconFontSize?: string;\n /** Color of the icon */\n sideIconSymbolColor?: string;\n /** Shape of the icon's background */\n sideIconShape?: GraphNodeShape | string;\n /** Size of the icon's background shape */\n sideIconShapeSize?: number;\n /** Stroke color of the icon's background shape */\n sideIconShapeStroke?: string;\n /** Cursor, when hovering over the icon */\n sideIconCursor?: string;\n}\n\nexport type GraphPanel<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphPanelConfig & {\n _numNodes?: number;\n _x?: number;\n _y?: number;\n _width?: number;\n _height?: number;\n _disabled?: boolean;\n _padding?: Spacing;\n}\n\nexport type GraphNodeAnimationState = {\n endAngle: number;\n nodeIndex: number;\n nodeSize?: number;\n borderWidth?: number;\n}\n\nexport type GraphNodeAnimatedElement<T = SVGElement> = T & {\n _animState: GraphNodeAnimationState;\n}\n\nexport type GraphForceLayoutSettings<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = {\n /** Preferred Link Distance. Default: `60` */\n linkDistance?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Link Strength [0:1]. Default: `0.45` */\n linkStrength?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */\n charge?: number | ((l: GraphNode<N, L>, i: number) => number);\n /** X-centring force. Default: `0.15` */\n forceXStrength?: number;\n /** Y-centring force. Default: `0.25` */\n forceYStrength?: number;\n /** Number if simulation iterations. Default: automatic */\n numIterations?: number;\n /** Set to true if you want to fix the node positions after the simulation\n * Helpful when you want to update graph settings without re-calculating the layout.\n * Default: `false` */\n fixNodePositionAfterSimulation?: boolean;\n}\n\nexport type GraphElkLayoutSettings = Record<string, string>\n\n/**\n * Settings for configuring the layout of a Dagre graph.\n */\nexport type GraphDagreLayoutSetting = {\n /**\n * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n rankdir?: 'TB' | 'BT' | 'LR' | 'RL' | string;\n\n /**\n * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n align?: 'UL' | 'UR' | 'DL' | 'DR' | string;\n\n /**\n * Number of pixels that separate nodes horizontally in the layout.\n */\n nodesep?: number;\n\n /**\n * Number of pixels that separate edges horizontally in the layout.\n */\n edgesep?: number;\n\n /**\n * Number of pixels between each rank in the layout.\n */\n ranksep?: number;\n\n /**\n * Number of pixels to use as a margin around the left and right of the graph.\n */\n marginx?: number;\n\n /**\n * Number of pixels to use as a margin around the top and bottom of the graph.\n */\n marginy?: number;\n\n /**\n * If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.\n * A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n */\n acyclicer?: 'greedy' | undefined;\n\n /**\n * Type of algorithm to assign a rank to each node in the input graph.\n * Possible values are 'network-simplex', 'tight-tree', or 'longest-path'.\n * Additional custom values can also be provided as a string.\n */\n ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;\n}\n\n"],"names":[],"mappings":"IAuDY,
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/graph/types.ts"],"sourcesContent":["// Types\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\nexport type GraphNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNodeCore<N, L> & {\n x?: number;\n y?: number;\n\n _id?: number | string;\n _index?: number;\n _state?: {\n isDragged?: boolean;\n fx?: number;\n fy?: number;\n selected?: boolean;\n greyout?: boolean;\n };\n\n _panels?: GraphPanel<N, L>[];\n _isConnected?: boolean;\n}\n\nexport type GraphForceSimulationNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNode<N, L> & {\n fx?: number;\n fy?: number;\n}\n\nexport type GraphLink<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphLinkCore<N, L> & {\n id?: number | string;\n source: number | string | GraphNode<N>;\n target: number | string | GraphNode<N>;\n\n _id?: number | string;\n _direction?: number;\n _index?: number;\n _neighbours?: number;\n\n _state?: {\n flowAnimTime?: number;\n hovered?: boolean;\n selected?: boolean;\n greyout?: boolean;\n };\n}\n\nexport enum GraphLayoutType {\n Circular = 'circular',\n Concentric = 'concentric',\n Parallel = 'parallel',\n ParallelHorizontal = 'parallel horizontal',\n Dagre = 'dagre',\n Force = 'force',\n Elk = 'elk',\n Precalculated = 'precalculated',\n}\n\nexport type GraphCircleLabel = {\n text: string;\n textColor?: string | null;\n color?: string | null;\n cursor?: string | null;\n fontSize?: string | null;\n radius?: number;\n}\n\nexport type GraphLinkLabel = GraphCircleLabel\n\nexport enum GraphLinkStyle {\n Dashed = 'dashed',\n Solid = 'solid',\n}\n\nexport enum GraphLinkArrowStyle {\n Single = 'single',\n Double = 'double',\n}\n\nexport enum GraphNodeShape {\n Circle = 'circle',\n Square = 'square',\n Hexagon = 'hexagon',\n Triangle = 'triangle',\n}\n\nexport type GraphPanelConfig = {\n /** Panel nodes references by unique ids */\n nodes: (string|number)[];\n /** Panel label */\n label?: string;\n /** Position of the label */\n labelPosition?: Position.Top | Position.Bottom | string;\n /** Color of the panel's border */\n borderColor?: string;\n /** Border width of the panel in pixels */\n borderWidth?: number;\n /** Inner padding */\n padding?: number | Spacing;\n /** Dashed outline showing that the panel is selected */\n dashedOutline?: boolean;\n /** Side icon symbol */\n sideIconSymbol?: string;\n /** Size of the icon as a CSS string. e.g.: `12pt` or `12px` */\n sideIconFontSize?: string;\n /** Color of the icon */\n sideIconSymbolColor?: string;\n /** Shape of the icon's background */\n sideIconShape?: GraphNodeShape | string;\n /** Size of the icon's background shape */\n sideIconShapeSize?: number;\n /** Stroke color of the icon's background shape */\n sideIconShapeStroke?: string;\n /** Cursor, when hovering over the icon */\n sideIconCursor?: string;\n}\n\nexport type GraphPanel<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphPanelConfig & {\n _numNodes?: number;\n _x?: number;\n _y?: number;\n _width?: number;\n _height?: number;\n _disabled?: boolean;\n _padding?: Spacing;\n}\n\nexport type GraphNodeAnimationState = {\n endAngle: number;\n nodeIndex: number;\n nodeSize?: number;\n borderWidth?: number;\n}\n\nexport type GraphNodeAnimatedElement<T = SVGElement> = T & {\n _animState: GraphNodeAnimationState;\n}\n\nexport type GraphForceLayoutSettings<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = {\n /** Preferred Link Distance. Default: `60` */\n linkDistance?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Link Strength [0:1]. Default: `0.45` */\n linkStrength?: number | ((l: GraphLink<N, L>, i: number) => number);\n /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */\n charge?: number | ((l: GraphNode<N, L>, i: number) => number);\n /** X-centring force. Default: `0.15` */\n forceXStrength?: number;\n /** Y-centring force. Default: `0.25` */\n forceYStrength?: number;\n /** Number if simulation iterations. Default: automatic */\n numIterations?: number;\n /** Set to true if you want to fix the node positions after the simulation\n * Helpful when you want to update graph settings without re-calculating the layout.\n * Default: `false` */\n fixNodePositionAfterSimulation?: boolean;\n}\n\nexport type GraphElkLayoutSettings = Record<string, string>\n\n/**\n * Settings for configuring the layout of a Dagre graph.\n */\nexport type GraphDagreLayoutSetting = {\n /**\n * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n rankdir?: 'TB' | 'BT' | 'LR' | 'RL' | string;\n\n /**\n * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n align?: 'UL' | 'UR' | 'DL' | 'DR' | string;\n\n /**\n * Number of pixels that separate nodes horizontally in the layout.\n */\n nodesep?: number;\n\n /**\n * Number of pixels that separate edges horizontally in the layout.\n */\n edgesep?: number;\n\n /**\n * Number of pixels between each rank in the layout.\n */\n ranksep?: number;\n\n /**\n * Number of pixels to use as a margin around the left and right of the graph.\n */\n marginx?: number;\n\n /**\n * Number of pixels to use as a margin around the top and bottom of the graph.\n */\n marginy?: number;\n\n /**\n * If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.\n * A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n */\n acyclicer?: 'greedy' | undefined;\n\n /**\n * Type of algorithm to assign a rank to each node in the input graph.\n * Possible values are 'network-simplex', 'tight-tree', or 'longest-path'.\n * Additional custom values can also be provided as a string.\n */\n ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;\n}\n\n"],"names":[],"mappings":"IAuDY,gBASX;AATD,CAAA,UAAY,eAAe,EAAA;AACzB,IAAA,eAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,eAAA,CAAA,YAAA,CAAA,GAAA,YAAyB,CAAA;AACzB,IAAA,eAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,eAAA,CAAA,oBAAA,CAAA,GAAA,qBAA0C,CAAA;AAC1C,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf,IAAA,eAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,eAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EATW,eAAe,KAAf,eAAe,GAS1B,EAAA,CAAA,CAAA,CAAA;IAaW,eAGX;AAHD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,cAAc,KAAd,cAAc,GAGzB,EAAA,CAAA,CAAA,CAAA;IAEW,oBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,mBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA,CAAA;IAEW,eAKX;AALD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,cAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACvB,CAAC,EALW,cAAc,KAAd,cAAc,GAKzB,EAAA,CAAA,CAAA;;;;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { Selection } from 'd3-selection';
|
|
2
2
|
import { VisControlItemInterface } from './types';
|
|
3
3
|
import { VisControlsConfigInterface } from './config';
|
|
4
|
+
import * as s from './style';
|
|
4
5
|
export declare class VisControls {
|
|
6
|
+
static selectors: typeof s;
|
|
5
7
|
div: Selection<HTMLDivElement, unknown, null, undefined>;
|
|
6
8
|
element: HTMLDivElement;
|
|
7
9
|
protected _defaultConfig: VisControlsConfigInterface;
|
|
@@ -12,4 +14,5 @@ export declare class VisControls {
|
|
|
12
14
|
update(config: VisControlsConfigInterface): void;
|
|
13
15
|
render(): void;
|
|
14
16
|
_onItemClick(event: MouseEvent, item: VisControlItemInterface): void;
|
|
17
|
+
destroy(): void;
|
|
15
18
|
}
|
|
@@ -2,6 +2,7 @@ import { select } from 'd3-selection';
|
|
|
2
2
|
import { merge } from '../../utils/data.js';
|
|
3
3
|
import { VisControlsOrientation } from './types.js';
|
|
4
4
|
import { VisControlsDefaultConfig } from './config.js';
|
|
5
|
+
import * as style from './style.js';
|
|
5
6
|
import { root, items, horizontalItems, item, itemButton, borderLeft, borderTop, borderRight, borderBottom, disabled } from './style.js';
|
|
6
7
|
|
|
7
8
|
class VisControls {
|
|
@@ -49,7 +50,11 @@ class VisControls {
|
|
|
49
50
|
var _a;
|
|
50
51
|
(_a = item.callback) === null || _a === void 0 ? void 0 : _a.call(item, event);
|
|
51
52
|
}
|
|
52
|
-
|
|
53
|
+
destroy() {
|
|
54
|
+
this.div.remove();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
VisControls.selectors = style;
|
|
53
58
|
|
|
54
59
|
export { VisControls };
|
|
55
60
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/vis-controls/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Local Types\nimport { VisControlItemInterface, VisControlsOrientation } from './types'\n\n// Config\nimport { VisControlsDefaultConfig, VisControlsConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class VisControls {\n div: Selection<HTMLDivElement, unknown, null, undefined>\n element: HTMLDivElement\n protected _defaultConfig = VisControlsDefaultConfig as VisControlsConfigInterface\n public config: VisControlsConfigInterface = this._defaultConfig\n\n protected _container: HTMLElement\n protected _items: Selection<HTMLDivElement, unknown, null, undefined>\n\n constructor (element: HTMLElement, config?: VisControlsConfigInterface) {\n this._container = element\n\n this.div = select(this._container)\n .append('div')\n .attr('class', s.root)\n this.element = this.div.node()\n this._items = this.div.append('div')\n .attr('class', s.items)\n\n if (config) this.update(config)\n }\n\n update (config: VisControlsConfigInterface): void {\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config: { items, orientation } } = this\n this._items\n .classed(s.horizontalItems, orientation === VisControlsOrientation.Horizontal)\n const controlItems = this._items.selectAll<HTMLDivElement, VisControlItemInterface>(`.${s.item}`)\n .data(items)\n\n const controlItemsEnter = controlItems.enter()\n .append('div')\n .attr('class', s.item)\n .on('click', this._onItemClick.bind(this))\n\n controlItemsEnter.append('button')\n .attr('class', s.itemButton)\n\n const controlItemsMerged = controlItemsEnter.merge(controlItems)\n controlItemsMerged\n .classed(s.borderLeft, d => d.borderLeft)\n .classed(s.borderTop, d => d.borderTop)\n .classed(s.borderRight, d => d.borderRight)\n .classed(s.borderBottom, d => d.borderBottom)\n .classed(s.disabled, d => d.disabled)\n controlItemsMerged.select(`.${s.itemButton}`)\n .html(item => item.icon)\n\n controlItems.exit().remove()\n }\n\n _onItemClick (event: MouseEvent, item: VisControlItemInterface): void {\n item.callback?.(event)\n }\n}\n"],"names":["s.root","s.items","s.horizontalItems","s.item","s.itemButton","s.borderLeft","s.borderTop","s.borderRight","s.borderBottom","s.disabled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/vis-controls/index.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Local Types\nimport { VisControlItemInterface, VisControlsOrientation } from './types'\n\n// Config\nimport { VisControlsDefaultConfig, VisControlsConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class VisControls {\n static selectors = s\n div: Selection<HTMLDivElement, unknown, null, undefined>\n element: HTMLDivElement\n protected _defaultConfig = VisControlsDefaultConfig as VisControlsConfigInterface\n public config: VisControlsConfigInterface = this._defaultConfig\n\n protected _container: HTMLElement\n protected _items: Selection<HTMLDivElement, unknown, null, undefined>\n\n constructor (element: HTMLElement, config?: VisControlsConfigInterface) {\n this._container = element\n\n this.div = select(this._container)\n .append('div')\n .attr('class', s.root)\n this.element = this.div.node()\n this._items = this.div.append('div')\n .attr('class', s.items)\n\n if (config) this.update(config)\n }\n\n update (config: VisControlsConfigInterface): void {\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config: { items, orientation } } = this\n this._items\n .classed(s.horizontalItems, orientation === VisControlsOrientation.Horizontal)\n const controlItems = this._items.selectAll<HTMLDivElement, VisControlItemInterface>(`.${s.item}`)\n .data(items)\n\n const controlItemsEnter = controlItems.enter()\n .append('div')\n .attr('class', s.item)\n .on('click', this._onItemClick.bind(this))\n\n controlItemsEnter.append('button')\n .attr('class', s.itemButton)\n\n const controlItemsMerged = controlItemsEnter.merge(controlItems)\n controlItemsMerged\n .classed(s.borderLeft, d => d.borderLeft)\n .classed(s.borderTop, d => d.borderTop)\n .classed(s.borderRight, d => d.borderRight)\n .classed(s.borderBottom, d => d.borderBottom)\n .classed(s.disabled, d => d.disabled)\n controlItemsMerged.select(`.${s.itemButton}`)\n .html(item => item.icon)\n\n controlItems.exit().remove()\n }\n\n _onItemClick (event: MouseEvent, item: VisControlItemInterface): void {\n item.callback?.(event)\n }\n\n public destroy (): void {\n this.div.remove()\n }\n}\n"],"names":["s.root","s.items","s.horizontalItems","s.item","s.itemButton","s.borderLeft","s.borderTop","s.borderRight","s.borderBottom","s.disabled","s"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/ts",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.4.0-alpha.
|
|
4
|
+
"version": "1.4.0-alpha.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|