Develop Reference

Nuxt js Custom cursor event listener not working after route change

I'm currently building a new website for our studio but can't get the custom cursor to work properly. Here's a custom cursor built with gsap and the result was great except when I navigate to another route and back to the home page, the mouseover event stops working and I can't find a reason why.
What could be causing this and how could this be fixed?
Thank you in advance!
Here's the CustomCursor component:
<template>
<div class="custom-cursor">
<div id="cursor-big" class="custom-cursor__ball custom-cursor__ball--big"></div>
<div id="cursor-small" class="custom-cursor__ball custom-cursor__ball--small"></div>
</div>
</template>
<script>
import gsap from "gsap";
export default {
props: {
hoverClass: {
type: String,
default: 'cursorHover'
}
},
mounted () {
const cursorBig = document.getElementById('cursor-big'),
cursorSmall = document.getElementById('cursor-small'),
links = document.getElementsByTagName("a"),
withClassHover = document.getElementsByClassName(this.hoverClass),
withHover = [...links, ...withClassHover];
// Event Listeners
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mousedown", onMouseHover);
document.addEventListener("mouseup", onMouseHoverOut);
document.addEventListener("mouseenter", () => {
cursorBig.style.opacity = 1;
cursorSmall.style.opacity = 1;
});
document.addEventListener("mouseleave", () => {
cursorBig.style.opacity = 0;
cursorSmall.style.opacity = 0;
});
withHover.forEach((element) => {
element.addEventListener("mouseover", onMouseHover);
element.addEventListener("mouseout", onMouseHoverOut);
})
// Event Handlers
function onMouseMove(e) {
cursorSmall.style.opacity = 1;
gsap.to(cursorBig, 0.4, {
x: e.clientX - 18.5,
y: e.clientY - 18.5
});
gsap.to(cursorSmall, 0.1, {
x: e.clientX - 4,
y: e.clientY - 4
});
}
function onMouseHover() {
gsap.to(cursorBig, 0.3, {
scale: 3,
});
}
function onMouseHoverOut() {
gsap.to(cursorBig, 0.3, {
scale: 1,
});
}
}
};
</script>
<style>
#media screen and (min-width:1100px) {
* {
cursor: none !important;
}
.custom-cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.custom-cursor__ball--big {
content: "";
width: 35px;
height: 35px;
background: white;
border-radius: 50%;
}
.custom-cursor__ball--small {
content: "";
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
}
}
</style>

