@opentiny/vue-renderless 3.1.0-alpha.0

package/crop/index.js

@@ -0,0 +1,297 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { toFileSize } from '@opentiny/vue-renderless/common/string';
+export var computedCropImages = function computedCropImages(_ref) {
+  var constants = _ref.constants,
+    t = _ref.t;
+  return function () {
+    return t(constants.CROP_IMAGE);
+  };
+};
+export var watchImageSrc = function watchImageSrc(state) {
+  return function (value) {
+    return state.src = value;
+  };
+};
+export var watchAlt = function watchAlt(state) {
+  return function (value) {
+    return state.alt = value || 'image';
+  };
+};
+export var watchVisible = function watchVisible(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state;
+  return function (value) {
+    if (value) {
+      on(document.body, 'keydown', api.shortcutKeys);
+    } else {
+      off(document.body, 'keydown', api.shortcutKeys);
+    }
+    state.cropvisible = value;
+  };
+};
+export var shortcutKeys = function shortcutKeys(api) {
+  return function (e) {
+    if (e.keyCode == 187 && e.ctrlKey) {
+      e.preventDefault();
+      api.zoom(0.1);
+    }
+    if (e.keyCode == 189 && e.ctrlKey) {
+      e.preventDefault();
+      api.zoom(-0.1);
+    }
+    if (e.keyCode == 38 && e.ctrlKey) {
+      e.preventDefault();
+      api.move(0, 1);
+    }
+    if (e.keyCode == 40 && e.ctrlKey) {
+      e.preventDefault();
+      api.move(0, -1);
+    }
+    if (e.keyCode == 37 && e.ctrlKey) {
+      e.preventDefault();
+      api.move(1, 0);
+    }
+    if (e.keyCode == 39 && e.ctrlKey) {
+      e.preventDefault();
+      api.move(-1, 0);
+    }
+  };
+};
+export var closeCrop = function closeCrop(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function () {
+    emit('update:cropvisible', false);
+    emit('update:visible', false);
+    state.cropImg = '';
+  };
+};
+export var createCrop = function createCrop(_ref4) {
+  var emit = _ref4.emit,
+    props = _ref4.props,
+    refs = _ref4.refs,
+    state = _ref4.state;
+  return function () {
+    var Cropper = props.plugin;
+    var cropImage = refs.cropImage;
+    state.cropper = new Cropper(cropImage, {
+      modal: props.modal,
+      guides: props.guides,
+      center: props.center,
+      movable: props.movable,
+      restore: props.restore,
+      viewMode: props.viewMode,
+      zoomable: props.zoomable,
+      autoCrop: props.autoCrop,
+      dragMode: props.dragMode,
+      rotatable: props.rotatable,
+      responsive: props.responsive,
+      background: props.background,
+      aspectRatio: props.aspectRatio,
+      zoomOnWheel: props.zoomOnWheel,
+      autoCropArea: props.autoCropArea,
+      wheelZoomRatio: props.wheelZoomRatio,
+      minCropBoxWidth: props.minCropBoxWidth,
+      minCropBoxHeight: props.minCropBoxHeight,
+      minContainerWidth: props.minContainerWidth,
+      minContainerHeight: props.minContainerHeight,
+      preview: document.querySelectorAll('.croppreview'),
+      ready: function ready() {
+        emit('ready');
+      },
+      cropstart: function cropstart(e) {
+        emit('cropstart', e);
+      },
+      cropmove: function cropmove(e) {
+        emit('cropmove', e);
+      },
+      cropend: function cropend(e) {
+        emit('cropend', e);
+      },
+      crop: function crop(e) {
+        emit('crop', e);
+      }
+    });
+  };
+};
+export var closeCropArea = function closeCropArea(api) {
+  return function () {
+    return api.clear();
+  };
+};
+export var clear = function clear(state) {
+  return function () {
+    return state.cropper.clear();
+  };
+};
+export var cropImage = function cropImage(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function () {
+    state.cropImg = api.getCroppedCanvas().toDataURL('image/jpeg', props.quality);
+    if (props.cropType.toLowerCase() === 'base64') {
+      emit('cropdata', api.getCroppedCanvas().toDataURL('image/jpeg', props.quality));
+    } else if (props.cropType.toLowerCase() === 'blob') {
+      var canvas = api.getCroppedCanvas();
+      canvas.toBlob(function (blobObj) {
+        emit('cropdata', blobObj);
+      }, 'image/jpeg', props.quality);
+    }
+  };
+};
+export var getCroppedCanvas = function getCroppedCanvas(state) {
+  return function () {
+    return state.cropper.getCroppedCanvas();
+  };
+};
+export var getCropBoxData = function getCropBoxData(state) {
+  return function () {
+    return state.cropper.getCropBoxData();
+  };
+};
+export var getData = function getData(state) {
+  return function (rounded) {
+    return state.cropper.getData(!!rounded);
+  };
+};
+export var move = function move(state) {
+  return function (offsetX, offsetY) {
+    return state.cropper.move(offsetX, offsetY);
+  };
+};
+export var reset = function reset(state) {
+  return function () {
+    return state.cropper.reset();
+  };
+};
+export var setCropBoxData = function setCropBoxData(state) {
+  return function (_ref6) {
+    var left = _ref6.left,
+      top = _ref6.top,
+      width = _ref6.width,
+      height = _ref6.height;
+    return state.cropper.setCropBoxData({
+      left: left,
+      top: top,
+      width: width,
+      height: height
+    });
+  };
+};
+export var setData = function setData(state) {
+  return function (data) {
+    return data !== null && _typeof(data) === 'object' && state.cropper.setData(data);
+  };
+};
+export var disable = function disable(state) {
+  return function () {
+    return state.cropper.disable();
+  };
+};
+export var enable = function enable(state) {
+  return function () {
+    return state.cropper.enable();
+  };
+};
+export var destroy = function destroy(state) {
+  return function () {
+    return state.cropper.destroy();
+  };
+};
+export var scale = function scale(state) {
+  return function (scaleX, scaleY) {
+    return state.cropper.scale(scaleX, scaleY);
+  };
+};
+export var scaleX = function scaleX(state) {
+  return function (x) {
+    return state.cropper.scaleX(x);
+  };
+};
+export var scaleY = function scaleY(state) {
+  return function (x) {
+    return state.cropper.scaleY(x);
+  };
+};
+export var getContainerData = function getContainerData(state) {
+  return function () {
+    return state.cropper.getContainerData();
+  };
+};
+export var getImageData = function getImageData(state) {
+  return function () {
+    return state.cropper.getImageData();
+  };
+};
+export var getCanvasData = function getCanvasData(state) {
+  return function () {
+    return state.cropper.getCanvasData();
+  };
+};
+export var setAspectRatio = function setAspectRatio(state) {
+  return function (s) {
+    return state.cropper.setAspectRatio(s);
+  };
+};
+export var setDragMode = function setDragMode(state) {
+  return function (s) {
+    return state.cropper.setDragMode(s);
+  };
+};
+export var setCanvasData = function setCanvasData(state) {
+  return function (_ref7) {
+    var width = _ref7.width,
+      height = _ref7.height,
+      left = _ref7.left,
+      top = _ref7.top;
+    return state.cropper.setCanvasData({
+      width: width,
+      height: height,
+      left: left,
+      top: top
+    });
+  };
+};
+export var rotate = function rotate(state) {
+  return function (deg) {
+    return state.cropper.rotate(deg);
+  };
+};
+export var setImage = function setImage(_ref8) {
+  var api = _ref8.api,
+    state = _ref8.state,
+    props = _ref8.props;
+  return function (e) {
+    var file = e.target.files[0];
+    var unit = props.maxSize.match(/[a-zA-Z]+/gi);
+    unit = unit && (unit[0].length > 1 ? unit[0] : unit[0] + 'B');
+    var size = toFileSize(Number(props.maxSize.match(/[0-9]+/gi)[0]), 'B', unit || 'B');
+    if (file === undefined || file.type.indexOf('image/') === -1 || Number(file.size) > Number(size.split('B')[0])) {
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      state.src = event.target.result;
+      api.replace(event.target.result);
+    };
+    reader.readAsDataURL(file);
+  };
+};
+export var replace = function replace(state) {
+  return function (url) {
+    return state.cropper.replace(url);
+  };
+};
+export var showFileChooser = function showFileChooser(refs) {
+  return function () {
+    return refs.cropInput.click();
+  };
+};
+export var zoom = function zoom(state) {
+  return function (percent) {
+    return state.cropper.zoom(percent);
+  };
+};

