Merge pull request #9 from yannbf/feature/add-drag Feature: add drag functionality like figma

Changes

2 changed files (+59/-3)

• packages/components/src/FigspecViewer/index.stories.js
  • @@ -6,13 +6,16 @@
    export default { title: "Components/figspec-viewer", component: "figspec-viewer", + parameters: { + layout: "fullscreen", + }, }; const Template = (args) => html` <figspec-viewer style=" min-width: 100%; - min-height: 400px; + min-height: 100vh; font-family: sans-serif; " .nodes=${args.nodes}
• packages/components/src/FigspecViewer/index.ts
  • @@ -94,6 +94,8 @@ attribute: "pan-speed",
    }) panSpeed: number = 500; + #isDragModeOn: boolean = false; + constructor() { super();
  • @@ -152,9 +154,33 @@
    // Moving amount of middle button+pointer move panning should matches to the actual // pointer travel distance. Since translate goes after scaling, we need to scale // delta too. - this.panX += ev.movementX / this.scale / window.devicePixelRatio; - this.panY += ev.movementY / this.scale / window.devicePixelRatio; + this.movePanel(ev.movementX, ev.movementY); }); + + // Listen to keyboard events to enable dragging when Space is pressed, just like in Figma + this.#listenToKeyboardEvents(); + + this.onmousedown = () => { + if (this.#isDragModeOn) { + document.body.style.cursor = "grabbing"; + + this.onmousemove = ({ movementX, movementY }: MouseEvent) => { + this.movePanel(movementX, movementY); + }; + + // cleanup unnecessary listeners when user stops dragging + this.onmouseup = () => { + document.body.style.cursor = "grab"; + this.onmousemove = null; + this.onmouseup = null; + }; + } + }; + } + + movePanel(shiftX: number, shiftY: number) { + this.panX += shiftX / this.scale / window.devicePixelRatio; + this.panY += shiftY / this.scale / window.devicePixelRatio; } static get styles() {
  • @@ -393,11 +419,38 @@ </div>
    `; } + disconnectedCallback() { + document.removeEventListener("keyup", this.#keyUp); + document.removeEventListener("keydown", this.#keyDown); + super.disconnectedCallback(); + } + #handleNodeClick = (node: SizedNode) => (ev: MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); this.selectedNode = node; + }; + + // enable drag mode when holding the spacebar + #keyDown = (event: KeyboardEvent) => { + if (event.code === "Space" && !this.#isDragModeOn) { + this.#isDragModeOn = true; + document.body.style.cursor = "grab"; + } + }; + + // disable drag mode when space lets the spacebar go + #keyUp = (event: KeyboardEvent) => { + if (event.code === "Space" && this.#isDragModeOn) { + this.#isDragModeOn = false; + document.body.style.cursor = "auto"; + } + }; + + #listenToKeyboardEvents = () => { + document.addEventListener("keyup", this.#keyUp); + document.addEventListener("keydown", this.#keyDown); }; }