js-draw 1.21.3 → 1.23.1

package/src/dialogs/makeMessageDialog.scss

@@ -1,7 +1,10 @@
-
 @keyframes fade-in {
-	from { opacity: 0; }
-	to { opacity: 1; }
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 .message-dialog-container dialog {
@@ -15,7 +18,8 @@
 		}
 	}
 
-	&, &::backdrop {
+	&,
+	&::backdrop {
 		transition: opacity 0.2s ease;
 		animation: fade-in 0.2s ease;
 	}
@@ -37,10 +41,10 @@
 		flex-grow: 1;
 		flex-shrink: 1;
 		overflow-y: auto;
-	
+
 		margin-left: 20px;
 		margin-right: 20px;
-	
+
 		padding-bottom: 20px;
 	}
-}
+}

package/src/styles.js

@@ -4,4 +4,4 @@
  */
 
 import './Editor.scss';
-import '@melloware/coloris/dist/coloris.css';
+import '@melloware/coloris/dist/coloris.css';

package/src/toolbar/AbstractToolbar.scss

@@ -1,4 +1,3 @@
-
 /* The *main* root toolbar element */
 .toolbar-root {
 	background-color: var(--background-color-1);
@@ -23,8 +22,10 @@
 	// multiple editors can be displayed).
 	z-index: 1;
 
-	font-family: system-ui, -apple-system, sans-serif;
-
+	font-family:
+		system-ui,
+		-apple-system,
+		sans-serif;
 
 	details > summary {
 		cursor: pointer;
@@ -50,7 +51,8 @@
 	cursor: unset;
 }
 
-.toolbar-button, .toolbar-element button {
+.toolbar-button,
+.toolbar-element button {
 	cursor: pointer;
 	text-align: center;
 	border-radius: 6px;
@@ -61,7 +63,10 @@
 	user-select: none;
 	-webkit-user-select: none;
 
-	transition: background-color 0.15s ease, box-shadow 0.25s ease, opacity 0.2s ease;
+	transition:
+		background-color 0.15s ease,
+		box-shadow 0.25s ease,
+		opacity 0.2s ease;
 }
 
 .toolbar-button,
@@ -98,7 +103,8 @@
 	width: 6em;
 }
 
-.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
+.toolbar-button:not(.disabled):hover,
+.toolbar-root button:not(:disabled):hover {
 	box-shadow: 0px 2px 4px var(--shadow-color);
 }
 
@@ -122,7 +128,9 @@
 	--icon-color: var(--selection-foreground-color);
 }
 
-.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
+	> .toolbar-button
+	> .toolbar-showHideDropdownIcon {
 	display: none;
 }
 
@@ -136,8 +144,7 @@
 }
 
 .toolbar-dropdown.hidden,
