1 | import { RENDER_STATE, RENDER_TYPE } from './constants';
|
2 |
|
3 | const RECT_STYLE = {
|
4 | stroke: '#7ac943',
|
5 | strokeWidth: 2,
|
6 | x: -6,
|
7 | y: -6,
|
8 | height: 12,
|
9 | width: 12
|
10 | };
|
11 |
|
12 | const CIRCLE_RADIUS = 8;
|
13 |
|
14 | const SELECTED_STYLE = {
|
15 | stroke: '#7ac943',
|
16 | strokeWidth: 2,
|
17 | fill: '#ffff00',
|
18 | fillOpacity: 0.7
|
19 | };
|
20 |
|
21 | const HOVERED_STYLE = {
|
22 | stroke: '#7ac943',
|
23 | strokeWidth: 2,
|
24 | fill: '#7ac943',
|
25 | fillOpacity: 0.5
|
26 | };
|
27 |
|
28 | const UNCOMMITTED_STYLE = {
|
29 | stroke: '#a7a7a7',
|
30 | strokeWidth: 2,
|
31 | fill: '#a9a9a9',
|
32 | fillOpacity: 0.3
|
33 | };
|
34 |
|
35 | const INACTIVE_STYLE = UNCOMMITTED_STYLE;
|
36 |
|
37 | const DEFAULT_STYLE = {
|
38 | stroke: '#000000',
|
39 | strokeWidth: 2,
|
40 | fill: '#a9a9a9',
|
41 | fillOpacity: 0.1
|
42 | };
|
43 |
|
44 | export function featureStyle({ feature, state }) {
|
45 | const renderType = feature.properties.renderType;
|
46 | let style = null;
|
47 |
|
48 | switch (state) {
|
49 | case RENDER_STATE.SELECTED:
|
50 | style = { ...SELECTED_STYLE };
|
51 | break;
|
52 |
|
53 | case RENDER_STATE.HOVERED:
|
54 | style = { ...HOVERED_STYLE };
|
55 | break;
|
56 |
|
57 | case RENDER_STATE.UNCOMMITTED:
|
58 | case RENDER_STATE.CLOSING:
|
59 | style = { ...UNCOMMITTED_STYLE };
|
60 | break;
|
61 |
|
62 | case RENDER_STATE.INACTIVE:
|
63 | style = { ...INACTIVE_STYLE };
|
64 | break;
|
65 |
|
66 | default:
|
67 | style = { ...DEFAULT_STYLE };
|
68 | }
|
69 |
|
70 | switch (renderType) {
|
71 | case RENDER_TYPE.POINT:
|
72 | style.r = CIRCLE_RADIUS;
|
73 | break;
|
74 | case RENDER_TYPE.LINE_STRING:
|
75 | style.fill = 'none';
|
76 | break;
|
77 | case RENDER_TYPE.POLYGON:
|
78 | if (state === RENDER_STATE.CLOSING) {
|
79 | style.strokeDasharray = '4,2';
|
80 | }
|
81 | break;
|
82 | case RENDER_TYPE.RECTANGLE:
|
83 | if (state === RENDER_STATE.UNCOMMITTED) {
|
84 | style.strokeDasharray = '4,2';
|
85 | }
|
86 | break;
|
87 | default:
|
88 | }
|
89 |
|
90 | return style;
|
91 | }
|
92 |
|
93 | export function editHandleStyle({ feature, shape, index, state }) {
|
94 | let style = {};
|
95 | switch (state) {
|
96 | case RENDER_STATE.SELECTED:
|
97 | style = { ...SELECTED_STYLE };
|
98 | break;
|
99 |
|
100 | case RENDER_STATE.HOVERED:
|
101 | style = { ...HOVERED_STYLE };
|
102 | break;
|
103 |
|
104 | case RENDER_STATE.UNCOMMITTED:
|
105 | case RENDER_STATE.CLOSING:
|
106 | style = { ...UNCOMMITTED_STYLE };
|
107 | break;
|
108 |
|
109 | case RENDER_STATE.INACTIVE:
|
110 | style = { ...INACTIVE_STYLE };
|
111 | break;
|
112 |
|
113 | default:
|
114 | style = { ...DEFAULT_STYLE };
|
115 | }
|
116 |
|
117 | switch (shape) {
|
118 | case 'circle':
|
119 | style.r = CIRCLE_RADIUS;
|
120 | break;
|
121 | case 'rect':
|
122 | style = { ...style, ...RECT_STYLE };
|
123 | break;
|
124 | default:
|
125 | }
|
126 |
|
127 | return style;
|
128 | }
|