🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

draggable-panel

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

draggable-panel - npm Package Compare versions

Comparing version

1.0.7
to
1.0.8

615

dist/draggable-panel.es.js

@@ -17,12 +17,5 @@ var __defProp = Object.defineProperty;

};
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
var index_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => '.draggable-panel[data-v-4ced9f6c]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel *[data-v-4ced9f6c]{outline:none}.draggable-panel.lock .chart-item[data-v-4ced9f6c]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-4ced9f6c]{display:none!important}.draggable-panel .canvas[data-v-4ced9f6c]{position:relative;background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .canvas.moving[data-v-4ced9f6c]{cursor:move}.draggable-panel .canvas[data-v-4ced9f6c]:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(25,118,210,.3);visibility:hidden;opacity:0;transition:all .3s;z-index:10000}.draggable-panel .canvas.out-canvas-dragover[data-v-4ced9f6c]:after{visibility:visible;opacity:1}.draggable-panel .chart-item[data-v-4ced9f6c]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content[data-v-4ced9f6c]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item[data-v-4ced9f6c]:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable[data-v-4ced9f6c]{display:block}.draggable-panel .chart-item.moving .resizable-point[data-v-4ced9f6c]{display:none!important}.draggable-panel .chart-item.resizing .resizable[data-v-4ced9f6c]{display:block}.draggable-panel .chart-item .resizable[data-v-4ced9f6c]{display:none}.draggable-panel .chart-item .resizable .resizable-point[data-v-4ced9f6c]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point[data-v-4ced9f6c]:after{content:"";display:block;width:8px;height:8px;border:2px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line[data-v-4ced9f6c]{position:absolute;box-sizing:border-box;z-index:10}.draggable-panel .chart-item .resizable .resizable-line[data-v-4ced9f6c]:after{content:"";display:block;width:100%;height:100%;background:#1976D2}.draggable-panel .chart-item .resizable .a[data-v-4ced9f6c]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b[data-v-4ced9f6c]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .c[data-v-4ced9f6c]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .d[data-v-4ced9f6c]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .e[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .f[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .g[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .h[data-v-4ced9f6c]{pointer-events:none}.draggable-panel .chart-item .resizable .e[data-v-4ced9f6c]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .f[data-v-4ced9f6c]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .g[data-v-4ced9f6c]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .h[data-v-4ced9f6c]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i[data-v-4ced9f6c]{top:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(-50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .j[data-v-4ced9f6c]{right:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(50%);cursor:ew-resize}.draggable-panel .chart-item .resizable .k[data-v-4ced9f6c]{bottom:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .l[data-v-4ced9f6c]{left:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(-50%);cursor:ew-resize}\n')();
var _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _sfc_main = defineComponent({
import { markRaw, defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h } from "vue";
var index$1 = /* @__PURE__ */ (() => '.draggable-panel{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel *{outline:none}.draggable-panel.lock .chart-item:hover{filter:none}.draggable-panel.lock .chart-item .resizable{display:none!important}.draggable-panel .canvas{position:relative;background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .canvas.moving{cursor:move}.draggable-panel .canvas:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(25,118,210,.3);visibility:hidden;opacity:0;transition:all .3s;z-index:10000}.draggable-panel .canvas.out-canvas-dragover:after{visibility:visible;opacity:1}.draggable-panel .chart-item{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable{display:block}.draggable-panel .chart-item.moving .resizable-point{display:none!important}.draggable-panel .chart-item.resizing .resizable{display:block}.draggable-panel .chart-item .resizable{display:none}.draggable-panel .chart-item .resizable .resizable-point{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point:after{content:"";display:block;width:8px;height:8px;border:2px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line{position:absolute;box-sizing:border-box;z-index:10}.draggable-panel .chart-item .resizable .resizable-line:after{content:"";display:block;width:100%;height:100%;background:#1976D2}.draggable-panel .chart-item .resizable .a{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .c{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .d{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .e,.draggable-panel .chart-item .resizable .f,.draggable-panel .chart-item .resizable .g,.draggable-panel .chart-item .resizable .h{pointer-events:none}.draggable-panel .chart-item .resizable .e{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .f{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .g{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .h{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i{top:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(-50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .j{right:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(50%);cursor:ew-resize}.draggable-panel .chart-item .resizable .k{bottom:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .l{left:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(-50%);cursor:ew-resize}\n')();
var index = markRaw(defineComponent({
name: "draggable-panel",

@@ -83,3 +76,7 @@ props: {

},
setup(props) {
emits: [
"canvas-scale",
"canvas-drop"
],
setup(props, ctx) {
const container = ref(null);

@@ -122,121 +119,118 @@ const canvas = ref(null);

});
function init() {
const { offsetWidth, offsetHeight } = container.value;
const defaultMaxWidth = offsetWidth - props.padding;
const defaultMaxHeight = offsetHeight - props.padding;
const ratioContainer = offsetWidth / offsetHeight;
const ratioCanvas = props.width / props.height;
defaultScale.value = ratioContainer < ratioCanvas ? defaultMaxWidth / props.width : defaultMaxHeight / props.height;
defaultX.value = (offsetWidth - props.width) / 2;
defaultY.value = (offsetHeight - props.height) / 2;
scale.value = defaultScale.value;
canvasX.value = defaultX.value;
canvasY.value = defaultY.value;
}
onMounted(() => {
init();
window.addEventListener("resize", init);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", init);
});
return {
container,
canvas,
defaultX,
defaultY,
defaultScale,
scale,
point,
lastPointermove,
diff,
movingChart,
resizingChart,
resizeDirection,
chartPosition,
canvasX,
canvasY,
canvasStatusMove,
pointerPressed,
outCanvasDragover,
canvasStyleComputed,
chartStyleComputed
};
},
watch: {
scale(newVal) {
this.$emit("canvas-scale", newVal);
}
},
methods: {
scaleByWheel(event) {
if (this.lock)
watch(scale, (newScale) => ctx.emit("canvas-scale", newScale));
const scaleByWheel = (event) => {
const { ctrlKey, metaKey } = event;
if (!ctrlKey && !metaKey)
return;
event.preventDefault();
if (props.lock)
return;
let ratio = 1 / (1 + event.deltaY * 1e-3);
let scale = this.scale * ratio;
if (scale > this.scaleMax) {
ratio = this.scaleMax / this.scale;
scale = this.scaleMax;
let zoom = scale.value * ratio;
if (zoom > props.scaleMax) {
ratio = props.scaleMax / scale.value;
zoom = props.scaleMax;
}
if (scale < this.scaleMin) {
ratio = this.scaleMin / this.scale;
scale = this.scaleMin;
if (zoom < props.scaleMin) {
ratio = props.scaleMin / scale.value;
zoom = props.scaleMin;
}
this.scale = scale;
scale.value = zoom;
const origin = {
x: (ratio - 1) * this.width * 0.5,
y: (ratio - 1) * this.height * 0.5
x: (ratio - 1) * props.width * 0.5,
y: (ratio - 1) * props.height * 0.5
};
this.canvasX -= (ratio - 1) * (event.clientX - this.canvasX) - origin.x;
this.canvasY -= (ratio - 1) * (event.clientY - this.canvasY) - origin.y;
},
scaleByKeyboard(event) {
const { key } = event;
if (["=", "-"].includes(key) && this.lock)
return event.preventDefault();
if (key === "=") {
event.preventDefault();
let scale = this.scale + 0.1;
if (scale > this.scaleMax)
scale = this.scaleMax;
this.scale = scale;
}
if (key === "-") {
event.preventDefault();
let scale = this.scale - 0.1;
if (scale < this.scaleMin)
scale = this.scaleMin;
this.scale = scale;
}
},
resetScale() {
if (this.lock)
canvasX.value -= (ratio - 1) * (event.clientX - canvasX.value) - origin.x;
canvasY.value -= (ratio - 1) * (event.clientY - canvasY.value) - origin.y;
};
const scaleAddByKeyboard = (event) => {
event.preventDefault();
if (props.lock)
return;
this.scale = this.defaultScale;
this.canvasX = this.defaultX;
this.canvasY = this.defaultY;
},
realScale() {
if (this.lock)
let zoom = scale.value + 0.1;
if (zoom > props.scaleMax)
zoom = props.scaleMax;
scale.value = zoom;
};
const scaleSubByKeyboard = (event) => {
event.preventDefault();
if (props.lock)
return;
const { offsetWidth, offsetHeight } = this.container;
this.scale = 1;
this.canvasX = (offsetWidth - this.width) / 2;
this.canvasY = (offsetHeight - this.height) / 2;
},
setChartPosition(event) {
this.chartPosition = {
let zoom = scale.value - 0.1;
if (zoom < props.scaleMin)
zoom = props.scaleMin;
scale.value = zoom;
};
const resetScale = () => {
if (props.lock)
return;
scale.value = defaultScale.value;
canvasX.value = defaultX.value;
canvasY.value = defaultY.value;
};
const realScale = () => {
if (props.lock)
return;
const { offsetWidth, offsetHeight } = container.value;
scale.value = 1;
canvasX.value = (offsetWidth - props.width) / 2;
canvasY.value = (offsetHeight - props.height) / 2;
};
const pointerDown = (event) => {
if (!canvasStatusMove.value || props.lock)
return;
pointerPressed.value = true;
canvas.value.setPointerCapture(event.pointerId);
point.value = { x: event.clientX, y: event.clientY };
lastPointermove.value = { x: event.clientX, y: event.clientY };
};
const pointermove = (event) => {
if (!pointerPressed.value)
return;
event.preventDefault();
const current = { x: event.clientX, y: event.clientY };
diff.value = {
x: current.x - lastPointermove.value.x,
y: current.y - lastPointermove.value.y
};
lastPointermove.value = { x: current.x, y: current.y };
canvasX.value += diff.value.x;
canvasY.value += diff.value.y;
};
const pointerUp = () => {
pointerPressed.value = false;
};
const pointerCancel = () => {
pointerPressed.value = false;
};
const setChartPosition = (event) => {
chartPosition.value = {
x: event.clientX,
y: event.clientY
};
},
dragoverContainer(event) {
};
const chartDragstart = (event, chart) => {
if (!event.dataTransfer)
return;
hideDragImage(event.dataTransfer);
movingChart.value = chart;
};
const resizeStart = (event, chart, direction) => {
event.stopPropagation();
if (!event.dataTransfer)
return;
hideDragImage(event.dataTransfer);
resizingChart.value = chart;
resizeDirection.value = direction;
};
const dragoverContainer = (event) => {
event.preventDefault();
const { clientX, clientY } = event;
const offsetX = (clientX - this.chartPosition.x) / this.scale;
const offsetY = (clientY - this.chartPosition.y) / this.scale;
this.chartPosition = { x: clientX, y: clientY };
if (this.movingChart) {
const { width, height, x, y } = this.movingChart;
const maxX = this.width - width;
const maxY = this.height - height;
const offsetX = (clientX - chartPosition.value.x) / scale.value;
const offsetY = (clientY - chartPosition.value.y) / scale.value;
chartPosition.value = { x: clientX, y: clientY };
if (movingChart.value) {
const { width, height, x, y } = movingChart.value;
const maxX = props.width - width;
const maxY = props.height - height;
let newX = x + offsetX;

@@ -252,9 +246,10 @@ let newY = y + offsetY;

newY = maxY;
this.movingChart.x = newX;
this.movingChart.y = newY;
movingChart.value.x = newX;
movingChart.value.y = newY;
}
if (this.resizingChart) {
const { width, height, x, y } = this.resizingChart;
const chartMaxWidth = this.width - x;
const chartMaxHeight = this.height - y;
if (resizingChart.value) {
const { width, height, x, y } = resizingChart.value;
const chartMaxWidth = props.width - x;
const chartMaxHeight = props.height - y;
const direction = resizeDirection.value;
let newWidth = width;

@@ -266,3 +261,3 @@ let newHeight = height;

newWidth += offsetX;
if (newWidth < this.chartMinWidth)
if (newWidth < props.chartMinWidth)
newWidth = width;

@@ -274,3 +269,3 @@ if (newWidth > chartMaxWidth)

newHeight += offsetY;
if (newHeight < this.chartMinHeight)
if (newHeight < props.chartMinHeight)
newHeight = height;

@@ -287,3 +282,3 @@ if (newHeight > chartMaxHeight)

}
if (newWidth < this.chartMinWidth) {
if (newWidth < props.chartMinWidth) {
newWidth = width;

@@ -300,3 +295,3 @@ newX = x;

}
if (newHeight < this.chartMinHeight) {
if (newHeight < props.chartMinHeight) {
newHeight = height;

@@ -306,205 +301,217 @@ newY = y;

};
if (this.resizeDirection === "a") {
if (direction === "a") {
resizeWidthWithX();
resizeHeightWithY();
}
if (this.resizeDirection === "b") {
if (direction === "b") {
resizeWidth();
resizeHeightWithY();
}
if (this.resizeDirection === "c") {
if (direction === "c") {
resizeWidth();
resizeHeight();
}
if (this.resizeDirection === "d") {
if (direction === "d") {
resizeWidthWithX();
resizeHeight();
}
if (this.resizeDirection === "i")
if (direction === "i")
resizeHeightWithY();
if (this.resizeDirection === "j")
if (direction === "j")
resizeWidth();
if (this.resizeDirection === "k")
if (direction === "k")
resizeHeight();
if (this.resizeDirection === "l")
if (direction === "l")
resizeWidthWithX();
this.resizingChart.width = newWidth;
this.resizingChart.x = newX;
this.resizingChart.height = newHeight;
this.resizingChart.y = newY;
resizingChart.value.width = newWidth;
resizingChart.value.height = newHeight;
resizingChart.value.x = newX;
resizingChart.value.y = newY;
}
},
chartDragstart(event, chart) {
if (!event.dataTransfer)
};
const dropInCanvas = (event) => {
if (movingChart.value || resizingChart.value)
return;
const empty = document.createElement("canvas");
empty.setAttribute("data-action", "empty");
event.dataTransfer.setDragImage(empty, 0, 0);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
document.body.appendChild(empty);
this.movingChart = chart;
},
chartDragend() {
this.container.focus();
this.movingChart = null;
this.resizingChart = null;
document.querySelectorAll('canvas[data-action="empty"]').forEach((item) => item.remove());
},
resizeStart(event, chart, direction) {
if (!event.dataTransfer)
outCanvasDragover.value = false;
ctx.emit("canvas-drop", event, {
x: event.offsetX,
y: event.offsetY
});
};
const chartDragend = () => {
container.value.focus();
movingChart.value = null;
resizingChart.value = null;
document.querySelectorAll('.draggable-panel canvas[data-action="empty"]').forEach((item) => item.remove());
};
const dragenterCanvas = () => {
if (movingChart.value || resizingChart.value)
return;
outCanvasDragover.value = true;
};
const dragleaveCanvas = () => {
outCanvasDragover.value = false;
};
function hideDragImage(dataTransfer) {
const empty = document.createElement("canvas");
empty.setAttribute("data-action", "empty");
event.dataTransfer.setDragImage(empty, 0, 0);
event.dataTransfer.dropEffect = "move";
event.dataTransfer.effectAllowed = "move";
document.body.appendChild(empty);
this.resizingChart = chart;
this.resizeDirection = direction;
},
pointerDown(event) {
if (!this.canvasStatusMove || this.lock)
return;
this.pointerPressed = true;
const canvasEl = this.canvas;
canvasEl.setPointerCapture(event.pointerId);
this.point = { x: event.clientX, y: event.clientY };
this.lastPointermove = { x: event.clientX, y: event.clientY };
},
pointermove(event) {
if (!this.pointerPressed)
return;
event.preventDefault();
const current = { x: event.clientX, y: event.clientY };
this.diff.x = current.x - this.lastPointermove.x;
this.diff.y = current.y - this.lastPointermove.y;
this.lastPointermove = { x: current.x, y: current.y };
this.canvasX += this.diff.x;
this.canvasY += this.diff.y;
},
pointerUp() {
this.pointerPressed = false;
},
pointerCancel() {
this.pointerPressed = false;
},
dragenterCanvas() {
if (this.movingChart || this.resizingChart)
return;
this.outCanvasDragover = true;
},
dragleaveCanvas() {
this.outCanvasDragover = false;
},
dropInCanvas(event) {
if (this.movingChart || this.resizingChart)
return;
this.outCanvasDragover = false;
this.$emit("canvas-drop", event.offsetX, event.offsetY);
container.value.appendChild(empty);
dataTransfer.setDragImage(empty, 0, 0);
dataTransfer.dropEffect = "move";
dataTransfer.effectAllowed = "move";
}
}
});
const _hoisted_1 = ["data-id", "draggable", "onDragstart"];
const _hoisted_2 = { class: "content" };
const _hoisted_3 = { class: "resizable" };
const _hoisted_4 = ["onDragstart"];
const _hoisted_5 = ["onDragstart"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["draggable-panel", {
"lock": _ctx.lock
}]),
tabindex: -1,
ref: "container",
autofocus: "",
onKeydown: [
_cache[9] || (_cache[9] = withKeys(($event) => _ctx.canvasStatusMove = true, ["space"])),
_cache[10] || (_cache[10] = withModifiers((...args) => _ctx.scaleByKeyboard && _ctx.scaleByKeyboard(...args), ["meta"])),
_cache[11] || (_cache[11] = withModifiers((...args) => _ctx.scaleByKeyboard && _ctx.scaleByKeyboard(...args), ["ctrl"])),
_cache[13] || (_cache[13] = withKeys(withModifiers((...args) => _ctx.resetScale && _ctx.resetScale(...args), ["prevent"]), ["0"])),
_cache[14] || (_cache[14] = withKeys(withModifiers((...args) => _ctx.realScale && _ctx.realScale(...args), ["prevent"]), ["enter"]))
],
onKeyup: _cache[12] || (_cache[12] = withKeys(($event) => _ctx.canvasStatusMove = false, ["space"])),
onWheel: [
_cache[15] || (_cache[15] = withModifiers((...args) => _ctx.scaleByWheel && _ctx.scaleByWheel(...args), ["prevent", "ctrl"])),
_cache[16] || (_cache[16] = withModifiers((...args) => _ctx.scaleByWheel && _ctx.scaleByWheel(...args), ["prevent", "meta"]))
],
onDragover: _cache[17] || (_cache[17] = withModifiers((...args) => _ctx.dragoverContainer && _ctx.dragoverContainer(...args), ["prevent"]))
}, [
createElementVNode("div", {
class: normalizeClass(["canvas", {
"out-canvas-dragover": _ctx.outCanvasDragover,
"moving": _ctx.canvasStatusMove
}]),
ref: "canvas",
style: normalizeStyle(_ctx.canvasStyleComputed),
onPointerdown: _cache[2] || (_cache[2] = (...args) => _ctx.pointerDown && _ctx.pointerDown(...args)),
onPointermove: _cache[3] || (_cache[3] = (...args) => _ctx.pointermove && _ctx.pointermove(...args)),
onPointerup: _cache[4] || (_cache[4] = (...args) => _ctx.pointerUp && _ctx.pointerUp(...args)),
onPointercancel: _cache[5] || (_cache[5] = (...args) => _ctx.pointerCancel && _ctx.pointerCancel(...args)),
onDragenter: _cache[6] || (_cache[6] = (...args) => _ctx.dragenterCanvas && _ctx.dragenterCanvas(...args)),
onDragleave: _cache[7] || (_cache[7] = (...args) => _ctx.dragleaveCanvas && _ctx.dragleaveCanvas(...args)),
onDrop: _cache[8] || (_cache[8] = (...args) => _ctx.dropInCanvas && _ctx.dropInCanvas(...args))
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item, index2) => {
function init() {
const { offsetWidth, offsetHeight } = container.value;
const defaultMaxWidth = offsetWidth - props.padding;
const defaultMaxHeight = offsetHeight - props.padding;
const ratioContainer = offsetWidth / offsetHeight;
const ratioCanvas = props.width / props.height;
defaultScale.value = ratioContainer < ratioCanvas ? defaultMaxWidth / props.width : defaultMaxHeight / props.height;
defaultX.value = (offsetWidth - props.width) / 2;
defaultY.value = (offsetHeight - props.height) / 2;
scale.value = defaultScale.value;
canvasX.value = defaultX.value;
canvasY.value = defaultY.value;
}
function createResizableList(chartItem) {
const pointDirectionList = ["a", "b", "c", "d"];
const resizablePointDirectionList = ["e", "f", "g", "h"];
const lineDirectionList = ["i", "j", "k", "l"];
const resizableList = [];
pointDirectionList.forEach((direction) => {
resizableList.push(h("div", {
class: [
"resizable-point",
direction
],
key: direction,
tabindex: -1,
draggable: true,
onDragstart: (event) => resizeStart(event, chartItem, direction)
}));
});
resizablePointDirectionList.forEach((direction) => {
resizableList.push(h("div", {
class: [
"resizable-point",
direction
],
key: direction
}));
});
lineDirectionList.forEach((direction) => {
resizableList.push(h("div", {
class: [
"resizable-line",
direction
],
key: direction,
tabindex: -1,
draggable: true,
onDragstart: (event) => resizeStart(event, chartItem, direction)
}));
});
return resizableList;
}
function createChartList() {
const chartList = [];
props.data.forEach((item, index2) => {
var _a, _b;
return openBlock(), createElementBlock("div", {
class: normalizeClass(["chart-item", {
"moving": ((_a = _ctx.movingChart) == null ? void 0 : _a.id) === item.id,
"resizing": ((_b = _ctx.resizingChart) == null ? void 0 : _b.id) === item.id
}]),
const defaultSlot = ctx.slots.chart({
chart: item,
index: index2
});
const customSlot = ctx.slots[`chart-${item.id}`] ? ctx.slots[`chart-${item.id}`]({
chart: item,
index: index2
}) : null;
chartList.push(h("div", {
class: [
"chart-item",
((_a = movingChart.value) == null ? void 0 : _a.id) === item.id ? "moving" : "",
((_b = resizingChart.value) == null ? void 0 : _b.id) === item.id ? "resizing" : ""
],
key: item.id,
style: normalizeStyle(_ctx.chartStyleComputed(item, index2)),
"data-id": item.id,
tabindex: "-1",
draggable: !_ctx.lock,
onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.setChartPosition && _ctx.setChartPosition(...args)),
onDragstart: ($event) => _ctx.chartDragstart($event, item),
onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.chartDragend && _ctx.chartDragend(...args))
style: chartStyleComputed.value(item, index2),
["data-id"]: item.id,
tabindex: -1,
draggable: !props.lock,
onMousedown: setChartPosition,
onDragstart: (event) => chartDragstart(event, item),
onDragend: chartDragend
}, [
createElementVNode("div", _hoisted_2, [
renderSlot(_ctx.$slots, "chart-" + item.id, {
chart: item,
index: index2
}, () => [
renderSlot(_ctx.$slots, "chart", {
chart: item,
index: index2
}, void 0, true)
], true)
h("div", {
class: ["content"]
}, [
defaultSlot,
customSlot
]),
createElementVNode("div", _hoisted_3, [
(openBlock(), createElementBlock(Fragment, null, renderList(["a", "b", "c", "d"], (direction) => {
return createElementVNode("div", {
key: direction,
class: normalizeClass(["resizable-point", direction]),
tabindex: "-1",
draggable: "true",
onDragstart: withModifiers(($event) => _ctx.resizeStart($event, item, direction), ["stop"])
}, null, 42, _hoisted_4);
}), 64)),
(openBlock(), createElementBlock(Fragment, null, renderList(["e", "f", "g", "h"], (direction) => {
return createElementVNode("div", {
key: direction,
class: normalizeClass([direction, "resizable-point"])
}, null, 2);
}), 64)),
(openBlock(), createElementBlock(Fragment, null, renderList(["i", "j", "k", "l"], (direction) => {
return createElementVNode("div", {
key: direction,
class: normalizeClass([direction, "resizable-line"]),
tabindex: "-1",
draggable: "true",
onDragstart: withModifiers(($event) => _ctx.resizeStart($event, item, direction), ["stop"])
}, null, 42, _hoisted_5);
}), 64))
])
], 46, _hoisted_1);
}), 128))
], 38)
], 34);
}
var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4ced9f6c"], ["__file", "/Users/xingrong/Develop/workspace/draggable-panel/src/components/draggablePanel/index.vue"]]);
h("div", {
class: ["resizable"]
}, createResizableList(item))
]));
});
return chartList;
}
onMounted(() => {
init();
window.addEventListener("resize", init);
});
onBeforeUnmount(() => {
window.removeEventListener("resize", init);
});
return () => [
h("div", {
class: [
"draggable-panel",
props.lock ? "lock" : ""
],
tabindex: -1,
ref: container,
autofocus: true,
onkeydown(event) {
const { ctrlKey, metaKey } = event;
const code = event.code.toLowerCase();
if (code === "space")
return canvasStatusMove.value = true;
if (code === "equal" && (ctrlKey || metaKey))
return scaleAddByKeyboard(event);
if (code === "minus" && (ctrlKey || metaKey))
return scaleSubByKeyboard(event);
if (code === "digit0") {
event.preventDefault();
return resetScale();
}
if (code === "enter") {
event.preventDefault();
return realScale();
}
},
onkeyup(event) {
const code = event.code.toLowerCase();
if (code === "space")
canvasStatusMove.value = false;
},
onwheel: scaleByWheel,
onDragover: dragoverContainer
}, h("div", {
ref: canvas,
class: [
"canvas",
outCanvasDragover.value ? "out-canvas-dragover" : "",
canvasStatusMove.value ? "moving" : ""
],
style: canvasStyleComputed.value,
onPointerdown: pointerDown,
onPointermove: pointermove,
onPointerup: pointerUp,
onPointercancel: pointerCancel,
onDragenter: dragenterCanvas,
onDragleave: dragleaveCanvas,
onDrop: dropInCanvas
}, createChartList()))
];
}
}));
export { index as default };
//# sourceMappingURL=draggable-panel.es.js.map

4

dist/draggable-panel.umd.js

@@ -1,3 +0,3 @@

(function(t,l){typeof exports=="object"&&typeof module!="undefined"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(t=typeof globalThis!="undefined"?globalThis:t||self,t["draggable-panel"]=l(t.Vue))})(this,function(t){"use strict";var V=Object.defineProperty,A=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var P=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var X=(t,l,f)=>l in t?V(t,l,{enumerable:!0,configurable:!0,writable:!0,value:f}):t[l]=f,Y=(t,l)=>{for(var f in l||(l={}))U.call(l,f)&&X(t,f,l[f]);if(P)for(var f of P(l))O.call(l,f)&&X(t,f,l[f]);return t},B=(t,l)=>A(t,L(l));var l=(()=>`.draggable-panel[data-v-4ced9f6c]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel *[data-v-4ced9f6c]{outline:none}.draggable-panel.lock .chart-item[data-v-4ced9f6c]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-4ced9f6c]{display:none!important}.draggable-panel .canvas[data-v-4ced9f6c]{position:relative;background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .canvas.moving[data-v-4ced9f6c]{cursor:move}.draggable-panel .canvas[data-v-4ced9f6c]:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(25,118,210,.3);visibility:hidden;opacity:0;transition:all .3s;z-index:10000}.draggable-panel .canvas.out-canvas-dragover[data-v-4ced9f6c]:after{visibility:visible;opacity:1}.draggable-panel .chart-item[data-v-4ced9f6c]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content[data-v-4ced9f6c]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item[data-v-4ced9f6c]:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable[data-v-4ced9f6c]{display:block}.draggable-panel .chart-item.moving .resizable-point[data-v-4ced9f6c]{display:none!important}.draggable-panel .chart-item.resizing .resizable[data-v-4ced9f6c]{display:block}.draggable-panel .chart-item .resizable[data-v-4ced9f6c]{display:none}.draggable-panel .chart-item .resizable .resizable-point[data-v-4ced9f6c]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point[data-v-4ced9f6c]:after{content:"";display:block;width:8px;height:8px;border:2px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line[data-v-4ced9f6c]{position:absolute;box-sizing:border-box;z-index:10}.draggable-panel .chart-item .resizable .resizable-line[data-v-4ced9f6c]:after{content:"";display:block;width:100%;height:100%;background:#1976D2}.draggable-panel .chart-item .resizable .a[data-v-4ced9f6c]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b[data-v-4ced9f6c]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .c[data-v-4ced9f6c]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .d[data-v-4ced9f6c]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .e[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .f[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .g[data-v-4ced9f6c],.draggable-panel .chart-item .resizable .h[data-v-4ced9f6c]{pointer-events:none}.draggable-panel .chart-item .resizable .e[data-v-4ced9f6c]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .f[data-v-4ced9f6c]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .g[data-v-4ced9f6c]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .h[data-v-4ced9f6c]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i[data-v-4ced9f6c]{top:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(-50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .j[data-v-4ced9f6c]{right:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(50%);cursor:ew-resize}.draggable-panel .chart-item .resizable .k[data-v-4ced9f6c]{bottom:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .l[data-v-4ced9f6c]{left:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(-50%);cursor:ew-resize}
`)(),f=(e,a)=>{const r=e.__vccOpts||e;for(const[d,m]of a)r[d]=m;return r};const W=t.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},setup(e){const a=t.ref(null),r=t.ref(null),d=t.ref(!1),m=t.ref(!1),p=t.ref(!1),i=t.ref(1),c=t.ref(1),h=t.ref(0),g=t.ref(0),n=t.ref(0),s=t.ref(0),o=t.ref(""),b=t.ref(null),u=t.ref(null),v=t.ref({x:0,y:0}),y=t.ref({x:0,y:0}),z=t.ref({x:0,y:0}),w=t.ref({x:0,y:0}),j=t.computed(()=>B(Y({},e.canvasStyle),{width:e.width+"px",height:e.height+"px",transform:[`translate3d(${n.value}px, ${s.value}px, 0)`,`scale(${c.value})`].join(" ")})),I=t.computed(()=>(C,k)=>{const{width:x,height:M,x:S,y:E}=C;return B(Y({},e.chartStyle),{width:x+"px",height:M+"px",transform:`translateX(${S}px) translateY(${E}px)`,"z-index":100+k})});function D(){const{offsetWidth:C,offsetHeight:k}=a.value,x=C-e.padding,M=k-e.padding,S=C/k,E=e.width/e.height;i.value=S<E?x/e.width:M/e.height,h.value=(C-e.width)/2,g.value=(k-e.height)/2,c.value=i.value,n.value=h.value,s.value=g.value}return t.onMounted(()=>{D(),window.addEventListener("resize",D)}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",D)}),{container:a,canvas:r,defaultX:h,defaultY:g,defaultScale:i,scale:c,point:y,lastPointermove:z,diff:v,movingChart:b,resizingChart:u,resizeDirection:o,chartPosition:w,canvasX:n,canvasY:s,canvasStatusMove:d,pointerPressed:m,outCanvasDragover:p,canvasStyleComputed:j,chartStyleComputed:I}},watch:{scale(e){this.$emit("canvas-scale",e)}},methods:{scaleByWheel(e){if(this.lock)return;let a=1/(1+e.deltaY*.001),r=this.scale*a;r>this.scaleMax&&(a=this.scaleMax/this.scale,r=this.scaleMax),r<this.scaleMin&&(a=this.scaleMin/this.scale,r=this.scaleMin),this.scale=r;const d={x:(a-1)*this.width*.5,y:(a-1)*this.height*.5};this.canvasX-=(a-1)*(e.clientX-this.canvasX)-d.x,this.canvasY-=(a-1)*(e.clientY-this.canvasY)-d.y},scaleByKeyboard(e){const{key:a}=e;if(["=","-"].includes(a)&&this.lock)return e.preventDefault();if(a==="="){e.preventDefault();let r=this.scale+.1;r>this.scaleMax&&(r=this.scaleMax),this.scale=r}if(a==="-"){e.preventDefault();let r=this.scale-.1;r<this.scaleMin&&(r=this.scaleMin),this.scale=r}},resetScale(){this.lock||(this.scale=this.defaultScale,this.canvasX=this.defaultX,this.canvasY=this.defaultY)},realScale(){if(this.lock)return;const{offsetWidth:e,offsetHeight:a}=this.container;this.scale=1,this.canvasX=(e-this.width)/2,this.canvasY=(a-this.height)/2},setChartPosition(e){this.chartPosition={x:e.clientX,y:e.clientY}},dragoverContainer(e){const{clientX:a,clientY:r}=e,d=(a-this.chartPosition.x)/this.scale,m=(r-this.chartPosition.y)/this.scale;if(this.chartPosition={x:a,y:r},this.movingChart){const{width:p,height:i,x:c,y:h}=this.movingChart,g=this.width-p,n=this.height-i;let s=c+d,o=h+m;s<0&&(s=0),o<0&&(o=0),s>g&&(s=g),o>n&&(o=n),this.movingChart.x=s,this.movingChart.y=o}if(this.resizingChart){const{width:p,height:i,x:c,y:h}=this.resizingChart,g=this.width-c,n=this.height-h;let s=p,o=i,b=c,u=h;const v=()=>{s+=d,s<this.chartMinWidth&&(s=p),s>g&&(s=g)},y=()=>{o+=m,o<this.chartMinHeight&&(o=i),o>n&&(o=n)},z=()=>{b=c+d,s=p-d,b<0&&(b=0,s=p+c),s<this.chartMinWidth&&(s=p,b=c)},w=()=>{u=h+m,o=i-m,u<0&&(u=0,o=i+h),o<this.chartMinHeight&&(o=i,u=h)};this.resizeDirection==="a"&&(z(),w()),this.resizeDirection==="b"&&(v(),w()),this.resizeDirection==="c"&&(v(),y()),this.resizeDirection==="d"&&(z(),y()),this.resizeDirection==="i"&&w(),this.resizeDirection==="j"&&v(),this.resizeDirection==="k"&&y(),this.resizeDirection==="l"&&z(),this.resizingChart.width=s,this.resizingChart.x=b,this.resizingChart.height=o,this.resizingChart.y=u}},chartDragstart(e,a){if(!e.dataTransfer)return;const r=document.createElement("canvas");r.setAttribute("data-action","empty"),e.dataTransfer.setDragImage(r,0,0),e.dataTransfer.effectAllowed="move",e.dataTransfer.dropEffect="move",document.body.appendChild(r),this.movingChart=a},chartDragend(){this.container.focus(),this.movingChart=null,this.resizingChart=null,document.querySelectorAll('canvas[data-action="empty"]').forEach(e=>e.remove())},resizeStart(e,a,r){if(!e.dataTransfer)return;const d=document.createElement("canvas");d.setAttribute("data-action","empty"),e.dataTransfer.setDragImage(d,0,0),e.dataTransfer.dropEffect="move",e.dataTransfer.effectAllowed="move",document.body.appendChild(d),this.resizingChart=a,this.resizeDirection=r},pointerDown(e){if(!this.canvasStatusMove||this.lock)return;this.pointerPressed=!0,this.canvas.setPointerCapture(e.pointerId),this.point={x:e.clientX,y:e.clientY},this.lastPointermove={x:e.clientX,y:e.clientY}},pointermove(e){if(!this.pointerPressed)return;e.preventDefault();const a={x:e.clientX,y:e.clientY};this.diff.x=a.x-this.lastPointermove.x,this.diff.y=a.y-this.lastPointermove.y,this.lastPointermove={x:a.x,y:a.y},this.canvasX+=this.diff.x,this.canvasY+=this.diff.y},pointerUp(){this.pointerPressed=!1},pointerCancel(){this.pointerPressed=!1},dragenterCanvas(){this.movingChart||this.resizingChart||(this.outCanvasDragover=!0)},dragleaveCanvas(){this.outCanvasDragover=!1},dropInCanvas(e){this.movingChart||this.resizingChart||(this.outCanvasDragover=!1,this.$emit("canvas-drop",e.offsetX,e.offsetY))}}}),F=["data-id","draggable","onDragstart"],$={class:"content"},q={class:"resizable"},N=["onDragstart"],K=["onDragstart"];function H(e,a,r,d,m,p){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["draggable-panel",{lock:e.lock}]),tabindex:-1,ref:"container",autofocus:"",onKeydown:[a[9]||(a[9]=t.withKeys(i=>e.canvasStatusMove=!0,["space"])),a[10]||(a[10]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["meta"])),a[11]||(a[11]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["ctrl"])),a[13]||(a[13]=t.withKeys(t.withModifiers((...i)=>e.resetScale&&e.resetScale(...i),["prevent"]),["0"])),a[14]||(a[14]=t.withKeys(t.withModifiers((...i)=>e.realScale&&e.realScale(...i),["prevent"]),["enter"]))],onKeyup:a[12]||(a[12]=t.withKeys(i=>e.canvasStatusMove=!1,["space"])),onWheel:[a[15]||(a[15]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["prevent","ctrl"])),a[16]||(a[16]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["prevent","meta"]))],onDragover:a[17]||(a[17]=t.withModifiers((...i)=>e.dragoverContainer&&e.dragoverContainer(...i),["prevent"]))},[t.createElementVNode("div",{class:t.normalizeClass(["canvas",{"out-canvas-dragover":e.outCanvasDragover,moving:e.canvasStatusMove}]),ref:"canvas",style:t.normalizeStyle(e.canvasStyleComputed),onPointerdown:a[2]||(a[2]=(...i)=>e.pointerDown&&e.pointerDown(...i)),onPointermove:a[3]||(a[3]=(...i)=>e.pointermove&&e.pointermove(...i)),onPointerup:a[4]||(a[4]=(...i)=>e.pointerUp&&e.pointerUp(...i)),onPointercancel:a[5]||(a[5]=(...i)=>e.pointerCancel&&e.pointerCancel(...i)),onDragenter:a[6]||(a[6]=(...i)=>e.dragenterCanvas&&e.dragenterCanvas(...i)),onDragleave:a[7]||(a[7]=(...i)=>e.dragleaveCanvas&&e.dragleaveCanvas(...i)),onDrop:a[8]||(a[8]=(...i)=>e.dropInCanvas&&e.dropInCanvas(...i))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.data,(i,c)=>{var h,g;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["chart-item",{moving:((h=e.movingChart)==null?void 0:h.id)===i.id,resizing:((g=e.resizingChart)==null?void 0:g.id)===i.id}]),key:i.id,style:t.normalizeStyle(e.chartStyleComputed(i,c)),"data-id":i.id,tabindex:"-1",draggable:!e.lock,onMousedown:a[0]||(a[0]=(...n)=>e.setChartPosition&&e.setChartPosition(...n)),onDragstart:n=>e.chartDragstart(n,i),onDragend:a[1]||(a[1]=(...n)=>e.chartDragend&&e.chartDragend(...n))},[t.createElementVNode("div",$,[t.renderSlot(e.$slots,"chart-"+i.id,{chart:i,index:c},()=>[t.renderSlot(e.$slots,"chart",{chart:i,index:c},void 0,!0)],!0)]),t.createElementVNode("div",q,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["a","b","c","d"],n=>t.createElementVNode("div",{key:n,class:t.normalizeClass(["resizable-point",n]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(s=>e.resizeStart(s,i,n),["stop"])},null,42,N)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["e","f","g","h"],n=>t.createElementVNode("div",{key:n,class:t.normalizeClass([n,"resizable-point"])},null,2)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["i","j","k","l"],n=>t.createElementVNode("div",{key:n,class:t.normalizeClass([n,"resizable-line"]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(s=>e.resizeStart(s,i,n),["stop"])},null,42,K)),64))])],46,F)}),128))],38)],34)}var T=f(W,[["render",H],["__scopeId","data-v-4ced9f6c"],["__file","/Users/xingrong/Develop/workspace/draggable-panel/src/components/draggablePanel/index.vue"]]);return T});
(function(t,s){typeof exports=="object"&&typeof module!="undefined"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(t=typeof globalThis!="undefined"?globalThis:t||self,t["draggable-panel"]=s(t.Vue))})(this,function(t){"use strict";var pe=Object.defineProperty,ve=Object.defineProperties;var me=Object.getOwnPropertyDescriptors;var U=Object.getOwnPropertySymbols;var xe=Object.prototype.hasOwnProperty,ye=Object.prototype.propertyIsEnumerable;var V=(t,s,h)=>s in t?pe(t,s,{enumerable:!0,configurable:!0,writable:!0,value:h}):t[s]=h,A=(t,s)=>{for(var h in s||(s={}))xe.call(s,h)&&V(t,h,s[h]);if(U)for(var h of U(s))ye.call(s,h)&&V(t,h,s[h]);return t},B=(t,s)=>ve(t,me(s));var s=(()=>`.draggable-panel{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel *{outline:none}.draggable-panel.lock .chart-item:hover{filter:none}.draggable-panel.lock .chart-item .resizable{display:none!important}.draggable-panel .canvas{position:relative;background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .canvas.moving{cursor:move}.draggable-panel .canvas:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(25,118,210,.3);visibility:hidden;opacity:0;transition:all .3s;z-index:10000}.draggable-panel .canvas.out-canvas-dragover:after{visibility:visible;opacity:1}.draggable-panel .chart-item{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable{display:block}.draggable-panel .chart-item.moving .resizable-point{display:none!important}.draggable-panel .chart-item.resizing .resizable{display:block}.draggable-panel .chart-item .resizable{display:none}.draggable-panel .chart-item .resizable .resizable-point{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point:after{content:"";display:block;width:8px;height:8px;border:2px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line{position:absolute;box-sizing:border-box;z-index:10}.draggable-panel .chart-item .resizable .resizable-line:after{content:"";display:block;width:100%;height:100%;background:#1976D2}.draggable-panel .chart-item .resizable .a{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .c{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .d{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .e,.draggable-panel .chart-item .resizable .f,.draggable-panel .chart-item .resizable .g,.draggable-panel .chart-item .resizable .h{pointer-events:none}.draggable-panel .chart-item .resizable .e{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .f{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .g{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .h{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i{top:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(-50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .j{right:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(50%);cursor:ew-resize}.draggable-panel .chart-item .resizable .k{bottom:0;left:0;width:100%!important;height:8px;padding-top:3px;padding-bottom:3px;padding-left:0!important;padding-right:0!important;transform:translateY(50%);cursor:ns-resize}.draggable-panel .chart-item .resizable .l{left:0;top:0;height:100%!important;width:8px;padding-top:0!important;padding-bottom:0!important;padding-left:3px;padding-right:3px;transform:translate(-50%);cursor:ew-resize}
`)(),h=t.markRaw(t.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},emits:["canvas-scale","canvas-drop"],setup(i,z){const w=t.ref(null),T=t.ref(null),C=t.ref(!1),E=t.ref(!1),S=t.ref(!1),W=t.ref(1),d=t.ref(1),F=t.ref(0),L=t.ref(0),m=t.ref(0),x=t.ref(0),I=t.ref(""),p=t.ref(null),g=t.ref(null),P=t.ref({x:0,y:0}),G=t.ref({x:0,y:0}),X=t.ref({x:0,y:0}),q=t.ref({x:0,y:0}),J=t.computed(()=>B(A({},i.canvasStyle),{width:i.width+"px",height:i.height+"px",transform:[`translate3d(${m.value}px, ${x.value}px, 0)`,`scale(${d.value})`].join(" ")})),Q=t.computed(()=>(e,a)=>{const{width:o,height:r,x:l,y:n}=e;return B(A({},i.chartStyle),{width:o+"px",height:r+"px",transform:`translateX(${l}px) translateY(${n}px)`,"z-index":100+a})});t.watch(d,e=>z.emit("canvas-scale",e));const Z=e=>{const{ctrlKey:a,metaKey:o}=e;if(!a&&!o||(e.preventDefault(),i.lock))return;let r=1/(1+e.deltaY*.001),l=d.value*r;l>i.scaleMax&&(r=i.scaleMax/d.value,l=i.scaleMax),l<i.scaleMin&&(r=i.scaleMin/d.value,l=i.scaleMin),d.value=l;const n={x:(r-1)*i.width*.5,y:(r-1)*i.height*.5};m.value-=(r-1)*(e.clientX-m.value)-n.x,x.value-=(r-1)*(e.clientY-x.value)-n.y},_=e=>{if(e.preventDefault(),i.lock)return;let a=d.value+.1;a>i.scaleMax&&(a=i.scaleMax),d.value=a},ee=e=>{if(e.preventDefault(),i.lock)return;let a=d.value-.1;a<i.scaleMin&&(a=i.scaleMin),d.value=a},ae=()=>{i.lock||(d.value=W.value,m.value=F.value,x.value=L.value)},te=()=>{if(i.lock)return;const{offsetWidth:e,offsetHeight:a}=w.value;d.value=1,m.value=(e-i.width)/2,x.value=(a-i.height)/2},ie=e=>{!C.value||i.lock||(E.value=!0,T.value.setPointerCapture(e.pointerId),G.value={x:e.clientX,y:e.clientY},X.value={x:e.clientX,y:e.clientY})},ne=e=>{if(!E.value)return;e.preventDefault();const a={x:e.clientX,y:e.clientY};P.value={x:a.x-X.value.x,y:a.y-X.value.y},X.value={x:a.x,y:a.y},m.value+=P.value.x,x.value+=P.value.y},re=()=>{E.value=!1},le=()=>{E.value=!1},oe=e=>{q.value={x:e.clientX,y:e.clientY}},se=(e,a)=>{!e.dataTransfer||(R(e.dataTransfer),p.value=a)},O=(e,a,o)=>{e.stopPropagation(),e.dataTransfer&&(R(e.dataTransfer),g.value=a,I.value=o)},ce=e=>{e.preventDefault();const{clientX:a,clientY:o}=e,r=(a-q.value.x)/d.value,l=(o-q.value.y)/d.value;if(q.value={x:a,y:o},p.value){const{width:n,height:u,x:v,y}=p.value,k=i.width-n,D=i.height-u;let f=v+r,c=y+l;f<0&&(f=0),c<0&&(c=0),f>k&&(f=k),c>D&&(c=D),p.value.x=f,p.value.y=c}if(g.value){const{width:n,height:u,x:v,y}=g.value,k=i.width-v,D=i.height-y,f=I.value;let c=n,b=u,M=v,Y=y;const j=()=>{c+=r,c<i.chartMinWidth&&(c=n),c>k&&(c=k)},$=()=>{b+=l,b<i.chartMinHeight&&(b=u),b>D&&(b=D)},N=()=>{M=v+r,c=n-r,M<0&&(M=0,c=n+v),c<i.chartMinWidth&&(c=n,M=v)},K=()=>{Y=y+l,b=u-l,Y<0&&(Y=0,b=u+y),b<i.chartMinHeight&&(b=u,Y=y)};f==="a"&&(N(),K()),f==="b"&&(j(),K()),f==="c"&&(j(),$()),f==="d"&&(N(),$()),f==="i"&&K(),f==="j"&&j(),f==="k"&&$(),f==="l"&&N(),g.value.width=c,g.value.height=b,g.value.x=M,g.value.y=Y}},de=e=>{p.value||g.value||(S.value=!1,z.emit("canvas-drop",e,{x:e.offsetX,y:e.offsetY}))},ue=()=>{w.value.focus(),p.value=null,g.value=null,document.querySelectorAll('.draggable-panel canvas[data-action="empty"]').forEach(e=>e.remove())},fe=()=>{p.value||g.value||(S.value=!0)},he=()=>{S.value=!1};function R(e){const a=document.createElement("canvas");a.setAttribute("data-action","empty"),w.value.appendChild(a),e.setDragImage(a,0,0),e.dropEffect="move",e.effectAllowed="move"}function H(){const{offsetWidth:e,offsetHeight:a}=w.value,o=e-i.padding,r=a-i.padding,l=e/a,n=i.width/i.height;W.value=l<n?o/i.width:r/i.height,F.value=(e-i.width)/2,L.value=(a-i.height)/2,d.value=W.value,m.value=F.value,x.value=L.value}function ge(e){const a=["a","b","c","d"],o=["e","f","g","h"],r=["i","j","k","l"],l=[];return a.forEach(n=>{l.push(t.h("div",{class:["resizable-point",n],key:n,tabindex:-1,draggable:!0,onDragstart:u=>O(u,e,n)}))}),o.forEach(n=>{l.push(t.h("div",{class:["resizable-point",n],key:n}))}),r.forEach(n=>{l.push(t.h("div",{class:["resizable-line",n],key:n,tabindex:-1,draggable:!0,onDragstart:u=>O(u,e,n)}))}),l}function be(){const e=[];return i.data.forEach((a,o)=>{var n,u;const r=z.slots.chart({chart:a,index:o}),l=z.slots[`chart-${a.id}`]?z.slots[`chart-${a.id}`]({chart:a,index:o}):null;e.push(t.h("div",{class:["chart-item",((n=p.value)==null?void 0:n.id)===a.id?"moving":"",((u=g.value)==null?void 0:u.id)===a.id?"resizing":""],key:a.id,style:Q.value(a,o),["data-id"]:a.id,tabindex:-1,draggable:!i.lock,onMousedown:oe,onDragstart:v=>se(v,a),onDragend:ue},[t.h("div",{class:["content"]},[r,l]),t.h("div",{class:["resizable"]},ge(a))]))}),e}return t.onMounted(()=>{H(),window.addEventListener("resize",H)}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",H)}),()=>[t.h("div",{class:["draggable-panel",i.lock?"lock":""],tabindex:-1,ref:w,autofocus:!0,onkeydown(e){const{ctrlKey:a,metaKey:o}=e,r=e.code.toLowerCase();if(r==="space")return C.value=!0;if(r==="equal"&&(a||o))return _(e);if(r==="minus"&&(a||o))return ee(e);if(r==="digit0")return e.preventDefault(),ae();if(r==="enter")return e.preventDefault(),te()},onkeyup(e){e.code.toLowerCase()==="space"&&(C.value=!1)},onwheel:Z,onDragover:ce},t.h("div",{ref:T,class:["canvas",S.value?"out-canvas-dragover":"",C.value?"moving":""],style:J.value,onPointerdown:ie,onPointermove:ne,onPointerup:re,onPointercancel:le,onDragenter:fe,onDragleave:he,onDrop:de},be()))]}}));return h});
//# sourceMappingURL=draggable-panel.umd.js.map

5

package.json
{
"name": "draggable-panel",
"version": "1.0.7",
"version": "1.0.8",
"description": "Vue draggable panel",

@@ -22,2 +22,3 @@ "author": "Cainier <xingrong.dev@gmail.com>",

],
"typings": "./types/draggable-panel/index.d.ts",
"main": "./dist/draggable-panel.umd.js",

@@ -37,3 +38,3 @@ "module": "./dist/draggable-panel.es.js",

"scripts": {
"dev": "vite",
"dev": "vite --host",
"build:lib": "vite build --mode lib",

@@ -40,0 +41,0 @@ "build:example": "vite build --mode example",

11

README.md

@@ -118,6 +118,9 @@ # Vue Draggable Panel

- Parameters:
- x: number
- Description: Canvas position X
- y: number
- Description: Canvas position Y
- event: DragEvent
- Description: DragEvent
- position: Object
- x: number
- Description: Canvas position X
- y: number
- Description: Canvas position Y

@@ -124,0 +127,0 @@ ### Slots

dist/draggable-panel.es.js.map

Sorry, the diff of this file is not supported yet

dist/draggable-panel.umd.js.map

Sorry, the diff of this file is not supported yet

dist/style.css

Sorry, the diff of this file is not supported yet