Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// so draw that manually at the bottom of the arrow
const edge = new Konva.Line({
points: [
x - pointerLength,
0,
x + pointerLength,
0,
],
fill: 'black',
stroke: 'black',
strokeWidth: pointerLength * 0.75,
});
this.add(edge);
// The main (inside) arrow is exported so that we can change the color later
this.base = new Konva.Arrow({
points: [
x,
0,
x,
y * 0.8,
],
pointerLength,
pointerWidth: pointerLength,
fill: 'white',
stroke: 'white',
strokeWidth: pointerLength * 1.25,
});
this.add(this.base);
// A circle will appear on the body of the arrow to indicate the type of clue given
this.circle = new Konva.Circle({
globals.elements.currentPlayerArrow.add(arrowBorder);
const arrowBorderEdge = new Konva.Line({
points: [
(arrowValues.spacing) * winW,
((arrowValues.h / 2) - 0.005) * winH,
(arrowValues.spacing) * winW,
((arrowValues.h / 2) + 0.005) * winH,
],
fill: 'black',
stroke: 'black',
strokeWidth: 5,
});
globals.elements.currentPlayerArrow.add(arrowBorderEdge);
const arrowMain = new Konva.Arrow({
points: [
arrowValues.spacing * winW,
(arrowValues.h / 2) * winH,
(arrowValues.w - arrowValues.spacing) * winW,
(arrowValues.h / 2) * winH,
],
pointerLength: 10,
pointerWidth: 10,
fill: LABEL_COLOR,
stroke: LABEL_COLOR,
strokeWidth: 5,
});
globals.elements.currentPlayerArrow.add(arrowMain);
// Set the "Current Player" area up for this specific turn
globals.elements.currentPlayerArea.update = function update(currentPlayerIndex) {
x,
y,
},
visible: false,
});
// Class variables
// (we can't initialize these above due to "super()" not being on the first line)
this.pointingTo = null;
this.tween = null;
const pointerLength = 0.006 * winW;
// We want there to be a black outline around the arrow,
// so we draw a second arrow that is slightly bigger than the first
const border = new Konva.Arrow({
points: [
x,
0,
x,
y * 0.8,
],
pointerLength,
pointerWidth: pointerLength,
fill: 'black',
stroke: 'black',
strokeWidth: pointerLength * 2,
shadowBlur: pointerLength * 4,
shadowOpacity: 1,
});
this.add(border);
fill: 'black',
opacity: 0.2,
});
globals.elements.currentPlayerArea.add(rect2);
globals.elements.currentPlayerArrow = new Konva.Group({
x: (arrowValues.x + (arrowValues.w / 2)) * winW,
y: (currentPlayerAreaValues.h / 2) * winH,
offset: {
x: (arrowValues.w / 2) * winW,
y: (currentPlayerAreaValues.h / 2) * winH,
},
});
globals.elements.currentPlayerArea.add(globals.elements.currentPlayerArrow);
const arrowBorder = new Konva.Arrow({
points: [
arrowValues.spacing * winW,
(arrowValues.h / 2) * winH,
(arrowValues.w - arrowValues.spacing) * winW,
(arrowValues.h / 2) * winH,
],
pointerLength: 10,
pointerWidth: 10,
fill: 'black',
stroke: 'black',
strokeWidth: 10,
shadowBlur: 75,
shadowOpacity: 1,
});
globals.elements.currentPlayerArrow.add(arrowBorder);
const Line = function(a, type) {
const points = [];
a.points.map(p => {
points.push(p.x, p.y);
});
const shortPoints = shortLine(points);
const opt = Object.assign({}, type, {points: shortPoints});
const line = new Konva.Line(opt);
layer.add(line);
const arrowPoints = points.slice(points.length - 4, points.length);
const arrow = new Konva.Arrow({
x: 0,
y: 0,
points: arrowPoints,
pointerLength: type.strokeWidth * 3,
pointerWidth: type.strokeWidth * 3,
fill: type.stroke
});
layer.add(arrow);
};