fix(components): Disable canvas interaction on inspector https://github.com/pocka/figspec/pull/12#issuecomment-754766352 Since event handlers listens at a root of the CustomElement, gestures working even on the inspector panel. This commit prevents these gestures from working on the inspector panel by adding `stopPropagation`. The "space+drag" functionallity, on the other hand, can't be prevented because it's registered via `onmouse~` but I don't think it's critical for UX. I also fixed some elements' sizing so they could scroll and be sized properly.

Changes

2 changed files (+18/-8)

• packages/components/src/FigspecViewer/InspectorView/InspectorView.ts
  • @@ -22,13 +22,19 @@ }
    const nodeStyles = new NodeStyles(node); + // In order to disable canvas interactions (e.g. pan, click to + // deselect), we need to cancel JavaScript event propagation + // on the root element. + const stopPropagation = (ev: Event) => ev.stopPropagation(); + return html` <div class="inspector-view" - @click=${(ev: Event) => { - // TODO: remove this once this element is moved outside of ViewerMixin - ev.stopPropagation(); - }} + @click=${stopPropagation} + @wheel=${stopPropagation} + @keydown=${stopPropagation} + @keyup=${stopPropagation} + @pointermove=${stopPropagation} > <div class="inspector-section selectable-content"> <div class="title-section">
  • @@ -126,12 +132,13 @@ };
    export const styles = css` .inspector-view { - height: 100vh; + height: 100%; width: 300px; - position: fixed; + position: absolute; right: 0; background: white; border-left: 1px solid #ccc; + overflow-y: auto; } .inspector-view h4 {
• packages/components/src/FigspecViewer/ViewerMixin.ts
  • @@ -100,8 +100,11 @@ z-index: var(--z-index);
    } .spec-canvas-wrapper { - width: 100vw; - height: 100vh; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } .canvas {