js-draw 1.21.2 → 1.22.0

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;
-}
+}

package/src/toolbar/widgets/PenToolWidget.scss

@@ -1,5 +1,3 @@
-
-
 // Repeat selector for extra specificity
 :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
 	display: flex;

package/src/toolbar/widgets/SelectionToolWidget.scss

@@ -1,6 +1,5 @@
-
 .selection-format-menu {
 	&.disabled {
 		opacity: 0.5;
 	}
-}
+}

package/src/toolbar/widgets/components/components.scss

@@ -1,6 +1,6 @@
-@use "./makeThicknessSlider.scss";
-@use "./makeColorInput.scss";
-@use "./makeSeparator.scss";
-@use "./makeFileInput.scss";
-@use "./makeGridSelector.scss";
-@use "./makeSnappedList.scss";
+@use './makeThicknessSlider.scss';
+@use './makeColorInput.scss';
+@use './makeSeparator.scss';
+@use './makeFileInput.scss';
+@use './makeGridSelector.scss';
+@use './makeSnappedList.scss';

package/src/toolbar/widgets/components/makeColorInput.scss

@@ -1,4 +1,3 @@
-
 /* Make color selection buttons fill their containing label */
 .toolbar-element .clr-field {
 	* {
@@ -94,4 +93,3 @@ $pipette-button-size: 30px;
 		opacity: 0.8;
 	}
 }
-

package/src/toolbar/widgets/components/makeFileInput.scss

@@ -1,4 +1,3 @@
-
 .toolbar-element .toolbar--file-input-container {
 	display: flex;
 
@@ -33,9 +32,7 @@
 		// Default border color if color-mix is not supported
 		--active-border-color: rgba(100, 100, 100, 0.5);
 
-		--active-border-color: color-mix(
-			in srgb, var(--foreground-color-1), transparent
-		);
+		--active-border-color: color-mix(in srgb, var(--foreground-color-1), transparent);
 
 		.cancel-button {
 			padding-left: 3px;
@@ -79,8 +76,9 @@
 			}
 		}
 
-
-		&:active, &:hover, &.drag-target {
+		&:active,
+		&:hover,
+		&.drag-target {
 			--active-border-color: var(--foreground-color-1);
 		}
 
@@ -88,4 +86,4 @@
 			border-width: 2px;
 		}
 	}
-}
+}

package/src/toolbar/widgets/components/makeGridSelector.scss

@@ -1,14 +1,13 @@
-
 .toolbar-grid-selector {
 	position: relative;
 
 	& > div {
 		display: flex;
 		flex-direction: row;
-	
+
 		max-width: 350px;
 		flex-wrap: wrap;
-	
+
 		--button-size: 48px;
 	}
 
@@ -17,7 +16,7 @@
 		flex-direction: column-reverse;
 		box-sizing: border-box;
 		cursor: pointer;
-	
+
 		flex-shrink: 1;
 		margin: 2px;
 
@@ -35,10 +34,10 @@
 			display: flex;
 			flex-direction: column;
 			box-sizing: border-box;
-		
+
 			width: var(--button-size);
 			height: var(--button-size);
-		
+
 			font-size: 0.7rem;
 			align-items: center;
 			justify-content: center;
@@ -54,13 +53,11 @@
 			flex-shrink: 1;
 			width: 100%;
 		}
-		
+
 		&.checked {
 			background-color: var(--selection-background-color);
 			color: var(--selection-foreground-color);
 			--icon-color: var(--selection-foreground-color);
 		}
 	}
-	
-
 }