package/crop/vue.js

@@ -0,0 +1,191 @@
+import { watchImageSrc, shortcutKeys, watchVisible, clear, replace, computedCropImages, watchAlt, getCroppedCanvas, setCanvasData, setDragMode, setAspectRatio, getImageData, getCanvasData, scale, scaleY, getContainerData, scaleX, destroy, disable, enable, closeCropArea, closeCrop, createCrop, setImage, cropImage, getCropBoxData, getData, move, reset, rotate, setCropBoxData, setData, showFileChooser, zoom } from './index';
+export var api = ['state', 'clear', 'replace', 'getCroppedCanvas', 'setCanvasData', 'setDragMode', 'setAspectRatio', 'getCanvasData', 'getImageData', 'getContainerData', 'scaleY', 'scale', 'scaleX', 'destroy', 'enable', 'closeCropArea', 'disable', 'closeCrop', 'getCropBoxData', 'getData', 'move', 'reset', 'rotate', 'setCropBoxData', 'setData', 'showFileChooser', 'setImage', 'cropImage', 'zoom'];
+var initRenderIcon = function initRenderIcon(api) {
+  var renderIcon = [{
+    method: function method() {
+      return api.showFileChooser();
+    },
+    icon: 'IconNew'
+  }, {
+    method: function method() {
+      return api.zoom(0.1);
+    },
+    icon: 'IconZoomIn'
+  }, {
+    method: function method() {
+      return api.zoom(-0.1);
+    },
+    icon: 'IconZoomOut'
+  }, {
+    method: function method() {
+      return api.rotate(-45);
+    },
+    icon: 'IconRepeat'
+  }, {
+    method: function method() {
+      return api.rotate(45);
+    },
+    icon: 'IconRefres'
+  }, {
+    method: function method() {
+      return api.closeCropArea();
+    },
+    icon: 'IconCrop'
+  }, {
+    method: function method() {
+      return api.reset();
+    },
+    icon: 'IconConmentRefresh'
+  }, {
+    method: function method() {
+      return api.cropImage();
+    },
+    icon: 'IconYes'
+  }, {
+    method: function method() {
+      return api.closeCrop();
+    },
+    icon: 'IconClose'
+  }];
+  return renderIcon;
+};
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    props = _ref.props,
+    computed = _ref.computed,
+    api = _ref.api;
+  var state = reactive({
+    src: props.src,
+    cropImg: '',
+    cropper: '',
+    alt: props.alt,
+    data: null,
+    cropvisible: props.cropvisible,
+    renderIcon: initRenderIcon(api),
+    previewShow: props.previewShow,
+    cropImages: computed(function () {
+      return api.computedCropImages();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    refs = _ref2.refs,
+    props = _ref2.props,
+    constants = _ref2.constants,
+    t = _ref2.t;
+  Object.assign(api, {
+    state: state,
+    zoom: zoom(state),
+    move: move(state),
+    clear: clear(state),
+    reset: reset(state),
+    scale: scale(state),
+    rotate: rotate(state),
+    enable: enable(state),
+    scaleX: scaleX(state),
+    scaleY: scaleY(state),
+    replace: replace(state),
+    setData: setData(state),
+    getData: getData(state),
+    disable: disable(state),
+    destroy: destroy(state),
+    watchAlt: watchAlt(state),
+    setDragMode: setDragMode(state),
+    getImageData: getImageData(state),
+    watchImageSrc: watchImageSrc(state),
+    setCanvasData: setCanvasData(state),
+    getCanvasData: getCanvasData(state),
+    closeCrop: closeCrop({
+      emit: emit,
+      state: state
+    }),
+    setCropBoxData: setCropBoxData(state),
+    setAspectRatio: setAspectRatio(state),
+    getCropBoxData: getCropBoxData(state),
+    showFileChooser: showFileChooser(refs),
+    getCroppedCanvas: getCroppedCanvas(state),
+    getContainerData: getContainerData(state),
+    createCrop: createCrop({
+      emit: emit,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    computedCropImages: computedCropImages({
+      constants: constants,
+      t: t
+    }),
+    shortcutKeys: shortcutKeys(api),
+    closeCropArea: closeCropArea(api),
+    setImage: setImage({
+      api: api,
+      state: state,
+      props: props
+    }),
+    cropImage: cropImage({
+      api: api,
+      emit: emit,
+      props: props,
+      state: state
+    }),
+    watchVisible: watchVisible({
+      api: api,
+      state: state
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    api = _ref3.api;
+  watch(function () {
+    return props.cropvisible;
+  }, api.watchVisible);
+  watch(function () {
+    return props.src;
+  }, api.watchImageSrc, {
+    immediate: true
+  });
+  watch(function () {
+    return props.alt;
+  }, api.watchAlt, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    emit = _ref5.emit,
+    refs = _ref5.refs,
+    constants = _ref5.constants;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    props: props,
+    computed: computed,
+    api: api
+  });
+  initApi({
+    api: api,
+    state: state,
+    emit: emit,
+    refs: refs,
+    props: props,
+    constants: constants,
+    t: t
+  });
+  onMounted(api.createCrop);
+  initWatch({
+    watch: watch,
+    props: props,
+    api: api
+  });
+  return api;
+};