summaryrefslogtreecommitdiff
path: root/frontend/views/page/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/views/page/components')
-rw-r--r--frontend/views/page/components/page.editor.js100
-rw-r--r--frontend/views/page/components/tile.form.js15
-rw-r--r--frontend/views/page/components/tile.handle.js102
3 files changed, 118 insertions, 99 deletions
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 37e23a7..297f7e7 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -11,6 +11,8 @@ import * as tileActions from '../../tile/tile.actions'
import { Loader } from '../../../common'
import { clamp, dist } from '../../../util'
+import TileHandle from './tile.handle'
+
const defaultState = {
dragging: false,
bounds: null,
@@ -196,104 +198,6 @@ class PageEditor extends Component {
}
}
-const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
- // console.log(tile)
- const { width, height } = tile.settings
- const style = {
- transform: generateTransform(tile, box),
- }
- // console.log(generateTransform(tile))
- let content;
- let className = 'tile ' + tile.type
- // console.log(tile.settings)
- switch (tile.type) {
- case 'image':
- if (!tile.settings.url) {
- return null
- }
- if (tile.settings.is_tiled) {
- style.backgroundImage = 'url(' + tile.settings.url + ')'
- style.backgroundPosition = tile.settings.align.replace('_', ' ')
- switch (tile.settings.tile_style) {
- default:
- case 'tile':
- break
- case 'cover':
- style.backgroundSize = 'cover'
- break
- case 'contain':
- style.backgroundSize = 'contain'
- break
- case 'contain no-repeat':
- style.backgroundSize = 'contain'
- style.backgroundRepeat = 'no-repeat'
- break
- }
- className += ' is_tiled'
- } else {
- className += ' ' + tile.settings.align
- content = <img src={tile.settings.url} />
- }
- break
- case 'text':
- if (!tile.settings.content) {
- return null
- }
- content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
- className += ' ' + tile.settings.align
- style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
- style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
- style.fontFamily = tile.settings.font_family
- style.fontSize = tile.settings.font_size + 'px'
- style.lineHeight = 1.5
- style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
- style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
- style.backgroundColor = tile.settings.background_color || 'transparent'
- style.color = tile.settings.font_color || '#dddddd!important'
- break
- }
- return (
- <div
- className={className}
- onMouseDown={onMouseDown}
- onDoubleClick={onDoubleClick}
- style={style}
- >
- {content}
- </div>
- )
-}
-
-const generateTransform = (tile, box) => {
- let { x, y, align, rotation, scale, is_tiled } = tile.settings
- if (is_tiled) {
- return 'translateZ(0)'
- }
- if (box) {
- x += box.dx
- y += box.dy
- }
- const [yalign, xalign] = align.split('_')
- let transform = ['translateZ(0)']
- if (yalign === 'center') {
- transform.push('translateY(-50%)')
- }
- if (xalign === 'center') {
- transform.push('translateX(-50%)')
- }
- // if (x % 2 == 1) x += 0.5
- // if (y % 2 == 1) y += 0.5
- transform.push('translateX(' + x + 'px)')
- transform.push('translateY(' + y + 'px)')
- if (scale !== 1) {
- transform.push('scale(' + scale + ')')
- }
- if (rotation !== 0) {
- transform.push('rotateZ(' + rotation + 'rad)')
- }
- return transform.join(' ')
-}
-
const mapStateToProps = state => ({
graph: state.graph,
page: state.page,
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index d4913fe..09fa57f 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -5,7 +5,10 @@ import { Link } from 'react-router-dom'
import { session } from '../../../session'
-import { TextInput, NumberInput, ColorInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import {
+ TextInput, NumberInput, ColorInput, Slider,
+ Select, LabelDescription, TextArea, Checkbox,
+ SubmitButton, Loader } from '../../../common'
import { preloadImage } from '../../../util'
import * as tileActions from '../../tile/tile.actions'
@@ -325,6 +328,16 @@ class TileForm extends Component {
{this.renderLinkForm()}
+ <Slider
+ title='Opacity'
+ name='opacity'
+ value={temporaryTile.settings.opacity}
+ onChange={this.handleSettingsSelect.bind(this)}
+ min={0}
+ max={1}
+ step={0.01}
+ />
+
<div className='row buttons'>
<SubmitButton
title={submitTitle}
diff --git a/frontend/views/page/components/tile.handle.js b/frontend/views/page/components/tile.handle.js
new file mode 100644
index 0000000..43817a3
--- /dev/null
+++ b/frontend/views/page/components/tile.handle.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+
+const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
+ // console.log(tile)
+ const { width, height } = tile.settings
+ const style = {
+ transform: generateTransform(tile, box),
+ opacity: tile.settings.opacity,
+ }
+ // console.log(generateTransform(tile))
+ let content;
+ let className = 'tile ' + tile.type
+ // console.log(tile.settings)
+ switch (tile.type) {
+ case 'image':
+ if (!tile.settings.url) {
+ return null
+ }
+ if (tile.settings.is_tiled) {
+ style.backgroundImage = 'url(' + tile.settings.url + ')'
+ style.backgroundPosition = tile.settings.align.replace('_', ' ')
+ switch (tile.settings.tile_style) {
+ default:
+ case 'tile':
+ break
+ case 'cover':
+ style.backgroundSize = 'cover'
+ break
+ case 'contain':
+ style.backgroundSize = 'contain'
+ break
+ case 'contain no-repeat':
+ style.backgroundSize = 'contain'
+ style.backgroundRepeat = 'no-repeat'
+ break
+ }
+ className += ' is_tiled'
+ } else {
+ className += ' ' + tile.settings.align
+ content = <img src={tile.settings.url} />
+ }
+ break
+ case 'text':
+ if (!tile.settings.content) {
+ return null
+ }
+ content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+ className += ' ' + tile.settings.align
+ style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+ style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+ style.fontFamily = tile.settings.font_family
+ style.fontSize = tile.settings.font_size + 'px'
+ style.lineHeight = 1.5
+ style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+ style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+ style.backgroundColor = tile.settings.background_color || 'transparent'
+ style.color = tile.settings.font_color || '#dddddd!important'
+ break
+ }
+ return (
+ <div
+ className={className}
+ onMouseDown={onMouseDown}
+ onDoubleClick={onDoubleClick}
+ style={style}
+ >
+ {content}
+ </div>
+ )
+}
+
+const generateTransform = (tile, box) => {
+ let { x, y, align, rotation, scale, is_tiled } = tile.settings
+ if (is_tiled) {
+ return 'translateZ(0)'
+ }
+ if (box) {
+ x += box.dx
+ y += box.dy
+ }
+ const [yalign, xalign] = align.split('_')
+ let transform = ['translateZ(0)']
+ if (yalign === 'center') {
+ transform.push('translateY(-50%)')
+ }
+ if (xalign === 'center') {
+ transform.push('translateX(-50%)')
+ }
+ // if (x % 2 == 1) x += 0.5
+ // if (y % 2 == 1) y += 0.5
+ transform.push('translateX(' + x + 'px)')
+ transform.push('translateY(' + y + 'px)')
+ if (scale !== 1) {
+ transform.push('scale(' + scale + ')')
+ }
+ if (rotation !== 0) {
+ transform.push('rotateZ(' + rotation + 'rad)')
+ }
+ return transform.join(' ')
+}
+
+export default TileHandle
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 11:33:26 +0000