js-draw 1.9.1 → 1.11.0

package/src/Editor.scss

@@ -74,6 +74,13 @@
 	min-height: 220px;
 	min-width: 100px;
 
+	// A vertical writing mode breaks assumptions about how toolbars/overlays
+	// are aligned, resulting in unusable toolbars/text.
+	//
+	// TODO: Fix this.
+	//
+	writing-mode: horizontal-tb;
+
 	box-sizing: border-box;
 
 	display: flex;

package/src/toolbar/AbstractToolbar.scss

@@ -217,6 +217,26 @@
 	justify-content: center;
 }
 
+.toolbar-element .toolbar--toggle-button {
+	color: var(--foreground-color-1);
+	font-weight: normal;
+
+	&[aria-checked=true] {
+		background: var(--selection-background-color);
+		color: var(--selection-foreground-color);
+	}
+
+	> .icon {
+		width: 25px;
+		height: 25px;
+		margin: 0 5px;
+	}
+
+	> * {
+		vertical-align: middle;
+	}
+}
+
 .toolbar-closeColorPickerOverlay {
 	display: none;
 	position: fixed;

package/src/toolbar/toolbar.scss

@@ -1,6 +1,6 @@
 @use "./widgets/InsertImageWidget.scss";
 @use "./widgets/OverflowWidget.css";
-@use "./widgets/PenToolWidget.css";
+@use "./widgets/PenToolWidget.scss";
 @use "./widgets/HandToolWidget.scss";
 @use "./widgets/SelectionToolWidget.scss";
 @use "./widgets/DocumentPropertiesWidget.scss";

package/src/toolbar/widgets/InsertImageWidget.scss

@@ -12,7 +12,7 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 
 	img {
 		max-width: min(50vw, 75%);
-		max-height: 50vh;
+		max-height: min(300px, 50vh);
 	
 		/* Center */
 		display: block;
@@ -20,6 +20,11 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 		margin-right: auto;
 	}
 
+	.insert-image-image-status-view {
+		display: flex;
+		justify-content: space-between;
+	}
+
 	.action-button-row {
 		margin-top: 4px;
 		display: flex;

package/src/toolbar/widgets/PenToolWidget.scss

@@ -0,0 +1,33 @@
+
+
+// Repeat selector for extra specificity
+:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
+	display: flex;
+	justify-content: stretch;
+	padding-top: 0;
+	padding-bottom: 5px;
+
+	// Some styles rely on left being start.
+	direction: ltr;
+
+	& > * {
+		flex-grow: 1;
+		text-align: start;
+		margin-inline-end: 5px;
+
+		.icon {
+			margin: 0;
+			margin-inline-start: 4px;
+			margin-inline-end: 10px;
+		}
+	}
+
+	& > :nth-child(1) {
+		direction: ltr;
+	}
+
+	& > :last-child {
+		// Reverse the last (show icon on the right)
+		direction: rtl;
+	}
+}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -83,6 +83,12 @@
 .overlay.handleOverlay {
 	touch-action: none;
 
+	// The selection tool makes some assumptions about margin-left, margin-top,
+	// and the initial (unmodified) position of the selection.
+	//
+	// For now, as we're not showing text in the selection box, force LTR.
+	direction: ltr;
+
 	// When expanding a selection with shift+click&drag, multiple selection boxes
 	// can be present in the same handleOverlay. As such, so that other overlayed
 	// selection boxes are in the correct place, the outer container needs to have

package/src/toolbar/widgets/PenToolWidget.css

@@ -1,2 +0,0 @@
-
-