js-draw 1.21.1 → 1.21.3

package/src/tools/SelectionTool/SelectionTool.scss

@@ -0,0 +1,165 @@
+@use "./util/makeClipboardErrorHandlers.scss";
+
+.selection-tool-selection-background {
+	background-color: var(--selection-background-color);
+	opacity: 0.5;
+	overflow: visible;
+}
+
+.selection-tool-handle {
+	position: absolute;
+	box-sizing: border-box;
+
+	// Center content
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	// Maximum size of the visible region (make the handle slightly larger
+	// so that the resize cursor is visible everywhere in the actual selection
+	// box).
+	--max-size: 17px;
+
+	.selection-tool-content {
+		border: 1px solid var(--foreground-color-1);
+		background: var(--background-color-1);
+		box-sizing: border-box;
+
+		max-width: var(--max-size);
+		max-height: var(--max-size);
+		width: 100%;
+		height: 100%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		padding: 3px;
+		.icon {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&.selection-tool-circle .selection-tool-content {
+		border-radius: 100%;
+	}
+
+	&.selection-tool-rotate {
+		// Shrink less if a rotation handle
+		--max-size: 28px;
+
+		cursor: grab;
+	}
+}
+
+.selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: nwse-resize;
+	}
+}
+
+.selection-tool-rotated-near-perpendicular .selection-tool-handle {
+	&.selection-tool-resize-x {
+		cursor: ns-resize;
+	}
+
+	&.selection-tool-resize-y {
+		cursor: ew-resize;
+	}
+
+	&.selection-tool-resize-xy {
+		cursor: nesw-resize;
+	}
+}
+
+.selection-tool-selection-menu {
+	> button {
+		max-height: var(--vertical-offset);
+		background-color: var(--background-color-1);
+		font-size: 14px;
+
+		color: var(--foreground-color-1);
+		border: 0.5px solid var(--foreground-color-1);
+		border-radius: 3px;
+		padding: 3px;
+		opacity: 0.8;
+
+		&:hover, &:focus-visible {
+			background-color: var(--background-color-2);
+			color: var(--foreground-color-2);
+			cursor: pointer;
+			opacity: 1;
+		}
+
+		transition: 0.2s ease opacity;
+	}
+}
+
+.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
+	// zero height.
+	//
+	// This is in addition to the overlay container, which needs zero height to prevent
+	// other overlay containers from being affected by its size.
+	&, .selection-tool-selection-outer-container {
+		height: 0;
+		overflow: visible;
+	}
+
+	.selection-tool-selection-inner-container {
+		width: var(--editor-current-display-width-px);
+		height: var(--editor-current-display-height-px);
+		overflow: hidden;
+
+		// Disable pointer events: If the parent (or the container) has
+		// captured pointers and the container is removed, this prevents
+		// us from receiving the following events (e.g. in Firefox).
+		pointer-events: none;
+
+		& > * {
+			// We *do* want pointer events for handles and the background. This
+			// allows the mouse cursor to change shape when hovering over resize
+			// handles.
+			pointer-events: all;
+		}
+
+		&.-empty {
+			opacity: 0;
+		}
+
+		&.-hide-handles .selection-tool-handle {
+			display: none;
+		}
+	}
+}
+
+@keyframes selection-duplicated-animation {
+	0% { scale: 1 1; }
+	50% { scale: 1.02 1.02; }
+	100% { scale: 1 1; }
+}
+
+/* Do not run the animation when the user has disabled motion animations. */
+@media (prefers-reduced-motion: reduce) {
+	@keyframes selection-duplicated-animation {
+	}
+}

package/src/tools/SelectionTool/util/makeClipboardErrorHandlers.scss

@@ -0,0 +1,15 @@
+
+.clipboard-error-dialog {
+	details > summary {
+		cursor: pointer;
+	}
+
+	details[open] {
+		margin-bottom: 12px;
+	}
+
+	textarea {
+		width: 100%;
+		box-sizing: border-box;
+	}
+}

package/src/tools/SoundUITool.scss

@@ -0,0 +1,22 @@
+
+.js-draw-sound-ui-toggle {
+	width: 0px;
+	height: 0px;
+	overflow: hidden;  
+
+	user-select: none;
+	-webkit-user-select: none;  
+}
+
+.js-draw-sound-ui-toggle button {
+	margin-top: 1px;
+}
+
+.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {
+	overflow: visible;
+	z-index: 5;
+}
+
+.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {
+	opacity: 0.5;
+}

package/src/tools/tools.scss

@@ -0,0 +1,6 @@
+
+@use "./ScrollbarTool.scss";
+@use "./SelectionTool/SelectionTool.scss";
+@use "./FindTool.css";
+@use "./SoundUITool.scss";
+@use "./util/createMenuOverlay.scss";

package/src/tools/util/createMenuOverlay.scss

@@ -0,0 +1,67 @@
+
+@keyframes show-popup-menu-animation {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+.editor-popup-menu {
+	width: 100%;
+	height: 100%;
+	background-color: transparent;
+	border: none;
+
+	animation: var(--hide-menu-animation-timeout) ease show-popup-menu-animation;
+	opacity: 1;
+	transition: var(--hide-menu-animation-timeout) ease opacity;
+	overflow: hidden;
+
+	&.-hide {
+		opacity: 0;
+	}
+
+	& > .content {
+		position: absolute;
+		left: var(--anchor-x);
+		top: var(--anchor-y);
+		display: flex;
+		flex-direction: column;
+
+		overflow: clip;
+		border-radius: 6px;
+		box-shadow: 0px 1px 2px var(--shadow-color);
+	}
+
+	&::backdrop {
+		background: transparent;
+	}
+}
+
+.editor-popup-menu-option {
+	display: flex;
+	justify-content: start;
+	cursor: pointer;
+	padding: 5px;
+
+	background-color: var(--background-color-1);
+	color: var(--foreground-color-1);
+	--icon-color: currentColor;
+
+	border: none;
+	font-size: 1em;
+
+	&:hover, &:focus-visible {
+		background-color: var(--background-color-2);
+		color: var(--foreground-color-2);
+	}
+
+	// icon
+	> :first-child {
+		width: 1em;
+		height: 1em;
+		flex-shrink: 0;
+
+		// RTL support:
+		margin-inline-start: 0em;
+		margin-inline-end: 0.25em;
+	}
+}