editable-rect

<tosi-editable> (editableRect is the ElementCreator and EditableRect is the class) is an element for allowing the adjustment of another element's position and size. Simply insert it in a position: absolute or position: fixed element and you can directly adjust its CSS positioning, including rotation.

Click on an element to adjust its position, dimensions, and rotation.

import { editableRect, icons } from 'tosijs-ui'
import { elements } from 'tosijs'
const { button } = elements

function showTools(event) {
  event.stopPropagation()
  event.preventDefault()
}

const editable = editableRect(button({class: 'more-popup', onClick: showTools}, icons.moreVertical()))
preview.addEventListener('click', (event) => {
  const target = event.target
  if (['absolute', 'fixed'].includes(getComputedStyle(target).position)) {
    target.append(editable)
  } else {
    editable.remove()
  }
})
preview.addEventListener('change', event => console.log(event))

<div class="editable" style="top: 20px; left: 20px; width: auto; height: auto; right: 20px; bottom: 20px;">
  <div class="editable" style="top: 20px; left: 20px; width: 200px; height: 150px;">
  </div>
  <div class="editable" style="bottom: 20px; top: 20px; width: 300px; height: auto; right: 20px;">
  </div>
</div>

.preview .editable {
  position: absolute;
  box-shadow: inset 0 0 0 1px #0ccc;
  background: #0cc1;
}

.preview button.more-popup {
  position: absolute;
  width: 44px;
  height: 44px;
  top: 2px;
  right: 2px;
  --text-color: black;
  background: transparent;
  box-shadow: none;
}

.previw button

Snapping

When EditableRect.snapToGrid === true or the shift-key is depresseed, position will snap to EditableRect.gridSize pixels (default = 8).

Similarly EditableRect.snapAngle === true or the shift-key will snap rotation to increments of EditableRect.angleSize degrees (default = 15).

Events

After an element's position, size, or rotation are adjusted a change event is triggered on the element.