openatc-components 0.0.1 → 0.0.6

package/package/kisscomps/components/TragResize/kissdragresize.vue

@@ -1,536 +0,0 @@
-<template>
-  <div
-    class="vdr"
-    :style="style"
-    :class="{
-      draggable: draggable,
-      resizable: resizable,
-      active: enabled,
-      dragging: dragging,
-      resizing: resizing
-    }"
-    @mousedown="elmDown"
-    @touchstart.stop="elmDown"
-    @dblclick="fillParent"
-  >
-    <div
-      v-for="handle in handles"
-      v-if="resizable"
-      class="handle"
-      :key="handle"
-      :class="'handle-' + handle"
-      :style="{ display: enabled ? 'block' : 'none'}"
-      @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleDown(handle, $event)"
-    ></div>
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-import { matchesSelectorToParentElements } from './util/dom'
-
-export default {
-  replace: true,
-  name: 'VueDraggableResizable',
-  props: {
-    active: {
-      type: Boolean, default: false
-    },
-    draggable: {
-      type: Boolean, default: true
-    },
-    resizable: {
-      type: Boolean, default: true
-    },
-    w: {
-      type: Number,
-      default: 200,
-      validator: function (val) {
-        return val > 0
-      }
-    },
-    h: {
-      type: Number,
-      default: 200,
-      validator: function (val) {
-        return val > 0
-      }
-    },
-    minw: {
-      type: Number,
-      default: 50,
-      validator: function (val) {
-        return val >= 0
-      }
-    },
-    minh: {
-      type: Number,
-      default: 50,
-      validator: function (val) {
-        return val >= 0
-      }
-    },
-    x: {
-      type: Number,
-      default: 0,
-      validator: function (val) {
-        return typeof val === 'number'
-      }
-    },
-    y: {
-      type: Number,
-      default: 0,
-      validator: function (val) {
-        return typeof val === 'number'
-      }
-    },
-    z: {
-      type: [ String, Number ],
-      default: 'auto',
-      validator: function (val) {
-        let valid = (typeof val === 'string') ? val === 'auto' : val >= 0
-        return valid
-      }
-    },
-    handles: {
-      type: Array,
-      default: function () {
-        return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
-      },
-      validator: function (val) {
-        var s = new Set(['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'])
-
-        return new Set(val.filter(h => s.has(h))).size === val.length
-      }
-    },
-    dragHandle: {
-      type: String,
-      default: null
-    },
-    dragCancel: {
-      type: String,
-      default: null
-    },
-    axis: {
-      type: String,
-      default: 'both',
-      validator: function (val) {
-        return ['x', 'y', 'both'].indexOf(val) !== -1
-      }
-    },
-    grid: {
-      type: Array,
-      default: function () {
-        return [1, 1]
-      }
-    },
-    parent: {
-      type: Boolean, default: false
-    },
-    maximize: {
-      type: Boolean, default: false
-    }
-  },
-
-  created: function () {
-    this.parentX = 0
-    this.parentW = 9999
-    this.parentY = 0
-    this.parentH = 9999
-
-    this.mouseX = 0
-    this.mouseY = 0
-
-    this.lastMouseX = 0
-    this.lastMouseY = 0
-
-    this.mouseOffX = 0
-    this.mouseOffY = 0
-
-    this.elmX = 0
-    this.elmY = 0
-
-    this.elmW = 0
-    this.elmH = 0
-  },
-  mounted: function () {
-    document.documentElement.addEventListener('mousemove', this.handleMove, true)
-    document.documentElement.addEventListener('mousedown', this.deselect, true)
-    document.documentElement.addEventListener('mouseup', this.handleUp, true)
-
-    // touch events bindings
-    document.documentElement.addEventListener('touchmove', this.handleMove, true)
-    document.documentElement.addEventListener('touchend touchcancel', this.deselect, true)
-    document.documentElement.addEventListener('touchstart', this.handleUp, true)
-
-    this.elmX = parseInt(this.$el.style.left)
-    this.elmY = parseInt(this.$el.style.top)
-    this.elmW = this.$el.offsetWidth || this.$el.clientWidth
-    this.elmH = this.$el.offsetHeight || this.$el.clientHeight
-
-    this.reviewDimensions()
-  },
-  beforeDestroy: function () {
-    document.documentElement.removeEventListener('mousemove', this.handleMove, true)
-    document.documentElement.removeEventListener('mousedown', this.deselect, true)
-    document.documentElement.removeEventListener('mouseup', this.handleUp, true)
-
-    // touch events bindings removed
-    document.documentElement.addEventListener('touchmove', this.handleMove, true)
-    document.documentElement.addEventListener('touchend touchcancel', this.deselect, true)
-    document.documentElement.addEventListener('touchstart', this.handleUp, true)
-  },
-
-  data: function () {
-    return {
-      top: this.y,
-      left: this.x,
-      width: this.w,
-      height: this.h,
-      resizing: false,
-      dragging: false,
-      enabled: this.active,
-      handle: null,
-      zIndex: this.z
-    }
-  },
-
-  methods: {
-    reviewDimensions: function () {
-      if (this.minw > this.w) this.width = this.minw
-
-      if (this.minh > this.h) this.height = this.minh
-
-      if (this.parent) {
-        const parentW = parseInt(this.$el.parentNode.clientWidth, 10)
-        const parentH = parseInt(this.$el.parentNode.clientHeight, 10)
-
-        this.parentW = parentW
-        this.parentH = parentH
-
-        if (this.w > this.parentW) this.width = parentW
-
-        if (this.h > this.parentH) this.height = parentH
-
-        if ((this.x + this.w) > this.parentW) this.width = parentW - this.x
-
-        if ((this.y + this.h) > this.parentH) this.height = parentH - this.y
-      }
-
-      this.elmW = this.width
-      this.elmH = this.height
-
-      this.$emit('resizing', this.left, this.top, this.width, this.height)
-    },
-    elmDown: function (e) {
-      const target = e.target || e.srcElement
-
-      if (this.$el.contains(target)) {
-        if (
-          (this.dragHandle && !matchesSelectorToParentElements(target, this.dragHandle, this.$el)) ||
-          (this.dragCancel && matchesSelectorToParentElements(target, this.dragCancel, this.$el))) {
-          return
-        }
-
-        e.stopPropagation()
-        e.preventDefault()
-
-        this.reviewDimensions()
-
-        if (!this.enabled) {
-          this.enabled = true
-
-          this.$emit('activated')
-          this.$emit('update:active', true)
-        }
-
-        if (this.draggable) {
-          this.dragging = true
-        }
-      }
-    },
-    deselect: function (e) {
-      if (e.type.indexOf('touch') !== -1) {
-        this.mouseX = e.changedTouches[0].clientX
-        this.mouseY = e.changedTouches[0].clientY
-      } else {
-        this.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
-        this.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
-      }
-
-      this.lastMouseX = this.mouseX
-      this.lastMouseY = this.mouseY
-
-      const target = e.target || e.srcElement
-      const regex = new RegExp('handle-([trmbl]{2})', '')
-
-      if (!this.$el.contains(target) && !regex.test(target.className)) {
-        if (this.enabled) {
-          this.enabled = false
-
-          this.$emit('deactivated')
-          this.$emit('update:active', false)
-        }
-      }
-    },
-    handleDown: function (handle, e) {
-      this.handle = handle
-
-      if (e.stopPropagation) e.stopPropagation()
-      if (e.preventDefault) e.preventDefault()
-
-      this.resizing = true
-    },
-    fillParent: function (e) {
-      if (!this.parent || !this.resizable || !this.maximize) return
-
-      let done = false
-
-      const animate = () => {
-        if (!done) {
-          window.requestAnimationFrame(animate)
-        }
-
-        if (this.axis === 'x') {
-          if (
-            this.width === this.parentW && this.left === this.parentX
-          ) done = true
-        } else if (this.axis === 'y') {
-          if (
-            this.height === this.parentH && this.top === this.parentY
-          ) done = true
-        } else if (this.axis === 'both') {
-          if (
-            this.width === this.parentW &&
-            this.height === this.parentH &&
-            this.top === this.parentY &&
-            this.left === this.parentX
-          ) done = true
-        }
-
-        if (this.axis === 'x' || this.axis === 'both') {
-          if (this.width < this.parentW) {
-            this.width++
-            this.elmW++
-          }
-
-          if (this.left > this.parentX) {
-            this.left--
-            this.elmX--
-          }
-        }
-
-        if (this.axis === 'y' || this.axis === 'both') {
-          if (this.height < this.parentH) {
-            this.height++
-            this.elmH++
-          }
-
-          if (this.top > this.parentY) {
-            this.top--
-            this.elmY--
-          }
-        }
-
-        this.$emit('resizing', this.left, this.top, this.width, this.height)
-      }
-
-      window.requestAnimationFrame(animate)
-    },
-    handleMove: function (e) {
-      const isTouchMove = e.type.indexOf('touchmove') !== -1
-      this.mouseX = isTouchMove
-        ? e.touches[0].clientX
-        : e.pageX || e.clientX + document.documentElement.scrollLeft
-      this.mouseY = isTouchMove
-        ? e.touches[0].clientY
-        : e.pageY || e.clientY + document.documentElement.scrollTop
-
-      let diffX = this.mouseX - this.lastMouseX + this.mouseOffX
-      let diffY = this.mouseY - this.lastMouseY + this.mouseOffY
-
-      this.mouseOffX = this.mouseOffY = 0
-
-      this.lastMouseX = this.mouseX
-      this.lastMouseY = this.mouseY
-
-      let dX = diffX
-      let dY = diffY
-
-      if (this.resizing) {
-        if (this.handle.indexOf('t') >= 0) {
-          if (this.elmH - dY < this.minh) this.mouseOffY = (dY - (diffY = this.elmH - this.minh))
-          else if (this.parent && this.elmY + dY < this.parentY) this.mouseOffY = (dY - (diffY = this.parentY - this.elmY))
-          this.elmY += diffY
-          this.elmH -= diffY
-        }
-
-        if (this.handle.indexOf('b') >= 0) {
-          if (this.elmH + dY < this.minh) this.mouseOffY = (dY - (diffY = this.minh - this.elmH))
-          else if (this.parent && this.elmY + this.elmH + dY > this.parentH) this.mouseOffY = (dY - (diffY = this.parentH - this.elmY - this.elmH))
-          this.elmH += diffY
-        }
-
-        if (this.handle.indexOf('l') >= 0) {
-          if (this.elmW - dX < this.minw) this.mouseOffX = (dX - (diffX = this.elmW - this.minw))
-          else if (this.parent && this.elmX + dX < this.parentX) this.mouseOffX = (dX - (diffX = this.parentX - this.elmX))
-          this.elmX += diffX
-          this.elmW -= diffX
-        }
-
-        if (this.handle.indexOf('r') >= 0) {
-          if (this.elmW + dX < this.minw) this.mouseOffX = (dX - (diffX = this.minw - this.elmW))
-          else if (this.parent && this.elmX + this.elmW + dX > this.parentW) this.mouseOffX = (dX - (diffX = this.parentW - this.elmX - this.elmW))
-          this.elmW += diffX
-        }
-
-        this.left = (Math.round(this.elmX / this.grid[0]) * this.grid[0])
-        this.top = (Math.round(this.elmY / this.grid[1]) * this.grid[1])
-
-        this.width = (Math.round(this.elmW / this.grid[0]) * this.grid[0])
-        this.height = (Math.round(this.elmH / this.grid[1]) * this.grid[1])
-
-        this.$emit('resizing', this.left, this.top, this.width, this.height)
-      } else if (this.dragging) {
-        if (this.parent) {
-          if (this.elmX + dX < this.parentX) this.mouseOffX = (dX - (diffX = this.parentX - this.elmX))
-          else if (this.elmX + this.elmW + dX > this.parentW) this.mouseOffX = (dX - (diffX = this.parentW - this.elmX - this.elmW))
-
-          if (this.elmY + dY < this.parentY) this.mouseOffY = (dY - (diffY = this.parentY - this.elmY))
-          else if (this.elmY + this.elmH + dY > this.parentH) this.mouseOffY = (dY - (diffY = this.parentH - this.elmY - this.elmH))
-        }
-
-        this.elmX += diffX
-        this.elmY += diffY
-
-        if (this.axis === 'x' || this.axis === 'both') {
-          this.left = (Math.round(this.elmX / this.grid[0]) * this.grid[0])
-        }
-        if (this.axis === 'y' || this.axis === 'both') {
-          this.top = (Math.round(this.elmY / this.grid[1]) * this.grid[1])
-        }
-
-        this.$emit('dragging', this.left, this.top)
-      }
-    },
-    handleUp: function (e) {
-      if (e.type.indexOf('touch') !== -1) {
-        this.lastMouseX = e.changedTouches[0].clientX
-        this.lastMouseY = e.changedTouches[0].clientY
-      }
-      this.handle = null
-      if (this.resizing) {
-        this.resizing = false
-        this.$emit('resizestop', this.left, this.top, this.width, this.height)
-      }
-      if (this.dragging) {
-        this.dragging = false
-        this.$emit('dragstop', this.left, this.top)
-      }
-
-      this.elmX = this.left
-      this.elmY = this.top
-    }
-  },
-
-  computed: {
-    style: function () {
-      return {
-        top: this.top + 'px',
-        left: this.left + 'px',
-        width: this.width + 'px',
-        height: this.height + 'px',
-        zIndex: this.zIndex
-      }
-    }
-  },
-
-  watch: {
-    active: function (val) {
-      this.enabled = val
-    },
-    z: function (val) {
-      if (val >= 0 || val === 'auto') {
-        this.zIndex = val
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .vdr {
-    position: absolute;
-    box-sizing: border-box;
-  }
-  .handle {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    font-size: 1px;
-    background: transparent;
-    /* background: #42daff; */
-    border: 1px solid #333;
-  }
-  .handle:hover {
-    background: #42daff;
-  }
-  .handle-tl {
-    top: -10px;
-    left: -10px;
-    cursor: nw-resize;
-  }
-  .handle-tm {
-    top: -10px;
-    left: 50%;
-    margin-left: -5px;
-    cursor: n-resize;
-  }
-  .handle-tr {
-    top: -10px;
-    right: -10px;
-    cursor: ne-resize;
-  }
-  .handle-ml {
-    top: 50%;
-    margin-top: -5px;
-    left: -10px;
-    cursor: w-resize;
-  }
-  .handle-mr {
-    top: 50%;
-    margin-top: -5px;
-    right: -10px;
-    cursor: e-resize;
-  }
-  .handle-bl {
-    bottom: -10px;
-    left: -10px;
-    cursor: sw-resize;
-  }
-  .handle-bm {
-    bottom: -10px;
-    left: 50%;
-    margin-left: -5px;
-    cursor: s-resize;
-  }
-  .handle-br {
-    bottom: -10px;
-    right: -10px;
-    cursor: se-resize;
-  }
-  @media only screen and (max-width: 768px) {
-    /* For mobile phones: */
-    [class*="handle-"]:before {
-      content: '';
-      left: -10px;
-      right: -10px;
-      bottom: -10px;
-      top: -10px;
-      position: absolute;
-    }
-  }
-</style>

package/package/kisscomps/components/TragResize/util/dom.js

@@ -1,23 +0,0 @@
-import { isFunction } from './fns'
-
-export function matchesSelectorToParentElements (el, selector, baseNode) {
-  let node = el
-
-  const matchesSelectorFunc = [
-    'matches',
-    'webkitMatchesSelector',
-    'mozMatchesSelector',
-    'msMatchesSelector',
-    'oMatchesSelector'
-  ].find(func => isFunction(node[func]))
-
-  if (!isFunction(node[matchesSelectorFunc])) return false
-
-  do {
-    if (node[matchesSelectorFunc](selector)) return true
-    if (node === baseNode) return false
-    node = node.parentNode
-  } while (node)
-
-  return false
-}

package/package/kisscomps/components/TragResize/util/fns.js

@@ -1,3 +0,0 @@
-export function isFunction (func) {
-  return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]'
-}