Moved from comments:
Issue: Elements with cursorHover class are not on the DOM after they have been removed when you route off somewhere else. Mounted only fires once.
Fix: Handle reinitiating your events onto the dom elements, and destroy your custom event handlers as the route changes.
<template>
<div class="custom-cursor">
<div
id="cursor-big"
class="custom-cursor__ball custom-cursor__ball--big"
></div>
<div
id="cursor-small"
class="custom-cursor__ball custom-cursor__ball--small"
></div>
</div>
</template>
<script>
import gsap from "gsap";
export default {
name: "CustomCursor",
props: {
hoverClass: {
type: String,
default: "cursorHover",
},
},
data() {
return {
cursorBig: null,
cursorSmall: null,
withHover: [],
};
},
watch: {
"$route.path"() {
console.log("route change");
this.destroy();
this.$nextTick(this.init);
},
},
mounted() {
console.log("mounted");
this.$nextTick(this.init);
},
beforeDestroy() {
console.log("beforeDestroy");
this.destroy();
},
methods: {
init() {
console.log("init");
setTimeout(() => {
this.cursorBig = document.getElementById("cursor-big");
this.cursorSmall = document.getElementById("cursor-small");
this.withHover = [
...document.getElementsByTagName("a"),
...document.getElementsByClassName(this.hoverClass),
];
this.withHover.forEach((element) => {
element.addEventListener("mouseover", this.onMouseHover);
element.addEventListener("mouseout", this.onMouseHoverOut);
});
document.addEventListener("mousemove", this.onMouseMove);
document.addEventListener("mousedown", this.onMouseHover);
document.addEventListener("mouseup", this.onMouseHoverOut);
document.addEventListener("mouseenter", this.onMouseEnter);
document.addEventListener("mouseleave", this.onMouseLeave);
}, 100);
},
destroy() {
console.log("destroy");
this.withHover.forEach((element) => {
element.removeEventListener("mouseover", this.onMouseHover);
element.removeEventListener("mouseout", this.onMouseHoverOut);
});
document.removeEventListener("mousemove", this.onMouseMove);
document.removeEventListener("mousedown", this.onMouseHover);
document.removeEventListener("mouseup", this.onMouseHoverOut);
document.removeEventListener("mouseenter", this.onMouseEnter);
document.removeEventListener("mouseleave", this.onMouseLeave);
},
onMouseEnter() {
this.cursorBig.style.opacity = 1;
this.cursorSmall.style.opacity = 1;
},
onMouseLeave() {
this.cursorBig.style.opacity = 0;
this.cursorSmall.style.opacity = 0;
},
onMouseMove(e) {
this.cursorSmall.style.opacity = 1;
gsap.to(this.cursorBig, 0.4, {
x: e.clientX - 18.5,
y: e.clientY - 18.5,
});
gsap.to(this.cursorSmall, 0.1, {
x: e.clientX - 4,
y: e.clientY - 4,
});
},
onMouseHover() {
gsap.to(this.cursorBig, 0.3, {
scale: 3,
});
},
onMouseHoverOut() {
gsap.to(this.cursorBig, 0.3, {
scale: 1,
});
},
},
};
</script>
<style>
#media screen and (min-width: 1100px) {
* {
cursor: none !important;
}
.custom-cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.custom-cursor__ball--big {
content: "";
width: 35px;
height: 35px;
background: black;
border-radius: 50%;
}
.custom-cursor__ball--small {
content: "";
width: 6px;
height: 6px;
background: #000;
border-radius: 50%;
}
}
</style>

i currently facing the same issue, but it solved after adding,
this.$next.tick()
so, i just attached the handler when the components is mounted :
mounted() {
this.$nextTick(() => {
this.transitionController()
window.addEventListener('scroll', () => {
this.transitionController()
})
})
},

Pointer Events API and dragging

