Skip to content

Commit

Permalink
#2146 Add a Configuration flag to allow a scroll bar for Annotations … (
Browse files Browse the repository at this point in the history 
#2147)

Signed-off-by: CTomlyn <[email protected]>
  • Loading branch information
@tomlyn
tomlyn authored Sep 17, 2024
1 parent 15caeba commit e076c74
Show file tree
Hide file tree
Showing 13 changed files with 595 additions and 466 deletions.
94 changes: 94 additions & 0 deletions canvas_modules/common-canvas/src/common-canvas/common-canvas-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1355,6 +1355,100 @@ export default class CanvasUtils {
return (luma < 108);
}

// Applies the outlineStyle format to the D3 comment selection passed in,
// if one exists, in the formats array passed in.
static applyOutlineStyle(commentSel, formats) {
if (formats?.length > 0) {
formats.forEach((f) => {
if (f.type === "outlineStyle") { // Only apply outline style to outer <div>
const { field, value } = CanvasUtils.convertFormat(f);
commentSel.style(field, value);
}
});
}
}

// Applies all formats from the formats array, that are not outlineStyle, to the
// D3 comment selection passed in.
static applyNonOutlineStyle(commentSel, formats) {
if (formats?.length > 0) {
formats.forEach((f) => {
if (f.type !== "outlineStyle") { // Only apply outline style to outer <div>
const { field, value } = CanvasUtils.convertFormat(f);
commentSel.style(field, value);
}
});
}
}

// Returns an object contaiing the start and end positions
// of any current selection in the domNode passed in. The
// DOM node is expected to contain text which is stored in a
// set of child nodes that are text objects.
static getSelectionPositions(domNode) {
const sel = window.getSelection();
let anchorPos;
let focusPos;
let runningLen = 0;
domNode.childNodes.forEach((cn) => {
if (cn.nodeValue) {
const textLen = cn.nodeValue.length;
if (cn === sel.anchorNode) {
anchorPos = runningLen + sel.anchorOffset;
}
if (cn === sel.focusNode) {
focusPos = runningLen + sel.focusOffset;
}
runningLen += textLen;
}
});
return { start: Math.min(anchorPos, focusPos), end: Math.max(anchorPos, focusPos) };
}

