@elyra/canvas 12.12.3 → 12.15.0

package/src/common-canvas/common-canvas.scss

@@ -16,7 +16,8 @@
 
 @import "carbon-components/scss/globals/scss/_vars";
 $toolbar-button-height: 41px; // Allow one extra pixel for the toolbar border
-$bottom-panel-height: 393px;
+$bottom-panel-border-width: 1px;
+$bottom-panel-border-color: $ui-03;
 
 /* Default layout for common-canvas components where the canvas appears below
  * the toolbar and right-side flyout appears to the right of the toolbar and
@@ -85,17 +86,15 @@ $bottom-panel-height: 393px;
 .bottom-panel {
 	display: flex;
 	flex-direction: column;
-	height: $bottom-panel-height;
 	position: absolute;
 	left:0;
 	right:0;
 	bottom: 0;
-	border-top: $palette-border-width solid $palette-border-color;
-	min-height: 75px;
+	border-top: $bottom-panel-border-width solid $bottom-panel-border-color;
 }
 
 .bottom-panel-drag {
-	border-top: $palette-border-color;
+	border-top: $bottom-panel-border-color;
 	cursor: row-resize;
 	flex: 0 0 2px;
 	border-top-width: 1px;
@@ -113,6 +112,54 @@ $bottom-panel-height: 393px;
 	height: 100%;
 }
 
+.text-toolbar {
+	position: absolute;
+	// top and left will be calculated and set for the text toolbar programmatically
+	top: 0;
+	left: 0;
+	width: fit-content;
+
+	.toolbar-div {
+		// Position the div 'relative' to text-toolbar so we can animate its
+		// opening by adjusting its 'height' and 'top' values.
+		position: relative;
+		left: 0;
+		animation: raise-toolbar 0.3s linear;
+		border: 1px solid $ui-04;
+		padding-right: 0px;
+
+		.toolbar-left-bar {
+			padding-right: 0px;
+		}
+	}
+
+	.text-toolbar-tick-svg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 40px;
+		width: 40px;
+		pointer-events: none;
+	}
+
+	.text-toolbar-tick-mark {
+		fill: $interactive-02;
+	}
+}
+
+// Causes the text toolbar to animate upwards from the top of the comment
+// to its final position
+@keyframes raise-toolbar {
+	from {
+		height: 0;
+		top: $toolbar-button-height;
+	}
+	to {
+		height: $toolbar-button-height;
+		top: 0;
+	}
+}
+
 /* Alternative layout for common-canvas components where canvas and right-side
  * flyout appear under the toolbar and the right-side flyout does not compress
  * the toolbar when it is opened. These are used when the config field

package/src/common-canvas/svg-canvas-d3.scss

@@ -88,6 +88,7 @@ $comment-text-color: $gray-100;
 $comment-text-font-size: 12px;
 $comment-text-font-weight: 400;
 $comment-text-font-family: "ibm-plex-sans", Helvetica Neue, Arial, sans-serif;
+$comment-text-line-height: 14px;
 $comment-text-display-border: 8px;
 $comment-text-entry-border: $comment-text-display-border - 2px; // Remove 2px to allow for focus border
 
@@ -110,7 +111,11 @@ $link-highlight-color: $support-04;
 	outline: none;
 }
 
-.d3-foreign-object {
+.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 on FF and Safari
@@ -304,12 +309,6 @@ $link-highlight-color: $support-04;
 	color: $node-warning-color;
 }
 
-/* Used for debugging label position */
-
-.d3-node-label-outline {
-	border: solid 1px;
-}
-
 /* Common styles for node labels and node/link decoration labels */
 
 .d3-label-single-line {
@@ -610,7 +609,6 @@ $link-highlight-color: $support-04;
 	}
 }
 
-
 /* Style for default comment background rectangle */
 .d3-comment-rect {
 	fill: $comment-fill-color;
@@ -622,7 +620,7 @@ $link-highlight-color: $support-04;
 	user-select: none;
 }
 
