@elyx-code/editor-ui 0.0.2

package/src/components/canvas/canvas.css

@@ -0,0 +1,10 @@
+.canvas {
+  background-color: #EFF2F5;
+  /* repeat background image */
+  background-image: url('../../assets/canvas-backdrop.png');
+  backdrop-repeat: repeat;
+}
+
+.canvas.canvas-forbidden-cursor {
+  cursor: not-allowed !important;
+}

package/src/components/canvas/create-entity-menu.css

@@ -0,0 +1,579 @@
+.canvas__new-entity-menu {
+	padding: 5px;
+	background-color: #111;
+	width: 284px;
+	border-radius: 4px;
+	display: block;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
+	min-width: 200px;
+	background-color: #fff;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.15);
+	position: relative;
+	transform: translateY(-50%);
+	z-index: 1;
+}
+
+.canvas__new-entity-menu .test-entity-button {
+	cursor: unset;
+}
+
+/* Override/invalidate the scalling when hoverring */
+.canvas__new-entity-menu .test-entity-button:hover:not(.disabled):not(.executing):not(.termination-statement-test-button),
+.canvas__new-entity-menu .canvas-draggable-card:not(.disabled) .test-entity-button:hover:not(:disabled):not(.termination-statement-test-button) {
+	transform: none;
+}
+
+.canvas__new-entity-menu .canvas__new-entity-menu__header {
+	display: flex;
+	align-items: center;
+	padding: 10px 14px;
+	gap: 10px;
+}
+
+/*
+	Avoid a list from growing infinately the more items it has,
+	and add a scrollbar when it reaches the max height.
+*/
+.canvas__new-entity-menu .canvas__new-entity-menu__section-list {
+	max-height: 400px;
+	overflow-y: auto;
+	position: relative;
+
+	/* Transition the height when more children are added to the section */
+	transition: height 0.2s ease;
+}
+
+.canvas__new-entity-menu__scroll-button {
+	position: fixed;
+	right: 8px;
+	height: 30px;
+	width: 30px;
+	border-radius: 50%;
+	background-color: #f5f5f5;
+	color: #000;
+	font-size: 1.2rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	border: none;
+}
+
+.canvas__new-entity-menu__scroll-down-button {
+	bottom: 8px;
+	right: 8px;
+}
+
+.canvas__new-entity-menu__scroll-up-button {
+	bottom: 46px;
+}
+
+.canvas__new-entity-menu__scroll-button:hover {
+	/* Make bigger with smooth animation */
+	transform: scale(1.1);
+	transition: all 0.2s ease-in-out;
+}
+
+/* Hide helper text section on search input */
+.canvas__new-entity-menu .omrs-input-helper {
+	display: none;
+}
+
+.canvas__new-entity-menu__separator {
+	border-top: 1px solid #e0e0e0;
+	margin: 0;
+	margin-top: 8px;
+}
+
+.canvas__new-entity-menu ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.canvas__new-entity-menu ul li {
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.canvas__new-entity-menu ul li .canvas__new-entity-menu__base-entity-button {
+	background: none;
+	padding: 10px 20px;
+	border: none;
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+	color: #111;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	display: flex;
+	gap: 10px;
+	width: 100%;
+	border-radius: 4px;
+	align-items: center;
+}
+
+.canvas__new-entity-menu ul li .canvas__new-entity-menu__base-entity-button:disabled {
+	opacity: 0.45;
+	color: rgba(0, 0, 0, 0.54);
+	cursor: not-allowed;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button {
+	background: none;
+	padding: 10px 20px;
+	border: none;
+	margin: 0;
+	font-size: 16px;
+	font-weight: 600;
+	color: #111;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	display: flex;
+	gap: 12px;
+	width: 100%;
+	border-radius: 4px;
+	align-items: center;
+}
+
+.canvas__new-entity-menu ul li .canvas__new-entity-menu__specific-entity-button:disabled {
+	opacity: 0.45;
+	color: rgba(0, 0, 0, 0.54);
+	cursor: not-allowed;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button__labels-container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+}
+
+.canvas__new-entity-menu__specific-entity-button__labels-container
+	.canvas__new-entity-menu__entity-title {
+	text-align: left;
+}
+
+.canvas__new-entity-menu__specific-entity-button__labels-container
+	.canvas__new-entity-menu__entity-subtitle {
+	font-size: 14px;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.54);
+	margin: 0;
+	text-align: left;
+}
+
+h4.canvas__new-entity-menu__title {
+	font-size: 16px;
+	font-weight: 600;
+	color: #111;
+	margin: 0;
+}
+
+.canvas__new-entity-menu__section-title-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px 16px 8px 16px;
+	cursor: pointer;
+
+	/* Reset all button styles */
+	border: none;
+	background: none;
+	width: 100%;
+}
+
+.canvas__new-entity-menu__section-title-container:hover i {
+	transform: scale(1.1);
+	transition: all 0.2s ease;
+}
+
+.canvas__new-entity-menu__section-title-container i {
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.canvas__new-entity-menu__section-title {
+	font-size: 14px;
+	font-weight: 400;
+	color: #111;
+	margin: 0;
+}
+
+.canvas__new-entity-menu__section-empty-placeholder {
+	font-size: 12px;
+	font-weight: 400;
+	color: rgba(0, 0, 0, 0.54);
+	margin: 0;
+	width: 100%;
+	padding: 0px 0px 16px 0px;
+	text-align: center;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button:hover:not(:disabled)
+	> span,
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button:hover:not(:disabled)
+	> i {
+	transform: scale(1.05);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__definition-entity:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__built-in-base-entity:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__definition-entity:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__built-in-base-entity:not(:disabled) {
+	color: var(--color-icon--definition-entity);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__global-event:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__function-declaration:not(:disabled) {
+	color: var(--color-icon--function-declaration);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__project:not(:disabled) {
+	color: var(--color-icon--project);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__operation:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__operation-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__function-call:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	/*
+		This is not a mistake,
+		The function declaration is shown as a 'specific' function call in the new entity menu
+		Because it will be used to invoke a function, not to declare it
+	*/
+	.canvas__new-entity-menu__specific-entity-button.entity-color__function-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__operation-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__operation:not(:disabled) {
+	color: var(--color-icon--operation);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__internal-call:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__internal-call:not(:disabled) {
+	color: var(--color-icon--internal-call);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__condition:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__condition-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__condition-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__condition:not(:disabled) {
+	color: var(--color-icon--condition);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__global-event:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__global-event-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__global-event-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__global-event:not(:disabled) {
+	color: var(--color-icon--global-event);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__break-statement:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__break-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__break-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__break-statement:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__continue-statement:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__continue-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__continue-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__continue-statement:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__return-statement:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__return-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__return-statement-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__return-statement:not(:disabled) {
+	color: var(--color-icon--return-statement);
+}
+
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__loop:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__loop-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__loop-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__loop:not(:disabled) {
+	color: var(--color-icon--loop);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__variable-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__variable-instance:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__variable-declaration:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button.entity-color__variable-instance:not(:disabled) {
+	color: var(--color-icon--variable-declaration);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__condition:not(:disabled) {
+	color: var(--color-icon--condition);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__loop:not(:disabled) {
+	color: var(--color-icon--loop);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__search:not(:disabled) {
+	color: var(--color-icon--search);
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__definition-entity:hover:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__built-in-base-entity:hover:not(:disabled) {
+	background-color: var(--color-icon--definition-entity);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__function-declaration:hover:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__global-event:hover:not(:disabled) {
+	background-color: var(--color-icon--function-declaration);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__project:hover:not(:disabled) {
+	background-color: var(--color-icon--project);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__function-call:hover:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__operation-declaration:hover:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__operation:hover:not(:disabled) {
+	background-color: var(--color-icon--operation);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__variable-instance:hover:not(:disabled),
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__variable-declaration:hover:not(:disabled) {
+	background-color: var(--color-icon--variable-declaration);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__condition:hover:not(:disabled) {
+	background-color: var(--color-icon--condition);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__loop:hover:not(:disabled) {
+	background-color: var(--color-icon--loop);
+	color: #fff;
+}
+
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__base-entity-button.entity-color__search:hover:not(:disabled) {
+	background-color: var(--color-icon--search);
+	color: #fff;
+}
+
+/*
+	We want to unset the color of the icons, because some of them are img (images) with a fixed color
+	and we want to be consistent
+*/
+.canvas__new-entity-menu
+	ul
+	li
+	.canvas__new-entity-menu__specific-entity-button
+	i {
+	color: rgba(0, 0, 0, 0.54);
+}
+
+div.canvas-click-effect {
+	position: fixed;
+	box-sizing: border-box;
+	border-style: solid;
+	border-color: #ffffff;
+	border-radius: 50%;
+	animation: canvas-click-effect 0.4s ease-out;
+}
+
+@keyframes canvas-click-effect {
+	0% {
+		opacity: 1;
+		width: 0.5em;
+		height: 0.5em;
+		margin: -0.25em;
+		border-width: 0.5em;
+	}
+	100% {
+		opacity: 0.2;
+		width: 15em;
+		height: 15em;
+		margin: -7.5em;
+		border-width: 0.03em;
+	}
+}