From 7e344419330855dbbf10896c39e91b4e6861dd57 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 1 Apr 2021 17:30:37 +0200 Subject: displaying custom cursors on the frontend --- frontend/app/views/tile/components/tile.form.js | 17 ++++++++++++++- frontend/app/views/tile/forms/tile.constants.js | 1 + .../app/views/tile/forms/tile.form.hyperlink.js | 11 +++++++++- frontend/app/views/tile/handles/tile.gradient.js | 15 +++++++------ frontend/app/views/tile/handles/tile.image.js | 15 +++++++------ frontend/app/views/tile/handles/tile.link.js | 15 +++++++------ frontend/app/views/tile/handles/tile.script.js | 2 +- frontend/app/views/tile/handles/tile.text.js | 22 +++++++++++-------- frontend/app/views/tile/handles/tile.video.js | 25 ++++++++++++++-------- frontend/app/views/tile/tile.utils.js | 20 +++++++++++++++++ 10 files changed, 104 insertions(+), 39 deletions(-) (limited to 'frontend/app/views/tile') diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js index 372cd1d..b50af2f 100644 --- a/frontend/app/views/tile/components/tile.form.js +++ b/frontend/app/views/tile/components/tile.form.js @@ -54,6 +54,7 @@ class TileForm extends Component { modified: false, pageList: [], popupList: [], + cursors: {}, } constructor(props){ @@ -88,7 +89,13 @@ class TileForm extends Component { ...POPUP_LIST_TOP_OPTIONS, ...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group })) ] - this.setState({ pageList, popupList }) + let cursors = this.props.graph.show.res.uploads + .filter(upload => upload.tag === 'cursor') + .reduce((a,b) => { + a[b.id] = b + return a + }, {}) + this.setState({ pageList, popupList, cursors }) if (isNew) { const newTile = TILE_CONSTRUCTORS.image({ id: "new", @@ -110,6 +117,10 @@ class TileForm extends Component { errorFields: new Set([]), }) } + if (this.props.page.editor.pickedCursor !== prevProps.page.editor.pickedCursor) { + console.log("cursor >>", this.props.page.editor.pickedCursor.id) + this.handleSettingsSelect('custom_cursor_id', this.props.page.editor.pickedCursor.id) + } } componentWillUnmount() { @@ -175,6 +186,9 @@ class TileForm extends Component { [name]: value, } }) + if (name === 'cursor' && value === 'custom') { + this.props.pageActions.toggleCursorList(true) + } } handleAlignment(name, value) { @@ -315,6 +329,7 @@ class TileForm extends Component { diff --git a/frontend/app/views/tile/forms/tile.constants.js b/frontend/app/views/tile/forms/tile.constants.js index f2dd0ad..d7dea31 100644 --- a/frontend/app/views/tile/forms/tile.constants.js +++ b/frontend/app/views/tile/forms/tile.constants.js @@ -58,6 +58,7 @@ export const CURSORS = [ { name: 'hand_left', label: 'Left', }, { name: 'hand_right', label: 'Right', }, { name: 'unclickable', label: 'Unclickable', }, + { name: 'custom', label: 'Custom', } ] export const MARQUEE_DIRECTIONS = [ diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js index c444748..4d3e0b5 100644 --- a/frontend/app/views/tile/forms/tile.form.hyperlink.js +++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js @@ -11,12 +11,18 @@ import { NO_POPUP, OPEN_POPUP_LINK, CLOSE_POPUP_LINK } from './tile.constants' -export default function TileHyperlinkForm({ tile, pageList, popupList, parent }) { +export default function TileHyperlinkForm({ tile, pageList, popupList, cursors, parent }) { const isExternalLink = tile.target_page_id === EXTERNAL_LINK // const isPopupLink = ( // tile.target_page_id === OPEN_POPUP_LINK || // tile.target_page_id === CLOSE_POPUP_LINK // ) + let cursor + console.log(tile.settings.cursor, tile.settings.custom_cursor_id) + if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) { + cursor = cursors[tile.settings.custom_cursor_id] + console.log(cursor) + } return (
@@ -36,6 +42,9 @@ export default function TileHyperlinkForm({ tile, pageList, popupList, parent }) onChange={parent.handleSettingsSelect} />
+ {cursor && ( + + )} {isExternalLink && (
+ return null } const { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js index 6ef8734..cfd4b30 100644 --- a/frontend/app/views/tile/handles/tile.text.js +++ b/frontend/app/views/tile/handles/tile.text.js @@ -1,8 +1,12 @@ import React from 'react' -import { generateTransform, unitsDimension, hexToRgb } from 'app/views/tile/tile.utils' +import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils' import Marquee from "react-fast-marquee" -export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) { +export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) { + if (!tile.settings.content) { + return null + } + // console.log(tile) const style = { transform: generateTransform(tile, box, bounds, videoBounds), @@ -10,15 +14,15 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on } // console.log(generateTransform(tile)) let className = ['tile', tile.type].join(' ') - if (tile.target_page_id || (viewing && tile.href)) { - if (viewing || tile.settings.cursor !== 'unclickable') { - className += ' ' + (tile.settings.cursor || 'hand_up') - } - } - if (!tile.settings.content) { - return null + let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing) + if (cursorClass) { + className += " " + cursorClass } + if (cursorStyle) { + style.cursor = cursorStyle + } + let content = className += ' ' + tile.settings.align diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js index e8dbc72..dbcc856 100644 --- a/frontend/app/views/tile/handles/tile.video.js +++ b/frontend/app/views/tile/handles/tile.video.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils' +import { generateTransform, generateVideoStyle, pickCursor } from 'app/views/tile/tile.utils' import { timestampToSeconds } from 'app/utils' export default class TileVideo extends Component { @@ -65,22 +65,29 @@ export default class TileVideo extends Component { } render() { - let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter } = this.props + let { tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter } = this.props + + if (!tile.settings.url) { + return null + } + // console.log(tile) const style = { transform: generateTransform(tile, box, bounds, videoBounds), opacity: tile.settings.opacity, } + let className = ['tile', tile.type].join(' ') - if (tile.target_page_id || (viewing && tile.href)) { - if (viewing || tile.settings.cursor !== 'unclickable') { - className += ' ' + (tile.settings.cursor || 'hand_up') - } + + let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing) + if (cursorClass) { + className += " " + cursorClass } - // console.log(tile.settings) - if (!tile.settings.url) { - return null + if (cursorStyle) { + style.cursor = cursorStyle } + + // console.log(tile.settings) className += ' ' + tile.settings.align const muted = viewing ? tile.settings.muted diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js index 043732b..b946716 100644 --- a/frontend/app/views/tile/tile.utils.js +++ b/frontend/app/views/tile/tile.utils.js @@ -103,4 +103,24 @@ export const hexToRgb = (hex) => { g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null +} + +export const pickCursor = (tile, cursors, viewing) => { + const { cursor, custom_cursor_id } = tile.settings + const isCustom = cursor === 'custom' && custom_cursor_id in cursors + const customCursor = isCustom ? cursors[custom_cursor_id] : null + const x = isCustom ? Math.round(customCursor.settings.width / 2) : null + const y = isCustom ? Math.round(customCursor.settings.height / 2) : null + let className, cursorStyle + if (tile.target_page_id || (viewing && tile.href)) { + if ((viewing || cursor !== 'unclickable') && !isCustom) { + className = (tile.settings.cursor || 'hand_up') + } + } + if (isCustom) { + className = null + cursorStyle = `url(${customCursor.url}) ${x} ${y}, ` + cursorStyle += (tile.target_page_id || tile.href) ? 'pointer' : 'default' + } + return [className, cursorStyle] } \ No newline at end of file -- cgit v1.2.3-70-g09d2