-@mixin comment-color-overrides($background-color) {
+@mixin d3-comment-color-overrides($background-color) {
 	.d3-comment-rect {
 		fill: $background-color;
 	}
@@ -630,7 +628,6 @@ $link-highlight-color: $support-04;
 		background-color: $background-color;
 		color: $gray-100;
 	}
-
 }
 
 /* Styles for comments colored by the user */
@@ -639,40 +636,40 @@ $link-highlight-color: $support-04;
 // assumption is, the user would prefer the color they set in the UI to
 // override any color provided by the host app.
 g.bkg-col-white-0 {
-	@include comment-color-overrides($white-0);
+	@include d3-comment-color-overrides($white-0);
 }
 g.bkg-col-yellow-20 {
-	@include comment-color-overrides($yellow-20);
+	@include d3-comment-color-overrides($yellow-20);
 }
 g.bkg-col-gray-20 {
-	@include comment-color-overrides($gray-20);
+	@include d3-comment-color-overrides($gray-20);
 }
 g.bkg-col-green-20 {
-	@include comment-color-overrides($green-20);
+	@include d3-comment-color-overrides($green-20);
 }
 g.bkg-col-teal-20 {
-	@include comment-color-overrides($teal-20);
+	@include d3-comment-color-overrides($teal-20);
 }
 g.bkg-col-cyan-20 {
-	@include comment-color-overrides($cyan-20);
+	@include d3-comment-color-overrides($cyan-20);
 }
 g.bkg-col-red-50 {
-	@include comment-color-overrides($red-50);
+	@include d3-comment-color-overrides($red-50);
 }
 g.bkg-col-orange-40 {
-	@include comment-color-overrides($orange-40);
+	@include d3-comment-color-overrides($orange-40);
 }
 g.bkg-col-gray-50 {
-	@include comment-color-overrides($gray-50);
+	@include d3-comment-color-overrides($gray-50);
 }
 g.bkg-col-green-50 {
-	@include comment-color-overrides($green-50);
+	@include d3-comment-color-overrides($green-50);
 }
 g.bkg-col-teal-50 {
-	@include comment-color-overrides($teal-50);
+	@include d3-comment-color-overrides($teal-50);
 }
 g.bkg-col-cyan-50 {
-	@include comment-color-overrides($cyan-50);
+	@include d3-comment-color-overrides($cyan-50);
 }
 
 .d3-comment-selection-highlight {
@@ -689,6 +686,157 @@ g.bkg-col-cyan-50 {
 	pointer-events: none;
 }
 
+@mixin d3-comment-markdown {
+	// Styles need for HTML elemnets genereted from markdown.
+	h1 {
+		font-size: 28px;
+		font-weight: 500;
+	}
+	h2 {
+		font-size: 22px;
+		font-weight: 500;
+	}
+	h3 {
+		font-size: 18px;
+		font-weight: 500;
+	}
+	h4 {
+		font-size: 16px;
+		font-weight: 500;
+	}
+	h5 {
+		font-size: 14px;
+		font-weight: 500;
+	}
+	h6 {
+		font-size: 12px;
+		font-weight: 500;
+	}
+	p {
+		font-size: $comment-text-font-size;
+		font-weight: $comment-text-font-weight;
+		font-family: $comment-text-font-family;
+		line-height: $comment-text-line-height;
+		letter-spacing: 0.15px;
+	}
+	hr {
+		border-top-color: $ui-03;
+	}
+	img {
+		max-width: 100%;
+	}
+	blockquote {
+		padding: 0 12px;
+		border-left: 3px solid $ui-03;
+		line-height: 8px;
+	}
+	code {
+		font-size: $comment-text-font-size;
+		font-weight: $comment-text-font-weight;
+		line-height: $comment-text-line-height;
+		background-color: $ui-03;
+		border-radius: 4px;
+		white-space: pre-wrap;
+	}
+	pre {
+		font-size: $comment-text-font-size;
+		font-weight: $comment-text-font-weight;
+		line-height: $comment-text-line-height;
+		background-color: $ui-02;
+		padding: 4px;
+		border: 1px solid $ui-03;
+		border-radius: 4px;
+		white-space: pre-wrap;
+		code {
+			background-color: $ui-02;
+		}
+	}
+	table {
+		width: 100%;
+		max-width: 100%;
+		margin-bottom: 20px;
+		border-spacing: 0;
+		border-collapse: collapse;
+		box-sizing: border-box;
+		text-indent: initial;
+		color: $text-01;
+		thead {
+			@include carbon--type-style("productive-heading-01");
+			font-size: 12px;
+			display: table-header-group;
+			vertical-align: middle;
+			border-color: inherit;
+			background-color: $ui-03;
+			text-align: left;
+			tr th {
+				padding: 8px;
+				border-bottom: 2px solid $ui-03;
+			}
+		}
+		tbody {
+			@include carbon--type-style("body-short-01");
+			font-size: 12px;
+			tr {
+				border-bottom: 2px solid $ui-03;
+				background-color: $ui-02;
+				td {
+					padding: 8px;
+				}
+			}
+		}
+	}
+	li {
+		display: list-item;
+		margin-top: -7px;
+		margin-bottom: -7px;
+
+		&:first-child {
+			margin-top: -14px;
+		}
+		&:last-child {
+			margin-bottom: -14px;
+		}
+		// A paragraph is generated in a list item when a blank line is entered
+		// between two if the list items in the input text.
+		p {
+			margin: 0 0 10px;
+			margin-block-start: -14px; // Will keep the paragraph on same line as marker
+		}
+	}
+	ul {
+		list-style-type: disc;
+		padding-inline-start: 30px;
+		line-height: 14px;
+		margin-top: 0;
+	}
+	ul ul {
+		list-style-type: circle;
+		margin-bottom: -14px;
+	}
+	ul ol {
+		margin-bottom: -14px;
+	}
+	ul ul ul {
+		list-style-type: square;
+	}
+	ol {
+		list-style-type: decimal;
+		padding-inline-start: 30px;
+		line-height: 14px;
+		margin-top: 0;
+	}
+	ol ol {
+		list-style-type: lower-alpha;
+		margin-bottom: -14px;
+	}
+	ol ul {
+		margin-bottom: -14px;
+	}
+	ol ol ol {
+		list-style-type: lower-roman;
+	}
+}
+
 @mixin d3-comment-mixin {
 	color: $comment-text-color;
 	background-color: transparent;
@@ -702,7 +850,7 @@ g.bkg-col-cyan-50 {
 	height: 100%;
 	pointer-events: auto; /* Override the pointer-events: none on the foreignObject container */
 	overflow: hidden;
-	line-height: 105%;  /* Set so that entry text is displayed the same as display text */
+	line-height: $comment-text-line-height;  /* Set so that entry text is displayed the same as display text */
 	letter-spacing: 0.15px; /* Keeps letter spacing the same as before changing comments to use foreignObject */
 	/* Format text display */
 	white-space: pre-wrap;
@@ -712,6 +860,7 @@ g.bkg-col-cyan-50 {
 
 .d3-comment-text {
 	@include d3-comment-mixin;
+	@include d3-comment-markdown;
 	border-width: $comment-text-display-border;
 	user-select: none;
 }

package/src/common-canvas/svg-canvas-pipeline.js

@@ -24,7 +24,15 @@ import { COMMENT_LINK } from "./constants/canvas-constants";
 export default class SVGCanvasPipeline {
 	constructor(pipelineId, canvasInfo) {
 		this.logger = new Logger("SVGCanvasActivePipeline");
-		this.logger.logStartTimer("constructor");
+		this.logger.log("constructor - start");
+
+		this.initialize(pipelineId, canvasInfo);
+
+		this.logger.log("constructor - end");
+	}
+
+	initialize(pipelineId, canvasInfo) {
+		this.logger.logStartTimer("initialize");
 		this.canvasInfo = canvasInfo;
 		this.pipeline = this.getPipeline(pipelineId, canvasInfo);
 
@@ -43,8 +51,7 @@ export default class SVGCanvasPipeline {
 		// preProcessPipeline uses the mapped objects so this needs to be done
 		// after they have been created.
 		this.pipeline = this.preProcessPipeline(this.pipeline);
-
-		this.logger.logEndTimer("constructor");
+		this.logger.logEndTimer("initialize");
 	}
 
 	getCanvasDimensions(gap) {