mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-08-03 21:08:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add rotation custom cursor icon for the transform cage

Browse source
This commit is contained in:
Keavon Chambers 2022-11-05 23:02:21 -07:00
parent 782f528279
commit 3f98d1c896
6 changed files with 39 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/panels/Document.vue
View file

@ -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 = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
<path transform="translate(2 2)" fill="black" stroke="black" stroke-width="2px" d="
M8,15.2C4,15.2,0.8,12,0.8,8C0.8,4,4,0.8,8,0.8c2,0,3.9,0.8,5.3,2.3l-1,1C11.2,2.9,9.6,2.2,8,2.2C4.8,2.2,2.2,4.8,2.2,8s2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8h1.4C15.2,12,12,15.2,8,15.2z
" />
<polygon transform="translate(2 2)" fill="black" stroke="black" stroke-width="2px" points="12.6,0 15.5,5 9.7,5" />
<path transform="translate(2 2)" fill="white" d="
M8,15.2C4,15.2,0.8,12,0.8,8C0.8,4,4,0.8,8,0.8c2,0,3.9,0.8,5.3,2.3l-1,1C11.2,2.9,9.6,2.2,8,2.2C4.8,2.2,2.2,4.8,2.2,8s2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8h1.4C15.2,12,12,15.2,8,15.2z
" />
<polygon transform="translate(2 2)" fill="white" points="12.6,0 15.5,5 9.7,5" />
</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() {

4
frontend/src/wasm-communication/messages.ts
View file

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