@cornerstonejs/tools 4.10.3 → 4.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,7 +5,7 @@ export default function drawLine(svgDrawingHelper, annotationUID, lineUID, start
|
|
|
5
5
|
if (isNaN(start[0]) || isNaN(start[1]) || isNaN(end[0]) || isNaN(end[1])) {
|
|
6
6
|
return;
|
|
7
7
|
}
|
|
8
|
-
const { color = 'rgb(0, 255, 0)', width = 10, lineWidth, lineDash, markerStartId = null, markerEndId = null, shadow = false, strokeOpacity = 1, } = options;
|
|
8
|
+
const { color = 'rgb(0, 255, 0)', width = 10, lineWidth, lineDash, markerStartId = null, markerEndId = null, shadow = false, strokeOpacity = 1, textBoxLinkLineColor, } = options;
|
|
9
9
|
const strokeWidth = lineWidth || width;
|
|
10
10
|
const svgns = 'http://www.w3.org/2000/svg';
|
|
11
11
|
const svgNodeHash = _getHash(annotationUID, 'line', lineUID);
|
|
@@ -17,7 +17,7 @@ export default function drawLine(svgDrawingHelper, annotationUID, lineUID, start
|
|
|
17
17
|
y1: `${start[1]}`,
|
|
18
18
|
x2: `${end[0]}`,
|
|
19
19
|
y2: `${end[1]}`,
|
|
20
|
-
stroke: color,
|
|
20
|
+
stroke: textBoxLinkLineColor || color,
|
|
21
21
|
style: dropShadowStyle,
|
|
22
22
|
'stroke-width': strokeWidth,
|
|
23
23
|
'stroke-dasharray': lineDash,
|
|
@@ -14,9 +14,14 @@ function drawTextBox(svgDrawingHelper, annotationUID, textUID, textLines, positi
|
|
|
14
14
|
return textGroupBoundingBox;
|
|
15
15
|
}
|
|
16
16
|
function _drawTextGroup(svgDrawingHelper, annotationUID, textUID, textLines = [''], position, options) {
|
|
17
|
-
const { padding, color, fontFamily, fontSize, background } = options;
|
|
17
|
+
const { padding, color, fontFamily, fontSize, background, textBoxBorderRadius, textBoxMargin, } = options;
|
|
18
18
|
let textGroupBoundingBox;
|
|
19
19
|
const [x, y] = [position[0] + padding, position[1] + padding];
|
|
20
|
+
const backgroundStyles = {
|
|
21
|
+
color: background,
|
|
22
|
+
textBoxBorderRadius,
|
|
23
|
+
textBoxMargin,
|
|
24
|
+
};
|
|
20
25
|
const svgns = 'http://www.w3.org/2000/svg';
|
|
21
26
|
const svgNodeHash = _getHash(annotationUID, 'text', textUID);
|
|
22
27
|
const existingTextGroup = svgDrawingHelper.getSvgNode(svgNodeHash);
|
|
@@ -48,7 +53,7 @@ function _drawTextGroup(svgDrawingHelper, annotationUID, textUID, textLines = ['
|
|
|
48
53
|
setAttributesIfNecessary(textAttributes, textElement);
|
|
49
54
|
setAttributesIfNecessary(textGroupAttributes, existingTextGroup);
|
|
50
55
|
existingTextGroup.setAttribute('data-annotation-uid', annotationUID);
|
|
51
|
-
textGroupBoundingBox = _drawTextBackground(existingTextGroup,
|
|
56
|
+
textGroupBoundingBox = _drawTextBackground(existingTextGroup, backgroundStyles);
|
|
52
57
|
svgDrawingHelper.setNodeTouched(svgNodeHash);
|
|
53
58
|
}
|
|
54
59
|
else {
|
|
@@ -96,8 +101,10 @@ function _createTextSpan(text) {
|
|
|
96
101
|
textSpanElement.textContent = text;
|
|
97
102
|
return textSpanElement;
|
|
98
103
|
}
|
|
99
|
-
function _drawTextBackground(group,
|
|
104
|
+
function _drawTextBackground(group, backgroundStyles) {
|
|
105
|
+
const { color, textBoxBorderRadius = 0, textBoxMargin = 0, } = backgroundStyles;
|
|
100
106
|
let element = group.querySelector('rect.background');
|
|
107
|
+
const textElement = group.querySelector('text').getBBox();
|
|
101
108
|
if (!color) {
|
|
102
109
|
if (element) {
|
|
103
110
|
group.removeChild(element);
|
|
@@ -113,10 +120,19 @@ function _drawTextBackground(group, color) {
|
|
|
113
120
|
const attributes = {
|
|
114
121
|
x: `${bBox.x}`,
|
|
115
122
|
y: `${bBox.y}`,
|
|
116
|
-
width: `${
|
|
117
|
-
height: `${
|
|
123
|
+
width: `${textElement.width + Number(textBoxMargin) * 2}`,
|
|
124
|
+
height: `${textElement.height + Number(textBoxMargin) * 2}`,
|
|
118
125
|
fill: color,
|
|
126
|
+
rx: textBoxBorderRadius,
|
|
127
|
+
ry: textBoxBorderRadius,
|
|
119
128
|
};
|
|
129
|
+
if (textBoxMargin) {
|
|
130
|
+
const tSpans = Array.from(group.querySelector('text').querySelectorAll('tspan'));
|
|
131
|
+
tSpans.forEach((tspan, i) => {
|
|
132
|
+
i === 0 && tspan.setAttribute('y', textBoxMargin);
|
|
133
|
+
tspan.setAttribute('x', textBoxMargin);
|
|
134
|
+
});
|
|
135
|
+
}
|
|
120
136
|
setAttributesIfNecessary(attributes, element);
|
|
121
137
|
return bBox;
|
|
122
138
|
}
|
|
@@ -107,6 +107,9 @@ class AnnotationTool extends AnnotationDisplayTool {
|
|
|
107
107
|
background: this.getStyle('textBoxBackground', specifications, annotation),
|
|
108
108
|
lineWidth: this.getStyle('textBoxLinkLineWidth', specifications, annotation),
|
|
109
109
|
lineDash: this.getStyle('textBoxLinkLineDash', specifications, annotation),
|
|
110
|
+
textBoxBorderRadius: this.getStyle('textBoxBorderRadius', specifications, annotation),
|
|
111
|
+
textBoxMargin: this.getStyle('textBoxMargin', specifications, annotation),
|
|
112
|
+
textBoxLinkLineColor: this.getStyle('textBoxLinkLineColor', specifications, annotation),
|
|
110
113
|
};
|
|
111
114
|
}
|
|
112
115
|
static isSuvScaled(viewport, targetId, imageId) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
type Modes = '' | 'Active' | 'Passive' | 'Enabled';
|
|
2
2
|
type States = '' | 'Highlighted' | 'Selected' | 'Locked' | 'AutoGenerated';
|
|
3
|
-
type Properties = 'color' | 'colorAutoGenerated' | 'lineWidth' | 'lineWidthAutoGenerated' | 'lineDash' | 'textBoxFontFamily' | 'textBoxFontSize' | 'textBoxColor' | 'textBoxBackground' | 'textBoxLinkLineWidth' | 'textBoxLinkLineDash' | 'locked' | 'fillColor' | 'fillOpacity' | 'textbox' | 'shadow' | 'visibility' | 'markerSize' | 'angleArcLineDash' | 'pointerStrokeWidth' | 'showHandlesAlways';
|
|
3
|
+
type Properties = 'color' | 'colorAutoGenerated' | 'lineWidth' | 'lineWidthAutoGenerated' | 'lineDash' | 'textBoxFontFamily' | 'textBoxFontSize' | 'textBoxColor' | 'textBoxBackground' | 'textBoxLinkLineWidth' | 'textBoxLinkLineDash' | 'textBoxLinkLineColor' | 'textBoxMargin' | 'textBoxBorderRadius' | 'locked' | 'fillColor' | 'fillOpacity' | 'textbox' | 'shadow' | 'visibility' | 'markerSize' | 'angleArcLineDash' | 'pointerStrokeWidth' | 'showHandlesAlways';
|
|
4
4
|
export type AnnotationStyle = {
|
|
5
5
|
[key in `${Properties}${States}${Modes}`]?: string | number | boolean | Record<string, unknown>;
|
|
6
6
|
};
|
package/dist/esm/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.
|
|
1
|
+
export declare const version = "4.11.1";
|
package/dist/esm/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '4.
|
|
1
|
+
export const version = '4.11.1';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cornerstonejs/tools",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.11.1",
|
|
4
4
|
"description": "Cornerstone3D Tools",
|
|
5
5
|
"types": "./dist/esm/index.d.ts",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
"canvas": "3.2.0"
|
|
109
109
|
},
|
|
110
110
|
"peerDependencies": {
|
|
111
|
-
"@cornerstonejs/core": "4.
|
|
111
|
+
"@cornerstonejs/core": "4.11.1",
|
|
112
112
|
"@kitware/vtk.js": "32.12.1",
|
|
113
113
|
"@types/d3-array": "3.2.1",
|
|
114
114
|
"@types/d3-interpolate": "3.0.4",
|
|
@@ -127,5 +127,5 @@
|
|
|
127
127
|
"type": "individual",
|
|
128
128
|
"url": "https://ohif.org/donate"
|
|
129
129
|
},
|
|
130
|
-
"gitHead": "
|
|
130
|
+
"gitHead": "cd0f519f972f06242dec59fa2f28ba4627b4d549"
|
|
131
131
|
}
|