From 3f98d1c896f2a0aa0fe248e4c43bcce5f255ddb3 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sat, 5 Nov 2022 23:02:21 -0700 Subject: [PATCH] Add rotation custom cursor icon for the transform cage --- editor/src/messages/frontend/utility_types.rs | 1 + .../properties_panel/utility_functions.rs | 6 ++--- .../transformation_cage.rs | 2 +- frontend/src/components/panels/Document.vue | 27 +++++++++++++++++-- frontend/src/wasm-communication/messages.ts | 4 ++- node-graph/graph-craft/src/node_registry.rs | 12 ++++----- 6 files changed, 39 insertions(+), 13 deletions(-) diff --git a/editor/src/messages/frontend/utility_types.rs b/editor/src/messages/frontend/utility_types.rs index c7e7c056..c2975a14 100644 --- a/editor/src/messages/frontend/utility_types.rs +++ b/editor/src/messages/frontend/utility_types.rs @@ -34,6 +34,7 @@ pub enum MouseCursorIcon { EWResize, NESWResize, NWSEResize, + Rotate, } #[derive(Clone, Copy, Debug, Default, Eq, PartialEq, Serialize, Deserialize)] diff --git a/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs b/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs index 7850810e..650d22f2 100644 --- a/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs +++ b/editor/src/messages/portfolio/document/properties_panel/utility_functions.rs @@ -1037,19 +1037,19 @@ fn node_section_node_graph_frame(node_graph_frame: &NodeGraphFrameLayer) -> Layo layout: vec![ LayoutGroup::Row { widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel { - value: "Temporary layer that applies a greyscale to the layers below it.".into(), + value: "Temporary layer that applies a grayscale to the layers below it.".into(), ..TextLabel::default() }))], }, LayoutGroup::Row { widgets: vec![WidgetHolder::new(Widget::TextLabel(TextLabel { - value: "Powered by the node graph :)".into(), + value: "Powered by the node graph! :)".into(), ..TextLabel::default() }))], }, LayoutGroup::Row { widgets: vec![WidgetHolder::new(Widget::TextButton(TextButton { - label: "Open Node Graph UI (todo)".into(), + label: "Open Node Graph UI (coming soon)".into(), tooltip: "Open the node graph associated with this layer".into(), on_update: WidgetCallback::new(|_| DialogMessage::RequestComingSoonDialog { issue: Some(800) }.into()), ..Default::default() diff --git a/editor/src/messages/tool/common_functionality/transformation_cage.rs b/editor/src/messages/tool/common_functionality/transformation_cage.rs index 084557da..57036855 100644 --- a/editor/src/messages/tool/common_functionality/transformation_cage.rs +++ b/editor/src/messages/tool/common_functionality/transformation_cage.rs @@ -333,7 +333,7 @@ impl BoundingBoxOverlays { _ => MouseCursorIcon::Default, } } else if rotate && self.check_rotate(input.mouse.position) { - MouseCursorIcon::Grabbing + MouseCursorIcon::Rotate } else { MouseCursorIcon::Default } diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue index 35018707..79fd3b6e 100644 --- a/frontend/src/components/panels/Document.vue +++ b/frontend/src/components/panels/Document.vue @@ -264,7 +264,7 @@ export default defineComponent({ // CSS properties canvasSvgWidth: undefined as number | undefined, canvasSvgHeight: undefined as number | undefined, - canvasCursor: "default" as MouseCursorIcon, + canvasCursor: "default", // Scrollbars scrollbarPos, @@ -451,7 +451,30 @@ export default defineComponent({ }, // Update mouse cursor icon updateMouseCursor(cursor: MouseCursorIcon) { - this.canvasCursor = cursor; + let cursorString: string = cursor; + + // This isn't very clean but it's good enough for now until we need more icons, then we can build something more robust (consider blob URLs) + if (cursor === "custom-rotate") { + const svg = ` + + + + + + + ` + .split("\n") + .map((line) => line.trim()) + .join(""); + + cursorString = `url('data:image/svg+xml;utf8,${svg}') 8 8, alias`; + } + + this.canvasCursor = cursorString; }, // Text entry triggerTextCommit() { diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts index f54573b4..f72011e6 100644 --- a/frontend/src/wasm-communication/messages.ts +++ b/frontend/src/wasm-communication/messages.ts @@ -410,6 +410,7 @@ export class UpdateEyedropperSamplingState extends JsMessage { } const mouseCursorIconCSSNames = { + Default: "default", None: "none", ZoomIn: "zoom-in", ZoomOut: "zoom-out", @@ -421,12 +422,13 @@ const mouseCursorIconCSSNames = { EWResize: "ew-resize", NESWResize: "nesw-resize", NWSEResize: "nwse-resize", + Rotate: "custom-rotate", } as const; export type MouseCursor = keyof typeof mouseCursorIconCSSNames; export type MouseCursorIcon = typeof mouseCursorIconCSSNames[MouseCursor]; export class UpdateMouseCursor extends JsMessage { - @Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "default") + @Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "alias") readonly cursor!: MouseCursorIcon; } diff --git a/node-graph/graph-craft/src/node_registry.rs b/node-graph/graph-craft/src/node_registry.rs index 7711ccad..d782ad20 100644 --- a/node-graph/graph-craft/src/node_registry.rs +++ b/node-graph/graph-craft/src/node_registry.rs @@ -314,17 +314,17 @@ mod protograph_testing { } #[test] - fn greyscale_colour() { + fn grayscale_color() { let stack = FixedSizeStack::new(256); let val_protonode = ProtoNode::value(ConstructionArgs::Value(Box::new(Color::from_rgb8(10, 20, 30)))); push_node(val_protonode, &stack); - let greyscale_protonode = ProtoNode { + let grayscale_protonode = ProtoNode { construction_args: ConstructionArgs::Nodes(vec![]), input: ProtoNodeInput::Node(0), identifier: NodeIdentifier::new("graphene_core::raster::GrayscaleNode", &[]), }; - push_node(greyscale_protonode, &stack); + push_node(grayscale_protonode, &stack); let result = unsafe { stack.get()[1].eval(Box::new(())) }; let val = *dyn_any::downcast::(result).unwrap(); @@ -347,7 +347,7 @@ mod protograph_testing { } #[test] - fn greyscale_map_image() { + fn grayscale_map_image() { let stack = FixedSizeStack::new(256); let image_protonode = ProtoNode { construction_args: ConstructionArgs::Nodes(vec![]), @@ -356,12 +356,12 @@ mod protograph_testing { }; push_node(image_protonode, &stack); - let greyscale_protonode = ProtoNode { + let grayscale_protonode = ProtoNode { construction_args: ConstructionArgs::Nodes(vec![]), input: ProtoNodeInput::None, identifier: NodeIdentifier::new("graphene_core::raster::GrayscaleNode", &[]), }; - push_node(greyscale_protonode, &stack); + push_node(grayscale_protonode, &stack); let image_map_protonode = ProtoNode { construction_args: ConstructionArgs::Nodes(vec![1]),