1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
const TileHandle = ({ tile, bounds, box, viewing, 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].join(' ')
if (tile.target_page_id || (viewing && tile.href)) {
className += ' ' + (tile.settings.cursor || 'hand_up')
}
// 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
case 'link':
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'
break
}
if (viewing && tile.href) {
return (
<Link to={tile.href}>
<div
className={className}
onMouseDown={onMouseDown}
style={style}
>
{content}
</div>
</Link>
)
} else {
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 + 'deg)')
}
return transform.join(' ')
}
export default TileHandle
|
