@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
407 lines • 16.7 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef, useEffect, useState } from "react";
import { ConvertToPixels } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import { AttentionSeeker } from "react-awesome-reveal";
import PropTypes from "prop-types";
var normalizeCoords = function normalizeCoords(coords, canvasWidth, canvasHeight) {
var translateFromWidth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
var translateFromHeight = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
var centerOnPoint = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
var scaleWidthFromTranslatedWidth = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
var scaleHeightFromTranslatedHeight = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
return coords.map(function (coord) {
var yScale = canvasHeight / (translateFromHeight ? translateFromHeight : 1);
var xScale = canvasWidth / (translateFromWidth ? translateFromWidth : 1);
var scaledHeight = ConvertToPixels(coord.h || coord.height, canvasHeight) * (scaleHeightFromTranslatedHeight ? yScale : 1);
var scaledWidth = ConvertToPixels(coord.w || coord.width, canvasWidth) * (scaleWidthFromTranslatedWidth ? xScale : 1);
var scaledY = ConvertToPixels(coord.y, canvasHeight) * yScale - (centerOnPoint ? scaledHeight / 2 : 0);
var scaledX = ConvertToPixels(coord.x, canvasWidth) * xScale - (centerOnPoint ? scaledWidth / 2 : 0);
return _objectSpread(_objectSpread({}, coord), {}, {
h: scaledHeight,
w: scaledWidth,
y: scaledY,
x: scaledX
});
});
};
var drawCornerLines = function drawCornerLines(ctx, coords, config) {
var lineWidth = config.lineWidth,
cornerLength = config.cornerLength;
coords.forEach(function (coord) {
var x = coord.x,
y = coord.y,
w = coord.w,
h = coord.h,
strokeColor = coord.strokeColor;
var scaledCornerLength = cornerLength * Math.min(w, h) / 100;
var scaledLineWidth = lineWidth * Math.min(w, h) / 100;
ctx.strokeStyle = strokeColor || config.strokeColor;
ctx.lineWidth = scaledLineWidth;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + scaledCornerLength, y);
ctx.moveTo(x, y);
ctx.lineTo(x, y + scaledCornerLength);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x + w, y);
ctx.lineTo(x + w - scaledCornerLength, y);
ctx.moveTo(x + w, y);
ctx.lineTo(x + w, y + scaledCornerLength);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y + h);
ctx.lineTo(x + scaledCornerLength, y + h);
ctx.moveTo(x, y + h);
ctx.lineTo(x, y + h - scaledCornerLength);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x + w, y + h);
ctx.lineTo(x + w - scaledCornerLength, y + h);
ctx.moveTo(x + w, y + h);
ctx.lineTo(x + w, y + h - scaledCornerLength);
ctx.stroke();
});
return;
};
var drawFilledShapes = function drawFilledShapes(ctx, coords, config) {
coords.forEach(function (coord) {
var x = coord.x,
y = coord.y,
w = coord.w,
h = coord.h,
fillColor = coord.fillColor;
ctx.fillStyle = fillColor || config.fillColor;
ctx.fillRect(x, y, w, h);
});
return;
};
var drawBorderedShapes = function drawBorderedShapes(ctx, coords, config) {
coords.forEach(function (coord) {
var x = coord.x,
y = coord.y,
w = coord.w,
h = coord.h,
strokeColor = coord.strokeColor;
ctx.strokeStyle = strokeColor || config.strokeColor;
ctx.lineWidth = config.lineWidth;
ctx.strokeRect(x, y, w, h);
});
return;
};
var drawFreeDraw = function drawFreeDraw(ctx, coords, config) {
var strokeColor = config.strokeColor,
lineWidth = config.lineWidth;
ctx.strokeStyle = strokeColor;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(coords[0].x, coords[0].y);
coords.forEach(function (coord) {
ctx.lineTo(coord.x, coord.y);
});
ctx.stroke();
return;
};
function HUDCanvas(hudCanvasConfigurationSettings) {
var _hudCanvasConfigurati = hudCanvasConfigurationSettings.canvasContainerConfigurationSettings,
canvasContainerConfigurationSettings = _hudCanvasConfigurati === void 0 ? {} : _hudCanvasConfigurati,
_hudCanvasConfigurati2 = hudCanvasConfigurationSettings.annotationConfigurationSettings,
annotationConfigurationSettings = _hudCanvasConfigurati2 === void 0 ? {} : _hudCanvasConfigurati2,
_hudCanvasConfigurati3 = hudCanvasConfigurationSettings.canvasConfigurationSettings,
canvasConfigurationSettings = _hudCanvasConfigurati3 === void 0 ? {} : _hudCanvasConfigurati3,
_hudCanvasConfigurati4 = hudCanvasConfigurationSettings.shapeConfigurationSettings,
shapeConfigurationSettings = _hudCanvasConfigurati4 === void 0 ? {} : _hudCanvasConfigurati4,
_hudCanvasConfigurati5 = hudCanvasConfigurationSettings.mode,
mode = _hudCanvasConfigurati5 === void 0 ? "highTechDetection" : _hudCanvasConfigurati5,
_hudCanvasConfigurati6 = hudCanvasConfigurationSettings.animateAnnotations,
animateAnnotations = _hudCanvasConfigurati6 === void 0 ? true : _hudCanvasConfigurati6,
_hudCanvasConfigurati7 = hudCanvasConfigurationSettings.animationDuration,
animationDuration = _hudCanvasConfigurati7 === void 0 ? 569 : _hudCanvasConfigurati7,
_hudCanvasConfigurati8 = hudCanvasConfigurationSettings.animation,
animation = _hudCanvasConfigurati8 === void 0 ? "bounce" : _hudCanvasConfigurati8,
_hudCanvasConfigurati9 = hudCanvasConfigurationSettings.scaleHeightFromTranslatedHeight,
scaleHeightFromTranslatedHeight = _hudCanvasConfigurati9 === void 0 ? true : _hudCanvasConfigurati9,
_hudCanvasConfigurati10 = hudCanvasConfigurationSettings.scaleWidthFromTranslatedWidth,
scaleWidthFromTranslatedWidth = _hudCanvasConfigurati10 === void 0 ? true : _hudCanvasConfigurati10,
_hudCanvasConfigurati11 = hudCanvasConfigurationSettings.centerAnnotationsOnPoint,
centerAnnotationsOnPoint = _hudCanvasConfigurati11 === void 0 ? false : _hudCanvasConfigurati11,
_hudCanvasConfigurati12 = hudCanvasConfigurationSettings.centerOnPoint,
centerOnPoint = _hudCanvasConfigurati12 === void 0 ? false : _hudCanvasConfigurati12,
_hudCanvasConfigurati13 = hudCanvasConfigurationSettings.coordinates,
coordinates = _hudCanvasConfigurati13 === void 0 ? [] : _hudCanvasConfigurati13,
_hudCanvasConfigurati14 = hudCanvasConfigurationSettings.annotations,
annotations = _hudCanvasConfigurati14 === void 0 ? [] : _hudCanvasConfigurati14,
_hudCanvasConfigurati15 = hudCanvasConfigurationSettings.translateFromHeight,
translateFromHeight = _hudCanvasConfigurati15 === void 0 ? 1 : _hudCanvasConfigurati15,
_hudCanvasConfigurati16 = hudCanvasConfigurationSettings.translateFromWidth,
translateFromWidth = _hudCanvasConfigurati16 === void 0 ? 1 : _hudCanvasConfigurati16,
_hudCanvasConfigurati17 = hudCanvasConfigurationSettings.height,
height = _hudCanvasConfigurati17 === void 0 ? "100vh" : _hudCanvasConfigurati17,
_hudCanvasConfigurati18 = hudCanvasConfigurationSettings.width,
width = _hudCanvasConfigurati18 === void 0 ? "100vw" : _hudCanvasConfigurati18;
var _useState = useState(ConvertToPixels(height, window.innerHeight)),
_useState2 = _slicedToArray(_useState, 2),
canvasHeight = _useState2[0],
setCanvasHeight = _useState2[1];
var _useState3 = useState(ConvertToPixels(width, window.innerWidth)),
_useState4 = _slicedToArray(_useState3, 2),
canvasWidth = _useState4[0],
setCanvasWidth = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
freeDrawCoords = _useState6[0],
setFreeDrawCoords = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
drawing = _useState8[0],
setDrawing = _useState8[1];
var canvasRef = useRef(null);
var freeDrawingActivation = function freeDrawingActivation(e) {
if (mode === "freeDraw") {
setDrawing(true);
var rect = canvasRef.current.getBoundingClientRect();
return rect;
}
return null;
};
var exitFreeDrawing = function exitFreeDrawing() {
if (drawing) {
setDrawing(false);
}
return;
};
var freeDrawing = function freeDrawing(e) {
if (drawing) {
var rect = canvasRef.current.getBoundingClientRect();
setFreeDrawCoords(function (prevCoords) {
return [].concat(_toConsumableArray(prevCoords), [{
x: e.clientX - rect.left,
y: e.clientY - rect.top
}]);
});
}
return;
};
var handleMouseDown = function handleMouseDown(e) {
var rect = freeDrawingActivation(e);
if (rect) {
setFreeDrawCoords([{
x: e.clientX - rect.left,
y: e.clientY - rect.top
}]);
}
return;
};
var handleMouseMove = function handleMouseMove(e) {
freeDrawing(e);
return;
};
var handleMouseUp = function handleMouseUp() {
exitFreeDrawing();
return;
};
var handleTouchStart = function handleTouchStart(e) {
var rect = freeDrawingActivation(e);
if (rect) {
var touch = e.touches[0];
setFreeDrawCoords([{
x: touch.clientX - rect.left,
y: touch.clientY - rect.top
}]);
}
return;
};
var handleTouchMove = function handleTouchMove(e) {
if (drawing) {
var rect = canvasRef.current.getBoundingClientRect();
var touch = e.touches[0];
setFreeDrawCoords(function (prevCoords) {
return [].concat(_toConsumableArray(prevCoords), [{
x: touch.clientX - rect.left,
y: touch.clientY - rect.top
}]);
});
}
return;
};
var handleTouchEnd = function handleTouchEnd(e) {
exitFreeDrawing(e);
return;
};
useEffect(function () {
var canvas = canvasRef.current;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
var currentCanvasHeight = canvas.height;
var currentCanvasWidth = canvas.width;
var normalizedCoords = normalizeCoords(coordinates, currentCanvasWidth, currentCanvasHeight, translateFromWidth, translateFromHeight, centerOnPoint, scaleWidthFromTranslatedWidth, scaleHeightFromTranslatedHeight);
switch (mode) {
case "highTechDetection":
drawCornerLines(ctx, normalizedCoords, shapeConfigurationSettings);
break;
case "fill":
drawFilledShapes(ctx, normalizedCoords, shapeConfigurationSettings);
break;
case "bordered":
drawBorderedShapes(ctx, normalizedCoords, shapeConfigurationSettings);
break;
case "freeDraw":
drawFreeDraw(ctx, freeDrawCoords, shapeConfigurationSettings);
break;
default:
break;
}
}, [coordinates, mode, shapeConfigurationSettings, freeDrawCoords, canvasWidth, canvasHeight, translateFromWidth, translateFromHeight, centerOnPoint, scaleWidthFromTranslatedWidth, scaleHeightFromTranslatedHeight]);
useEffect(function () {
var handleResize = function handleResize() {
setCanvasHeight(ConvertToPixels(height, window.innerHeight));
setCanvasWidth(ConvertToPixels(width, window.innerWidth));
};
window.addEventListener("resize", handleResize);
handleResize();
return function () {
window.removeEventListener("resize", handleResize);
};
}, [height, width]);
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative"
}, canvasContainerConfigurationSettings)
}, /*#__PURE__*/React.createElement("canvas", {
ref: canvasRef,
style: _objectSpread({
border: "1px solid #000"
}, canvasConfigurationSettings),
height: canvasHeight,
width: canvasWidth,
onTouchStart: handleTouchStart,
onTouchMove: handleTouchMove,
onTouchEnd: handleTouchEnd,
onMouseMove: handleMouseMove,
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "fixed",
background: "transparent",
height: "".concat(canvasHeight, "px"),
width: "".concat(canvasWidth, "px"),
left: 0,
top: 0
}
}, annotations.map(function (annotation, index) {
var shape = coordinates.find(function (coord) {
return coord.id === annotation.id;
});
if (!shape) {
return null;
}
var normalizedShape = normalizeCoords([shape], canvasWidth, canvasHeight, translateFromWidth, translateFromHeight, centerAnnotationsOnPoint, scaleWidthFromTranslatedWidth, scaleHeightFromTranslatedHeight)[0];
var x = normalizedShape.x,
y = normalizedShape.y,
w = normalizedShape.w,
h = normalizedShape.h;
var position = annotation.position,
content = annotation.content;
var offsetY = 30;
var offsetX = 10;
var buffer = 27;
var style = {
position: "absolute",
pointerEvents: "none",
width: "69%"
};
switch (position) {
case "left":
style = _objectSpread(_objectSpread({}, style), {}, {
transform: "translateY(-50%)",
left: x - buffer - offsetX,
top: y + h / 2
}, annotationConfigurationSettings);
break;
case "right":
style = _objectSpread(_objectSpread({}, style), {}, {
transform: "translateY(-50%)",
left: x + w + buffer + offsetX,
top: y + h / 2
}, annotationConfigurationSettings);
break;
case "top":
style = _objectSpread(_objectSpread({}, style), {}, {
transform: "translateX(-50%)",
left: x + w / 2,
top: y - buffer - offsetY
}, annotationConfigurationSettings);
break;
case "bottom":
style = _objectSpread(_objectSpread({}, style), {}, {
transform: "translateX(-50%)",
left: x + w / 2,
top: y + h + buffer + offsetY
}, annotationConfigurationSettings);
break;
case "center":
style = _objectSpread(_objectSpread({}, style), {}, {
transform: "translate(-50%, -50%)",
left: x + w / 2,
top: y + h / 2
}, annotationConfigurationSettings);
break;
default:
style = _objectSpread(_objectSpread({}, style), annotationConfigurationSettings);
break;
}
return /*#__PURE__*/React.createElement(React.Fragment, null, animateAnnotations ? /*#__PURE__*/React.createElement(AttentionSeeker, {
key: index,
effect: animation,
duration: animationDuration,
triggerOnce: true
}, /*#__PURE__*/React.createElement("div", {
key: index,
style: style
}, content)) : /*#__PURE__*/React.createElement("div", {
key: index,
style: style
}, content));
})));
}
;
HUDCanvas.propTypes = {
coordinates: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired,
w: PropTypes.number.isRequired,
h: PropTypes.number.isRequired
})).isRequired,
mode: PropTypes.string.isRequired,
height: PropTypes.number,
width: PropTypes.number,
shapeConfigurationSettings: PropTypes.shape({
strokeColor: PropTypes.string,
fillColor: PropTypes.string,
lineWidth: PropTypes.number,
cornerLength: PropTypes.number
}),
annotations: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
position: PropTypes.oneOf(["left", "right", "top", "bottom", "center"]).isRequired,
content: PropTypes.node.isRequired
}))
};
HUDCanvas.defaultProps = {
height: "100vh",
width: "100vw",
shapeConfigurationSettings: {
strokeColor: "#00FF00",
fillColor: "rgba(0, 255, 0, 0.5)",
lineWidth: 2,
cornerLength: 20
},
annotations: []
};
export default HUDCanvas;