-.toolbar-toolContainer:not(.selected):not(.dropdownShowable)
-		> .toolbar-dropdown:not(.hiding) {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown:not(.hiding) {
 	display: none;
 }
 
@@ -174,7 +181,7 @@
 @keyframes dropdown-transition-out {
 	0% {
 		opacity: 1;
-		transform: scale(1, 1);	
+		transform: scale(1, 1);
 	}
 	100% {
 		opacity: 0;
@@ -207,7 +214,8 @@
 	}
 
 	/* ...and background color animation. */
-	:root .toolbar-button, .toolbar-root button {
+	:root .toolbar-button,
+	.toolbar-root button {
 		transition: none;
 	}
 }
@@ -222,7 +230,7 @@
 	color: var(--foreground-color-1);
 	font-weight: normal;
 
-	&[aria-checked=true] {
+	&[aria-checked='true'] {
 		background: var(--selection-background-color);
 		color: var(--selection-foreground-color);
 	}

package/src/toolbar/DropdownToolbar.scss

@@ -1,12 +1,13 @@
-
 .toolbar-dropdown-toolbar {
-	button, .toolbar-button {
+	button,
+	.toolbar-button {
 		background-color: var(--background-color-2);
 		color: var(--foreground-color-2);
 		--icon-color: var(--foreground-color-2);
 	}
 
-	&, .toolbar-dropdown {
+	&,
+	.toolbar-dropdown {
 		background-color: var(--background-color-3);
 		color: var(--foreground-color-3);
 	}
@@ -43,4 +44,4 @@
 	.toolbar-dropdown > div > .toolbar-toolContainer {
 		display: inline-block;
 	}
-}
+}

package/src/toolbar/EdgeToolbar.scss

@@ -1,39 +1,60 @@
-@use "./utils/labelVisibleOnHover.scss";
+@use './utils/labelVisibleOnHover.scss';
 
 @keyframes toolbar--edgemenu-transition-in {
-	from { transform: translate(0, 100%); }
-	to { transform: translate(0, 0); }
+	from {
+		transform: translate(0, 100%);
+	}
+	to {
+		transform: translate(0, 0);
+	}
 }
 
 @keyframes toolbar--edgemenu-transition-in-reduce-motion {
-	from { opacity: 0; }
-	to { opacity: 1; }
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
 
 @keyframes toolbar--edgemenu-transition-out {
 	// Don't include `from { translate: 0 }` because initially,
 	// the translation might not be zero (e.g. during a drag).
-	to { transform: translate(0, 100%); }
+	to {
+		transform: translate(0, 100%);
+	}
 }
 
 @keyframes toolbar--edgemenu-transition-out-reduce-motion {
-	from { opacity: 1; }
-	to { opacity: 0; }
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
 }
 
 @keyframes toolbar--edgemenu-container-transition-in {
 	// Include overflow-y: hidden so that the bottom of the menu doesn't go below
 	// the editor.
-	from { overflow-y: hidden; }
-	to { overflow-y: hidden; }
+	from {
+		overflow-y: hidden;
+	}
+	to {
+		overflow-y: hidden;
+	}
 }
 
 @keyframes toolbar--edgemenu-container-transition-out {
-	from { overflow-y: hidden; }
-	to { overflow-y: hidden; }
+	from {
+		overflow-y: hidden;
+	}
+	to {
+		overflow-y: hidden;
+	}
 }
 
-
 // The toolbar portion (the bar along the top of the screen)
 .toolbar-edge-toolbar {
 	--toolbar-button-height: min(20vh, 48px);
@@ -68,8 +89,12 @@
 					opacity: 0;
 
 					@keyframes hide-initially {
-						from { opacity: 0; }
-						to { opacity: 0; }
+						from {
+							opacity: 0;
+						}
+						to {
+							opacity: 0;
+						}
 					}
 
 					// Prevent labels from having an initial transition
@@ -110,7 +135,7 @@
 		&::-webkit-scrollbar-thumb {
 			background-color: var(--shadow-color);
 		}
-		
+
 		&.toolbar-tool-row {
 			overflow-x: auto;
 			overflow-y: hidden;
@@ -184,8 +209,8 @@
 
 		--button-flex-direction: row;
 
-
-		&.label-left { // Icon on the right
+		&.label-left {
+			// Icon on the right
 			justify-content: end;
 			--button-flex-direction: row-reverse;
 
@@ -198,7 +223,8 @@
 			order: 100;
 		}
 
-		&.label-right { // Icon on the left
+		&.label-right {
+			// Icon on the left
 			// Show first
 			order: -1;
 		}
@@ -222,7 +248,6 @@
 	--button-label-hover-offset-x: 0;
 
 	.toolbar-toolContainer:not(.no-icon):not(.label-inline) {
-
 		.toolbar-button {
 			width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
 
@@ -238,7 +263,11 @@
 		}
 	}
 
-	& > div > .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {
+	&
+		> div
+		> .toolbar-toolContainer:not(.selected):not(.dropdownShowable)
+		> .toolbar-button
+		> .toolbar-showHideDropdownIcon {
 		display: block;
 		visibility: hidden;
 	}
@@ -256,7 +285,6 @@
 			padding-bottom: 0px;
 		}
 
-
 		box-shadow: none;
 	}
 }
@@ -280,7 +308,9 @@
 	background-color: var(--background-color-transparent);
 
 	$motion-transition: 0.15s ease-in-out height;
-	$non-motion-transition: 0.15s ease-in-out background-color, 0.2s ease-in-out opacity;
+	$non-motion-transition:
+		0.15s ease-in-out background-color,
+		0.2s ease-in-out opacity;
 	transition: $motion-transition, $non-motion-transition;
 	@media (prefers-reduced-motion: reduce) {
 		transition: $non-motion-transition;
@@ -324,7 +354,7 @@
 		color: var(--primary-action-foreground-color);
 	}
 
-	// Special styles for the enum selector 
+	// Special styles for the enum selector
 	.toolbar-grid-selector .choice-button {
 		--button-label-hover-offset-y: var(--button-size);
 		@include labelVisibleOnHover.label-visible-on-hover('label > .button-label-text');
@@ -358,9 +388,12 @@
 	border-top-left-radius: $border-radius;
 	border-top-right-radius: $border-radius;
 
-	transition: transform 0.1s ease, padding-bottom 0.1s ease;
+	transition:
+		transform 0.1s ease,
+		padding-bottom 0.1s ease;
 
-	input, textarea {
+	input,
+	textarea {
 		user-select: auto;
 		-webkit-user-select: auto;
 	}
@@ -388,9 +421,9 @@
 		box-shadow: none;
 
 		background: transparent;
-		
+
 		&::before {
-			content: "";
+			content: '';
 
 			background-color: var(--icon-color);
 			opacity: 0.2;
@@ -431,7 +464,8 @@
 			}
 
 			// No special sizing for long labels
-			label, & > label.long-label {
+			label,
+			& > label.long-label {
 				font-size: 1em;
 			}
 		}
@@ -468,14 +502,14 @@
 				box-sizing: border-box;
 			}
 
-			& > input[type="checkbox"] {
+			& > input[type='checkbox'] {
 				width: 20px;
 				height: 20px;
 				margin-left: 0;
 			}
 
 			// If checkboxes have flex-grow, the checkbox region can become centered.
-			& > input:not([type="checkbox"]) {
+			& > input:not([type='checkbox']) {
 				flex-grow: 1;
 
 				// Specify a minimum width to allow the input to shrink.

package/src/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
-@use "./widgets/widgets.scss";
+@use './widgets/widgets.scss';
 
-@use "./AbstractToolbar.scss";
-@use "./EdgeToolbar.scss";
-@use "./DropdownToolbar.scss";
+@use './AbstractToolbar.scss';
+@use './EdgeToolbar.scss';
+@use './DropdownToolbar.scss';
 
-@use "./utils/HelpDisplay.scss";
+@use './utils/HelpDisplay.scss';

package/src/toolbar/utils/HelpDisplay.scss

@@ -1,4 +1,3 @@
-
 .toolbar-help-overlay {
 	width: 100%;
 	height: 100%;
@@ -32,27 +31,36 @@
 	flex-direction: column;
 
 	// Show/hide animations
-	&, &::backdrop {
+	&,
+	&::backdrop {
 		@keyframes transition-in {
-			0% { opacity: 0; }
-			100% { opacity: 1; }
+			0% {
+				opacity: 0;
+			}
+			100% {
+				opacity: 1;
+			}
 		}
 		animation: 0.25s ease transition-in;
 	}
 
 	&.-hiding {
 		@keyframes transition-out {
-			0% { opacity: 1; }
-			100% { opacity: 0; }
+			0% {
+				opacity: 1;
+			}
+			100% {
+				opacity: 0;
+			}
 		}
 
-		&, &::backdrop {
+		&,
+		&::backdrop {
 			animation: 0.25s ease transition-out;
 			opacity: 0;
 		}
 	}
 
-
 	// For drag transitions
 	transition: 0.3s ease transform;
 	&.-dragging {
@@ -63,7 +71,6 @@
 		transition: none;
 	}
 
-
 	@media screen and (min-width: 800px) {
 		// Move the navigation buttons to the bottom of the screen
 		> .navigation-buttons {
@@ -173,7 +180,8 @@
 				cursor: unset !important;
 			}
 
-			&.-clickable, &.-background {
+			&.-clickable,
+			&.-background {
 				z-index: 1;
 				touch-action: none;
 			}
@@ -188,7 +196,8 @@
 				}
 			}
 
-			&.-clickable.has-long-press-or-hover, &.-active {
+			&.-clickable.has-long-press-or-hover,
+			&.-active {
 				background-color: var(--background-color-1);
 			}
 
@@ -206,7 +215,9 @@
 				}
 			}
 
-			transition: 0.5s ease opacity, 0.5s ease background-color;
+			transition:
+				0.5s ease opacity,
+				0.5s ease background-color;
 		}
 	}
 
@@ -222,7 +233,8 @@
 			opacity: 0.5;
 		}
 
-		> .next, > .previous {
+		> .next,
+		> .previous {
 			font-size: 1em;
 			padding: 10px;
 			transition: 0.2s ease font-size;
@@ -235,11 +247,21 @@
 
 		&:not(.-has-previous) > .next:not(:disabled) {
 			@keyframes highlight-button {
-				0% { transform: scale(1); }
-				50% { transform: scale(1.2); }
-				55% { transform: scale(1.2) rotate(2deg); }
-				65% { transform: scale(1.2) rotate(-2deg); }
-				100% { transform: scale(1); }
+				0% {
+					transform: scale(1);
+				}
+				50% {
+					transform: scale(1.2);
+				}
+				55% {
+					transform: scale(1.2) rotate(2deg);
+				}
+				65% {
+					transform: scale(1.2) rotate(-2deg);
+				}
+				100% {
+					transform: scale(1);
+				}
 			}
 			animation: 0.5s ease highlight-button 0.5s;
 
@@ -249,12 +271,12 @@
 		}
 
 		> .next::after {
-			content: "❯";
+			content: '❯';
 			margin-left: 3px;
 		}
 
 		> .previous::before {
-			content: "❮";
+			content: '❮';
 			margin-right: 3px;
 		}
 
@@ -266,7 +288,8 @@
 			font-size: 1.4em;
 		}
 
-		&.-highlight-next > .next, &.-highlight-previous > .previous {
+		&.-highlight-next > .next,
+		&.-highlight-previous > .previous {
 			font-weight: bold;
 			background-color: rgba(200, 200, 200, 0.1);
 			font-size: 1.4em;
@@ -275,11 +298,10 @@
 
 	.navigation-help {
 		margin-top: 1em;
-		font-size: 0.7em;	
+		font-size: 0.7em;
 	}
 }
 
-
 .toolbar-element .toolbar-help-overlay-button {
 	height: 0;
 	position: relative;
@@ -306,10 +328,11 @@
 			transition: 0.2s ease filter;
 		}
 
-		&:focus-visible, &:hover {
+		&:focus-visible,
+		&:hover {
 			> .icon {
 				filter: drop-shadow(0px 0px 1px var(--shadow-color));
 			}
 		}
 	}
-}
+}

package/src/toolbar/utils/labelVisibleOnHover.scss

@@ -1,29 +1,50 @@
-
 $label-visible-opacity: 0.8;
 $show-delay: 0.3s;
 
 @keyframes rehide-label {
-	0% { opacity: $label-visible-opacity; }
-	80% { opacity: $label-visible-opacity; }
-	100% { opacity: 0.1; }
+	0% {
+		opacity: $label-visible-opacity;
+	}
+	80% {
+		opacity: $label-visible-opacity;
+	}
+	100% {
+		opacity: 0.1;
+	}
 }
 
 @keyframes show-label-delayed {
-	0% { opacity: 0; }
+	0% {
+		opacity: 0;
+	}
 	// Keep the label hidden before showing
-	80% { opacity: 0; }
-	100% { opacity: $label-visible-opacity; }
+	80% {
+		opacity: 0;
+	}
+	100% {
+		opacity: $label-visible-opacity;
+	}
 }
 
 @keyframes show-label-now {
-	0% { opacity: 0; }
-	5% { opacity: 0; }
-	100% { opacity: $label-visible-opacity; }
+	0% {
+		opacity: 0;
+	}
+	5% {
+		opacity: 0;
+	}
+	100% {
+		opacity: $label-visible-opacity;
+	}
 }
 
 @keyframes keep-label-hidden {
-	0% { opacity: 0; }
-	100% { opacity: 0; }
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0;
+	}
 }
 
 // Shows a lable on hover
@@ -41,8 +62,7 @@ $show-delay: 0.3s;
 		// show the label immediately otherwise.
 		&:hover:not(:focus-visible) > #{$label-selector},
 		// When the user is pressing/long-pressing the button
-		&:active > #{$label-selector}
-		{
+		&:active > #{$label-selector} {
 			opacity: $label-visible-opacity;
 			animation: 1s ease show-label-delayed;
 		}
@@ -56,7 +76,8 @@ $show-delay: 0.3s;
 
 	// .focus-visible: Allow setting focus-visible from JS (in cases where this
 	// element isn't the focus target and the browser doesn't support :has).
-	&:focus-visible, &.focus-visible {
+	&:focus-visible,
+	&.focus-visible {
 		& > #{$label-selector} {
 			animation: $keyboard-hide-animation;
 			opacity: 0;
@@ -87,7 +108,9 @@ $show-delay: 0.3s;
 		border-radius: 25px;
 		padding: 10px;
 
-		transition: $show-delay ease opacity, 0.2s ease margin-top;
+		transition:
+			$show-delay ease opacity,
+			0.2s ease margin-top;
 
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;

package/src/toolbar/widgets/DocumentPropertiesWidget.scss

@@ -1,4 +1,3 @@
-
 .toolbar-document-properties-widget {
 	button.about-button {
 		width: 100%;

package/src/toolbar/widgets/HandToolWidget.scss

@@ -1,4 +1,3 @@
-
 .toolbar-zoomLevelEditor {
 	display: flex;
 	flex-direction: row;

package/src/toolbar/widgets/InsertImageWidget/InsertImageWidget.scss

@@ -1,4 +1,3 @@
-
 $image-widget-selector: '.insert-image-widget-dropdown-content';
 // Repeat the selector for additional specificity.
 :root #{$image-widget-selector}#{$image-widget-selector}#{$image-widget-selector} {
@@ -13,7 +12,7 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 	img {
 		max-width: 100%;
 		max-height: 100%;
-	
+
 		/* Center */
 		display: block;
 		margin-left: auto;
@@ -44,4 +43,4 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 		max-width: 50%;
 		min-width: min(100%, 40px);
 	}
-}
+}

package/src/toolbar/widgets/OverflowWidget.css

@@ -1,4 +1,3 @@
-
 .toolbar-overflow-widget-overflow-list {
 	display: flex;
 	flex-direction: column;
@@ -29,4 +28,4 @@
 	translate: none !important;
 
 	padding: 4px;
-}
+}