I'm trying to implement mobile-only touch UI using Pointer Events API and this just isn't working:
https://codepen.io/kyrsquir/full/gOrZEoe
The goal is to allow scrolling in the card and dragging the card between expanded and collapsed state within the same UI. I only managed to get dragging by the handle to work in Chrome emulator and iOS Safari. Dragging via card content doesn't work anywhere.
On Android Chrome dragging doesn't work at all.
The weirdest part is that the same UI works everywhere using touchstart, touchmove and touchend events (https://codepen.io/kyrsquir/full/QWNZzav) but performance of touchmove in Chrome on Android in the presence of scrollbar is so terrible that I'm trying to reimplement it with pointer events.
Vue component code:
<template>
<div class="container">
<div
:class="containerClass"
:style="containerStyle"
#pointerdown="pointerDownHandler"
#pointermove="pointerMoveHandler"
#pointerup="pointerUpHandler"
#pointerover="reportEvent"
#pointerenter="reportEvent"
#pointercancel="reportEvent"
#pointerout="reportEvent"
#pointerleave="reportEvent"
#gotpointercapture="reportEvent"
#lostpointercapture="reportEvent"
#transitionend="transitionEndHandler"
class="card"
>
<svg viewBox="0 0 100 20" always-swipeable="true" class="drag-handle">
<polyline points="27,10 73,10" stroke-linecap="round"></polyline>
</svg>
<div class="scrollbox" ref="scrollbox">
<div :key="item" class="item" v-for="item in items">
{{ item }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
deltaY: 0,
isDraggingByHandle: false,
isTransitioning: false,
items: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
],
offsetHeight: 0,
scrollboxHeight: 0,
scrollTop: 0,
touchAction: null,
verticalStates: [
{
translateY: 0,
},
{
translateY: window.innerHeight - 200,
},
],
verticalStateIndex: 0,
};
},
computed: {
activeVerticalState() {
return this.verticalStates[this.verticalStateIndex];
},
containerClass() {
return {
"show-scrollbar": this.isScrollable,
transition: this.isTransitioning,
};
},
containerStyle() {
return {
transform: `translateY(${this.translateY}px)`,
};
},
isAnySwipeAllowed() {
return this.isDraggingByHandle || !this.isScrollable;
},
isExpanded() {
return this.verticalStateIndex === 0;
},
isScrollable() {
return this.isExpanded && this.scrollHeight > this.offsetHeight;
},
isSwipeDown() {
return (
this.deltaY > 0 && (this.isAnySwipeAllowed || this.scrollTop === 0)
);
},
isSwipeUp() {
return (
this.deltaY < 0 &&
(this.isAnySwipeAllowed ||
this.offsetHeight + this.scrollTop === this.scrollHeight)
);
},
scrollbox() {
return this.$refs.scrollbox;
},
translateY() {
let translateY = this.activeVerticalState.translateY;
if (
this.touchAction === "verticalSwipe" &&
(this.isSwipeDown || this.isSwipeUp)
) {
translateY = translateY + this.deltaY;
}
return translateY;
},
},
mounted() {
this.updateScrollboxData();
},
methods: {
pointerDownHandler: function ({ clientY, target, pointerId }) {
console.log("pointerdown", target, pointerId);
target.setPointerCapture(pointerId);
this.updateScrollboxData();
this.isDraggingByHandle = Boolean(
target.getAttribute("always-swipeable")
);
this.touchStartClientY = clientY;
this.touchAction = "tap";
},
pointerMoveHandler: function ({ clientY, target, pointerId }) {
console.log("pointermove", target, pointerId, this.deltaY);
this.deltaY = clientY - this.touchStartClientY;
// promote touchAction to swipe or scroll depending on deltas and other variables
if (this.touchAction === "tap") {
if (this.isSwipeDown || this.isSwipeUp) {
this.touchAction = "verticalSwipe";
} else {
this.touchAction = "scroll";
this.updateScrollboxData();
}
}
},
pointerUpHandler: function ({ target, pointerId }) {
console.log("pointerup", target, pointerId);
target.releasePointerCapture(pointerId);
switch (this.touchAction) {
case "tap":
if (!this.isExpanded) {
this.verticalStateIndex = Math.max(this.verticalStateIndex - 1, 0);
this.isTransitioning = true;
}
break;
case "verticalSwipe":
if (this.isSwipeDown) {
this.verticalStateIndex = Math.min(
this.verticalStateIndex + 1,
this.verticalStates.length - 1
);
} else if (this.isSwipeUp) {
this.verticalStateIndex = Math.max(this.verticalStateIndex - 1, 0);
}
this.isTransitioning = true;
this.deltaY = 0;
break;
}
},
reportEvent({ type, target, pointerId }) {
console.log(type, target, pointerId);
},
transitionEndHandler() {
this.touchAction = null;
this.isTransitioning = false;
this.updateScrollboxData();
},
updateScrollboxData() {
const { scrollHeight, offsetHeight, scrollTop } = this.scrollbox;
this.offsetHeight = offsetHeight;
this.scrollHeight = scrollHeight;
this.scrollTop = scrollTop;
},
},
};
</script>
<style lang="scss" scoped>
.container {
display: flex;
justify-content: center;
margin-top: 5vh;
overflow: hidden;
touch-action: none;
.card {
pointer-events: all;
width: 90vw;
height: 100%;
touch-action: none;
&.transition {
transition: transform 0.15s ease-out;
}
.drag-handle {
stroke-width: 5px;
stroke: #bfbfc0;
width: 100%;
height: 30px;
background: pink;
}
.scrollbox {
overflow-y: hidden;
pointer-events: none;
background: green;
height: 85vh;
.item {
margin-bottom: 20px;
height: 150px;
font-size: 36px;
background: yellow;
}
}
&.show-scrollbar .scrollbox {
overflow-y: scroll;
pointer-events: all;
}
}
}
</style>

