Fixes

app/components/index.js

@@ -14,6 +14,7 @@ export { BoxModel }   from './selection/box-model.element'
 export { Corners }    from './selection/corners.element'
 export { Grip }       from './selection/grip.element'
 export { Rotation }   from './selection/rotation.element'
+export { ProjectiveTransform } from './selection/projective-transform.element'
 export { SelectionActions } from './selection/actions.element'
 
 export { Metatip }    from './metatip/metatip.element'

app/components/selection/actions.test.js

@@ -19,7 +19,7 @@ test('Should show all export formats in the selection actions menu', async t =>
       group: shadow.querySelector('.group').firstChild.textContent,
       rootOpen: shadow.querySelector('.menu').matches(':popover-open'),
       submenuOpen: shadow.querySelector('.submenu-items').matches(':popover-open'),
-      formats: Array.from(shadow.querySelectorAll('[data-command]'))
+      formats: Array.from(shadow.querySelectorAll('.submenu-items [data-command]'))
         .map(button => button.textContent),
     }
   })
@@ -43,10 +43,12 @@ test('Should hide when no contributing plug-in is active', async t => {
   const hidden = await page.evaluate(() => {
     const visbug = document.querySelector('vis-bug')
     visbug.setPluginActive('export', false)
+    visbug.setPluginActive('projective-transform', false)
     const handles = document.querySelector('visbug-handles')
     const result = handles.$shadow
       .querySelector('visbug-selection-actions').hidden
     visbug.setPluginActive('export', true)
+    visbug.setPluginActive('projective-transform', true)
     return result
   })
 

app/components/selection/box-model.element.js

@@ -16,6 +16,12 @@ export class BoxModel extends HTMLElement {
   disconnectedCallback() {}
 
   set position(payload) {
+    if (!payload) {
+      this.drawable = {}
+      this.$shadow.innerHTML = ''
+      return
+    }
+
     this.$shadow.innerHTML = this.render(payload)
     this.createMeasurements({...payload, ...this.drawable.measurementQuads})
   }

app/components/selection/handles.element.js

@@ -44,14 +44,15 @@ export class Handles extends HTMLElement {
 
   set position({el, node_label_id}) {
     this.source_el = el
+    const backdrop = this.$shadow.querySelector('visbug-boxmodel')
     this.$shadow.innerHTML = this.render(getBoxQuad(el), node_label_id, isFixed(el))
 
     const actions = this.$shadow.querySelector('visbug-selection-actions')
     if (actions) actions.source = el
 
     if (this._backdrop) {
       this.backdrop = {
-        element: this._backdrop.update(el),
+        element: this._backdrop.update(el, false, backdrop),
         update:  this._backdrop.update,
       }
     }

app/components/selection/projective-transform.element.css

@@ -0,0 +1,54 @@
+@import "../_variables.css";
+
+:host {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: none;
+  max-height: none;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+  z-index: var(--layer-3);
+}
+
+:host::backdrop {
+  background: none !important;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.outline {
+  fill: none;
+  stroke: var(--neon-pink);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.handle {
+  fill: white;
+  stroke: var(--neon-pink);
+  stroke-width: 1.5;
+  vector-effect: non-scaling-stroke;
+  pointer-events: auto;
+  cursor: move;
+}
+
+.cross {
+  stroke: var(--neon-pink);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}