@unovis/ts 1.4.0-alpha.0 → 1.4.0-alpha.10
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 +14 -4
- package/components/graph/config.js +4 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +6 -1
- package/components/graph/index.js +100 -73
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/layout.js +30 -19
- package/components/graph/modules/layout.js.map +1 -1
- package/components/graph/modules/link/index.js +5 -3
- 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 +5 -4
- 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/modules/shape.d.ts +0 -2
- package/components/graph/modules/shape.js +6 -9
- package/components/graph/modules/shape.js.map +1 -1
- package/components/graph/types.d.ts +16 -5
- package/components/graph/types.js +1 -0
- package/components/graph/types.js.map +1 -1
- package/components/tooltip/config.d.ts +1 -1
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.js +3 -1
- package/components/tooltip/index.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/core/component/index.d.ts +3 -3
- package/core/component/index.js +1 -1
- package/core/component/index.js.map +1 -1
- package/package.json +1 -1
- package/utils/svg.d.ts +1 -0
- package/utils/svg.js +10 -1
- package/utils/svg.js.map +1 -1
|
@@ -16,6 +16,10 @@ export declare type GraphNode<N extends GraphInputNode = GraphInputNode, L exten
|
|
|
16
16
|
_panels?: GraphPanel<N, L>[];
|
|
17
17
|
_isConnected?: boolean;
|
|
18
18
|
};
|
|
19
|
+
export declare type GraphForceSimulationNode<N extends GraphInputNode = GraphInputNode, L extends GraphInputLink = GraphInputLink> = GraphNode<N, L> & {
|
|
20
|
+
fx?: number;
|
|
21
|
+
fy?: number;
|
|
22
|
+
};
|
|
19
23
|
export declare type GraphLink<N extends GraphInputNode = GraphInputNode, L extends GraphInputLink = GraphInputLink> = GraphLinkCore<N, L> & {
|
|
20
24
|
id?: number | string;
|
|
21
25
|
source: number | string | GraphNode<N>;
|
|
@@ -38,7 +42,8 @@ export declare enum GraphLayoutType {
|
|
|
38
42
|
ParallelHorizontal = "parallel horizontal",
|
|
39
43
|
Dagre = "dagre",
|
|
40
44
|
Force = "force",
|
|
41
|
-
Elk = "elk"
|
|
45
|
+
Elk = "elk",
|
|
46
|
+
Precalculated = "precalculated"
|
|
42
47
|
}
|
|
43
48
|
export declare type GraphCircleLabel = {
|
|
44
49
|
text: string;
|
|
@@ -111,17 +116,23 @@ export declare type GraphNodeAnimationState = {
|
|
|
111
116
|
export declare type GraphNodeAnimatedElement<T = SVGElement> = T & {
|
|
112
117
|
_animState: GraphNodeAnimationState;
|
|
113
118
|
};
|
|
114
|
-
export declare type GraphForceLayoutSettings = {
|
|
119
|
+
export declare type GraphForceLayoutSettings<N extends GraphInputNode = GraphInputNode, L extends GraphInputLink = GraphInputLink> = {
|
|
115
120
|
/** Preferred Link Distance. Default: `60` */
|
|
116
|
-
linkDistance?: number;
|
|
121
|
+
linkDistance?: number | ((l: GraphLink<N, L>, i: number) => number);
|
|
117
122
|
/** Link Strength [0:1]. Default: `0.45` */
|
|
118
|
-
linkStrength?: number;
|
|
123
|
+
linkStrength?: number | ((l: GraphLink<N, L>, i: number) => number);
|
|
119
124
|
/** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */
|
|
120
|
-
charge?: number;
|
|
125
|
+
charge?: number | ((l: GraphNode<N, L>, i: number) => number);
|
|
121
126
|
/** X-centring force. Default: `0.15` */
|
|
122
127
|
forceXStrength?: number;
|
|
123
128
|
/** Y-centring force. Default: `0.25` */
|
|
124
129
|
forceYStrength?: number;
|
|
130
|
+
/** Number if simulation iterations. Default: automatic */
|
|
131
|
+
numIterations?: number;
|
|
132
|
+
/** Set to true if you want to fix the node positions after the simulation
|
|
133
|
+
* Helpful when you want to update graph settings without re-calculating the layout.
|
|
134
|
+
* Default: `false` */
|
|
135
|
+
fixNodePositionAfterSimulation?: boolean;
|
|
125
136
|
};
|
|
126
137
|
export declare type GraphElkLayoutSettings = Record<string, string>;
|
|
127
138
|
/**
|
|
@@ -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 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 /** Preferred Link Distance. Default: `60` */\n linkDistance?: number;\n /** Link Strength [0:1]. Default: `0.45` */\n linkStrength?: number;\n /** Charge Force (<0 repulsion, >0 attraction). Default: `-500` */\n charge?: number;\n /** X-centring force. Default: `0.15` */\n forceXStrength?: number;\n /** Y-centring force. Default: `0.25` */\n forceYStrength?: number;\n}\n\nexport type GraphElkLayoutSettings = Record<string, string>\n\n/**\n * Settings for configuring the layout of a Dagre graph.\n */\nexport type GraphDagreLayoutSetting = {\n /**\n * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n rankdir?: 'TB' | 'BT' | 'LR' | 'RL' | string;\n\n /**\n * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n * Additional custom values can also be provided as a string.\n */\n align?: 'UL' | 'UR' | 'DL' | 'DR' | string;\n\n /**\n * Number of pixels that separate nodes horizontally in the layout.\n */\n nodesep?: number;\n\n /**\n * Number of pixels that separate edges horizontally in the layout.\n */\n edgesep?: number;\n\n /**\n * Number of pixels between each rank in the layout.\n */\n ranksep?: number;\n\n /**\n * Number of pixels to use as a margin around the left and right of the graph.\n */\n marginx?: number;\n\n /**\n * Number of pixels to use as a margin around the top and bottom of the graph.\n */\n marginy?: number;\n\n /**\n * If set to 'greedy', uses a greedy heuristic for finding a feedback arc set for a graph.\n * A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n */\n acyclicer?: 'greedy' | undefined;\n\n /**\n * Type of algorithm to assign a rank to each node in the input graph.\n * Possible values are 'network-simplex', 'tight-tree', or 'longest-path'.\n * Additional custom values can also be provided as a string.\n */\n ranker?: 'network-simplex' | 'tight-tree' | 'longest-path' | string;\n}\n\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/components/graph/types.ts"],"sourcesContent":["// Types\nimport { Position } from 'types/position'\nimport { GraphInputLink, GraphInputNode, GraphNodeCore, GraphLinkCore } from 'types/graph'\nimport { Spacing } from 'types/spacing'\n\nexport type GraphNode<\n N extends GraphInputNode = GraphInputNode,\n L extends GraphInputLink = GraphInputLink,\n> = GraphNodeCore<N, L> & {\n x?: number;\n y?: number;\n\n _id?: number | string;\n _index?: number;\n _state?: {\n isDragged?: boolean;\n fx?: number;\n fy?: number;\n selected?: boolean;\n greyout?: boolean;\n };\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;;;;"}
|
|
@@ -29,7 +29,7 @@ export interface TooltipConfigInterface {
|
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
31
|
triggers?: {
|
|
32
|
-
[selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;
|
|
32
|
+
[selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;
|
|
33
33
|
};
|
|
34
34
|
/** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance
|
|
35
35
|
* by using a CSS selector. Attributes configuration object has the following structure:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: (data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AAqDa,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;IACpB,mBAAmB,EAAE,QAAQ,CAAC,IAAI;AAClC,IAAA,eAAe,EAAE,CAAC;IAClB,iBAAiB,EAAE,QAAQ,CAAC,GAAG;AAC/B,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,QAAQ,EAAE,EAAE;;;;;"}
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AAqDa,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;IACpB,mBAAmB,EAAE,QAAQ,CAAC,IAAI;AAClC,IAAA,eAAe,EAAE,CAAC;IAClB,iBAAiB,EAAE,QAAQ,CAAC,GAAG;AAC/B,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,QAAQ,EAAE,EAAE;;;;;"}
|
|
@@ -125,7 +125,7 @@ class Tooltip {
|
|
|
125
125
|
var _a;
|
|
126
126
|
// Tooltip position calculation relies on the parent position
|
|
127
127
|
// If it's not set (static), we set it to `relative` (not a good practice)
|
|
128
|
-
if (((_a = getComputedStyle(this._container)) === null || _a === void 0 ? void 0 : _a.position) === 'static') {
|
|
128
|
+
if (this._container !== document.body && ((_a = getComputedStyle(this._container)) === null || _a === void 0 ? void 0 : _a.position) === 'static') {
|
|
129
129
|
this._container.style.position = 'relative';
|
|
130
130
|
}
|
|
131
131
|
}
|
|
@@ -144,6 +144,8 @@ class Tooltip {
|
|
|
144
144
|
// Go through all of the configured triggers
|
|
145
145
|
for (const className of Object.keys(triggers)) {
|
|
146
146
|
const template = triggers[className];
|
|
147
|
+
if (!template)
|
|
148
|
+
continue; // Skip if the trigger is not configured
|
|
147
149
|
const els = selection.selectAll(`.${className}`).nodes();
|
|
148
150
|
// Go through all of the elements in the event path (from the deepest element upwards)
|
|
149
151
|
for (const el of path) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.tooltip)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else {\n this.div.html(html)\n }\n\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n this.place(pos)\n }\n\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const width = this.element.offsetWidth\n const height = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -width / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n : verticalPlacement === Position.Center ? height / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (height - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? height - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - height}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config: { triggers } } = this\n const isContainerBody = this.isContainerBody()\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(triggers)) {\n const template = triggers[className]\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const content = template(d, i, els)\n if (content) this.show(content, { x, y })\n else this.hide()\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.tooltip","s.hidden","s.show","s.positionFixed","s"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.tooltip)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else {\n this.div.html(html)\n }\n\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n this.place(pos)\n }\n\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const width = this.element.offsetWidth\n const height = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -width / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n : verticalPlacement === Position.Center ? height / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (height - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? height - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - height}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (this._container !== document.body && getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config: { triggers } } = this\n const isContainerBody = this.isContainerBody()\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(triggers)) {\n const template = triggers[className]\n if (!template) continue // Skip if the trigger is not configured\n\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const content = template(d, i, els)\n if (content) this.show(content, { x, y })\n else this.hide()\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.tooltip","s.hidden","s.show","s.positionFixed","s"],"mappings":"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"}
|
|
@@ -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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"}
|
|
@@ -8,8 +8,8 @@ export declare class ComponentCore<CoreDatum, ConfigInterface extends ComponentC
|
|
|
8
8
|
element: SVGGElement | HTMLElement;
|
|
9
9
|
type: ComponentType;
|
|
10
10
|
g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>;
|
|
11
|
-
config:
|
|
12
|
-
prevConfig:
|
|
11
|
+
config: ConfigInterface;
|
|
12
|
+
prevConfig: ConfigInterface;
|
|
13
13
|
datamodel: CoreDataModel<CoreDatum>;
|
|
14
14
|
sizing: Sizing | string;
|
|
15
15
|
uid: string;
|
|
@@ -19,7 +19,7 @@ export declare class ComponentCore<CoreDatum, ConfigInterface extends ComponentC
|
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
21
|
/** Default configuration */
|
|
22
|
-
protected _defaultConfig:
|
|
22
|
+
protected _defaultConfig: ConfigInterface;
|
|
23
23
|
/** Component width in pixels. This property is set automatically by the container. */
|
|
24
24
|
protected _width: number;
|
|
25
25
|
/** Component height in pixels. This property is set automatically by the container. */
|
package/core/component/index.js
CHANGED
|
@@ -104,7 +104,7 @@ class ComponentCore {
|
|
|
104
104
|
const els = selection.nodes();
|
|
105
105
|
const i = els.indexOf(event.currentTarget);
|
|
106
106
|
const eventFunction = events[className][eventType];
|
|
107
|
-
return eventFunction(d, event, i, els);
|
|
107
|
+
return eventFunction === null || eventFunction === void 0 ? void 0 : eventFunction(d, event, i, els);
|
|
108
108
|
});
|
|
109
109
|
});
|
|
110
110
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/core/component/index.ts"],"sourcesContent":["import { select, Selection, ValueFn } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Core\nimport { CoreDataModel } from 'data-models/core'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\nimport { guid } from 'utils/misc'\n\n// Types\nimport { ComponentType, Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { VisEventCallback, VisEventType } from './types'\n\n// Config\nimport { ComponentDefaultConfig, ComponentConfigInterface } from './config'\n\nexport class ComponentCore<\n CoreDatum,\n ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface,\n> {\n public element: SVGGElement | HTMLElement\n public type: ComponentType = ComponentType.SVG\n public g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n public config: ComponentConfigInterface\n public prevConfig: ComponentConfigInterface\n public datamodel: CoreDataModel<CoreDatum> = new CoreDataModel()\n public sizing: Sizing | string = Sizing.Fit // Supported by SingleContainer and a subset of components only (Sankey)\n public uid: string\n\n protected events: {\n [selector: string]: {\n [eventType in VisEventType]?: VisEventCallback;\n };\n } = {}\n\n /** Default configuration */\n protected _defaultConfig: ComponentConfigInterface = ComponentDefaultConfig\n /** Component width in pixels. This property is set automatically by the container. */\n protected _width = 400\n /** Component height in pixels. This property is set automatically by the container. */\n protected _height = 200\n /** Container width in pixels. This property is set automatically by the container. */\n protected _containerWidth: number | undefined = undefined\n /** Container height in pixels. This property is set automatically by the container. */\n protected _containerHeight: number | undefined = undefined\n\n _setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500)\n _setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500)\n\n constructor (type = ComponentType.SVG) {\n if (type === ComponentType.SVG) {\n this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n } else {\n this.element = document.createElement('div')\n }\n this.uid = guid()\n this.g = select(this.element) as Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n\n // Setting the root class if available\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line dot-notation\n const rootClass = this.constructor?.['selectors']?.root as string\n if (rootClass) this.g.attr('class', rootClass)\n }\n\n setConfig (config: ConfigInterface): void {\n this.prevConfig = this.config // Store the previous config instance\n this.config = merge(this._defaultConfig, config)\n }\n\n setData (data: CoreDatum): void {\n this.datamodel.data = data\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n if (isFinite(width)) this._width = width\n if (isFinite(height)) this._height = height\n if (isFinite(containerWidth)) this._containerWidth = containerWidth\n if (isFinite(containerHeight)) this._containerHeight = containerHeight\n }\n\n render (duration = this.config.duration): void {\n this._render(duration)\n\n // While transition is in progress, we add the 'animating' attribute to the component's SVG group\n const ANIMATING_ATTR = 'animating'\n if (duration) {\n this.g.attr(ANIMATING_ATTR, '')\n const transition = this.g\n .transition(ANIMATING_ATTR)\n .duration(duration) as Transition<SVGGElement | HTMLElement, unknown, null, undefined>\n\n transition.on('end interrupt', () => {\n this.g.attr(ANIMATING_ATTR, null)\n })\n }\n this._setUpComponentEventsThrottled()\n this._setCustomAttributesThrottled()\n }\n\n get bleed (): Spacing {\n return { top: 0, bottom: 0, left: 0, right: 0 }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n _render (duration = this.config.duration): void {\n }\n\n private _setCustomAttributes (): void {\n const attributeMap = this.config.attributes\n\n Object.keys(attributeMap).forEach(className => {\n Object.keys(attributeMap[className]).forEach(attr => {\n const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)\n\n selection.attr(attr, attributeMap[className][attr] as ValueFn<SVGGElement | HTMLElement, unknown, string | number | boolean>)\n })\n })\n }\n\n private _setUpComponentEvents (): void {\n // Set up default events\n this._bindEvents(this.events)\n\n // Set up user-defined events\n this._bindEvents(this.config.events, '.user')\n }\n\n private _bindEvents (events = this.events, suffix = ''): void {\n Object.keys(events).forEach(className => {\n Object.keys(events[className]).forEach(eventType => {\n const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)\n selection.on(eventType + suffix, (event: MouseEvent & WheelEvent & PointerEvent & TouchEvent, d) => {\n const els = selection.nodes()\n const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)\n const eventFunction = events[className][eventType as VisEventType]\n return eventFunction(d, event, i, els)\n })\n })\n })\n }\n\n public destroy (): void {\n this.g?.remove()\n this.element = undefined\n }\n\n public isDestroyed (): boolean {\n return !this.element\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/core/component/index.ts"],"sourcesContent":["import { select, Selection, ValueFn } from 'd3-selection'\nimport { Transition } from 'd3-transition'\n\n// Core\nimport { CoreDataModel } from 'data-models/core'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\nimport { guid } from 'utils/misc'\n\n// Types\nimport { ComponentType, Sizing } from 'types/component'\nimport { Spacing } from 'types/spacing'\n\n// Local Types\nimport { VisEventCallback, VisEventType } from './types'\n\n// Config\nimport { ComponentDefaultConfig, ComponentConfigInterface } from './config'\n\nexport class ComponentCore<\n CoreDatum,\n ConfigInterface extends ComponentConfigInterface = ComponentConfigInterface,\n> {\n public element: SVGGElement | HTMLElement\n public type: ComponentType = ComponentType.SVG\n public g: Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n public config: ConfigInterface\n public prevConfig: ConfigInterface\n public datamodel: CoreDataModel<CoreDatum> = new CoreDataModel()\n public sizing: Sizing | string = Sizing.Fit // Supported by SingleContainer and a subset of components only (Sankey)\n public uid: string\n\n protected events: {\n [selector: string]: {\n [eventType in VisEventType]?: VisEventCallback;\n };\n } = {}\n\n /** Default configuration */\n protected _defaultConfig: ConfigInterface = ComponentDefaultConfig as ConfigInterface\n /** Component width in pixels. This property is set automatically by the container. */\n protected _width = 400\n /** Component height in pixels. This property is set automatically by the container. */\n protected _height = 200\n /** Container width in pixels. This property is set automatically by the container. */\n protected _containerWidth: number | undefined = undefined\n /** Container height in pixels. This property is set automatically by the container. */\n protected _containerHeight: number | undefined = undefined\n\n _setUpComponentEventsThrottled = throttle(this._setUpComponentEvents, 500)\n _setCustomAttributesThrottled = throttle(this._setCustomAttributes, 500)\n\n constructor (type = ComponentType.SVG) {\n if (type === ComponentType.SVG) {\n this.element = document.createElementNS('http://www.w3.org/2000/svg', 'g')\n } else {\n this.element = document.createElement('div')\n }\n this.uid = guid()\n this.g = select(this.element) as Selection<SVGGElement, unknown, null, undefined> | Selection<HTMLElement, unknown, null, undefined>\n\n // Setting the root class if available\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line dot-notation\n const rootClass = this.constructor?.['selectors']?.root as string\n if (rootClass) this.g.attr('class', rootClass)\n }\n\n setConfig (config: ConfigInterface): void {\n this.prevConfig = this.config // Store the previous config instance\n this.config = merge(this._defaultConfig, config)\n }\n\n setData (data: CoreDatum): void {\n this.datamodel.data = data\n }\n\n setSize (width: number, height: number, containerWidth: number, containerHeight: number): void {\n if (isFinite(width)) this._width = width\n if (isFinite(height)) this._height = height\n if (isFinite(containerWidth)) this._containerWidth = containerWidth\n if (isFinite(containerHeight)) this._containerHeight = containerHeight\n }\n\n render (duration = this.config.duration): void {\n this._render(duration)\n\n // While transition is in progress, we add the 'animating' attribute to the component's SVG group\n const ANIMATING_ATTR = 'animating'\n if (duration) {\n this.g.attr(ANIMATING_ATTR, '')\n const transition = this.g\n .transition(ANIMATING_ATTR)\n .duration(duration) as Transition<SVGGElement | HTMLElement, unknown, null, undefined>\n\n transition.on('end interrupt', () => {\n this.g.attr(ANIMATING_ATTR, null)\n })\n }\n this._setUpComponentEventsThrottled()\n this._setCustomAttributesThrottled()\n }\n\n get bleed (): Spacing {\n return { top: 0, bottom: 0, left: 0, right: 0 }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n _render (duration = this.config.duration): void {\n }\n\n private _setCustomAttributes (): void {\n const attributeMap = this.config.attributes\n\n Object.keys(attributeMap).forEach(className => {\n Object.keys(attributeMap[className]).forEach(attr => {\n const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)\n\n selection.attr(attr, attributeMap[className][attr] as ValueFn<SVGGElement | HTMLElement, unknown, string | number | boolean>)\n })\n })\n }\n\n private _setUpComponentEvents (): void {\n // Set up default events\n this._bindEvents(this.events)\n\n // Set up user-defined events\n this._bindEvents(this.config.events, '.user')\n }\n\n private _bindEvents (events = this.events, suffix = ''): void {\n Object.keys(events).forEach(className => {\n Object.keys(events[className]).forEach(eventType => {\n const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)\n .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)\n selection.on(eventType + suffix, (event: MouseEvent & WheelEvent & PointerEvent & TouchEvent, d) => {\n const els = selection.nodes()\n const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)\n const eventFunction = events[className][eventType as VisEventType]\n return eventFunction?.(d, event, i, els)\n })\n })\n })\n }\n\n public destroy (): void {\n this.g?.remove()\n this.element = undefined\n }\n\n public isDestroyed (): boolean {\n return !this.element\n }\n}\n"],"names":[],"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.10",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|
package/utils/svg.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export declare const allowedSvgTags: string[];
|
|
|
3
3
|
export declare function getTransformValues(svgElement: SVGElement): TransformValues;
|
|
4
4
|
export declare function transformValuesToString(transformValues: TransformValues): string;
|
|
5
5
|
export declare function sanitizeSvgString(svgString: string, allowedTags?: string[]): string;
|
|
6
|
+
export declare function isStringSvg(input: string): boolean;
|
package/utils/svg.js
CHANGED
|
@@ -46,7 +46,16 @@ function transformValuesToString(transformValues) {
|
|
|
46
46
|
}
|
|
47
47
|
function sanitizeSvgString(svgString, allowedTags = allowedSvgTags) {
|
|
48
48
|
return striptags(svgString, allowedTags);
|
|
49
|
+
}
|
|
50
|
+
function isStringSvg(input) {
|
|
51
|
+
/* Since a general-purpose regex for this can be complex and potentially vulnerable
|
|
52
|
+
* to ReDoS attacks, we'll create a simpler, safer regex that looks for a few common
|
|
53
|
+
* SVG elements or attributes.
|
|
54
|
+
*/
|
|
55
|
+
const svgElementsRegex = new RegExp(`<(${allowedSvgTags.join('|')})\\b`, 'i');
|
|
56
|
+
const svgAttributesRegex = /\b(d|fill|stroke|transform|viewBox)=/i;
|
|
57
|
+
return svgElementsRegex.test(input) || svgAttributesRegex.test(input);
|
|
49
58
|
}
|
|
50
59
|
|
|
51
|
-
export { allowedSvgTags, getTransformValues, sanitizeSvgString, transformValuesToString };
|
|
60
|
+
export { allowedSvgTags, getTransformValues, isStringSvg, sanitizeSvgString, transformValuesToString };
|
|
52
61
|
//# sourceMappingURL=svg.js.map
|
package/utils/svg.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg.js","sources":["../../src/utils/svg.ts"],"sourcesContent":["import { TransformValues } from 'types/svg'\nimport striptags from 'striptags'\n\nimport { allowedSvgTextTags } from './text'\n\nexport const allowedSvgTags = [\n 'svg', 'g', 'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',\n 'defs', 'clipPath', 'use', 'symbol', 'image', 'marker', 'style', 'mask',\n ...allowedSvgTextTags,\n]\n\nexport function getTransformValues (svgElement: SVGElement): TransformValues {\n // Get the transform attribute value from the SVG element\n const transformAttribute = svgElement.getAttribute('transform')\n\n // Regular expressions to extract translate and scale values from the transform attribute\n const translateRegex = /translate\\(\\s*(-?[\\d.]+)\\s*,?\\s*(-?[\\d.]+)?\\s*\\)/\n const scaleRegex = /scale\\(\\s*(-?[\\d.]+)\\s*,?\\s*(-?[\\d.]+)?\\s*\\)/\n\n // Initialize default values\n const transformValues: TransformValues = {\n translate: { x: 0, y: 0 },\n scale: { x: 1, y: 1 },\n }\n\n if (transformAttribute) {\n // Extract translate values\n const translateMatches = transformAttribute.match(translateRegex)\n if (translateMatches) {\n transformValues.translate.x = parseFloat(translateMatches[1])\n transformValues.translate.y = translateMatches[2] ? parseFloat(translateMatches[2]) : 0\n }\n\n // Extract scale values\n const scaleMatches = transformAttribute.match(scaleRegex)\n if (scaleMatches) {\n transformValues.scale.x = parseFloat(scaleMatches[1])\n transformValues.scale.y = scaleMatches[2] ? parseFloat(scaleMatches[2]) : transformValues.scale.x\n }\n }\n\n return transformValues\n}\n\nexport function transformValuesToString (transformValues: TransformValues): string {\n const translateString = `translate(${transformValues.translate.x} ${transformValues.translate.y})`\n\n // Only include scaleString when both scale values are not 1\n const shouldIncludeScaleString = transformValues.scale.x !== 1 || transformValues.scale.y !== 1\n const scaleString = shouldIncludeScaleString ? `scale(${transformValues.scale.x} ${transformValues.scale.y})` : ''\n\n // Combine the translate and scale strings into a single transform attribute string\n const transformString = scaleString\n ? `${translateString} ${scaleString}`\n : translateString\n\n return transformString\n}\n\nexport function sanitizeSvgString (svgString: string, allowedTags = allowedSvgTags): string {\n return striptags(svgString, allowedTags)\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,cAAc,GAAG;AAC5B,IAAA,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS;AAC9E,IAAA,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM;AACvE,IAAA,GAAG,kBAAkB;EACtB;AAEK,SAAU,kBAAkB,CAAE,UAAsB,EAAA;;IAExD,MAAM,kBAAkB,GAAG,UAAU,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;;IAG/D,MAAM,cAAc,GAAG,kDAAkD,CAAA;IACzE,MAAM,UAAU,GAAG,8CAA8C,CAAA;;AAGjE,IAAA,MAAM,eAAe,GAAoB;QACvC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;QACzB,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;KACtB,CAAA;AAED,IAAA,IAAI,kBAAkB,EAAE;;QAEtB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;AACjE,QAAA,IAAI,gBAAgB,EAAE;AACpB,YAAA,eAAe,CAAC,SAAS,CAAC,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;YAC7D,eAAe,CAAC,SAAS,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;AACxF,SAAA;;QAGD,MAAM,YAAY,GAAG,kBAAkB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;AACzD,QAAA,IAAI,YAAY,EAAE;AAChB,YAAA,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;YACrD,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,CAAA;AAClG,SAAA;AACF,KAAA;AAED,IAAA,OAAO,eAAe,CAAA;AACxB,CAAC;AAEK,SAAU,uBAAuB,CAAE,eAAgC,EAAA;AACvE,IAAA,MAAM,eAAe,GAAG,CAAa,UAAA,EAAA,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA,CAAA,EAAI,eAAe,CAAC,SAAS,CAAC,CAAC,GAAG,CAAA;;AAGlG,IAAA,MAAM,wBAAwB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,IAAI,eAAe,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAA;IAC/F,MAAM,WAAW,GAAG,wBAAwB,GAAG,CAAA,MAAA,EAAS,eAAe,CAAC,KAAK,CAAC,CAAC,CAAI,CAAA,EAAA,eAAe,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,CAAA;;IAGlH,MAAM,eAAe,GAAG,WAAW;AACjC,UAAE,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA;UACnC,eAAe,CAAA;AAEnB,IAAA,OAAO,eAAe,CAAA;AACxB,CAAC;SAEe,iBAAiB,CAAE,SAAiB,EAAE,WAAW,GAAG,cAAc,EAAA;AAChF,IAAA,OAAO,SAAS,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;AAC1C;;;;"}
|
|
1
|
+
{"version":3,"file":"svg.js","sources":["../../src/utils/svg.ts"],"sourcesContent":["import { TransformValues } from 'types/svg'\nimport striptags from 'striptags'\n\nimport { allowedSvgTextTags } from './text'\n\nexport const allowedSvgTags = [\n 'svg', 'g', 'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',\n 'defs', 'clipPath', 'use', 'symbol', 'image', 'marker', 'style', 'mask',\n ...allowedSvgTextTags,\n]\n\nexport function getTransformValues (svgElement: SVGElement): TransformValues {\n // Get the transform attribute value from the SVG element\n const transformAttribute = svgElement.getAttribute('transform')\n\n // Regular expressions to extract translate and scale values from the transform attribute\n const translateRegex = /translate\\(\\s*(-?[\\d.]+)\\s*,?\\s*(-?[\\d.]+)?\\s*\\)/\n const scaleRegex = /scale\\(\\s*(-?[\\d.]+)\\s*,?\\s*(-?[\\d.]+)?\\s*\\)/\n\n // Initialize default values\n const transformValues: TransformValues = {\n translate: { x: 0, y: 0 },\n scale: { x: 1, y: 1 },\n }\n\n if (transformAttribute) {\n // Extract translate values\n const translateMatches = transformAttribute.match(translateRegex)\n if (translateMatches) {\n transformValues.translate.x = parseFloat(translateMatches[1])\n transformValues.translate.y = translateMatches[2] ? parseFloat(translateMatches[2]) : 0\n }\n\n // Extract scale values\n const scaleMatches = transformAttribute.match(scaleRegex)\n if (scaleMatches) {\n transformValues.scale.x = parseFloat(scaleMatches[1])\n transformValues.scale.y = scaleMatches[2] ? parseFloat(scaleMatches[2]) : transformValues.scale.x\n }\n }\n\n return transformValues\n}\n\nexport function transformValuesToString (transformValues: TransformValues): string {\n const translateString = `translate(${transformValues.translate.x} ${transformValues.translate.y})`\n\n // Only include scaleString when both scale values are not 1\n const shouldIncludeScaleString = transformValues.scale.x !== 1 || transformValues.scale.y !== 1\n const scaleString = shouldIncludeScaleString ? `scale(${transformValues.scale.x} ${transformValues.scale.y})` : ''\n\n // Combine the translate and scale strings into a single transform attribute string\n const transformString = scaleString\n ? `${translateString} ${scaleString}`\n : translateString\n\n return transformString\n}\n\nexport function sanitizeSvgString (svgString: string, allowedTags = allowedSvgTags): string {\n return striptags(svgString, allowedTags)\n}\n\n\nexport function isStringSvg (input: string): boolean {\n /* Since a general-purpose regex for this can be complex and potentially vulnerable\n * to ReDoS attacks, we'll create a simpler, safer regex that looks for a few common\n * SVG elements or attributes.\n */\n const svgElementsRegex = new RegExp(`<(${allowedSvgTags.join('|')})\\\\b`, 'i')\n const svgAttributesRegex = /\\b(d|fill|stroke|transform|viewBox)=/i\n\n return svgElementsRegex.test(input) || svgAttributesRegex.test(input)\n}\n"],"names":[],"mappings":"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"}
|