UNPKG

2.42 kBJavaScriptView Raw
1import { RENDER_STATE, RENDER_TYPE } from './constants';
2
3const RECT_STYLE = {
4 stroke: '#7ac943',
5 strokeWidth: 2,
6 x: -6,
7 y: -6,
8 height: 12,
9 width: 12
10};
11
12const CIRCLE_RADIUS = 8;
13
14const SELECTED_STYLE = {
15 stroke: '#7ac943',
16 strokeWidth: 2,
17 fill: '#ffff00',
18 fillOpacity: 0.7
19};
20
21const HOVERED_STYLE = {
22 stroke: '#7ac943',
23 strokeWidth: 2,
24 fill: '#7ac943',
25 fillOpacity: 0.5
26};
27
28const UNCOMMITTED_STYLE = {
29 stroke: '#a7a7a7',
30 strokeWidth: 2,
31 fill: '#a9a9a9',
32 fillOpacity: 0.3
33};
34
35const INACTIVE_STYLE = UNCOMMITTED_STYLE;
36
37const DEFAULT_STYLE = {
38 stroke: '#000000',
39 strokeWidth: 2,
40 fill: '#a9a9a9',
41 fillOpacity: 0.1
42};
43
44export 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
93export 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}