Mix-Blend mode doesn't work on custom cursor

I would like to add a mix-blend-mode: difference to the inner cursor, but I can't get it to work. I heard that the position: fixed applied to the cursor may cause the problem here. But I can't remove that property, because the cursor needs to follow when scrolling down. Does anyone know how to fix the problem here? Thank you in advance.
class Demo {
constructor() {
this.initCursor();
this.initHovers();
}
initCursor() {
const { Back } = window;
this.outerCursor = document.querySelector(".circle-cursor-outer");
this.innerCursor = document.querySelector(".circle-cursor-inner");
this.outerCursorBox = this.outerCursor.getBoundingClientRect();
this.outerCursorSpeed = 0;
this.easing = Back.easeOut.config(1.7);
this.clientX = -100;
this.clientY = -100;
this.showCursor = false;
const unveilCursor = () => {
TweenMax.set(this.innerCursor, {
x: this.clientX,
y: this.clientY
});
TweenMax.set(this.outerCursor, {
x: this.clientX - this.outerCursorBox.width / 2,
y: this.clientY - this.outerCursorBox.height / 2
});
setTimeout(() => {
this.outerCursorSpeed = 0.2;
}, 100);
this.showCursor = true;
};
document.addEventListener("mousemove", unveilCursor);
document.addEventListener("mousemove", e => {
this.clientX = e.clientX;
this.clientY = e.clientY;
});
const render = () => {
TweenMax.set(this.innerCursor, {
rotation: 90,
x: this.clientX,
y: this.clientY
});
if (!this.isStuck) {
TweenMax.to(this.outerCursor, this.outerCursorSpeed, {
x: this.clientX - this.outerCursorBox.width / 2,
y: this.clientY - this.outerCursorBox.height / 2
});
}
if (this.showCursor) {
document.removeEventListener("mousemove", unveilCursor);
}
requestAnimationFrame(render);
};
requestAnimationFrame(render);
}
initHovers() {
const handleMouseEnter = e => {
this.isStuck = true;
const target = e.currentTarget;
const box = target.getBoundingClientRect();
this.outerCursorOriginals = {
width: this.outerCursorBox.width,
height: this.outerCursorBox.height
};
TweenMax.to(this.innerCursor, 0.2, {
x: box.left,
y: box.top,
width: box.width,
height: box.height,
opacity: 0.4,
});
};
const handleMouseLeave = () => {
this.isStuck = false;
TweenMax.to(this.innerCursor, 0.2, {
width: this.outerCursorOriginals.width,
height: this.outerCursorOriginals.height,
opacity: 0.2,
});
};
const mainNavHoverTween = TweenMax.to(this.innerCursor, 0.3, {
ease: this.easing,
paused: true,
opacity: 1,
width: 70,
height: 70,
left: -35,
top: -35
});
const mainNavMouseEnter = () => {
this.outerCursorSpeed = 0;
TweenMax.set(this.innerCursor, { opacity: 1 });
mainNavHoverTween.play();
};
const mainNavMouseLeave = () => {
this.outerCursorSpeed = 0.2;
TweenMax.set(this.innerCursor, { opacity: 1 });
mainNavHoverTween.reverse();
};
const mainNavLinks = document.querySelectorAll("a");
mainNavLinks.forEach(item => {
item.addEventListener("mouseenter", mainNavMouseEnter);
item.addEventListener("mouseleave", mainNavMouseLeave);
});
}
}
const demo = new Demo();
body{
height: 500vh;
}
a{
color: black;
}
.circle-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 100%;
}
.circle-cursor-outer-badge {
opacity: 0.5;
transition: all 500ms ease-out;
}
.circle-cursor-inner {
width: 22.5px;
height: 22.5px;
left: -11.25px;
top: -11.25px;
z-index: 11000;
mix-blend-mode: difference;
background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
I am a link
<div class="circle-cursor circle-cursor-outer">
<img class="circle-cursor-outer-badge" draggable="false" width="120" src="https://svgshare.com/i/H2V.svg">
</div>
<div class="circle-cursor circle-cursor-inner"></div>
</body>

Just set background:white to both body and .circle-cursor-inner:
class Demo {
constructor() {
this.initCursor();
this.initHovers();
}
initCursor() {
const { Back } = window;
this.outerCursor = document.querySelector(".circle-cursor-outer");
this.innerCursor = document.querySelector(".circle-cursor-inner");
this.outerCursorBox = this.outerCursor.getBoundingClientRect();
this.outerCursorSpeed = 0;
this.easing = Back.easeOut.config(1.7);
this.clientX = -100;
this.clientY = -100;
this.showCursor = false;
const unveilCursor = () => {
TweenMax.set(this.innerCursor, {
x: this.clientX,
y: this.clientY
});
TweenMax.set(this.outerCursor, {
x: this.clientX - this.outerCursorBox.width / 2,
y: this.clientY - this.outerCursorBox.height / 2
});
setTimeout(() => {
this.outerCursorSpeed = 0.2;
}, 100);
this.showCursor = true;
};
document.addEventListener("mousemove", unveilCursor);
document.addEventListener("mousemove", e => {
this.clientX = e.clientX;
this.clientY = e.clientY;
});
const render = () => {
TweenMax.set(this.innerCursor, {
rotation: 90,
x: this.clientX,
y: this.clientY
});
if (!this.isStuck) {
TweenMax.to(this.outerCursor, this.outerCursorSpeed, {
x: this.clientX - this.outerCursorBox.width / 2,
y: this.clientY - this.outerCursorBox.height / 2
});
}
if (this.showCursor) {
document.removeEventListener("mousemove", unveilCursor);
}
requestAnimationFrame(render);
};
requestAnimationFrame(render);
}
initHovers() {
const handleMouseEnter = e => {
this.isStuck = true;
const target = e.currentTarget;
const box = target.getBoundingClientRect();
this.outerCursorOriginals = {
width: this.outerCursorBox.width,
height: this.outerCursorBox.height
};
TweenMax.to(this.innerCursor, 0.2, {
x: box.left,
y: box.top,
width: box.width,
height: box.height,
opacity: 0.4,
});
};
const handleMouseLeave = () => {
this.isStuck = false;
TweenMax.to(this.innerCursor, 0.2, {
width: this.outerCursorOriginals.width,
height: this.outerCursorOriginals.height,
opacity: 0.2,
});
};
const mainNavHoverTween = TweenMax.to(this.innerCursor, 0.3, {
ease: this.easing,
paused: true,
opacity: 1,
width: 70,
height: 70,
left: -35,
top: -35
});
const mainNavMouseEnter = () => {
this.outerCursorSpeed = 0;
TweenMax.set(this.innerCursor, { opacity: 1 });
mainNavHoverTween.play();
};
const mainNavMouseLeave = () => {
this.outerCursorSpeed = 0.2;
TweenMax.set(this.innerCursor, { opacity: 1 });
mainNavHoverTween.reverse();
};
const mainNavLinks = document.querySelectorAll("a");
mainNavLinks.forEach(item => {
item.addEventListener("mouseenter", mainNavMouseEnter);
item.addEventListener("mouseleave", mainNavMouseLeave);
});
}
}
const demo = new Demo();
body{
height: 500vh;
background:white;
}
a{
color: black;
}
.circle-cursor {
position: fixed;
left: 0;
top: 0;
pointer-events: none;
border-radius: 100%;
}
.circle-cursor-outer-badge {
opacity: 0.5;
transition: all 500ms ease-out;
}
.circle-cursor-inner {
width: 22.5px;
height: 22.5px;
left: -11.25px;
top: -11.25px;
z-index: 11000;
mix-blend-mode: difference;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
I am a link
<div class="circle-cursor circle-cursor-outer">
<img class="circle-cursor-outer-badge" draggable="false" width="120" src="https://svgshare.com/i/H2V.svg">
</div>
<div class="circle-cursor circle-cursor-inner"></div>
</body>

Fabric 3.4.0 Text formatting

I have been working on Fabric 3.4.0 and want to know how do I format the text, something show here IText tests
I have been using 1.5.0 version and it works fine but it doesn't work on the latest version can someone help me fix the issue with the cdn on 3.4.0
var canvas=new fabric.Canvas('canv');
var iTextSample = new fabric.IText('hello\nworld', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
0: {
0: { textDecoration: 'underline', fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
canvas.add(iTextSample);
function addHandler(id, fn, eventName) {
document.getElementById(id)[eventName || 'onclick'] = function() {
var el = this;
if (obj = canvas.getActiveObject()) {
fn.call(el, obj);
canvas.renderAll();
}
};
}
function setStyle(object, styleName, value) {
if (object.setSelectionStyles && object.isEditing) {
var style = { };
style[styleName] = value;
object.setSelectionStyles(style);
}
else {
object[styleName] = value;
}
}
function getStyle(object, styleName) {
return (object.getSelectionStyles && object.isEditing)
? object.getSelectionStyles()[styleName]
: object[styleName];
}
addHandler('underline', function(obj) {
var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1;
setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button id="underline">Underline it!!</button>
<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

After v2, textDecoration property is removed, and separated to underline, overline, linethrough to support multiple text decoration.
DEMO
var canvas=new fabric.Canvas('canv');
var value = false;
var iTextSample = new fabric.IText('hello\nworld', {
left: 50,
top: 50,
fontFamily: 'Helvetica',
fill: '#333',
lineHeight: 1.1,
styles: {
0: {
0: { underline: true, fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
canvas.add(iTextSample);
function addHandler(id, fn, eventName) {
document.getElementById(id)[eventName || 'onclick'] = function() {
var el = this;
if (obj = canvas.getActiveObject()) {
fn.call(el, obj);
canvas.renderAll();
}
};
}
function getStyle(object, styleName) {
return (object.getSelectionStyles && object.isEditing)
? object.getSelectionStyles()
: object[styleName];
}
addHandler('underline', function(obj) {
var selectionStyle = obj.getSelectionStyles();
value = !value;
if(selectionStyle.length)
obj.setSelectionStyles({underline: value});
else
obj.setSelectionStyles({underline: value}, 0, obj.text.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<button id="underline">Underline it!!</button>
<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

How to generate Canvas layer with on click button

i have a question - how to draw canvas layer (for example just simple square) with event on click on button in Vue.js? I have stage and on that stage with position x:0, y:0 i want after click on button to generate that square and with drag and drop to position it on that stage? I'm using Konvajs for creating Canvas
Can somebody help me?
<template>
<div id="main">
<h1></h1>
<div id="obszarroboczy" style="width: 500px; height: 600px;">
<v-stage ref="stage"
:config="configKonva"
#dragstart="handleDragstart"
#dragend="handleDragend">
<v-layer ref="layer">
<v-star
v-for="item in list"
:key="item.id"
:config="item"></v-star>
</v-layer>
<v-layer ref="dragLayer"></v-layer>
</v-stage>
</div>
<div class="col-md-6">
<button v-on:click="handleClick" id="more_canvas">More</button>
</div>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import draggable from "vuedraggable";
import swal from "sweetalert2";
import VueKonva from "vue-konva";
export default {
name: "EnumCurrencyIndex",
$mount: "#main",
components: {
draggable
},
data() {
return {
model: [],
editable: true,
isDragging: false,
delayedDragging: false,
type: "currency",
editedElement: null,
newElement: "",
list: [],
configKonva: {
width: 400,
height: 400
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
},
vm: {}
};
},
beforeMount() {
this.fetchData();
},
computed: {
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return this.model;
},
dragCanvas() {
return this.model;
}
},
watch: {
$route: "fetchData",
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
},
methods: {
handleDragstart(starComponent) {
var vm = this;
const shape = starComponent.getStage();
const dragLayer = vm.$refs.dragLayer.getStage();
const stage = vm.$refs.stage.getStage();
// moving to another layer will improve dragging performance
shape.moveTo(dragLayer);
stage.draw();
starComponent.config.shadowOffsetX = 15;
starComponent.config.shadowOffsetY = 15;
starComponent.config.scaleX = starComponent.config.startScale * 1.2;
starComponent.config.scaleY = starComponent.config.startScale * 1.2;
},
handleDragend(starComponent) {
var vm = this;
const shape = starComponent.getStage();
const layer = vm.$refs.layer.getStage();
const stage = vm.$refs.stage.getStage();
shape.moveTo(layer);
stage.draw();
shape.to({
duration: 0.5,
easing: Konva.Easings.ElasticEaseOut,
scaleX: starComponent.config.startScale,
scaleY: starComponent.config.startScale,
shadowOffsetX: 5,
shadowOffsetY: 5
});
},
handleClick(configCircle) {
var vm = this;
const shape = vm.$refs.layer.getStage();
const layer = vm.$refs.layer.getStage();
const stage = vm.$refs.stage.getStage();
console.log(1);
layer.add(configCircle);
stage.add(layer);
},
haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width ||
r2.x + r2.width < r1.x ||
r2.y > r1.y + r1.height ||
r2.y + r2.height < r1.y
);
},
orderList() {
this.model = this.model.sort((one, two) => {
return one.position - two.position;
});
},
onMove({ relatedContext, draggedContext }) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
fetchData() {
var vm = this;
axios
.get(`/api/${this.resource}?type=${this.type}`)
.then(function(response) {
Vue.set(vm.$data, "model", response.data.model);
})
.catch(function(error) {
console.log(error);
});
}
},
mounted() {
var box = document.getElementById("obszarroboczy");
this.configKonva.width = box.offsetWidth;
this.configKonva.height = box.offsetHeight;
var vm = this;
for (let n = 0; n < 30; n++) {
const scale = Math.random();
const stage = vm.$refs.stage.getStage();
vm.list.push({
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
rotation: Math.random() * 180,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: "#89b717",
opacity: 0.8,
draggable: true,
scaleX: scale,
scaleY: scale,
shadowColor: "black",
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5,
shadowOpacity: 0.6,
startScale: scale
});
};
},
directives: {
"element-focus": function(el, binding) {
if (binding.value) {
el.focus();
}
}
}
};
</script>
<style>
#obszarroboczy {
width: 100px;
height: 300px;
}
.normal {
background-color: grey;
}
.table td {
width: 100px;
height: 100px;
background: white;
border: 2px dotted black;
max-width: 100px;
padding: 5px;
}
.drag {
display: flex;
flex-direction: row;
}
.list {
flex-grow: 1;
max-width: 47%;
margin-right: 40px;
}
.name {
width: 50%;
display: inline-block;
height: 50px;
background: pink;
border: 5px green solid;
box-sizing: border-box;
padding: 5px;
}
.name.large {
width: 100%;
}
.dragArea {
min-height: 100px;
}
.dragArea img {
margin: 3px;
cursor: pointer;
}
</style>

var mainCanvas = new Vue({
el: '#main', // the element where the method wil lrender the canvas to
data: {
name: 'Vue.js'
},
methods: {
handleClick: function (event) { // handleClick is the method name for the button
var stage = new Konva.Stage({ // this line till the stage.add() line renders the draggable square
container: 'obszarroboczy',
width: 500,
height: 500
});
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 0,
y: 0,
width: 100,
height: 100,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(rect);
stage.add(layer);
}
}
});
I added comments to explain what certain important lines does but you can check out the official KonvaJS Docs in GitHub for a more detailed explanation on what each line above does.