// Selects the entire contents of the DOM node passed in.
static selectNodeContents(domNode) {
var range = document.createRange();
range.selectNodeContents(domNode);

var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

// Selects the range of characters in the text DOM node passed in
// between the start and end positions passed in. The DOM node is
// expected to contain text which is stored in a set of child nodes
// that are text objects. selection is an optional object containing
// the current selection which is provided by the Cypress test cases.
static selectNodeRange(domNode, start, end, selection) {
const range = document.createRange();

let startTextNode;
let endTextNode;
let startTextPos;
let endTextPos;
let runningLen = 0;
domNode.childNodes.forEach((cn) => {
const textLen = cn.nodeValue.length;
runningLen += textLen;
if (start <= runningLen && !startTextNode) {
startTextNode = cn;
startTextPos = textLen - (runningLen - start);
}
if (end <= runningLen && !endTextNode) {
endTextNode = cn;
endTextPos = textLen - (runningLen - end);
}
});

range.setStart(startTextNode, startTextPos);
range.setEnd(endTextNode, endTextPos);

const sel = selection ? selection : window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

// Returns an object containing a CSS field and value that
// can be applied to a <div> contining text based on the
// format type and action passed in.
Expand Down
95 changes: 37 additions & 58 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ $node-port-input-arrow-connected-stroke-color: $background-inverse;
$node-port-input-arrow-connected-fill-color: transparent;

// Comment colors
$comment-outline-color: $layer-active-02;
$comment-border-color: $layer-active-02;
$comment-border-width: 1px;
$comment-outline-hover-color: $background-inverse-hover;
$comment-fill-color: $layer-01;
$comment-text-color: $text-primary;
Expand Down Expand Up @@ -109,31 +110,19 @@ $link-highlight-color: $support-info;
.d3-foreign-object-ghost-label,
.d3-foreign-object-node-label,
.d3-foreign-object-dec-label,
.d3-foreign-object-comment-text,
.d3-foreign-object-text-entry {
// Don't handle events - let objects inside foreign object handle them.
pointer-events: none;
// Allows the focus highlight to be visible
overflow: visible;
}

.d3-foreign-object-comment-text-wysiwyg,
.d3-foreign-object-text-entry-wysiwyg {
.d3-foreign-object-comment-text {
// Don't handle events - let objects inside foreign object handle them.
pointer-events: none;
// We hide overflow with wysiwyg text editing
overflow: hidden;
}

.d3-foreign-object-text-entry-wysiwyg:focus {
outline: none;
}

.d3-foreign-object-text-entry-wysiwyg:focus-within {
outline: none;
box-shadow: 0 0 0 2px $focus;
}

// Declare our own focus highlighting for text entry.
@mixin d3-text-entry-focus-mixin {
// Supress the default focus highlighting with non-carbon color and round corners.
Expand All @@ -142,6 +131,15 @@ $link-highlight-color: $support-info;
box-shadow: 0 0 0 2px $focus;
}

.d3-foreign-object-text-entry:focus,
.d3-foreign-object-comment-text-entry:focus {
outline: none;
}

.d3-foreign-object-comment-text-entry:focus-within {
@include d3-text-entry-focus-mixin;
}

/* Pull-out region rectangle used for object selection */

.d3-region-selector {
Expand Down Expand Up @@ -646,30 +644,16 @@ $link-highlight-color: $support-info;
/* Comment styles */

.d3-comment-group:hover {
.d3-comment-rect {
stroke: $comment-outline-hover-color
.d3-comment-text-scroll {
border-color: $comment-outline-hover-color;
border-width: 1px;
border-style: solid;
}
}

/* Style for default comment background rectangle */
.d3-comment-rect {
fill: $comment-fill-color;
stroke: $comment-outline-color;
stroke-width: 1;

/* Prevent elements from being selectable */
/* This stops it being dragged incorrectly. */
user-select: none;
}

@mixin d3-comment-color-overrides($background-color, $text-color) {
.d3-comment-rect {
fill: $background-color;
}
.d3-comment-text {
color: $text-color;
}
.d3-comment-entry {
.d3-comment-text,
.d3-comment-text-entry {
background-color: $background-color;
color: $text-color;
}
Expand Down Expand Up @@ -905,44 +889,41 @@ g.bkg-col-cyan-50 {
word-break: break-word;
}

.d3-comment-text {
@include d3-comment-mixin;
@include d3-comment-markdown;
border-width: $comment-text-display-border;
user-select: none;
}

/* Style for comment text entry when shown in an HTML textarea control. */
.d3-comment-entry {
@include d3-comment-mixin;
background-color: $field-01;
border-width: $comment-text-entry-border;

&:focus {
@include d3-text-entry-focus-mixin;
}
.d3-comment-text-scroll,
.d3-comment-text-entry-scroll {
pointer-events: unset;
overflow-x: hidden;
overflow-y: scroll;
border-color: $comment-border-color;
border-width: $comment-border-width;
border-style: solid;
height: 100%;
width: 100%;
}

.d3-comment-text-wysiwyg-outer {
.d3-comment-text-outer {
display: table;
pointer-events: none;
overflow: hidden;
width: 100%;
height: 100%;
}

.d3-comment-text-wysiwyg {
.d3-comment-text {
@include d3-comment-mixin;
background-color: $comment-fill-color;
padding: $comment-text-display-border;
border-color: $comment-outline-color;
border-width: 1px;
user-select: none;
overflow: hidden;
display: table-cell;

&.markdown {
@include d3-comment-markdown;
}
}

.d3-comment-text-entry-wysiwyg-outer {
.d3-comment-text-entry-outer {
display: table;
pointer-events: none;
overflow: hidden;
Expand All @@ -951,10 +932,10 @@ g.bkg-col-cyan-50 {
outline: none;
}

.d3-comment-text-entry-wysiwyg {
.d3-comment-text-entry {
@include d3-comment-mixin;
padding: $comment-text-display-border;
border-width: 1px;
border-width: $comment-border-width;
background-color: $field-01;
outline: none;
user-select: none;
Expand All @@ -963,8 +944,6 @@ g.bkg-col-cyan-50 {
cursor: text;
}



/* Link styles for branch highlighting */

.d3-link-group.d3-branch-highlight {
Expand Down
Loading

0 comments on commit e076c74

Please sign in to comment.