renusify 2.5.1 → 3.0.0

package/components/float/index.vue

@@ -1,458 +1,585 @@
 <template>
   <div :class="classes">
     <div ref="float" :class="{'in-zoom':inZoom}" class="float-container">
-      <slot :ease="ease" :move="moveTo" :pause="pause" :resume="resume" :transform="transform"
+      <!-- Main slot for content with transformation controls. Provides scoped methods and state
+       @example
+       <div class="color-one" style="height: 300px;width: 400px">content</div>
+       -->
+      <slot :ease="ease"
+            :move="moveTo"
+            :pause="pause"
+            :resume="resume"
+            :transform="transform"
             :zoom="zoomAbs"></slot>
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'r-float',
-  props: {
-    bordered: Boolean,
-    disableZoom: Boolean,
-    disableMove: Boolean,
-    trnsfrmOrigin: Object,
-    zoom: {type: Number, default: 1},
-    maxZoom: {
-      type: Number,
-      default: 10
-    },
-    minZoom: {
-      type: Number,
-      default: .1
-    }
+<script setup>
+import {ref, computed, onMounted, onBeforeUnmount, inject} from 'vue'
+
+const props = defineProps({
+  /**
+   * Adds border to the float container
+   * @type {Boolean}
+   */
+  bordered: Boolean,
+
+  /**
+   * Disables zoom functionality
+   * @type {Boolean}
+   */
+  disableZoom: Boolean,
+
+  /**
+   * Disables move/drag functionality
+   * @type {Boolean}
+   */
+  disableMove: Boolean,
+
+  /**
+   * Custom transform origin point (0-1 values)
+   * @type {Object}
+   * @property {Number} x - X coordinate (0-1)
+   * @property {Number} y - Y coordinate (0-1)
+   */
+  trnsfrmOrigin: Object,
+
+  /**
+   * Initial zoom level
+   * @type {Number}
+   * @default 1
+   */
+  zoom: {type: Number, default: 1},
+
+  /**
+   * Maximum zoom level
+   * @type {Number}
+   * @default 10
+   */
+  maxZoom: {
+    type: Number,
+    default: 10
   },
-  emits: ['move', 'zoom'],
-  data() {
-    return {
-      started: Date.now(),
-      transform: {
-        x: 0,
-        y: 0,
-        scale: this.zoom
-      },
-      inZoom: false,
-      paused: false,
-      storedCTMResult: {x: 0, y: 0},
-      isDirty: false,
-      lastTouchEndTime: 0,
-      lastSingleFingerOffset: null,
-      touchInProgress: false,
-      multiTouch: false,
-      mouseX: 0,
-      mouseY: 0,
-      pinchZoomLength: 0,
-      frameAnimation: null
+
+  /**
+   * Minimum zoom level
+   * @type {Number}
+   * @default 0.1
+   */
+  minZoom: {
+    type: Number,
+    default: .1
+  }
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when content is moved
+   * @param {Array} movement - [dx, dy] movement delta
+   */
+  'move',
+
+  /**
+   * Emitted when zoom level changes
+   * @param {Array} zoomData - [clientX, clientY, ratio] zoom parameters
+   */
+  'zoom'
+])
+
+const {$r} = inject('renusify')
+
+const transform = ref({
+  x: 0,
+  y: 0,
+  scale: props.zoom
+})
+const inZoom = ref(false)
+const paused = ref(false)
+const storedCTMResult = ref({x: 0, y: 0})
+const isDirty = ref(false)
+const lastTouchEndTime = ref(0)
+const lastSingleFingerOffset = ref(null)
+const touchInProgress = ref(false)
+const multiTouch = ref(false)
+const mouseX = ref(0)
+const mouseY = ref(0)
+const pinchZoomLength = ref(0)
+const frameAnimation = ref(null)
+const float = ref(null)
+
+const classes = computed(() => {
+  return {
+    'float-bordered': props.bordered,
+    [`${$r.prefix}float`]: true
+  }
+})
+
+const domElement = computed(() => float.value)
+
+const owner = computed(() => domElement.value?.parentElement)
+
+const transformOrigin = computed(() => {
+  if (!props.trnsfrmOrigin || !isNumber(props.trnsfrmOrigin.x) || !isNumber(props.trnsfrmOrigin.y)) {
+    return null
+  }
+  return props.trnsfrmOrigin
+})
+
+const getTransformOriginOffset = computed(() => {
+  if (!owner.value || !transformOrigin.value) return {x: 0, y: 0}
+
+  let ownerRect = owner.value.getBoundingClientRect()
+  return {
+    x: ownerRect.width * transformOrigin.value.x,
+    y: ownerRect.height * transformOrigin.value.y
+  }
+})
+
+const midPoint = computed(() => {
+  if (!owner.value) return {x: 0, y: 0}
+
+  let ownerRect = owner.value.getBoundingClientRect()
+  return {
+    x: ownerRect.width / 2,
+    y: ownerRect.height / 2
+  }
+})
+
+const builder = () => {
+  if (!domElement.value || !owner.value) return
+
+  domElement.value.scrollTop = 0
+  owner.value.setAttribute('tabindex', 0)
+  listenForEvents()
+  zoomAbs(transform.value.x, transform.value.y, transform.value.scale)
+}
+
+const applyTransform = () => {
+  if (!domElement.value) return
+
+  isDirty.value = false
+  domElement.value.style.transformOrigin = '0 0 0'
+  domElement.value.style.transform = 'matrix(' +
+      transform.value.scale + ', 0, 0, ' +
+      transform.value.scale + ', ' +
+      transform.value.x + ', ' + transform.value.y + ')'
+  frameAnimation.value = 0
+}
+
+/**
+ * Pauses all interaction events
+ */
+const pause = () => {
+  releaseEvents()
+  paused.value = true
+}
+
+/**
+ * Resumes interaction events
+ */
+const resume = () => {
+  if (paused.value) {
+    listenForEvents()
+    paused.value = false
+  }
+}
+
+const listenForEvents = () => {
+  if (!owner.value) return
+
+  owner.value.addEventListener('mousedown', onMouseDown, {passive: false})
+  owner.value.addEventListener('dblclick', onDoubleClick, {passive: false})
+  owner.value.addEventListener('touchstart', onTouch, {passive: false})
+  owner.value.addEventListener('keydown', onKeyDown, {passive: false})
+  owner.value.addEventListener('wheel', onMouseWheel, {passive: false})
+  makeDirty()
+}
+
+const transformToScreen = (x, y) => {
+  storedCTMResult.value.x = x
+  storedCTMResult.value.y = y
+  return storedCTMResult.value
+}
+
+/**
+ * Moves the content by specified delta
+ * @param {Number} dx - X-axis movement delta
+ * @param {Number} dy - Y-axis movement delta
+ */
+const moveTo = (dx, dy) => {
+  if (props.disableMove) return
+  transform.value.x += dx
+  transform.value.y += dy
+  emit('move', [dx, dy])
+  makeDirty()
+}
+
+const makeDirty = () => {
+  isDirty.value = true
+  frameAnimation.value = window.requestAnimationFrame(frame)
+}
+
+/**
+ * Triggers zoom ease animation
+ */
+const ease = () => {
+  inZoom.value = true
+  setTimeout(() => {
+    inZoom.value = false
+  }, 500)
+}
+
+/**
+ * Zooms by ratio from specific point
+ * @param {Number} clientX - X coordinate to zoom from
+ * @param {Number} clientY - Y coordinate to zoom from
+ * @param {Number} ratio - Zoom ratio
+ * @param {Boolean} easeFlag - Whether to trigger ease animation
+ */
+const zoomByRatio = (clientX, clientY, ratio, easeFlag = false) => {
+  if (props.disableZoom) return
+  if (easeFlag) ease()
+  if (isNaN(clientX) || isNaN(clientY) || isNaN(ratio)) {
+    throw new Error('zoom requires valid numbers')
+  }
+
+  let newScale = transform.value.scale * ratio
+
+  if (newScale < props.minZoom) {
+    if (transform.value.scale === props.minZoom) return
+    ratio = props.minZoom / transform.value.scale
+  }
+  if (newScale > props.maxZoom) {
+    if (transform.value.scale === props.maxZoom) return
+    ratio = props.maxZoom / transform.value.scale
+  }
+
+  let size = transformToScreen(clientX, clientY)
+
+  transform.value.x = size.x - ratio * (size.x - transform.value.x)
+  transform.value.y = size.y - ratio * (size.y - transform.value.y)
+
+  transform.value.scale *= ratio
+
+  emit('zoom', [clientX, clientY, ratio])
+
+  makeDirty()
+}
+
+/**
+ * Zooms to absolute level from specific point
+ * @param {Number} clientX - X coordinate to zoom from
+ * @param {Number} clientY - Y coordinate to zoom from
+ * @param {Number} zoomLevel - Target zoom level
+ */
+const zoomAbs = (clientX, clientY, zoomLevel) => {
+  let ratio = zoomLevel / transform.value.scale
+  zoomByRatio(clientX, clientY, ratio)
+}
+
+const frame = () => {
+  if (isDirty.value) applyTransform()
+}
+
+const onKeyDown = (e) => {
+  let x = 0,
+      y = 0,
+      z = 0
+  if (e.keyCode === 38) {
+    y = -1 // up
+  } else if (e.keyCode === 40) {
+    y = 1 // down
+  } else if (e.keyCode === 37) {
+    x = -1 // left
+  } else if (e.keyCode === 39) {
+    x = 1 // right
+  } else if (e.keyCode === 189 || e.keyCode === 109) {
+    // DASH or SUBTRACT
+    z = 1 // `-` - zoom out
+  } else if (e.keyCode === 187 || e.keyCode === 107) {
+    // EQUAL SIGN or ADD
+    z = -1 // `=` - zoom in
+  }
+
+  if (x || y) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (!owner.value) return
+
+    let clientRect = owner.value.getBoundingClientRect()
+    let offset = Math.min(clientRect.width, clientRect.height)
+    let moveSpeedRatio = 0.05
+    let dx = offset * moveSpeedRatio * x
+    let dy = offset * moveSpeedRatio * y
+
+    moveTo(dx, dy)
+  }
+
+  if (z) {
+    let scaleMultiplier = getScaleMultiplier(z * 100)
+    let offset = transformOrigin.value ? getTransformOriginOffset.value : midPoint.value
+    zoomByRatio(offset.x, offset.y, scaleMultiplier)
+  }
+}
+
+const onTouch = (e) => {
+  if (e.touches.length === 1) {
+    return handleSingleFingerTouch(e, e.touches[0])
+  } else if (e.touches.length === 2) {
+    pinchZoomLength.value = getPinchZoomLength(e.touches[0], e.touches[1])
+    multiTouch.value = true
+    startTouchListenerIfNeeded()
+  }
+}
+
+const handleSingleFingerTouch = (e) => {
+  let touch = e.touches[0]
+  let offset = getOffsetXY(touch)
+  lastSingleFingerOffset.value = offset
+  let point = transformToScreen(offset.x, offset.y)
+  mouseX.value = point.x
+  mouseY.value = point.y
+
+  startTouchListenerIfNeeded()
+}
+
+const startTouchListenerIfNeeded = () => {
+  if (touchInProgress.value) {
+    return
+  }
+
+  touchInProgress.value = true
+  document.addEventListener('touchmove', handleTouchMove, {passive: false})
+  document.addEventListener('touchend', handleTouchEnd)
+  document.addEventListener('touchcancel', handleTouchEnd)
+}
+
+const handleTouchMove = (e) => {
+  e.stopPropagation()
+  e.preventDefault()
+  if (e.touches.length === 1) {
+    let touch = e.touches[0]
+    let offset = getOffsetXY(touch)
+    let point = transformToScreen(offset.x, offset.y)
+
+    let dx = point.x - mouseX.value
+    let dy = point.y - mouseY.value
+
+    mouseX.value = point.x
+    mouseY.value = point.y
+    moveTo(dx, dy)
+  } else if (e.touches.length === 2) {
+    multiTouch.value = true
+    let t1 = e.touches[0]
+    let t2 = e.touches[1]
+    let currentPinchLength = getPinchZoomLength(t1, t2)
+
+    let scaleMultiplier = 1 + (currentPinchLength / pinchZoomLength.value - 1)
+
+    let firstTouchPoint = getOffsetXY(t1)
+    let secondTouchPoint = getOffsetXY(t2)
+    mouseX.value = (firstTouchPoint.x + secondTouchPoint.x) / 2
+    mouseY.value = (firstTouchPoint.y + secondTouchPoint.y) / 2
+    if (transformOrigin.value) {
+      let offset = getTransformOriginOffset.value
+      mouseX.value = offset.x
+      mouseY.value = offset.y
     }
-  },
-  mounted() {
-    this.builder()
-  },
-  computed: {
-    classes() {
-      let a = {
-        'float-bordered': this.bordered
+
+    zoomByRatio(mouseX.value, mouseY.value, scaleMultiplier)
+
+    pinchZoomLength.value = currentPinchLength
+  }
+}
+
+const handleTouchEnd = (e) => {
+  if (e.touches.length > 0) {
+    let offset = getOffsetXY(e.touches[0])
+    let point = transformToScreen(offset.x, offset.y)
+    mouseX.value = point.x
+    mouseY.value = point.y
+  } else {
+    let now = new Date()
+    if (now - lastTouchEndTime.value < 300) {
+      if (transformOrigin.value) {
+        let offset = getTransformOriginOffset.value
+        zoomByRatio(offset.x, offset.y, transform.value.scale)
+      } else {
+        zoomByRatio(lastSingleFingerOffset.value.x, lastSingleFingerOffset.value.y, transform.value.scale)
       }
-      a[`${this.$r.prefix}float`] = true
-      return a
-    },
-    domElement() {
-      return this.$refs.float
-    },
-    owner() {
-      return this.domElement.parentElement;
-    },
-    transformOrigin() {
-      if (!this.trnsfrmOrigin || !this.isNumber(this.trnsfrmOrigin.x) || !this.isNumber(this.trnsfrmOrigin.y)) return;
-
-      return this.trnsfrmOrigin;
-    },
-    getTransformOriginOffset() {
-      let ownerRect = this.owner.getBoundingClientRect();
-      return {
-        x: ownerRect.width * this.transformOrigin.x,
-        y: ownerRect.height * this.transformOrigin.y
-      };
-    },
-    midPoint() {
-      let ownerRect = this.owner.getBoundingClientRect();
-      return {
-        x: ownerRect.width / 2,
-        y: ownerRect.height / 2
-      };
-    },
-    getBBox() {
-      return {
-        left: 0,
-        top: 0,
-        width: this.domElement.clientWidth,
-        height: this.domElement.clientHeight
-      };
     }
-  },
-  methods: {
-    builder() {
-      this.domElement.scrollTop = 0;
-      this.owner.setAttribute('tabindex', 0);
-      this.listenForEvents();
-      this.zoomAbs(this.transform.x, this.transform.y, this.transform.scale);
-    },
-    applyTransform() {
-      this.isDirty = false;
-      this.domElement.style.transformOrigin = '0 0 0';
-      this.domElement.style.transform = 'matrix(' +
-          this.transform.scale + ', 0, 0, ' +
-          this.transform.scale + ', ' +
-          this.transform.x + ', ' + this.transform.y + ')';
-      this.frameAnimation = 0;
-    },
-    pause() {
-      this.releaseEvents();
-      this.paused = true;
-    },
-    resume() {
-      if (this.paused) {
-        this.listenForEvents();
-        this.paused = false;
-      }
-    },
-    listenForEvents() {
-      this.owner.addEventListener('mousedown', this.onMouseDown, {passive: false});
-      this.owner.addEventListener('dblclick', this.onDoubleClick, {passive: false});
-      this.owner.addEventListener('touchstart', this.onTouch, {passive: false});
-      this.owner.addEventListener('keydown', this.onKeyDown, {passive: false});
-      this.owner.addEventListener('wheel', this.onMouseWheel, {passive: false});
-      this.makeDirty();
-    },
-    transformToScreen(x, y) {
-      this.storedCTMResult.x = x;
-      this.storedCTMResult.y = y;
-      return this.storedCTMResult;
-    },
-    moveTo(dx, dy) {
-      if (this.disableMove) return;
-      this.transform.x += dx;
-      this.transform.y += dy;
-      this.$emit('move', [dx, dy])
-      this.makeDirty();
-    },
-    makeDirty() {
-      this.isDirty = true;
-      this.frameAnimation = window.requestAnimationFrame(this.frame);
-    },
-    ease() {
-      this.inZoom = true
-      setTimeout(() => {
-        this.inZoom = false
-      }, 500)
-    },
-    zoomByRatio(clientX, clientY, ratio, ease = false) {
-      if (this.disableZoom) return;
-      if (ease) this.ease();
-      if (this.isNaN(clientX) || this.isNaN(clientY) || this.isNaN(ratio)) {
-        throw new Error('zoom requires valid numbers');
-      }
 
-      let newScale = this.transform.scale * ratio;
+    lastTouchEndTime.value = now
+    releaseTouches()
+  }
+}
 
-      if (newScale < this.minZoom) {
-        if (this.transform.scale === this.minZoom) return;
+const getPinchZoomLength = (finger1, finger2) => {
+  let dx = finger1.clientX - finger2.clientX
+  let dy = finger1.clientY - finger2.clientY
+  return Math.sqrt(dx * dx + dy * dy)
+}
 
-        ratio = this.minZoom / this.transform.scale;
-      }
-      if (newScale > this.maxZoom) {
-        if (this.transform.scale === this.maxZoom) return;
+const onDoubleClick = (e) => {
+  e.preventDefault()
+  e.stopPropagation()
+  let offset = getOffsetXY(e)
+  if (transformOrigin.value) {
+    offset = getTransformOriginOffset.value
+  }
+  let scaleMultiplier = getScaleMultiplier(-1000)
+  zoomByRatio(offset.x, offset.y, scaleMultiplier, true)
+}
 
-        ratio = this.maxZoom / this.transform.scale;
-      }
+const onMouseDown = (e) => {
+  if (touchInProgress.value) {
+    e.stopPropagation()
+    return false
+  }
+  let isLeftButton = (e.button === 1 && window.event !== null) || e.button === 0
+  if (!isLeftButton) return
 
-      let size = this.transformToScreen(clientX, clientY);
-
-      this.transform.x = size.x - ratio * (size.x - this.transform.x);
-      this.transform.y = size.y - ratio * (size.y - this.transform.y);
-
-      this.transform.scale *= ratio;
-
-      this.$emit('zoom', [clientX, clientY, ratio]);
-
-      this.makeDirty();
-    },
-    zoomAbs(clientX, clientY, zoomLevel) {
-      let ratio = zoomLevel / this.transform.scale;
-      this.zoomByRatio(clientX, clientY, ratio);
-    },
-    frame() {
-      if (this.isDirty) this.applyTransform();
-    },
-    onKeyDown(e) {
-      let x = 0,
-          y = 0,
-          z = 0;
-      if (e.keyCode === 38) {
-        y = -1; // up
-      } else if (e.keyCode === 40) {
-        y = 1; // down
-      } else if (e.keyCode === 37) {
-        x = -1; // left
-      } else if (e.keyCode === 39) {
-        x = 1; // right
-      } else if (e.keyCode === 189 || e.keyCode === 109) {
-        // DASH or SUBTRACT
-        z = 1; // `-` -  zoom out
-      } else if (e.keyCode === 187 || e.keyCode === 107) {
-        // EQUAL SIGN or ADD
-        z = -1; // `=` - zoom in (equal sign on US layout is under `+`)
-      }
+  let offset = getOffsetXY(e)
+  let point = transformToScreen(offset.x, offset.y)
+  mouseX.value = point.x
+  mouseY.value = point.y
 
-      if (x || y) {
-        e.preventDefault();
-        e.stopPropagation();
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
 
-        let clientRect = this.owner.getBoundingClientRect();
+  return false
+}
 
-        let offset = Math.min(clientRect.width, clientRect.height);
-        let moveSpeedRatio = 0.05;
-        let dx = offset * moveSpeedRatio * x;
-        let dy = offset * moveSpeedRatio * y;
+const onMouseMove = (e) => {
+  if (touchInProgress.value) return
 
-        this.moveTo(dx, dy);
-      }
+  let offset = getOffsetXY(e)
+  let point = transformToScreen(offset.x, offset.y)
+  let dx = point.x - mouseX.value
+  let dy = point.y - mouseY.value
 
-      if (z) {
-        let scaleMultiplier = this.getScaleMultiplier(z * 100);
-        let offset = this.transformOrigin ? this.getTransformOriginOffset : this.midPoint;
-        this.zoomByRatio(offset.x, offset.y, scaleMultiplier);
-      }
-    },
-    onTouch(e) {
-      if (e.touches.length === 1) {
-        return this.handleSingleFingerTouch(e, e.touches[0]);
-      } else if (e.touches.length === 2) {
-        // handleTouchMove() will care about pinch zoom.
-        this.pinchZoomLength = this.getPinchZoomLength(e.touches[0], e.touches[1]);
-        this.multiTouch = true;
-        this.startTouchListenerIfNeeded();
-      }
-    },
-    handleSingleFingerTouch(e) {
-      let touch = e.touches[0];
-      let offset = this.getOffsetXY(touch);
-      this.lastSingleFingerOffset = offset;
-      let point = this.transformToScreen(offset.x, offset.y);
-      this.mouseX = point.x;
-      this.mouseY = point.y;
-
-      this.startTouchListenerIfNeeded();
-    },
-    startTouchListenerIfNeeded() {
-      if (this.touchInProgress) {
-        return;
-      }
+  mouseX.value = point.x
+  mouseY.value = point.y
+  moveTo(dx, dy)
+}
 
-      this.touchInProgress = true;
-      document.addEventListener('touchmove', this.handleTouchMove, {passive: false});
-      document.addEventListener('touchend', this.handleTouchEnd);
-      document.addEventListener('touchcancel', this.handleTouchEnd);
-    },
-    handleTouchMove(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (e.touches.length === 1) {
-        let touch = e.touches[0];
-
-        let offset = this.getOffsetXY(touch);
-        let point = this.transformToScreen(offset.x, offset.y);
-
-        let dx = point.x - this.mouseX;
-        let dy = point.y - this.mouseY;
-
-        this.mouseX = point.x;
-        this.mouseY = point.y;
-        this.moveTo(dx, dy);
-      } else if (e.touches.length === 2) {
-        // it's a zoom, let's find direction
-        this.multiTouch = true;
-        let t1 = e.touches[0];
-        let t2 = e.touches[1];
-        let currentPinchLength = this.getPinchZoomLength(t1, t2);
-
-        let scaleMultiplier =
-            1 + (currentPinchLength / this.pinchZoomLength - 1);
-
-        let firstTouchPoint = this.getOffsetXY(t1);
-        let secondTouchPoint = this.getOffsetXY(t2);
-        this.mouseX = (firstTouchPoint.x + secondTouchPoint.x) / 2;
-        this.mouseY = (firstTouchPoint.y + secondTouchPoint.y) / 2;
-        if (this.transformOrigin) {
-          let offset = this.getTransformOriginOffset;
-          this.mouseX = offset.x;
-          this.mouseY = offset.y;
-        }
-
-        this.zoomByRatio(this.mouseX, this.mouseY, scaleMultiplier);
-
-        this.pinchZoomLength = currentPinchLength;
-      }
-    },
-    handleTouchEnd(e) {
-      if (e.touches.length > 0) {
-        let offset = this.getOffsetXY(e.touches[0]);
-        let point = this.transformToScreen(offset.x, offset.y);
-        this.mouseX = point.x;
-        this.mouseY = point.y;
-      } else {
-        let now = new Date();
-        if (now - this.lastTouchEndTime < 300) {
-          if (this.transformOrigin) {
-            let offset = this.getTransformOriginOffset;
-            this.zoomByRatio(offset.x, offset.y, this.transform.scale);
-          } else {
-            // We want untransformed x/y here.
-            this.zoomByRatio(this.lastSingleFingerOffset.x, this.lastSingleFingerOffset.y, this.transform.scale);
-          }
-        }
-
-        this.lastTouchEndTime = now;
-        this.releaseTouches();
-      }
-    },
-    getPinchZoomLength(finger1, finger2) {
-      let dx = finger1.clientX - finger2.clientX;
-      let dy = finger1.clientY - finger2.clientY;
-      return Math.sqrt(dx * dx + dy * dy);
-    },
-    onDoubleClick(e) {
-      e.preventDefault()
-      e.stopPropagation()
-      let offset = this.getOffsetXY(e);
-      if (this.transformOrigin) {
-        offset = this.getTransformOriginOffset;
-      }
-      let scaleMultiplier = this.getScaleMultiplier(-1000);
-      this.zoomByRatio(offset.x, offset.y, scaleMultiplier, true);
-    },
-    onMouseDown(e) {
-      if (this.touchInProgress) {
-        e.stopPropagation();
-        return false;
-      }
-      let isLeftButton =
-          (e.button === 1 && window.event !== null) || e.button === 0;
-      if (!isLeftButton) return;
-
-      let offset = this.getOffsetXY(e);
-      let point = this.transformToScreen(offset.x, offset.y);
-      this.mouseX = point.x;
-      this.mouseY = point.y;
-
-      document.addEventListener('mousemove', this.onMouseMove);
-      document.addEventListener('mouseup', this.onMouseUp);
-
-      return false;
-    },
-    onMouseMove(e) {
-      if (this.touchInProgress) return;
-
-      let offset = this.getOffsetXY(e);
-      let point = this.transformToScreen(offset.x, offset.y);
-      let dx = point.x - this.mouseX;
-      let dy = point.y - this.mouseY;
-
-      this.mouseX = point.x;
-      this.mouseY = point.y;
-      this.moveTo(dx, dy);
-    },
-    onMouseUp() {
-      this.releaseDocumentMouse();
-    },
-    onMouseWheel(e) {
-      let delta = e.deltaY;
-      if (e.deltaMode > 0) delta *= 100;
-
-      let scaleMultiplier = this.getScaleMultiplier(delta);
-
-      if (scaleMultiplier !== 1) {
-        let offset = this.transformOrigin
-            ? this.getTransformOriginOffset
-            : this.getOffsetXY(e);
-        this.zoomByRatio(offset.x, offset.y, scaleMultiplier);
-        e.preventDefault();
-      }
-    },
-    getOffsetXY(e) {
-      let offsetX, offsetY;
-      let ownerRect = this.owner.getBoundingClientRect();
-      offsetX = e.clientX - ownerRect.left;
-      offsetY = e.clientY - ownerRect.top;
-
-      return {x: offsetX, y: offsetY};
-    },
-    getScaleMultiplier(delta) {
-      let sign = Math.sign(delta);
-      let deltaAdjustedSpeed = Math.min(0.25, Math.abs(delta / 128));
-      return 1 - sign * deltaAdjustedSpeed;
-    },
-    isNumber(x) {
-      return Number.isFinite(x);
-    },
-    isNaN(value) {
-      if (Number.isNaN) {
-        return Number.isNaN(value);
-      }
+const onMouseUp = () => {
+  releaseDocumentMouse()
+}
 
-      return value !== value;
-    },
-    releaseEvents() {
-      this.owner.removeEventListener('wheel', this.onMouseWheel);
-      this.owner.removeEventListener('mousedown', this.onMouseDown);
-      this.owner.removeEventListener('keydown', this.onKeyDown);
-      this.owner.removeEventListener('dblclick', this.onDoubleClick);
-      this.owner.removeEventListener('touchstart', this.onTouch);
-
-      if (this.frameAnimation) {
-        window.cancelAnimationFrame(this.frameAnimation);
-        this.frameAnimation = 0;
-      }
+const onMouseWheel = (e) => {
+  let delta = e.deltaY
+  if (e.deltaMode > 0) delta *= 100
 
+  let scaleMultiplier = getScaleMultiplier(delta)
 
-      this.releaseDocumentMouse();
-      this.releaseTouches();
-    },
-    releaseDocumentMouse() {
-      document.removeEventListener('mousemove', this.onMouseMove);
-      document.removeEventListener('mouseup', this.onMouseUp);
-    },
-    releaseTouches() {
-      document.removeEventListener('touchmove', this.handleTouchMove);
-      document.removeEventListener('touchend', this.handleTouchEnd);
-      document.removeEventListener('touchcancel', this.handleTouchEnd);
-      this.multiTouch = false;
-      this.touchInProgress = false;
-    },
-  },
-  beforeUnmount() {
-    this.releaseEvents();
+  if (scaleMultiplier !== 1) {
+    let offset = transformOrigin.value
+        ? getTransformOriginOffset.value
+        : getOffsetXY(e)
+    zoomByRatio(offset.x, offset.y, scaleMultiplier)
+    e.preventDefault()
+  }
+}
+
+const getOffsetXY = (e) => {
+  let offsetX, offsetY
+  if (!owner.value) return {x: 0, y: 0}
+
+  let ownerRect = owner.value.getBoundingClientRect()
+  offsetX = e.clientX - ownerRect.left
+  offsetY = e.clientY - ownerRect.top
+
+  return {x: offsetX, y: offsetY}
+}
+
+const getScaleMultiplier = (delta) => {
+  let sign = Math.sign(delta)
+  let deltaAdjustedSpeed = Math.min(0.25, Math.abs(delta / 128))
+  return 1 - sign * deltaAdjustedSpeed
+}
+
+const isNumber = (x) => {
+  return Number.isFinite(x)
+}
+
+const releaseEvents = () => {
+  if (!owner.value) return
+
+  owner.value.removeEventListener('wheel', onMouseWheel)
+  owner.value.removeEventListener('mousedown', onMouseDown)
+  owner.value.removeEventListener('keydown', onKeyDown)
+  owner.value.removeEventListener('dblclick', onDoubleClick)
+  owner.value.removeEventListener('touchstart', onTouch)
+
+  if (frameAnimation.value) {
+    window.cancelAnimationFrame(frameAnimation.value)
+    frameAnimation.value = 0
   }
+
+  releaseDocumentMouse()
+  releaseTouches()
+}
+
+const releaseDocumentMouse = () => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+}
+
+const releaseTouches = () => {
+  document.removeEventListener('touchmove', handleTouchMove)
+  document.removeEventListener('touchend', handleTouchEnd)
+  document.removeEventListener('touchcancel', handleTouchEnd)
+  multiTouch.value = false
+  touchInProgress.value = false
 }
+
+onMounted(() => {
+  builder()
+})
+
+onBeforeUnmount(() => {
+  releaseEvents()
+})
+
+defineExpose({
+  /** Pauses all interaction events */
+  pause,
+  /** Resumes interaction events */
+  resume,
+  /**
+   * Moves the content by specified delta
+   * @param {Number} dx - X-axis movement delta
+   * @param {Number} dy - Y-axis movement delta
+   */
+  moveTo,
+  /**
+   * Zooms by ratio from specific point
+   * @param {Number} clientX - X coordinate to zoom from
+   * @param {Number} clientY - Y coordinate to zoom from
+   * @param {Number} ratio - Zoom ratio
+   * @param {Boolean} easeFlag - Whether to trigger ease animation
+   */
+  zoomByRatio
+})
 </script>
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
+@use "../../style" as *;
 
 
-.#{base.$prefix}float {
+.#{$prefix}float {
   width: 100%;
   max-width: 100%;
   max-height: 100vh;
   height: 100%;
   overflow: hidden;
   outline: none;
-  border-radius: map.get(base.$borders, 'sm');
+  border-radius: map.get($borders, 'sm');
 
   &.float-bordered {
-    border: 1px solid #3a3e3a;
+    border: 1px solid var(--color-border);
   }
 
   .float-container {