new file
This commit is contained in:
Luis Fernando Molina committed
1 parent
617d499295
commit
783ce5526b
2 files changed
+153
-148
No files matched your search
+1
-148
@@ -138,154 +138,7 @@ function newAnimation () {
|
||||
|
||||
/* Media Recording */
|
||||
if (areWeRecording === true) {
|
||||
const DISTANCE_BETWEEN_ICONS = 60
|
||||
const ICON_SIZES = 50
|
||||
|
||||
let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
|
||||
let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
let draggingIcon = canvas.designSpace.iconCollection.get('support')
|
||||
let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
|
||||
|
||||
let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
|
||||
let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
|
||||
let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
|
||||
|
||||
let imagePosition
|
||||
let buttonPressedIcon
|
||||
|
||||
switch (canvas.mouse.action) {
|
||||
case 'moving': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
case 'dragging': {
|
||||
pointerIcon = draggingIcon
|
||||
break
|
||||
}
|
||||
case 'wheel': {
|
||||
pointerIcon = wheelIcon
|
||||
break
|
||||
}
|
||||
case 'key down': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
case 'key up': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x,
|
||||
y: canvas.mouse.position.y
|
||||
}
|
||||
drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
|
||||
|
||||
switch (canvas.mouse.event.buttons) {
|
||||
case 0: {
|
||||
buttonPressedIcon = undefined
|
||||
break
|
||||
}
|
||||
case 1: {
|
||||
buttonPressedIcon = leftClickIcon
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
buttonPressedIcon = rightClickIcon
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
buttonPressedIcon = undefined
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
buttonPressedIcon = wheelClickIcon
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y
|
||||
}
|
||||
drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
|
||||
|
||||
if (canvas.mouse.event.shiftKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.altKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y - 0
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowUp') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - 0,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowDown') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - 0,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowLeft') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowRight') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
function drawMousePointer (icon, imagePosition, imageSize) {
|
||||
if (icon !== undefined) {
|
||||
if (icon.canDrawIcon === true) {
|
||||
browserCanvasContext.drawImage(
|
||||
icon, imagePosition.x,
|
||||
imagePosition.y,
|
||||
imageSize,
|
||||
imageSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
mediaRecorder.capture(browserCanvas)
|
||||
recordCanvas()
|
||||
}
|
||||
|
||||
/* We request the next frame to be drawn, and stablishing a loop */
|
||||
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
function recordCanvas () {
|
||||
{
|
||||
const DISTANCE_BETWEEN_ICONS = 60
|
||||
const ICON_SIZES = 50
|
||||
|
||||
let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
|
||||
let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
let draggingIcon = canvas.designSpace.iconCollection.get('support')
|
||||
let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
|
||||
|
||||
let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
|
||||
let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
|
||||
let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
|
||||
|
||||
let imagePosition
|
||||
let buttonPressedIcon
|
||||
|
||||
switch (canvas.mouse.action) {
|
||||
case 'moving': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
case 'dragging': {
|
||||
pointerIcon = draggingIcon
|
||||
break
|
||||
}
|
||||
case 'wheel': {
|
||||
pointerIcon = wheelIcon
|
||||
break
|
||||
}
|
||||
case 'key down': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
case 'key up': {
|
||||
pointerIcon = mousePointerIcon
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x,
|
||||
y: canvas.mouse.position.y
|
||||
}
|
||||
drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
|
||||
|
||||
switch (canvas.mouse.event.buttons) {
|
||||
case 0: {
|
||||
buttonPressedIcon = undefined
|
||||
break
|
||||
}
|
||||
case 1: {
|
||||
buttonPressedIcon = leftClickIcon
|
||||
break
|
||||
}
|
||||
case 2: {
|
||||
buttonPressedIcon = rightClickIcon
|
||||
break
|
||||
}
|
||||
case 3: {
|
||||
buttonPressedIcon = undefined
|
||||
break
|
||||
}
|
||||
case 4: {
|
||||
buttonPressedIcon = wheelClickIcon
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y
|
||||
}
|
||||
drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
|
||||
|
||||
if (canvas.mouse.event.shiftKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.altKey === true) {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y - 0
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowUp') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - 0,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowDown') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - 0,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowLeft') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
if (canvas.mouse.event.code === 'ArrowRight') {
|
||||
let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
|
||||
imagePosition = {
|
||||
x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
|
||||
y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
|
||||
}
|
||||
drawMousePointer(icon, imagePosition, ICON_SIZES)
|
||||
}
|
||||
|
||||
function drawMousePointer (icon, imagePosition, imageSize) {
|
||||
if (icon !== undefined) {
|
||||
if (icon.canDrawIcon === true) {
|
||||
browserCanvasContext.drawImage(
|
||||
icon, imagePosition.x,
|
||||
imagePosition.y,
|
||||
imageSize,
|
||||
imageSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
mediaRecorder.capture(browserCanvas)
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user