-
Notifications
You must be signed in to change notification settings - Fork 381
/
frameElement.js
86 lines (73 loc) · 1.66 KB
/
frameElement.js
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
/**
* External dependencies
*/
import styled from 'styled-components';
import PropTypes from 'prop-types';
/**
* WordPress dependencies
*/
import { useLayoutEffect, useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getDefinitionForType } from '../../elements';
import { useStory } from '../../app';
import { ElementWithPosition, ElementWithSize, ElementWithRotation, getBox } from '../../elements/shared';
import useCanvas from './useCanvas';
const Wrapper = styled.div`
${ ElementWithPosition }
${ ElementWithSize }
${ ElementWithRotation }
pointer-events: initial;
&:focus, &:active, &:hover {
outline: 1px solid ${ ( { theme } ) => theme.colors.selection };
}
`;
function FrameElement( {
element: {
id,
type,
x,
y,
width,
height,
rotationAngle,
isFullbleed,
...rest
},
} ) {
const { Frame } = getDefinitionForType( type );
const element = useRef();
const {
actions: { setNodeForElement, handleSelectElement },
} = useCanvas();
const {
state: { selectedElements },
} = useStory();
useLayoutEffect( () => {
setNodeForElement( id, element.current );
}, [ id, setNodeForElement ] );
const isSelected = selectedElements.includes( id );
const box = getBox( { x, y, width, height, rotationAngle, isFullbleed } );
const props = { ...box, ...rest, id };
return (
<Wrapper
ref={ element }
{ ...box }
onMouseDown={ ( evt ) => {
if ( ! isSelected ) {
handleSelectElement( id, evt );
}
evt.stopPropagation();
} }
>
{ Frame && (
<Frame { ...props } />
) }
</Wrapper>
);
}
FrameElement.propTypes = {
element: PropTypes.object.isRequired,
};
export default FrameElement;