\n \n \n Войти через google\n \n
\n )\n }\n }\n}\n\nexport default Auth;\n","import React from 'react'\nimport {broadcast} from '../../utils'\nimport './index.css'\n\nconst COLORS = [\n \"#f9ebea\", \"#fdedec\", \"#f5eef8\", \"#f4ecf7\", \"#eaf2f8\", \"#ebf5fb\", \"#e8f8f5\", \"#e8f6f3\", \"#e9f7ef\", \"#eafaf1\", \"#fef9e7\", \"#fef5e7\", \"#fdf2e9\", \"#fbeee6\", \"#fdfefe\", \"#f8f9f9\", \"#f4f6f6\", \"#f2f4f4\", \"#ebedef\", \"#eaecee\",\n \"#f2d7d5\", \"#fadbd8\", \"#ebdef0\", \"#e8daef\", \"#d4e6f1\", \"#d6eaf8\", \"#d1f2eb\", \"#d0ece7\", \"#d4efdf\", \"#d5f5e3\", \"#fcf3cf\", \"#fdebd0\", \"#fae5d3\", \"#f6ddcc\", \"#fbfcfc\", \"#f2f3f4\", \"#eaeded\", \"#e5e8e8\", \"#d6dbdf\", \"#d5d8dc\",\n \"#e6b0aa\", \"#f5b7b1\", \"#d7bde2\", \"#d2b4de\", \"#a9cce3\", \"#aed6f1\", \"#a3e4d7\", \"#a2d9ce\", \"#a9dfbf\", \"#abebc6\", \"#f9e79f\", \"#fad7a0\", \"#f5cba7\", \"#edbb99\", \"#f7f9f9\", \"#e5e7e9\", \"#d5dbdb\", \"#ccd1d1\", \"#aeb6bf\", \"#abb2b9\",\n \"#d98880\", \"#f1948a\", \"#c39bd3\", \"#bb8fce\", \"#7fb3d5\", \"#85c1e9\", \"#76d7c4\", \"#73c6b6\", \"#7dcea0\", \"#82e0aa\", \"#f7dc6f\", \"#f8c471\", \"#f0b27a\", \"#e59866\", \"#f4f6f7\", \"#d7dbdd\", \"#bfc9ca\", \"#b2babb\", \"#85929e\", \"#808b96\",\n \"#cd6155\", \"#ec7063\", \"#af7ac5\", \"#a569bd\", \"#5499c7\", \"#5dade2\", \"#48c9b0\", \"#45b39d\", \"#52be80\", \"#58d68d\", \"#f4d03f\", \"#f5b041\", \"#eb984e\", \"#dc7633\", \"#f0f3f4\", \"#cacfd2\", \"#aab7b8\", \"#99a3a4\", \"#5d6d7e\", \"#566573\",\n \"#c0392b\", \"#e74c3c\", \"#9b59b6\", \"#8e44ad\", \"#2980b9\", \"#3498db\", \"#1abc9c\", \"#16a085\", \"#27ae60\", \"#2ecc71\", \"#f1c40f\", \"#f39c12\", \"#e67e22\", \"#d35400\", \"#ecf0f1\", \"#bdc3c7\", \"#95a5a6\", \"#7f8c8d\", \"#34495e\", \"#2c3e50\",\n \"#a93226\", \"#cb4335\", \"#884ea0\", \"#7d3c98\", \"#2471a3\", \"#2e86c1\", \"#17a589\", \"#138d75\", \"#229954\", \"#28b463\", \"#d4ac0d\", \"#d68910\", \"#ca6f1e\", \"#ba4a00\", \"#d0d3d4\", \"#a6acaf\", \"#839192\", \"#707b7c\", \"#2e4053\", \"#273746\",\n \"#922b21\", \"#b03a2e\", \"#76448a\", \"#6c3483\", \"#1f618d\", \"#2874a6\", \"#148f77\", \"#117a65\", \"#1e8449\", \"#239b56\", \"#b7950b\", \"#b9770e\", \"#af601a\", \"#a04000\", \"#b3b6b7\", \"#909497\", \"#717d7e\", \"#616a6b\", \"#283747\", \"#212f3d\",\n \"#7b241c\", \"#943126\", \"#633974\", \"#5b2c6f\", \"#1a5276\", \"#21618c\", \"#117864\", \"#0e6655\", \"#196f3d\", \"#1d8348\", \"#9a7d0a\", \"#9c640c\", \"#935116\", \"#873600\", \"#979a9a\", \"#797d7f\", \"#5f6a6a\", \"#515a5a\", \"#212f3c\", \"#1c2833\",\n \"#641e16\", \"#78281f\", \"#512e5f\", \"#4a235a\", \"#154360\", \"#1b4f72\", \"#0e6251\", \"#0b5345\", \"#145a32\", \"#186a3b\", \"#7d6608\", \"#7e5109\", \"#784212\", \"#6e2c00\", \"#7b7d7d\", \"#626567\", \"#4d5656\", \"#424949\", \"#1b2631\", \"#17202a\"\n]\n\nclass ColorPicker extends React.Component {\n render() {\n return(\n Авторизация
\n\n {\n COLORS.map( c => broadcast(this.props.broadcast_type, {user_id: this.props.user_id, object_id: this.props.object_id, value: c})}\n >\n )\n }\n
\n )\n }\n}\n\nexport default ColorPicker;\n","import React from 'react'\nimport ColorPicker from '../colorpicker'\nimport {broadcast, listen, stop_listen, INIT_POLYGON_SETTINGS} from '../../utils'\nimport './index.css'\n\nclass PolygonTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n top: 10,\n left: 30,\n user_id: false,\n\n color: INIT_POLYGON_SETTINGS.color,\n radius: INIT_POLYGON_SETTINGS.radius,\n opacity: INIT_POLYGON_SETTINGS.opacity,\n border_color: INIT_POLYGON_SETTINGS.border_color,\n border_width: INIT_POLYGON_SETTINGS.border_width,\n border_opacity: INIT_POLYGON_SETTINGS.border_opacity,\n pattern: INIT_POLYGON_SETTINGS.pattern,\n pattern_scale: INIT_POLYGON_SETTINGS.pattern_scale,\n\n hidden: false,\n fill_hidden: false,\n border_hidden: false,\n pattern_hidden: false,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"layer_edit\", fnc: ({detail}) => {\n if (detail.type === \"polygon\")\n this.setState({edit_layer_id: detail.id})\n }},\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"set_polygon_settings\", fnc: ({detail}) => {\n this.setState({\n color: detail.color,\n radius: detail.radius,\n opacity: detail.opacity,\n border_color: detail.border_color,\n border_width: detail.border_width,\n border_opacity: detail.border_opacity,\n pattern: detail.pattern,\n pattern_scale: detail.pattern_scale,\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode})},\n {type: \"polygon_pattern_scale\", fnc: ({detail}) => this.setState({pattern_scale: detail.value})},\n {type: \"polygon_pattern\", fnc: ({detail}) => this.setState({pattern: detail.value})},\n {type: \"polygon_radius\", fnc: ({detail}) => this.setState({radius: detail.value})},\n {type: \"polygon_opacity\", fnc: ({detail}) => this.setState({opacity: detail.value})},\n {type: \"polygon_color\", fnc: ({detail}) => this.setState({color: detail.value})},\n {type: \"polygon_border_color\", fnc: ({detail}) => this.setState({border_color: detail.value})},\n {type: \"polygon_border_width\", fnc: ({detail}) => this.setState({border_width: detail.value})},\n {type: \"polygon_border_opacity\", fnc: ({detail}) => this.setState({border_opacity: detail.value})},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'polygon' && !this.state.edit_layer_id){\n return(\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n настройки полигона\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})}\n >+\n
\n \n broadcast(\"polygon_pattern\", {user_id: this.props.user_id, value: 'dots'})}\n >\n точка\n ![\"\"](\"/dots.png\")
\n
\n \n заливка\n this.setState({fill_hidden: !this.state.fill_hidden})}\n >{this.state.fill_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.fill_hidden ? null :\n \n
\n }\n \n \n
\n \n цвет\n broadcast(\"polygon_color\", {user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n радиус\n broadcast(\"polygon_radius\", {user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n прозрачность\n broadcast(\"polygon_opacity\", {user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n паттерн\n this.setState({pattern_hidden: !this.state.pattern_hidden})}\n >{this.state.pattern_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.pattern_hidden ? null :\n \n broadcast(\"polygon_pattern\", {user_id: this.props.user_id, value: 'none'})}\n >\n без паттерна\n ![\"\"]()
\n
\n \n масштабирование\n broadcast(\"polygon_pattern_scale\", {user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n\n\n\n \n ![\"\"](\"/hatch.png\")
\n \n ![\"\"](\"/x1.png\")
\n \n ![\"\"](\"/x2.png\")
\n \n \n }\n\n \n граница\n this.setState({border_hidden: !this.state.border_hidden})}\n >{this.state.border_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.border_hidden ? null :\n \n
\n }\n \n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default PolygonTool;\n","import React from 'react'\nimport ColorPicker from '../colorpicker'\nimport {broadcast, listen, stop_listen, post_gql} from '../../utils'\nimport {INIT_LINE_SETTINGS} from '../../utils/line_utils'\nimport './index.css'\n\nclass LineTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n top: 10,\n left: 30,\n user_id: false,\n line_settings: INIT_LINE_SETTINGS,\n hidden: false,\n fill_hidden: false,\n border_hidden: false,\n pattern_hidden: false,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"layer_edit\", fnc: ({detail}) => {\n if (detail.type === \"line\")\n this.setState({edit_layer_id: detail.id})\n }},\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode, edit_layer_id: false})},\n {type: \"set_line_settings\", fnc: ({detail}) => this.setState({line_settings: detail})},\n {type: \"map_click\", fnc: ({detail}) => {\n if (detail.mode === \"cursor\") {\n const obj = detail.event.object\n if (obj && !obj.bbox && !!obj.properties.line_settings) {\n this.setState({\n edit_layer_id: obj.properties.id,\n line_settings: {...obj.properties.line_settings}\n })\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"line\"})\n broadcast(\"line_settings\", {user_id: this.props.user_id, line_settings: obj.properties.line_settings})\n } else {\n if (this.state.object_id)\n this.setState({edit_layer_id: false})\n }\n }\n }},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.edit_layer_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.edit_layer_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.edit_layer_id)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_distance`)\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"line\"})\n }\n )\n }\n }},\n\n {type: \"line_color\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, color: detail.value}})},\n {type: \"line_opacity\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, opacity: detail.value}})},\n {type: \"line_width\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, width: detail.value}})},\n {type: \"line_cap_rounded\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, cap_rounded: detail.value}})},\n {type: \"line_joint_rounded\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, joint_rounded: detail.value}})},\n {type: \"line_show_points\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, show_points: detail.value}})},\n {type: \"line_show_distance\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, show_distance: detail.value}})},\n\n {type: \"update_line_color\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, color: detail.value}})},\n {type: \"update_line_opacity\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, opacity: detail.value}})},\n {type: \"update_line_width\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, width: detail.value}})},\n {type: \"update_line_cap_rounded\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, cap_rounded: detail.value}})},\n {type: \"update_line_joint_rounded\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, joint_rounded: detail.value}})},\n {type: \"update_line_show_points\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, show_points: detail.value}})},\n {type: \"update_line_show_distance\", fnc: ({detail}) => this.setState({line_settings: {...this.state.line_settings, show_distance: detail.value}})},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'line' || !!this.state.edit_layer_id){\n const line = this.state.line_settings\n\n return(\n \n \n
\n \n цвет\n broadcast(\"polygon_border_color\", {user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n толщина\n broadcast(\"polygon_border_width\", {user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n прозрачность\n broadcast(\"polygon_border_opacity\", {user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n настройки линии\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"line\"})\n }}\n >+\n
\n \n
\n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default LineTool;\n","import React from 'react'\nimport ColorPicker from '../colorpicker'\nimport {broadcast, listen, stop_listen, post_gql, text_layer, INIT_TEXT_SETTINGS} from '../../utils'\nimport './index.css'\n\nclass TextTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n top: 10,\n left: 30,\n text_settings: INIT_TEXT_SETTINGS,\n user_id: false,\n hidden: false,\n common_hidden: false,\n layout_hidden: true,\n background_hidden: true,\n border_hidden: true,\n outline_hidden: true,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode, edit_layer_id: false})},\n {type: \"set_text_settings\", fnc: ({detail}) => this.setState({text_settings: detail})},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.edit_layer_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.edit_layer_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.edit_layer_id)\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"text\"})\n }\n )\n }\n }},\n {type: \"map_click\", fnc: ({detail}) => {\n const obj = detail.event.object\n\n if (detail.mode === \"cursor\" && obj && !obj.bbox && !!obj.properties.text_settings) {\n this.setState({edit_layer_id: obj.properties.id, text_settings: obj.properties.text_settings})\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"text\"})\n broadcast(\"text_settings\", {user_id: this.props.user_id, text_settings: obj.properties.text_settings})\n } else {\n if (detail.mode === \"text\") {\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${this.props.user_id}\",\n type: TEXT,\n point_coords: ${JSON.stringify(detail.event.coordinate)},\n text_settings: {\n color: \"${this.state.text_settings.color}\",\n opacity: ${this.state.text_settings.opacity},\n text: ${JSON.stringify(this.state.text_settings.text)},\n size: ${this.state.text_settings.size},\n anchor: \"${this.state.text_settings.anchor}\",\n alignment_baseline: \"${this.state.text_settings.alignment_baseline}\",\n angle: ${this.state.text_settings.angle},\n font_family: \"${this.state.text_settings.font_family}\",\n font_weight: \"${this.state.text_settings.font_weight}\",\n max_width: ${this.state.text_settings.max_width},\n word_break: \"${this.state.text_settings.word_break}\",\n background_padding_left: ${this.state.text_settings.background_padding_left},\n background_padding_right: ${this.state.text_settings.background_padding_right},\n background_padding_top: ${this.state.text_settings.background_padding_top},\n background_padding_bottom: ${this.state.text_settings.background_padding_bottom},\n background_color: \"${this.state.text_settings.background_color}\",\n background_opacity: ${this.state.text_settings.background_opacity},\n border_color: \"${this.state.text_settings.border_color}\",\n border_opacity: ${this.state.text_settings.border_opacity},\n border_width: ${this.state.text_settings.border_width},\n outline_color: \"${this.state.text_settings.outline_color}\",\n outline_opacity: ${this.state.text_settings.outline_opacity},\n outline_width: ${this.state.text_settings.outline_width}\n }){id user_id point_coords type text_settings {\n color opacity text size anchor alignment_baseline angle font_family font_weight max_width word_break\n background_padding_left background_padding_right background_padding_top background_padding_bottom\n background_color background_opacity border_color border_opacity border_width\n outline_color outline_opacity outline_width\n }}}`,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n broadcast(\"add_or_replace_layer\", text_layer(props.point_coords, props))\n }\n )\n }\n }\n }},\n {type: \"text_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, color: detail.value}})},\n {type: \"text_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, opacity: detail.value}})},\n {type: \"text_text\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, text: detail.value}})},\n {type: \"text_size\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, size: detail.value}})},\n {type: \"text_anchor\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, anchor: detail.value}})},\n {type: \"text_alignment_baseline\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, alignment_baseline: detail.value}})},\n {type: \"text_angle\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, angle: detail.value}})},\n {type: \"text_font_family\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, font_family: detail.value}})},\n {type: \"text_font_weight\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, font_weight: detail.value}})},\n {type: \"text_max_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, max_width: detail.value}})},\n {type: \"text_word_break\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, word_break: detail.value}})},\n {type: \"text_background_padding_left\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_left: detail.value}})},\n {type: \"text_background_padding_right\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_right: detail.value}})},\n {type: \"text_background_padding_top\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_top: detail.value}})},\n {type: \"text_background_padding_bottom\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_bottom: detail.value}})},\n {type: \"text_background_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_color: detail.value}})},\n {type: \"text_background_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_opacity: detail.value}})},\n {type: \"text_border_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_color: detail.value}})},\n {type: \"text_border_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_opacity: detail.value}})},\n {type: \"text_border_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_width: detail.value}})},\n {type: \"text_outline_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_color: detail.value}})},\n {type: \"text_outline_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_opacity: detail.value}})},\n {type: \"text_outline_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_width: detail.value}})},\n\n {type: \"update_text_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, color: detail.value}})},\n {type: \"update_text_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, opacity: detail.value}})},\n {type: \"update_text_text\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, text: detail.value}})},\n {type: \"update_text_size\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, size: detail.value}})},\n {type: \"update_text_anchor\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, anchor: detail.value}})},\n {type: \"update_text_alignment_baseline\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, alignment_baseline: detail.value}})},\n {type: \"update_text_angle\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, angle: detail.value}})},\n {type: \"update_text_font_family\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, font_family: detail.value}})},\n {type: \"update_text_font_weight\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, font_weight: detail.value}})},\n {type: \"update_text_max_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, max_width: detail.value}})},\n {type: \"update_text_word_break\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, word_break: detail.value}})},\n {type: \"update_text_background_padding_left\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_left: detail.value}})},\n {type: \"update_text_background_padding_right\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_right: detail.value}})},\n {type: \"update_text_background_padding_top\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_top: detail.value}})},\n {type: \"update_text_background_padding_bottom\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_padding_bottom: detail.value}})},\n {type: \"update_text_background_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_color: detail.value}})},\n {type: \"update_text_background_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, background_opacity: detail.value}})},\n {type: \"update_text_border_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_color: detail.value}})},\n {type: \"update_text_border_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_opacity: detail.value}})},\n {type: \"update_text_border_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, border_width: detail.value}})},\n {type: \"update_text_outline_color\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_color: detail.value}})},\n {type: \"update_text_outline_opacity\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_opacity: detail.value}})},\n {type: \"update_text_outline_width\", fnc: ({detail}) => this.setState({text_settings: {...this.state.text_settings, outline_width: detail.value}})},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'text' || !!this.state.edit_layer_id){\n return(\n \n
\n \n
\n \n цвет\n broadcast(!!this.state.edit_layer_id ? \"update_line_color\" : \"line_color\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n прозрачность\n broadcast(!!this.state.edit_layer_id ? \"update_line_opacity\" : \"line_opacity\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n толщина\n broadcast(!!this.state.edit_layer_id ? \"update_line_width\" : \"line_width\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n\n \n закругление краев\n broadcast(!!this.state.edit_layer_id ? \"update_line_cap_rounded\" : \"line_cap_rounded\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: !line.cap_rounded})}\n />\n
\n\n \n закругление углов\n broadcast(!!this.state.edit_layer_id ? \"update_line_joint_rounded\" : \"line_joint_rounded\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: !line.joint_rounded})}\n />\n
\n\n {null && \n показать точки\n broadcast(!!this.state.edit_layer_id ? \"update_line_show_points\" : \"line_show_points\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: !line.show_points})}\n />\n
}\n\n \n показать длинну\n {\n const show = !line.show_distance\n\n broadcast(\n !!this.state.edit_layer_id ? \"update_line_show_distance\" : \"line_show_distance\",\n {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: show}\n )\n }}\n />\n
\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n {this.state.edit_layer_id ? \"редактирование\" : \"настройки\"} текста\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"text\"})\n }}\n >+\n
\n \n
\n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default TextTool;\n","import React from 'react'\nimport {broadcast, listen, stop_listen, post_gql, marker_layer, INIT_POINT_SETTINGS} from '../../utils'\nimport { PRIKAZ10_HASH, PRIKAZ10_MAPPING } from '../../prikaz10'\nimport './index.css'\n\nclass PointTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n top: 10,\n left: 30,\n point_settings: INIT_POINT_SETTINGS,\n agriculture_filter: \"\",\n user_id: false,\n hidden: false,\n common_hidden: false,\n icons_hidden: false,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode, edit_layer_id: false})},\n {type: \"set_point_settings\", fnc: ({detail}) => this.setState({point_settings: detail})},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.edit_layer_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.edit_layer_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.edit_layer_id)\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"marker\"})\n }\n )\n }\n }},\n {type: \"map_click\", fnc: ({detail}) => {\n const obj = detail.event.object\n\n if (detail.mode === \"cursor\" && obj && !obj.bbox && !!obj.properties.point_settings) {\n this.setState({edit_layer_id: obj.properties.id, point_settings: obj.properties.point_settings})\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"point\"})\n broadcast(\"point_settings\", {user_id: this.props.user_id, point_settings: obj.properties.point_settings})\n } else {\n if (detail.mode === \"marker\") {\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${this.props.user_id}\",\n type: POINT,\n point_coords: ${JSON.stringify(detail.event.coordinate)},\n point_settings: {\n icon_atlas: \"${this.state.point_settings.icon_atlas}\",\n icon_mapping: \"${this.state.point_settings.icon_mapping}\",\n icon: \"${this.state.point_settings.icon}\",\n size: ${this.state.point_settings.size},\n angle: ${this.state.point_settings.angle},\n min_pixels: ${this.state.point_settings.min_pixels},\n max_pixels: ${this.state.point_settings.max_pixels},\n tooltip_text: ${JSON.stringify(this.state.point_settings.tooltip_text)},\n }){id user_id point_coords type point_settings {\n icon_atlas icon_mapping icon size angle min_pixels max_pixels tooltip_text\n }}}`,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n broadcast(\"add_or_replace_layer\", marker_layer(props.point_coords, props))\n }\n )\n }\n }\n }},\n\n {type: \"point_icon\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, icon: detail.value}})},\n {type: \"point_size\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, size: detail.value}})},\n {type: \"point_angle\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, angle: detail.value}})},\n {type: \"point_min_pixels\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, min_pixels: detail.value}})},\n {type: \"point_max_pixels\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, max_pixels: detail.value}})},\n {type: \"update_point_tooltip_text\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, tooltip_text: detail.value}})},\n\n {type: \"update_point_icon\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, icon: detail.value}})},\n {type: \"update_point_size\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, size: detail.value}})},\n {type: \"update_point_angle\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, angle: detail.value}})},\n {type: \"update_point_min_pixels\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, min_pixels: detail.value}})},\n {type: \"update_point_max_pixels\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, max_pixels: detail.value}})},\n {type: \"point_tooltip_text\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, tooltip_text: detail.value}})},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'marker' || !!this.state.edit_layer_id){\n return(\n \n broadcast(!!this.state.edit_layer_id ? \"update_text_text\" : \"text_text\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n\n this.setState({common_hidden: !this.state.common_hidden})}>\n основные\n {this.state.common_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.common_hidden ? null :\n \n
\n }\n\n \n
\n \n цвет\n broadcast(!!this.state.edit_layer_id ? \"update_text_color\" : \"text_color\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n прозрачность\n broadcast(!!this.state.edit_layer_id ? \"update_text_opacity\" : \"text_opacity\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n размер\n broadcast(!!this.state.edit_layer_id ? \"update_text_size\" : \"text_size\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n шрифт\n broadcast(!!this.state.edit_layer_id ? \"update_text_font_family\" : \"text_font_family\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n жирность\n broadcast(!!this.state.edit_layer_id ? \"update_text_font_weight\" : \"text_font_weight\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n >\n \n \n \n \n \n \n \n \n \n \n
\n this.setState({layout_hidden: !this.state.layout_hidden})}>\n верстка\n {this.state.layout_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.layout_hidden ? null :\n \n
\n }\n\n \n гор. выравнивание\n broadcast(!!this.state.edit_layer_id ? \"update_text_anchor\" : \"text_anchor\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n >\n \n \n \n \n
\n \n верт. выравнивание\n broadcast(!!this.state.edit_layer_id ? \"update_text_alignment_baseline\" : \"text_alignment_baseline\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n >\n \n \n \n \n
\n \n угол\n broadcast(!!this.state.edit_layer_id ? \"update_text_angle\" : \"text_angle\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n макс. ширина\n broadcast(!!this.state.edit_layer_id ? \"update_text_max_width\" : \"text_max_width\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n перенос строки\n broadcast(!!this.state.edit_layer_id ? \"update_text_word_break\" : \"text_word_break\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n >\n \n \n \n
\n\n \n отступ слева\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_padding_left\" : \"text_background_padding_left\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n отступ справа\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_padding_right\" : \"text_background_padding_right\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n отступ сверху\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_padding_top\" : \"text_background_padding_top\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n отступ снизу\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_padding_bottom\" : \"text_background_padding_bottom\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n this.setState({background_hidden: !this.state.background_hidden})}>\n заливка\n {this.state.background_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.background_hidden ? null :\n \n
\n }\n\n \n
\n \n цвет\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_color\" : \"text_background_color\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n прозрачность\n broadcast(!!this.state.edit_layer_id ? \"update_text_background_opacity\" : \"text_background_opacity\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n this.setState({border_hidden: !this.state.border_hidden})}>\n граница\n {this.state.border_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.border_hidden ? null :\n \n
\n }\n\n \n
\n \n цвет\n broadcast(!!this.state.edit_layer_id ? \"update_text_border_color\" : \"text_border_color\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n прозрачность\n broadcast(!!this.state.edit_layer_id ? \"update_text_border_opacity\" : \"text_border_opacity\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n толщина\n broadcast(!!this.state.edit_layer_id ? \"update_text_border_width\" : \"text_border_width\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n this.setState({outline_hidden: !this.state.outline_hidden})}>\n обводка\n {this.state.outline_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.outline_hidden ? null :\n \n
\n }\n \n
\n \n цвет\n broadcast(!!this.state.edit_layer_id ? \"update_text_outline_color\" : \"text_outline_color\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n прозрачность\n broadcast(!!this.state.edit_layer_id ? \"update_text_outline_opacity\" : \"text_outline_opacity\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n толщина\n broadcast(!!this.state.edit_layer_id ? \"update_text_outline_width\" : \"text_outline_width\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n {this.state.edit_layer_id ? \"редактирование\" : \"настройки\"} маркера\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"marker\"})\n }}\n >+\n
\n \n
\n }\n\n \n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default PointTool;\n","import React from 'react'\nimport {broadcast, listen, stop_listen} from '../../utils'\nimport './index.css'\n\nclass TilesTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n top: 10,\n left: 30,\n tile_links: [],\n user_id: false,\n hidden: false,\n common_hidden: false,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode})},\n {type: \"map_tile_links\", fnc: ({detail}) => this.setState({tile_links: detail})},\n\n {type: \"point_icon\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, icon: detail.value}})},\n {type: \"point_size\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, size: detail.value}})},\n\n {type: \"update_point_icon\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, icon: detail.value}})},\n {type: \"update_point_size\", fnc: ({detail}) => this.setState({point_settings: {...this.state.point_settings, size: detail.value}})},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'tiles'){\n return(\n this.setState({common_hidden: !this.state.common_hidden})}>\n основные\n {this.state.common_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.common_hidden ? null : \n
\n }\n\n \n размер (метры)\n broadcast(!!this.state.edit_layer_id ? \"update_point_size\" : \"point_size\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n мин размер (пикс)\n broadcast(!!this.state.edit_layer_id ? \"update_point_min_pixels\" : \"point_min_pixels\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n макс размер (пикс)\n broadcast(!!this.state.edit_layer_id ? \"update_point_max_pixels\" : \"point_max_pixels\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n угол\n broadcast(!!this.state.edit_layer_id ? \"update_point_angle\" : \"point_angle\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n\n \n broadcast(!!this.state.edit_layer_id ? \"update_point_tooltip_text\" : \"point_tooltip_text\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n this.setState({icons_hidden: !this.state.icons_hidden})}>\n маркер\n {this.state.icons_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.icons_hidden ? null : \n поиск\n this.setState({agriculture_filter: e.currentTarget.value})}\n />\n
\n }\n {\n this.state.icons_hidden ? null : \n {\n Object.keys(PRIKAZ10_HASH)\n .filter(key => {\n return(\n PRIKAZ10_HASH[key].desc.toLowerCase().includes(this.state.agriculture_filter.toLowerCase())\n )\n\n })\n .map(key => {\n\n var arr = []\n const subkeys = [\n \"сущ_мз\", \"сущ_рз\", \"сущ_фз\", \"план_мз\", \"план_рз\", \"план_фз\", \"рек_мз\", \"рек_рз\", \"рек_фз\", \"ликв_мз\", \"ликв_рз\", \"ликв_фз\"\n ]\n\n subkeys\n .filter(subk => !!PRIKAZ10_MAPPING[`${key}_${subk}`])\n .forEach(subk => {\n const mapping_key = `${key}_${subk}`\n var transform = 0\n var status = \"\"\n var value = \"\"\n\n switch (subk.split(\"_\")[0]) {\n case \"сущ\":\n status = \"Cущ. и строящийся\"\n break;\n case \"план\":\n status = \"План. к размещению\"\n break;\n case \"ликв\":\n status = \"План. к ликвидации\"\n break;\n default:\n status = \"План. к реконструкции\"\n }\n\n\n switch (subk.split(\"_\")[1][0]) {\n case \"м\":\n transform = 33\n value = \"Мест. значения\"\n break;\n case \"ф\":\n transform = 77\n value = \"Фед. значения\"\n break;\n default:\n transform = 50\n value = \"Рег. значения\"\n }\n\n arr.push( broadcast(\n !!this.state.edit_layer_id ? \"update_point_icon\" : \"point_icon\",\n {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: mapping_key}\n )}\n >\n
\n
\n
)\n })\n\n return(arr)\n })\n }\n {status}
\n \n
{value}
\n \n
{PRIKAZ10_HASH[key].desc}
\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n выбор картоосновы\n
\n {\n this.state.hidden ? null :\n \n {\n const new_tile = {title: \"название\", styles_json_url: \"ссылка\", selected: false}\n const tile_links = [...this.state.tile_links, new_tile]\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n >+\n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})}\n >+\n
\n \n {\n this.state.tile_links.map((v, i) => {\n if (i === 0){\n return(\n
\n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default TilesTool;\n","import React from 'react'\nimport {\n broadcast,\n listen,\n stop_listen,\n post_gql,\n INIT_VIDEO_SETTINGS,\n video_layer,\n video_layer_edges\n} from '../../utils'\nimport * as turf from '@turf/turf'\n\nclass VideoTool extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mode: 'cursor',\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n top: 10,\n left: 30,\n video_settings: INIT_VIDEO_SETTINGS,\n user_id: false,\n hidden: false,\n common_hidden: false,\n layout_hidden: true,\n background_hidden: true,\n border_hidden: true,\n outline_hidden: true,\n listners: []\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => {\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_1_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_2_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_3_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_4_video_edge`)\n this.setState({mode: detail.mode, edit_layer_id: false})\n }},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.edit_layer_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.edit_layer_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.edit_layer_id)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_1_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_2_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_3_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_4_video_edge`)\n\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"video\"})\n }\n )\n }\n }},\n {type: \"user_map_hover\", fnc: ({detail}) => {\n if (detail.id !== this.props.user_id || detail.mode === \"video\"){\n var coord1 = detail.coordinate\n var line = turf.lineString([coord1, [coord1[0] + 1, coord1[1]]]);\n var along = turf.along(line, 40, {units: 'meters'});\n var coord2 = along.geometry.coordinates\n\n line = turf.lineString([coord2, [coord2[0], coord2[1] - 1]]);\n along = turf.along(line, 20, {units: 'meters'});\n var coord3 = along.geometry.coordinates\n\n line = turf.lineString([coord3, [coord3[0] - 1, coord2[1]]]);\n along = turf.along(line, 40, {units: 'meters'});\n var coord4 = along.geometry.coordinates\n\n var settings = {\n ...this.state.video_settings,\n coord1: coord1,\n coord2: coord2,\n coord3: coord3,\n coord4: coord4\n }\n\n if (detail.id === this.props.user_id)\n this.setState({video_settings: settings})\n\n\n broadcast(\n \"add_or_replace_layer\",\n video_layer({id: `${detail.id}_position`, video_settings: settings})\n )\n }\n }},\n {type: \"map_click\", fnc: ({detail}) => {\n const obj = detail.event.object\n\n if (detail.mode === \"cursor\" && obj && !obj.bbox && !!obj.properties.video_settings) {\n this.setState({edit_layer_id: obj.properties.id, video_settings: obj.properties.video_settings})\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"video\"})\n broadcast(\"video_settings\", {user_id: this.props.user_id, video_settings: obj.properties.video_settings})\n\n video_layer_edges(obj.properties.id, obj.properties.video_settings)\n } else {\n if (detail.mode === \"video\") {\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${this.props.user_id}\",\n type: VIDEO,\n point_coords: ${JSON.stringify(detail.event.coordinate)},\n video_settings: {\n url: ${JSON.stringify(this.state.video_settings.url)},\n coord1: ${JSON.stringify(this.state.video_settings.coord1)},\n coord2: ${JSON.stringify(this.state.video_settings.coord2)},\n coord3: ${JSON.stringify(this.state.video_settings.coord3)},\n coord4: ${JSON.stringify(this.state.video_settings.coord4)},\n min_zoom: ${this.state.video_settings.min_zoom},\n max_zoom: ${this.state.video_settings.max_zoom},\n }){id user_id point_coords type video_settings {\n url\n coord1 coord2 coord3 coord4\n min_zoom max_zoom\n }}}`,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n broadcast(\"add_or_replace_layer\", video_layer(props))\n }\n )\n }\n }\n }},\n {type: \"video_url\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, url: detail.value}})},\n {type: \"video_coord1\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord1: detail.value}})},\n {type: \"video_coord2\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord2: detail.value}})},\n {type: \"video_coord3\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord3: detail.value}})},\n {type: \"video_coord4\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord4: detail.value}})},\n {type: \"video_min_zoom\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, min_zoom: detail.value}})},\n {type: \"video_max_zoom\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, max_zoom: detail.value}})},\n\n {type: \"update_video_url\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, url: detail.value}})},\n {type: \"update_video_coord1\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord1: detail.value}})},\n {type: \"update_video_coord2\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord2: detail.value}})},\n {type: \"update_video_coord3\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord3: detail.value}})},\n {type: \"update_video_coord4\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, coord4: detail.value}})},\n {type: \"update_video_min_zoom\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, min_zoom: detail.value}})},\n {type: \"update_video_max_zoom\", fnc: ({detail}) => this.setState({video_settings: {...this.state.video_settings, max_zoom: detail.value}})}\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'video' || !!this.state.edit_layer_id){\n return(\n \n
\n )\n } else {\n return(\n \n {v.title}|{v.styles_json_url.slice(0,20)}...\n
\n \n выбрать\n {\n const i_select = v.selected ? 0 : i\n const tile_links = this.state.tile_links.map((vv, ii) => {\n return({...vv, selected: ii === i_select})\n })\n\n broadcast(\"map_tile_links\", tile_links)\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n />\n
\n \n
\n )\n }\n })\n }\n \n название\n {\n const tile_links = this.state.tile_links.map((vv, ii) =>\n ii === i ? {...vv, title: e.currentTarget.value} : vv\n )\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n />\n
\n\n \n ссылка\n {\n const tile_links = this.state.tile_links.map((vv, ii) =>\n ii === i ? {...vv, styles_json_url: e.currentTarget.value} : vv\n )\n\n broadcast(\"map_tile_links\", tile_links)\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n />\n
\n\n \n выбрать\n {\n const i_select = v.selected ? 0 : i\n const tile_links = this.state.tile_links.map((vv, ii) => {\n return({...vv, selected: ii === i_select})\n })\n\n broadcast(\"map_tile_links\", tile_links)\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n />\n
\n \n {\n const tile_links = this.state.tile_links.filter((vv, ii) => ii !== i)\n broadcast(\"send_map_tile_links\", tile_links)\n this.setState({tile_links: tile_links})\n }}\n className=\"tool-input-button\"\n style={{color: \"red\"}}\n >удалить\n
\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n {this.state.edit_layer_id ? \"редактирование\" : \"настройки\"} видео\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_1_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_2_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_3_video_edge`)\n broadcast(\"remove_layer\", `${this.state.edit_layer_id}_4_video_edge`)\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"video\"})\n }}\n >+\n
\n \n
\n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default VideoTool;\n","import React from 'react'\nimport {broadcast, listen, stop_listen, post_gql, create_attach, chat_layer, makeid, IS_DEV} from '../../utils'\nimport './index.css'\n\nconst utilizeFocus = () => {\n const ref = React.createRef()\n const setFocus = () => {ref.current && ref.current.focus()}\n return {setFocus, ref}\n}\n\nconst utilizeFocusMessage = () => {\n const ref = React.createRef()\n const setFocus = () => {ref.current && ref.current.focus()}\n const setClear = () => {\n if (ref.current)\n ref.current.innerHTML = \"\"\n }\n return {setFocus, ref, setClear}\n}\n\nconst bytes_to_str = (bytes) => {\n if (bytes < 1024)\n return(`${bytes}б`)\n\n if (bytes < 1024 * 1024)\n return(`${Math.round(bytes / 1024, 2)}Кб`)\n\n if (bytes < 1024 * 1024 * 1024)\n return(`${Math.round(bytes / (1024*1024), 2)}Мб`)\n\n return(`${Math.round(bytes / (1024*1024* 1024), 2)}Гб`)\n}\n\nconst scroolRef = () => {\n const ref = React.createRef()\n const scroll = () => {\n if (ref.current){\n setTimeout(() => ref.current.scrollTop = ref.current.scrollHeight, 300)\n }\n }\n return {scroll, ref}\n}\n\nclass Chat extends React.Component {\n constructor(props) {\n super(props)\n\n const origin = window.location.origin.replace(\"3000\", \"4000\")\n\n var back_url = `${origin.replace(\"http://\", \"http://back.\")}`\n\n if (IS_DEV)\n back_url = `${origin}`\n\n this.state = {\n mode: 'cursor',\n token: \"\",\n back_url: back_url,\n mouse_down_coords: false,\n container_mouse_coords: false,\n edit_layer_id: false,\n creating_coords: false,\n creating_coordinates: false,\n creating_input: null,\n creating_id: false,\n file_upload_progress: false,\n img: false,\n top: 10,\n left: 30,\n chat_settings: {title: \"\", picture: \"\", user_id: \"-1\"},\n current_message_text: \"\",\n messages: [],\n user_id: false,\n users: {},\n hidden: false,\n listners: []\n }\n\n this.inputFocus = utilizeFocus()\n this.inputFocusMessage = utilizeFocusMessage()\n this.scroolRef = scroolRef()\n }\n\n componentDidUpdate(prevProps, prevState){\n if (prevState.creating_coords !== this.state.creating_coords && !!this.state.creating_coords)\n this.inputFocus.setFocus()\n\n if (prevState.messages.length !== this.state.messages.length){\n this.inputFocusMessage.setFocus()\n\n const last_m = this.state.messages[this.state.messages.length-1]\n if (last_m && last_m.user_id === `${prevProps.user_id}`){\n this.inputFocusMessage.setClear()\n }\n this.scroolRef.scroll()\n }\n\n if (!prevState.edit_layer_id && !!this.state.edit_layer_id)\n this.scroolRef.scroll()\n\n if (prevState.hidden !== this.state.hidden)\n this.scroolRef.scroll()\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_mode_change\", fnc: ({detail}) => {\n this.setState({mode: detail.mode, edit_layer_id: false, messages: []})\n }},\n {type: \"remove_layer\", fnc: ({detail}) => {\n if (detail === this.state.edit_layer_id)\n this.setState({edit_layer_id: false, messages: []})\n }},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.edit_layer_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.edit_layer_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.edit_layer_id)\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"chat\"})\n }\n )\n }\n }},\n {type: \"current_user\", fnc: ({detail}) => this.setState({\n chat_settings: {...this.state.chat_settings, picture: detail.picture},\n token: detail.access_token\n })},\n {type: \"map_click\", fnc: ({detail}) => {\n if (this.state.creating_id)\n broadcast(\"remove_layer\", this.state.creating_id)\n\n const obj = detail.event.object\n\n if (detail.mode === \"cursor\" && obj && !obj.bbox && !!obj.properties.chat_settings) {\n\n post_gql(\n `query {\n chatMessagesGet(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n chat_id: ${obj.properties.id}\n ){id text time user_id chat_attachs {id name type}}\n\n chatGetUsers(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n chat_id: ${obj.properties.id}\n ){id name picture}\n }`,\n resp => {\n var users = {}\n resp.data.data.chatGetUsers.forEach(u => {users[u.id] = u})\n var top = detail.event.pixel[1]\n\n if (top + 600 > detail.event.viewport.height)\n top = detail.event.viewport.height - 600\n\n this.setState({\n edit_layer_id: obj.properties.id,\n chat_settings: obj.properties.chat_settings,\n top: top,\n left: detail.event.pixel[0],\n messages: resp.data.data.chatMessagesGet,\n users: users\n })\n\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"chat\"})\n },\n {\"authorization\": `Bearer ${this.state.token}`}\n )\n } else {\n if (detail.mode === \"chat\") {\n var creating_coords_top = detail.event.pixel[1] - 22\n var creating_coords_left = detail.event.pixel[0] + 20\n\n if (creating_coords_top < 30)\n creating_coords_top = 30\n\n if (creating_coords_top > detail.event.viewport.height - 30)\n creating_coords_top = detail.event.viewport.height - 30\n\n if (creating_coords_left < 30)\n creating_coords_left = 30\n\n if (creating_coords_left > detail.event.viewport.width - 300)\n creating_coords_left = creating_coords_left - 300\n\n const creating_id = makeid(10)\n\n this.setState({\n creating_coords: [creating_coords_top, creating_coords_left],\n creating_coordinates: detail.event.coordinate,\n chat_settings: this.state.chat_settings,\n creating_id: creating_id\n })\n\n chat_layer(\n detail.event.coordinate,\n {id: creating_id, chat_settings: this.state.chat_settings}\n ).forEach(l => broadcast(\"add_or_replace_layer\", l))\n }\n }\n }},\n\n {type: \"chat_title\", fnc: ({detail}) => this.setState({chat_settings: {...this.state.chat_settings, title: detail.value}})},\n {type: \"current_message_text\", fnc: ({detail}) => this.setState({current_message_text: detail.value})},\n {type: \"update_chat_title\", fnc: ({detail}) => this.setState({chat_settings: {...this.state.chat_settings, title: detail.value}})},\n {type: \"message_created\", fnc: ({detail}) => {\n const m = detail.message\n\n if (this.state.edit_layer_id === m.chat_id){\n const u = detail.user\n const users = {...this.state.users}\n users[u.id] = u\n this.setState({messages: [...this.state.messages, m], users: users})\n\n post_gql(\n `mutation { updateLastRead(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n chat_id: ${this.state.edit_layer_id},\n message_id: ${m.id}\n )}`,\n resp => null,\n {\"authorization\": `Bearer ${this.state.token}`}\n )\n }\n }},\n\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n if (this.state.mode === 'chat' && !!this.state.creating_coords){\n return(\n this.setState({common_hidden: !this.state.common_hidden})}>\n основные\n {this.state.common_hidden ? \"▾\" : \"▸\"} \n
{\n this.state.common_hidden ? null :\n \n
\n }\n \n ссылка\n broadcast(!!this.state.edit_layer_id ? \"update_video_url\" : \"video_url\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.value})}\n />\n
\n \n зум мин.\n broadcast(!!this.state.edit_layer_id ? \"update_video_min_zoom\" : \"video_min_zoom\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n\n \n зум макс.\n broadcast(!!this.state.edit_layer_id ? \"update_video_max_zoom\" : \"video_max_zoom\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n новый чат\n
\n\n \n {\" \"}\n {\n if (this.state.creating_id)\n broadcast(\"remove_layer\", this.state.creating_id)\n\n this.setState({\n creating_coords: false,\n creating_coordinates: false,\n chat_settings: {title: \"\", picture: this.state.chat_settings.picture},\n creating_id: false\n })\n }}\n >+\n
\n \n
\n \n )\n } else {\n if (!!this.state.edit_layer_id) {\n return(\n [\n this.state.img ?\n \n broadcast(!!this.state.edit_layer_id ? \"update_chat_title\" : \"chat_title\", {object_id: this.state.edit_layer_id, user_id: this.props.user_id, value: e.currentTarget.innerHTML})}\n contentEditable\n ref={this.inputFocus.ref}\n onKeyDown={e => {\n if (e.keyCode === 13 && !e.shiftKey){\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${this.props.user_id}\",\n type: CHAT,\n point_coords: ${JSON.stringify(this.state.creating_coordinates)},\n chat_settings: {\n title: ${JSON.stringify(this.state.chat_settings.title)},\n picture: ${JSON.stringify(this.state.chat_settings.picture)}\n }\n ){id user_id point_coords type chat_settings {title picture status created_at}\n }}`,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n chat_layer(props.point_coords, props).forEach( l => broadcast(\"add_or_replace_layer\", l))\n if (this.state.creating_id)\n broadcast(\"remove_layer\", this.state.creating_id)\n this.setState({\n creating_coords: false,\n creating_coordinates: false,\n chat_settings: {title: \"\", picture: this.state.chat_settings.picture},\n creating_id: false\n })\n },\n {\"authorization\": `Bearer ${this.state.token}`}\n )\n }\n }}\n />\n
\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"chat\"})\n }}\n >+\n
\n \n {\n this.state.hidden ? null : \n
\n }\n {\n m.chat_attachs[0] ? \n
\n \n {`${time} ${day_w} ${day} ${month}`}\n \n \n
\n }\n \n )\n })\n }\n \n }\n\n {this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n {\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"notifications\"})\n this.setState({is_closed: true})\n }}\n >+\n
\n \n {\n this.state.hidden ? null :\n \n {\n this.state.notifications.map((v, i) => {\n const fdate = new Date(v.first_m_time * 1000)\n const fday = parseInt(fdate.toLocaleString().slice(0,2))\n const fday_w = [\"вс\", \"пн\", \"вт\", \"ср\", \"чт\", \"пт\", \"сб\"][fdate.getDay()]\n const fmonth = [\"янв\", \"фев\", \"мар\", \"апр\", \"май\", \"июн\", \"июл\", \"авг\", \"сен\", \"окт\", \"ноя\", \"дек\"][fdate.getMonth()]\n var ftime = fdate.toLocaleTimeString().slice(0,5)\n\n const ldate = new Date(v.last_m_time * 1000)\n const lday = parseInt(ldate.toLocaleString().slice(0,2))\n const lday_w = [\"вс\", \"пн\", \"вт\", \"ср\", \"чт\", \"пт\", \"сб\"][ldate.getDay()]\n const lmonth = [\"янв\", \"фев\", \"мар\", \"апр\", \"май\", \"июн\", \"июл\", \"авг\", \"сен\", \"окт\", \"ноя\", \"дек\"][ldate.getMonth()]\n var ltime = ldate.toLocaleTimeString().slice(0,5)\n\n var time_slice = ``\n\n if (lday === fday && lmonth === fmonth){\n if (ftime !== ltime) {\n time_slice = `${ftime}-${ltime} ${lday_w} ${lday} ${lmonth}`\n } else {\n time_slice = `${ftime} ${lday_w} ${lday} ${lmonth}`\n }\n } else {\n ftime = `${ftime} ${fday_w} ${fday} ${fmonth}`\n ltime = `${ltime} ${lday_w} ${lday} ${lmonth}`\n time_slice = `${fday_w} ${fday} ${fmonth} - ${lday_w} ${lday} ${lmonth}`\n }\n\n\n return( broadcast(\"set_map_coords\", v.coords)}\n >\n
\n )\n })\n }\n \n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default Notifications;\n","import {GeoJsonLayer} from '@deck.gl/layers';\nimport * as turf from '@turf/turf'\n\nexport const chat_notifications_layer = (id, coords, notifications_count) => {\n return(\n new GeoJsonLayer({\n id: id,\n data: turf.point(coords, {id: id}),\n pickable: true,\n pointType: \"text\",\n getText: o => `${notifications_count}`,\n getTextColor: o => [255, 255, 255, 255],\n getTextAngle: o => 0,\n getTextSize: o => 12,\n getTextAnchor: o => 'end',\n getTextPixelOffset: o => [21, -15],\n getTextAlignmentBaseline: o => 'center',\n textSizeUnits: 'pixels',\n textSizeScale: 1,\n textCharacterSet: [\" \", \"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"],\n textFontFamily: 'monospace',\n textFontWeight: 'bold',\n textMaxWidth: -1,\n textWordBreak: 'break-word',\n textBackground: true, // need for BackgroundColor\n textBackgroundPadding: [\n 3, 1, 3, 1 // left, top, right, bottom\n ],\n getTextBackgroundColor: o => [255, 0, 0, 255],\n getTextBorderColor: o => [0, 0, 0, 255],\n getTextBorderWidth: o => 1,\n textOutlineColor: [0, 0, 0, 0],\n textOutlineWidth: 0,\n textFontSettings: {sdf: true} // need for Outline\n })\n )\n}\n","import React from 'react'\nimport {\n broadcast,\n listen,\n stop_listen,\n post_gql,\n polygon_layer,\n text_layer,\n marker_layer,\n chat_layer,\n video_layer,\n INIT_POLYGON_SETTINGS,\n INIT_TEXT_SETTINGS,\n INIT_POINT_SETTINGS,\n INIT_VIDEO_SETTINGS\n} from '../../utils'\n\nimport {line_layer, line_distance_layer, INIT_LINE_SETTINGS} from '../../utils/line_utils'\nimport {GeoJsonLayer} from '@deck.gl/layers';\nimport * as turf from '@turf/turf'\nimport './index.css'\n\nconst init_pos = [30.340354, 59.931715]\n\nconst broadcast_position = (user, mode, current) => {\n const id = `${user.id}_position`\n\n if (mode !== \"chat\")\n broadcast(\"remove_layer\", `${id}_1`)\n switch (mode) {\n case \"text\":\n broadcast(\n \"add_or_replace_layer\",\n text_layer(user.position, {id: id, text_settings: user.text_settings})\n )\n break;\n case \"marker\":\n broadcast(\n \"add_or_replace_layer\",\n marker_layer(user.position, {id: id, point_settings: user.point_settings})\n )\n break;\n case \"point\":\n broadcast(\n \"add_or_replace_layer\",\n marker_layer(user.position, {id: id, point_settings: user.point_settings})\n )\n break;\n case \"video\":\n break;\n case \"chat\":\n const chat_layers = chat_layer(user.position, {id: id, chat_settings: {...user.chat_settings, picture: user.picture}})\n chat_layers.forEach(l => broadcast(\"add_or_replace_layer\", l))\n break;\n default:\n if (user.polygon_settings)\n broadcast(\n \"add_or_replace_layer\",\n new GeoJsonLayer({\n id: id,\n data: {type: \"Point\", coordinates: user.position},\n pointType: 'circle+text+icon',\n getText: () => current ? \"\" : user.name,\n // getText: () => user.name,\n textCharacterSet: user.name.split(\"\"),\n getTextAnchor: () => 'start',\n getAlignmentBaseline: () => 'top',\n getTextColor: [168, 0, 0, 255],\n getTextSize: 16,\n getTextPixelOffset: [35, 10],\n\n iconAtlas: user.picture,\n iconMapping: {\"avatar\":{\"width\":96,\"y\":0,\"x\":0,\"height\":96}},\n // getIcon: o => \"avatar\",\n getIcon: () => current ? \"no_avatar\" : \"avatar\",\n getIconSize: o => 24,\n getIconPixelOffset: [20, 10],\n iconSizeUnits: \"pixels\",\n\n textSizeUnits: 'pixels',\n getFillColor: [0, 0, 0, 0],\n getLineColor: mode === 'cursor' || mode === 'text' ? [0, 0, 0, 0] : \"#264653\",\n getLineWidth: user.polygon_settings.border_width,\n lineJointRounded: true,\n pointRadiusUnits: 'meters',\n getPointRadius: mode === \"line\" ? user.line_settings.width : user.polygon_settings.radius * 2,\n pointRadiusScale: 0.5,\n lineCapRounded: true,\n pickable: false,\n textFontSettings: {sdf: false}\n })\n )\n }\n}\n\nclass UserLayers extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n current_user: {\n id: false,\n name: false,\n position: init_pos,\n polygon_settings: INIT_POLYGON_SETTINGS,\n line_settings: INIT_LINE_SETTINGS,\n text_settings: INIT_TEXT_SETTINGS,\n point_settings: INIT_POINT_SETTINGS,\n video_settings: INIT_VIDEO_SETTINGS,\n chat_settings: {title: \"\"},\n edit_layer_id: false,\n l_coords: false,\n p_coords: false\n },\n layers: [],\n users: [],\n follow_user_id: false,\n listners: []\n }\n }\n\n update_user_settings(type, detail, settings_type){\n const current = this.state.current_user.id === detail.user_id\n var user =\n current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n var settings_key = null\n\n switch (settings_type) {\n case \"text\":\n settings_key = \"text_settings\"\n break;\n case \"video\":\n settings_key = \"video_settings\"\n break;\n case \"line\":\n settings_key = \"line_settings\"\n break;\n case \"point\":\n settings_key = \"point_settings\"\n break;\n default:\n settings_key = \"polygon_settings\"\n }\n\n const field = type.replace(`${settings_type}_`, \"\")\n user = {...user, [settings_key]: {...user[settings_key], [field]: detail.value}}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n broadcast_position(user, settings_type, current)\n }\n\n if (current)\n broadcast(`send_${type}`, detail)\n }\n\n update_layer_polygon_settings(type, detail){\n var obj = this.state.layers.find(v => v.id === detail.object_id).props.data\n const field = type.replace(\"update_polygon_\", \"\")\n const settings = {...obj.properties.polygon_settings, [field]: detail.value}\n const props = {id: detail.object_id, coords: obj.geometry.coordinates, polygon_settings: settings}\n\n broadcast(\"add_or_replace_layer\", polygon_layer(props, obj.geometry.type))\n if (this.state.current_user.id === detail.user_id)\n broadcast(`send_${type}`, detail)\n }\n\n update_layer_line_settings(type, detail){\n var obj = this.state.layers.find(v => v.id === detail.object_id).props.data\n const field = type.replace(\"update_line_\", \"\")\n const settings = {...obj.properties.line_settings, [field]: detail.value}\n const props = {id: detail.object_id, line_coords: obj.geometry.coordinates, line_settings: settings}\n\n broadcast(\"add_or_replace_layer\", line_layer(props))\n\n if (props.line_settings.show_distance)\n broadcast(\"add_or_replace_layer\", line_distance_layer(`${detail.object_id}_distance`, props.line_coords))\n\n if (obj.properties.line_settings.show_distance && !props.line_settings.show_distance)\n broadcast(\"remove_layer\", `${detail.object_id}_distance`)\n\n if (this.state.current_user.id === detail.user_id)\n broadcast(`send_${type}`, detail)\n }\n\n update_layer_point_settings(type, detail){\n const current = this.state.current_user.id === detail.user_id\n var obj = this.state.layers.find(v => v.id === detail.object_id).props.data\n const field = type.replace(\"update_point_\", \"\")\n const settings = {...obj.properties.point_settings, [field]: detail.value}\n const props = {id: detail.object_id, point_settings: settings}\n\n broadcast(\"add_or_replace_layer\", marker_layer(obj.geometry.coordinates, props))\n\n if (current)\n broadcast(`send_${type}`, detail)\n\n var user =\n current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, point_settings: settings}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }\n\n update_layer_text_settings(type, detail){\n const current = this.state.current_user.id === detail.user_id\n var obj = this.state.layers.find(v => v.id === detail.object_id).props.data\n const field = type.replace(\"update_text_\", \"\")\n const settings = {...obj.properties.text_settings, [field]: detail.value}\n const props = {id: detail.object_id, text_settings: settings}\n\n broadcast(\"add_or_replace_layer\", text_layer(obj.geometry.coordinates, props))\n\n if (current)\n broadcast(`send_${type}`, detail)\n\n var user =\n current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, text_settings: settings}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }\n\n update_layer_video_settings(type, detail){\n const current = this.state.current_user.id === detail.user_id\n var obj = this.state.layers.find(v => v.id === detail.object_id).props.data\n const field = type.replace(\"update_video_\", \"\")\n const settings = {...obj.properties.video_settings, [field]: detail.value}\n const props = {id: detail.object_id, video_settings: settings}\n\n broadcast(\"add_or_replace_layer\", video_layer(props))\n\n if (current)\n broadcast(`send_${type}`, detail)\n\n var user =\n current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, video_settings: settings}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }\n\n componentDidMount(){\n const listners = [\n {type: \"add_or_replace_layer\", fnc: ({detail}) => {\n this.setState( (state) => ({layers: [\n ...state.layers.filter(v => v.id !== detail.id),\n detail\n ]}))\n }},\n\n {type: \"user_view_state_stop_follow\", fnc: ({detail}) => this.setState({follow_user_id: false})},\n {type: \"layer_edit\", fnc: ({detail}) => {\n this.setState({current_user: {...this.state.current_user, edit_layer_id: detail.id}})\n broadcast(\"send_layer_edit\", {user_id: this.state.current_user.id, object_id: detail.id})\n }},\n {type: \"user_layer_edit\", fnc: ({detail}) => {\n var user = this.state.users.find( u => u.id === detail.user_id)\n if (user) {\n user = {...user, edit_layer_id: detail.object_id}\n this.setState({users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }},\n {type: \"polygon_color\", fnc: ({detail}) => this.update_user_settings(\"polygon_color\", detail, \"polygon\")},\n {type: \"polygon_radius\", fnc: ({detail}) => this.update_user_settings(\"polygon_radius\", detail, \"polygon\")},\n {type: \"polygon_opacity\", fnc: ({detail}) => this.update_user_settings(\"polygon_opacity\", detail, \"polygon\")},\n {type: \"polygon_border_width\", fnc: ({detail}) => this.update_user_settings(\"polygon_border_width\", detail, \"polygon\")},\n {type: \"polygon_border_opacity\", fnc: ({detail}) => this.update_user_settings(\"polygon_border_opacity\", detail, \"polygon\")},\n {type: \"polygon_border_color\", fnc: ({detail}) => this.update_user_settings(\"polygon_border_color\", detail, \"polygon\")},\n {type: \"polygon_pattern\", fnc: ({detail}) => this.update_user_settings(\"polygon_pattern\", detail, \"polygon\")},\n {type: \"polygon_pattern_scale\", fnc: ({detail}) => this.update_user_settings(\"polygon_pattern_scale\", detail, \"polygon\")},\n\n {type: \"line_color\", fnc: ({detail}) => this.update_user_settings(\"line_color\", detail, \"line\")},\n {type: \"line_opacity\", fnc: ({detail}) => this.update_user_settings(\"line_opacity\", detail, \"line\")},\n {type: \"line_width\", fnc: ({detail}) => this.update_user_settings(\"line_width\", detail, \"line\")},\n {type: \"line_cap_rounded\", fnc: ({detail}) => this.update_user_settings(\"line_cap_rounded\", detail, \"line\")},\n {type: \"line_joint_rounded\", fnc: ({detail}) => this.update_user_settings(\"line_joint_rounded\", detail, \"line\")},\n {type: \"line_show_points\", fnc: ({detail}) => this.update_user_settings(\"line_show_points\", detail, \"line\")},\n {type: \"line_show_distance\", fnc: ({detail}) => this.update_user_settings(\"line_show_distance\", detail, \"line\")},\n\n {type: \"point_icon\", fnc: ({detail}) => this.update_user_settings(\"point_icon\", detail, \"point\")},\n {type: \"point_size\", fnc: ({detail}) => this.update_user_settings(\"point_size\", detail, \"point\")},\n {type: \"point_angle\", fnc: ({detail}) => this.update_user_settings(\"point_angle\", detail, \"point\")},\n {type: \"point_min_pixels\", fnc: ({detail}) => this.update_user_settings(\"point_min_pixels\", detail, \"point\")},\n {type: \"point_max_pixels\", fnc: ({detail}) => this.update_user_settings(\"point_max_pixels\", detail, \"point\")},\n {type: \"point_tooltip_text\", fnc: ({detail}) => this.update_user_settings(\"tooltip_text\", detail, \"point\")},\n\n {type: \"text_color\", fnc: ({detail}) => this.update_user_settings(\"text_color\", detail, \"text\")},\n {type: \"text_opacity\", fnc: ({detail}) => this.update_user_settings(\"text_opacity\", detail, \"text\")},\n {type: \"text_text\", fnc: ({detail}) => this.update_user_settings(\"text_text\", detail, \"text\")},\n {type: \"text_size\", fnc: ({detail}) => this.update_user_settings(\"text_size\", detail, \"text\")},\n {type: \"text_anchor\", fnc: ({detail}) => this.update_user_settings(\"text_anchor\", detail, \"text\")},\n {type: \"text_alignment_baseline\", fnc: ({detail}) => this.update_user_settings(\"text_alignment_baseline\", detail, \"text\")},\n {type: \"text_angle\", fnc: ({detail}) => this.update_user_settings(\"text_angle\", detail, \"text\")},\n {type: \"text_font_family\", fnc: ({detail}) => this.update_user_settings(\"text_font_family\", detail, \"text\")},\n {type: \"text_font_weight\", fnc: ({detail}) => this.update_user_settings(\"text_font_weight\", detail, \"text\")},\n {type: \"text_max_width\", fnc: ({detail}) => this.update_user_settings(\"text_max_width\", detail, \"text\")},\n {type: \"text_word_break\", fnc: ({detail}) => this.update_user_settings(\"text_word_break\", detail, \"text\")},\n {type: \"text_background_padding_left\", fnc: ({detail}) => this.update_user_settings(\"text_background_padding_left\", detail, \"text\")},\n {type: \"text_background_padding_right\", fnc: ({detail}) => this.update_user_settings(\"text_background_padding_right\", detail, \"text\")},\n {type: \"text_background_padding_top\", fnc: ({detail}) => this.update_user_settings(\"text_background_padding_top\", detail, \"text\")},\n {type: \"text_background_padding_bottom\", fnc: ({detail}) => this.update_user_settings(\"text_background_padding_bottom\", detail, \"text\")},\n {type: \"text_background_color\", fnc: ({detail}) => this.update_user_settings(\"text_background_color\", detail, \"text\")},\n {type: \"text_background_opacity\", fnc: ({detail}) => this.update_user_settings(\"text_background_opacity\", detail, \"text\")},\n {type: \"text_border_color\", fnc: ({detail}) => this.update_user_settings(\"text_border_color\", detail, \"text\")},\n {type: \"text_border_opacity\", fnc: ({detail}) => this.update_user_settings(\"text_border_opacity\", detail, \"text\")},\n {type: \"text_border_width\", fnc: ({detail}) => this.update_user_settings(\"text_border_width\", detail, \"text\")},\n {type: \"text_outline_color\", fnc: ({detail}) => this.update_user_settings(\"text_outline_color\", detail, \"text\")},\n {type: \"text_outline_opacity\", fnc: ({detail}) => this.update_user_settings(\"text_outline_opacity\", detail, \"text\")},\n {type: \"text_outline_width\", fnc: ({detail}) => this.update_user_settings(\"text_outline_width\", detail, \"text\")},\n\n {type: \"video_url\", fnc: ({detail}) => this.update_user_settings(\"video_url\", detail)},\n {type: \"video_coord1\", fnc: ({detail}) => this.update_user_settings(\"video_coord1\", detail)},\n {type: \"video_coord2\", fnc: ({detail}) => this.update_user_settings(\"video_coord2\", detail)},\n {type: \"video_coord3\", fnc: ({detail}) => this.update_user_settings(\"video_coord3\", detail)},\n {type: \"video_coord4\", fnc: ({detail}) => this.update_user_settings(\"video_coord4\", detail)},\n {type: \"video_min_zoom\", fnc: ({detail}) => this.update_user_settings(\"video_min_zoom\", detail)},\n {type: \"video_max_zoom\", fnc: ({detail}) => this.update_user_settings(\"video_max_zoom\", detail)},\n\n {type: \"update_user_view_state\", fnc: ({detail}) => {\n var user = this.state.users.find( u => u.id === detail.id)\n\n if (user) {\n user = {...user, view_state: detail}\n this.setState({users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }},\n {type: \"text_settings\", fnc: ({detail}) => {\n const current = this.state.current_user.id === detail.user_id\n var user = current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, text_settings: {...detail.text_settings}}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n if (current)\n broadcast(`send_text_settings`, detail)\n }},\n {type: \"line_settings\", fnc: ({detail}) => {\n const current = this.state.current_user.id === detail.user_id\n var user = current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, line_settings: {...detail.line_settings}}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n if (current)\n broadcast(`send_line_settings`, detail)\n }},\n {type: \"video_settings\", fnc: ({detail}) => {\n const current = this.state.current_user.id === detail.user_id\n var user = current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, video_settings: {...detail.video_settings}}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n if (current)\n broadcast(`send_video_settings`, detail)\n }},\n {type: \"point_settings\", fnc: ({detail}) => {\n const current = this.state.current_user.id === detail.user_id\n var user = current ? this.state.current_user : this.state.users.find( u => u.id === detail.user_id)\n\n if (user) {\n user = {...user, point_settings: {...detail.point_settings}}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n if (current)\n broadcast(`send_point_settings`, detail)\n }},\n\n {type: \"set_settings\", fnc: ({detail}) => {\n this.setState((state) => ({\n current_user: {\n ...this.state.current_user,\n polygon_settings: detail.polygon_settings,\n line_settings: detail.line_settings,\n text_settings: detail.text_settings,\n point_settings: detail.point_settings,\n video_settings: detail.video_settings,\n }\n }))\n }},\n\n {type: \"update_polygon_opacity\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_opacity\", detail)},\n {type: \"update_polygon_color\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_color\", detail)},\n {type: \"update_polygon_border_width\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_border_width\", detail)},\n {type: \"update_polygon_border_opacity\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_border_opacity\", detail)},\n {type: \"update_polygon_border_color\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_border_color\", detail)},\n {type: \"update_polygon_pattern\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_pattern\", detail)},\n {type: \"update_polygon_pattern_scale\", fnc: ({detail}) => this.update_layer_polygon_settings(\"update_polygon_pattern_scale\", detail)},\n\n {type: \"update_line_color\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_color\", detail)},\n {type: \"update_line_opacity\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_opacity\", detail)},\n {type: \"update_line_width\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_width\", detail)},\n {type: \"update_line_cap_rounded\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_cap_rounded\", detail)},\n {type: \"update_line_joint_rounded\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_joint_rounded\", detail)},\n {type: \"update_line_show_points\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_show_points\", detail)},\n {type: \"update_line_show_distance\", fnc: ({detail}) => this.update_layer_line_settings(\"update_line_show_distance\", detail)},\n\n {type: \"update_point_icon\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_icon\", detail)},\n {type: \"update_point_size\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_size\", detail)},\n {type: \"update_point_angle\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_angle\", detail)},\n {type: \"update_point_min_pixels\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_min_pixels\", detail)},\n {type: \"update_point_max_pixels\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_max_pixels\", detail)},\n {type: \"update_point_tooltip_text\", fnc: ({detail}) => this.update_layer_point_settings(\"update_point_tooltip_text\", detail)},\n\n {type: \"update_video_url\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_url\", detail)},\n {type: \"update_video_coord1\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_coord1\", detail)},\n {type: \"update_video_coord2\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_coord2\", detail)},\n {type: \"update_video_coord3\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_coord3\", detail)},\n {type: \"update_video_coord4\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_coord4\", detail)},\n {type: \"update_video_min_zoom\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_min_zoom\", detail)},\n {type: \"update_video_max_zoom\", fnc: ({detail}) => this.update_layer_video_settings(\"update_video_max_zoom\", detail)},\n\n {type: \"update_text_color\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_color\", detail)},\n {type: \"update_text_opacity\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_opacity\", detail)},\n {type: \"update_text_text\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_text\", detail)},\n {type: \"update_text_size\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_size\", detail)},\n {type: \"update_text_anchor\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_anchor\", detail)},\n {type: \"update_text_alignment_baseline\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_alignment_baseline\", detail)},\n {type: \"update_text_angle\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_angle\", detail)},\n {type: \"update_text_font_family\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_font_family\", detail)},\n {type: \"update_text_font_weight\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_font_weight\", detail)},\n {type: \"update_text_max_width\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_max_width\", detail)},\n {type: \"update_text_word_break\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_word_break\", detail)},\n {type: \"update_text_background_padding_left\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_padding_left\", detail)},\n {type: \"update_text_background_padding_right\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_padding_right\", detail)},\n {type: \"update_text_background_padding_top\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_padding_top\", detail)},\n {type: \"update_text_background_padding_bottom\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_padding_bottom\", detail)},\n {type: \"update_text_background_color\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_color\", detail)},\n {type: \"update_text_background_opacity\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_background_opacity\", detail)},\n {type: \"update_text_border_color\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_border_color\", detail)},\n {type: \"update_text_border_opacity\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_border_opacity\", detail)},\n {type: \"update_text_border_width\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_border_width\", detail)},\n {type: \"update_text_outline_color\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_outline_color\", detail)},\n {type: \"update_text_outline_opacity\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_outline_opacity\", detail)},\n {type: \"update_text_outline_width\", fnc: ({detail}) => this.update_layer_text_settings(\"update_text_outline_width\", detail)},\n\n\n {type: \"user_online_socket\", fnc: ({detail}) => {\n if (detail.id !== this.state.current_user.id){\n this.setState({users: [\n ...this.state.users.filter(v => v.id !== detail.id),\n detail\n ]})\n\n post_gql(\n `query {getSettings(user_id: ${detail.id})}`,\n resp => {\n if (this.state.users.find(v => v.id === detail.id)){\n this.setState({users: [\n ...this.state.users.filter(v => v.id !== detail.id),\n {\n ...resp.data.data.getSettings,\n id: detail.id,\n name: detail.name,\n picture: detail.picture\n }\n ]})\n }\n }\n )\n\n }\n }},\n {type: \"current_user\", fnc: ({detail}) => this.setState({\n current_user: {\n ...this.state.current_user,\n id: detail.id,\n name: detail.name,\n email: detail.email,\n picture: detail.picture\n }\n })},\n {type: \"user_offline_socket\", fnc: ({detail}) => {\n this.setState({users: [...this.state.users.filter(v => v.id !== detail.id)]})\n broadcast(\"remove_layer\", `${detail.id}_position`)\n }},\n {type: \"user_map_hover\", fnc: ({detail}) => {\n var user = null\n var current = false\n\n if (detail.id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === detail.id)\n }\n\n if (user) {\n user = {...user, position: detail.coordinate}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n broadcast_position(user, detail.mode, current)\n\n if (current)\n broadcast(\"send_user_map_hover\", detail)\n }\n }},\n {type: \"user_map_drag_start\", fnc: ({detail}) => {\n var user = null\n var current = false\n\n if (detail.id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === detail.id)\n }\n\n if (user) {\n if (detail.mode === \"polygon\" || detail.mode === \"lastik\") {\n const circle = turf.circle(detail.coordinate, user.polygon_settings.radius, {steps: 32, units: 'meters'});\n user = {...user, p_coords: circle, position: detail.coordinate}\n } else if (detail.mode === \"line\") {\n user = {...user, l_coords: [detail.coordinate], position: detail.coordinate}\n } else {\n if (detail.move_props) {\n user = {...user, position: detail.coordinate}\n }\n }\n\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n if (current)\n broadcast(\"send_user_map_drag_start\", detail)\n }},\n {type: \"user_map_drag\", fnc: ({detail}) => {\n var user = null\n var current = false\n\n if (detail.id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === detail.id)\n }\n\n if (user) {\n if (detail.mode === \"polygon\" || detail.mode === \"lastik\"){\n var radius = user.polygon_settings.radius\n var coordinate = detail.coordinate\n var position = user.position\n var circle = turf.circle(coordinate, radius, {steps: 32, units: 'meters'});\n var circle_before = turf.circle(position, radius, {steps: 32, units: 'meters'});\n\n try {\n var angle = turf.bearing(position, coordinate)\n position = turf.point(position)\n coordinate = turf.point(coordinate)\n\n const p1 = turf.transformTranslate(position, radius, angle-90, {units: 'meters'})\n const p2 = turf.transformTranslate(position, radius, angle+90, {units: 'meters'})\n const p3 = turf.transformTranslate(coordinate, radius, angle+90, {units: 'meters'})\n const p4 = turf.transformTranslate(coordinate, radius, angle-90, {units: 'meters'})\n var poly = turf.polygon([[p1.geometry.coordinates, p2.geometry.coordinates, p3.geometry.coordinates, p4.geometry.coordinates, p1.geometry.coordinates]])\n circle = turf.union(poly, circle)\n circle = turf.union(circle_before, circle)\n\n user = {...user, position: detail.coordinate, p_coords: user.p_coords !== false ? turf.union(user.p_coords, circle) : circle}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n } catch (err) {\n console.log(\"polygon_union_error\", err)\n }\n\n if (!user.edit_layer_id) {\n const props = {id: `${user.id}_curr_polygon`, coords: user.p_coords.geometry.coordinates, polygon_settings: user.polygon_settings}\n const layer = polygon_layer(props)\n\n broadcast(\"add_or_replace_layer\", layer)\n } else {\n var obj = null\n var object = this.state.layers.find(v => v.id === user.edit_layer_id).props.data\n\n\n try {\n if (detail.mode === \"polygon\"){\n obj = turf.union(object, user.p_coords, {properties: object.properties})\n } else if (detail.mode === \"lastik\") {\n obj = turf.difference(object, user.p_coords, {properties: object.properties})\n }\n\n if (obj) {\n const props = {id: user.edit_layer_id, coords: obj.geometry.coordinates, polygon_settings: obj.properties.polygon_settings}\n broadcast(\"add_or_replace_layer\", polygon_layer(props, obj.geometry.type))\n }\n } catch (err) {\n console.log(\"som err\", err)\n }\n }\n\n broadcast_position(user, detail.mode, current)\n } else if (detail.mode === \"line\"){\n user = {...user, p_coords: false, l_coords: [...user.l_coords, detail.coordinate], position: detail.coordinate}\n\n if (!user.edit_layer_id) {\n const props = {id: `${user.id}_curr_line`, line_coords: user.l_coords, line_settings: user.line_settings}\n const layer = line_layer(props)\n\n broadcast(\"add_or_replace_layer\", layer)\n\n if (props.line_settings.show_distance)\n broadcast(\"add_or_replace_layer\", line_distance_layer(`${props.id}_distance`, props.line_coords))\n\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n\n broadcast_position(user, detail.mode, current)\n } else if (detail.mode === \"cursor\"){\n if (detail.move_props && detail.move_props.type === \"video_edge\") {\n user = {...user, position: detail.coordinate}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n\n if (current) {\n broadcast(\n \"add_or_replace_layer\",\n new GeoJsonLayer({\n id: `${detail.move_props.object_id}_${detail.move_props.index}_video_edge`,\n data: turf.point(detail.coordinate, {type: \"video_edge\", object_id: detail.move_props.object_id, index: detail.move_props.index}),\n getFillColor: [93, 173, 226, 200],\n getLineWidth: 0,\n pickable: true,\n pointType: \"circle\",\n getPointRadius: 10,\n pointRadiusUnits: 'pixels',\n })\n )\n }\n\n broadcast(\n `update_video_coord${detail.move_props.index}`,\n {\n object_id: detail.move_props.object_id,\n user_id: user.id,\n value: detail.coordinate\n }\n )\n }\n }\n }\n\n if (current)\n broadcast(\"send_user_map_drag\", detail)\n }},\n {type: \"user_map_drag_end\", fnc: ({detail}) => {\n var user = null\n var current = false\n\n if (detail.id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === detail.id)\n }\n\n if (user) {\n if (detail.mode === \"polygon\" || detail.mode === \"lastik\"){\n if (current) {\n if (!user.edit_layer_id) {\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${user.id}\",\n type: POLYGON,\n coords: ${JSON.stringify(user.p_coords[\"geometry\"][\"coordinates\"])},\n polygon_settings: {\n color: \"${user.polygon_settings.color}\",\n radius: ${user.polygon_settings.radius},\n opacity: ${user.polygon_settings.opacity},\n border_width: ${user.polygon_settings.border_width},\n border_opacity: ${user.polygon_settings.border_opacity},\n border_color: \"${user.polygon_settings.border_color}\",\n pattern: \"${user.polygon_settings.pattern}\",\n pattern_scale: ${user.polygon_settings.pattern_scale},\n }){id user_id coords type polygon_settings { color radius opacity border_color border_width border_opacity pattern pattern_scale}}}\n `,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n broadcast(\"add_or_replace_layer\", polygon_layer(props))\n broadcast(\"remove_layer\", `${user.id}_curr_polygon`)\n }\n )\n } else {\n const object = this.state.layers.find(v => v.id === user.edit_layer_id).props.data\n var coords = \"[]\"\n var coords_multi = \"[]\"\n\n if (object.geometry.type === \"MultiPolygon\") {\n coords_multi = JSON.stringify(object.geometry.coordinates)\n } else {\n coords= JSON.stringify(object.geometry.coordinates)\n }\n\n post_gql(\n `mutation { geomapLayerUpdate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n layer_id: ${user.edit_layer_id},\n user_id: \"${user.id}\",\n coords: ${coords},\n coords_multi: ${coords_multi},\n polygon_settings: {\n color: \"${object.properties.polygon_settings.color}\",\n radius: ${object.properties.polygon_settings.radius},\n opacity: ${object.properties.polygon_settings.opacity},\n border_width: ${object.properties.polygon_settings.border_width},\n border_opacity: ${object.properties.polygon_settings.border_opacity},\n border_color: \"${object.properties.polygon_settings.border_color}\",\n pattern: \"${object.properties.polygon_settings.pattern}\",\n pattern_scale: ${object.properties.polygon_settings.pattern_scale}\n }){id user_id coords polygon_settings { color radius opacity border_color border_width border_opacity pattern pattern_scale}}}\n `,\n resp => null\n )\n }\n }\n\n user = {...user, p_coords: false, l_coords: false, position: detail.coordinate}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n } else if (detail.mode === \"line\") {\n\n if (current) {\n if (!user.edit_layer_id) {\n post_gql(\n `mutation { geomapLayerCreate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n user_id: \"${user.id}\",\n type: LINE,\n line_coords: ${JSON.stringify(user.l_coords)},\n line_settings: {\n color: \"${user.line_settings.color}\",\n width: ${user.line_settings.width},\n opacity: ${user.line_settings.opacity},\n cap_rounded: ${user.line_settings.cap_rounded},\n joint_rounded: ${user.line_settings.joint_rounded},\n show_points: ${user.line_settings.show_points},\n show_distance: ${user.line_settings.show_distance}\n }){id user_id line_coords type line_settings { color width opacity cap_rounded joint_rounded show_points show_distance}}}\n `,\n resp => {\n const props = resp.data.data.geomapLayerCreate\n broadcast(\"add_or_replace_layer\", line_layer(props))\n\n if (props.line_settings.show_distance)\n broadcast(\"add_or_replace_layer\", line_distance_layer(`${props.id}_distance`, props.line_coords))\n\n broadcast(\"remove_layer\", `${user.id}_curr_line`)\n broadcast(\"remove_layer\", `${user.id}_curr_line_distance`)\n }\n )\n } else {\n const object = this.state.layers.find(v => v.id === user.edit_layer_id).props.data\n\n post_gql(\n `mutation { geomapLayerUpdate(\n geomap_id: \"${window.location.pathname.replace(\"/t/\", \"\")}\",\n layer_id: ${user.edit_layer_id},\n user_id: \"${user.id}\",\n line_coords: ${JSON.stringify(object.geometry.coordinates)},\n line_settings: {\n color: \"${object.properties.line_settings.color}\",\n width: ${object.properties.line_settings.width},\n opacity: ${object.properties.line_settings.opacity},\n cap_rounded: ${user.line_settings.cap_rounded},\n joint_rounded: ${user.line_settings.joint_rounded},\n show_points: ${user.line_settings.show_points},\n show_distance: ${user.line_settings.show_distance}\n }){id user_id coords line_settings { color width opacity cap_rounded joint_rounded show_points show_distance}}}\n `,\n resp => null\n )\n }\n }\n\n user = {...user, p_coords: false, l_coords: false, position: detail.coordinate}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }\n\n if (current)\n broadcast(\"send_user_map_drag_end\", detail)\n }},\n {type: \"finished_layer\", fnc: ({detail}) => {\n post_gql(\n `query { geomapLayerGet(id: ${detail.layer_id}){\n id user_id point_coords coords line_coords type\n polygon_settings { color radius opacity border_color border_width border_opacity pattern pattern_scale}\n text_settings {\n color opacity text size anchor alignment_baseline angle font_family font_weight max_width word_break\n background_padding_left background_padding_right background_padding_top background_padding_bottom\n background_color background_opacity border_color border_opacity border_width\n outline_color outline_opacity outline_width\n }\n point_settings {\n icon_atlas icon_mapping icon size angle min_pixels max_pixels tooltip_text\n }\n video_settings {url coord1 coord2 coord3 coord4 min_zoom max_zoom}\n line_settings { color width opacity cap_rounded joint_rounded show_points show_distance}\n chat_settings {title picture status created_at}\n }}`,\n resp => {\n const props = resp.data.data.geomapLayerGet\n\n switch (props.type) {\n case \"TEXT\":\n broadcast(\"add_or_replace_layer\", text_layer(props.point_coords, props))\n break;\n case \"POINT\":\n broadcast(\"add_or_replace_layer\", marker_layer(props.point_coords, props))\n break;\n case \"CHAT\":\n chat_layer(props.point_coords, props).forEach(l => broadcast(\"add_or_replace_layer\", l))\n break;\n\n case \"VIDEO\":\n broadcast(\"add_or_replace_layer\", video_layer(props))\n break;\n\n case \"LINE\":\n broadcast(\"add_or_replace_layer\", line_layer(props))\n\n if (props.line_settings.show_distance)\n broadcast(\"add_or_replace_layer\", line_distance_layer(`${props.id}_distance`, props.line_coords))\n\n broadcast(\"remove_layer\", `${props.user_id}_curr_line`)\n broadcast(\"remove_layer\", `${props.user_id}_curr_line_distance`)\n\n var user = null\n var current = false\n\n if (props.user_id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === props.user_id)\n }\n\n if (user) {\n user = {...user, p_coords: false, l_coords: false}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n break;\n default:\n broadcast(\"add_or_replace_layer\", polygon_layer(props))\n broadcast(\"remove_layer\", `${props.user_id}_curr_polygon`)\n\n user = null\n current = false\n\n if (props.user_id === this.state.current_user.id){\n user = this.state.current_user\n current = true\n } else {\n user = this.state.users.find(v => v.id === props.user_id)\n }\n\n if (user) {\n user = {...user, p_coords: false, l_coords: false}\n this.setState(current ? {current_user: user} : {users: [...this.state.users.map(v => v.id !== user.id ? v : user)]})\n }\n }\n }\n )\n }},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n return(\n \n
\n\n \n
\n \n {time_slice}\n \n {v.title}\n {\n v.new_messages_count > 0 ? \n {v.new_messages_count}\n : null\n }\n
\n {\n this.state.current_user.name && {\n if (this.state.follow_user_id === u.id) {\n this.setState({follow_user_id: false})\n broadcast(\"user_avatar_click\", {id: false})\n } else {\n this.setState({follow_user_id: u.id})\n broadcast(\"user_avatar_click\", {id: u.id, view_state: this.state.users.find(v => v.id === u.id).view_state})\n }\n }}\n />\n )\n }\n +\n
\n )\n }\n}\n\nexport default UserLayers;\n","import React from 'react'\nimport {broadcast, listen, stop_listen, post_gql, INIT_POLYGON_SETTINGS, INIT_TEXT_SETTINGS} from '../../utils'\nimport {GeoJsonLayer} from '@deck.gl/layers';\nimport ColorPicker from '../colorpicker'\nimport * as turf from '@turf/turf'\n\nclass LayerEditor extends React.Component {\n constructor(props) {\n super(props)\n this.state = {\n object_id: false,\n mouse_down_coords: false,\n container_mouse_coords: false,\n top: 10,\n left: 30,\n user_id: null,\n hidden: false,\n fill_hidden: false,\n border_hidden: false,\n pattern_hidden: false,\n polygon_settings: INIT_POLYGON_SETTINGS,\n text_settings: INIT_TEXT_SETTINGS,\n listners: []\n }\n }\n\n close_editor(){\n this.setState({object_id: false, polygon_settings: {radius: this.state.polygon_settings.radius}})\n broadcast(\"remove_layer\", \"bboxPolygon\")\n broadcast(\"toolbar_mode_change\", {mode: 'cursor'})\n broadcast(\"layer_edit\", {id: false, type: \"polygon\"})\n }\n\n componentDidMount(){\n const listners = [\n {type: \"containter_onMouseMove\", fnc: ({detail}) => {\n this.setState({container_mouse_coords: [detail.clientX, detail.clientY]})\n if (!!this.state.mouse_down_coords)\n this.setState({\n top: this.state.top + (detail.clientY - this.state.mouse_down_coords[1]),\n left: this.state.left + (detail.clientX - this.state.mouse_down_coords[0]),\n mouse_down_coords: [detail.clientX, detail.clientY]\n })\n }},\n {type: \"toolbar_delete\", fnc: ({detail}) => {\n if (this.state.object_id) {\n post_gql(\n `mutation {geomapLayerDelete(layer_id: ${this.state.object_id})}`,\n resp => {\n broadcast(\"remove_layer\", this.state.object_id)\n this.close_editor()\n }\n )\n }\n }},\n {type: \"map_click\", fnc: ({detail}) => {\n // console.log(\"map_click\", detail)\n if (detail.mode === \"cursor\") {\n const obj = detail.event.object\n if (obj && !obj.bbox && !!obj.properties.polygon_settings) {\n this.setState({object_id: obj.properties.id, polygon_settings: {...obj.properties.polygon_settings, radius: this.state.polygon_settings.radius}})\n\n const bboxPolygon = turf.bboxPolygon(turf.bbox(obj))\n\n const layer = new GeoJsonLayer({\n id: `bboxPolygon`, data: bboxPolygon, getFillColor: [0, 0, 0, 0], getFillOpacity: 0,\n getLineWidth: 4, lineWidthUnits: 'pixels', getLineColor: [168, 0, 0, 256]\n })\n\n broadcast(\"add_or_replace_layer\", layer)\n broadcast(\"layer_edit\", {id: obj.properties.id, type: \"polygon\"})\n } else {\n if (this.state.object_id) {\n this.setState({object_id: false, polygon_settings: {radius: this.state.polygon_settings.radius}})\n broadcast(\"remove_layer\", \"bboxPolygon\")\n }\n }\n }\n }},\n {type: \"polygon_radius\", fnc: ({detail}) => {\n this.setState({polygon_settings: {...this.state.polygon_settings, radius: detail.value}})\n }},\n {type: \"update_polygon_opacity\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, opacity: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_color\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, color: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_border_width\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, border_width: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_border_opacity\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, border_opacity: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_border_color\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, border_color: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_pattern\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, pattern: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"update_polygon_pattern_scale\", fnc: ({detail}) => {\n const settings = {...this.state.polygon_settings, pattern_scale: detail.value}\n this.setState({polygon_settings: settings})\n }},\n {type: \"add_or_replace_layer\", fnc: ({detail}) => {\n if (detail.id === this.state.object_id) {\n const obj = detail.props.data\n const bboxPolygon = turf.bboxPolygon(turf.bbox(obj))\n const layer = new GeoJsonLayer({\n id: `bboxPolygon`, data: bboxPolygon, getFillColor: [0, 0, 0, 0], getFillOpacity: 0,\n getLineWidth: 4, lineWidthUnits: 'pixels', getLineColor: [168, 0, 0, 256]\n })\n\n broadcast(\"add_or_replace_layer\", layer)\n }\n }},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n componentWillUnmount(){this.state.listners.forEach(l => stop_listen(l.type, l.fnc))}\n\n render() {\n const object_id = this.state.object_id\n const user_id = this.props.user_id\n\n if (object_id){\n return(\n \n {this.state.current_user.name}\n
\n }\n {\n this.state.users.map(u =>\n \n this.setState({mouse_down_coords: this.state.container_mouse_coords})}\n onMouseUp={e => this.setState({mouse_down_coords: false})}\n >\n редактирование полигона\n
\n {\n this.state.hidden ? null :\n \n this.setState({hidden: !this.state.hidden})}\n >{this.state.hidden ? \"▾\" : \"▸\"}\n this.close_editor()}\n >+\n
\n \n broadcast(\"update_polygon_pattern\", {object_id: object_id, user_id: user_id, value: 'dots'})}\n >\n точка\n \n
\n \n заливка\n this.setState({fill_hidden: !this.state.fill_hidden})}\n >{this.state.fill_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.fill_hidden ? null :\n \n
\n }\n \n \n
\n \n цвет\n broadcast(\"update_polygon_color\", {object_id: object_id, user_id: user_id, value: e.currentTarget.value})}\n />\n
\n \n радиус\n broadcast(\"polygon_radius\", {object_id: object_id, user_id: user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n прозрачность\n broadcast(\"update_polygon_opacity\", {object_id: object_id, user_id: user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n паттерн\n this.setState({pattern_hidden: !this.state.pattern_hidden})}\n >{this.state.pattern_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.pattern_hidden ? null :\n \n broadcast(\"update_polygon_pattern\", {object_id: object_id, user_id: user_id, value: 'none'})}\n >\n без паттерна\n ![\"\"]()
\n
\n \n масштабирование\n broadcast(\"update_polygon_pattern_scale\", {object_id: object_id, user_id: user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n \n \n \n \n \n \n \n }\n\n \n граница\n this.setState({border_hidden: !this.state.border_hidden})}\n >{this.state.border_hidden ? \"▾\" : \"▸\"} \n
\n {\n this.state.border_hidden ? null :\n \n
\n }\n \n }\n \n )\n } else {\n return(null)\n }\n }\n}\n\nexport default LayerEditor;\n","import React from 'react';\nimport Cookies from 'universal-cookie';\n\nimport {\n listen,\n broadcast,\n post_gql,\n polygon_layer,\n text_layer,\n marker_layer,\n video_layer,\n chat_layer,\n IS_DEV\n} from './utils'\n\nimport {line_layer, line_distance_layer} from './utils/line_utils'\n\nimport MyMap from './Map';\n\nimport { Socket as PhoenixSocket} from 'phoenix'\nimport Toolbar from './components/toolbar';\nimport Auth from './components/auth';\nimport PolygonTool from './components/polygon_tool';\nimport LineTool from './components/line_tool';\nimport TextTool from './components/text_tool';\nimport PointTool from './components/point_tool';\nimport TilesTool from './components/tiles_tool';\nimport VideoTool from './components/video_tool';\nimport Chat from './components/chat';\nimport Notifications from './components/notifications';\nimport UserLayers from './components/user_layers';\nimport LayerEditor from './components/layer_editor';\n\nconst reload_if_no_token = (id, access_token) => {\n var token = window.location.pathname.replace(\"/t/\", \"\")\n const origin = window.location.origin.replace(\"3000\", \"4000\")\n\n const cookies = new Cookies()\n const map_token = cookies.get('map_token')\n\n if (token === \"\" || token === \"/\") {\n if (map_token){\n window.location.replace(`${window.location.origin}/t/${map_token}`)\n } else {\n post_gql(\n \"mutation {geomapCreate { token }}\",\n resp => window.location.replace(`${window.location.origin}/t/${resp.data.data.geomapCreate.token}`)\n )\n }\n } else {\n if (token === \"\" || token === \"/\")\n token = map_token\n\n cookies.set('map_token', token, { path: '/' });\n\n post_gql(\n `mutation {geomapUserJoin(map_token: \"${token}\"){\n geomap {tile_links {title styles_json_url selected}}\n users {id name picture}\n settings\n notifications {\n chat_id new_messages_count coords user_name\n title picture last_m_time first_m_time\n }\n }}`,\n resp => {\n resp = resp.data.data.geomapUserJoin\n broadcast(\"set_view_state\", {...resp.settings.view_state, id: id})\n broadcast(\"set_polygon_settings\", {...resp.settings.polygon_settings, id: id})\n broadcast(\"set_line_settings\", {...resp.settings.line_settings, id: id})\n broadcast(\"set_text_settings\", {...resp.settings.text_settings, id: id})\n broadcast(\"set_point_settings\", {...resp.settings.point_settings, id: id})\n broadcast(\"set_video_settings\", {...resp.settings.video_settings, id: id})\n broadcast(\"set_settings\", resp.settings)\n broadcast(\"notifications\", resp.notifications)\n\n resp.users.forEach(u => broadcast(\"user_online_socket\", u))\n broadcast(\"map_tile_links\", resp.geomap.tile_links)\n },\n {\"authorization\": `Bearer ${access_token}`}\n )\n\n post_gql(\n `query {geomapLayerGetByMap(geomap_id: \"${token}\"){\n id user_id point_coords coords line_coords coords_multi type\n polygon_settings { color radius opacity border_color border_width border_opacity pattern pattern_scale}\n line_settings { color width opacity cap_rounded joint_rounded show_points show_distance}\n text_settings {\n color opacity text size anchor alignment_baseline angle font_family font_weight max_width word_break\n background_padding_left background_padding_right background_padding_top background_padding_bottom\n background_color background_opacity border_color border_opacity border_width\n outline_color outline_opacity outline_width\n }\n video_settings {url coord1 coord2 coord3 coord4 min_zoom max_zoom}\n point_settings { icon_atlas icon_mapping icon size angle min_pixels max_pixels tooltip_text }\n chat_settings {title picture status created_at}\n }}`,\n resp => resp.data.data.geomapLayerGetByMap.forEach(props => {\n\n switch (props.type) {\n case \"TEXT\":\n broadcast(\"add_or_replace_layer\", text_layer(props.point_coords, props))\n break;\n case \"POINT\":\n broadcast(\"add_or_replace_layer\", marker_layer(props.point_coords, props))\n break;\n\n case \"LINE\":\n broadcast(\"add_or_replace_layer\", line_layer(props))\n if (props.line_settings.show_distance)\n broadcast(\"add_or_replace_layer\", line_distance_layer(`${props.id}_distance`, props.line_coords))\n break;\n\n case \"CHAT\":\n chat_layer(props.point_coords, props).forEach(l => broadcast(\"add_or_replace_layer\", l))\n break;\n\n case \"VIDEO\":\n broadcast(\"add_or_replace_layer\", video_layer(props))\n break;\n\n default:\n broadcast(\"add_or_replace_layer\", polygon_layer(props, props.coords.length === 0 ? \"MultiPolygon\" : \"Polygon\"))\n }\n })\n )\n\n var socket_url = `ws://back.${origin.replace(\"http://\", \"\")}/api/socket`\n\n if (IS_DEV)\n socket_url = `ws://${origin.replace(\"http://\", \"\")}/api/socket`\n\n const socket = new PhoenixSocket(socket_url, {params: {token: access_token}})\n socket.connect()\n const channel = socket.channel(`user:${id}`, {})\n channel.join()\n\n channel.on('notifications', resp => broadcast('notifications', resp.notifications))\n channel.on('map_tile_links', resp => broadcast('map_tile_links', resp.tile_links))\n channel.on('user_online', resp => broadcast('user_online_socket', resp))\n channel.on('user_offline', resp => broadcast('user_offline_socket', resp))\n channel.on('user_map_hover', resp => broadcast('user_map_hover', resp))\n channel.on('user_map_drag_start', resp => broadcast('user_map_drag_start', resp))\n channel.on('user_map_drag_end', resp => broadcast('user_map_drag_end', resp))\n channel.on('user_map_drag', resp => broadcast('user_map_drag', resp))\n channel.on('polygon_color', resp => broadcast('polygon_color', resp))\n channel.on('polygon_radius', resp => broadcast('polygon_radius', resp))\n channel.on('polygon_opacity', resp => broadcast('polygon_opacity', resp))\n channel.on('polygon_border_width', resp => broadcast('polygon_border_width', resp))\n channel.on('polygon_border_opacity', resp => broadcast('polygon_border_opacity', resp))\n channel.on('polygon_border_color', resp => broadcast('polygon_border_color', resp))\n channel.on('polygon_pattern', resp => broadcast('polygon_pattern', resp))\n channel.on('polygon_pattern_scale', resp => broadcast('polygon_pattern_scale', resp))\n\n channel.on('text_color', resp => broadcast('text_color', resp))\n channel.on('text_opacity', resp => broadcast('text_opacity', resp))\n channel.on('text_text', resp => broadcast('text_text', resp))\n channel.on('text_size', resp => broadcast('text_size', resp))\n channel.on('text_anchor', resp => broadcast('text_anchor', resp))\n channel.on('text_alignment_baseline', resp => broadcast('text_alignment_baseline', resp))\n channel.on('text_angle', resp => broadcast('text_angle', resp))\n channel.on('text_font_family', resp => broadcast('text_font_family', resp))\n channel.on('text_font_weight', resp => broadcast('text_font_weight', resp))\n channel.on('text_max_width', resp => broadcast('text_max_width', resp))\n channel.on('text_word_break', resp => broadcast('text_word_break', resp))\n channel.on('text_background_padding_left', resp => broadcast('text_background_padding_left', resp))\n channel.on('text_background_padding_right', resp => broadcast('text_background_padding_right', resp))\n channel.on('text_background_padding_top', resp => broadcast('text_background_padding_top', resp))\n channel.on('text_background_padding_bottom', resp => broadcast('text_background_padding_bottom', resp))\n channel.on('text_background_color', resp => broadcast('text_background_color', resp))\n channel.on('text_background_opacity', resp => broadcast('text_background_opacity', resp))\n channel.on('text_border_color', resp => broadcast('text_border_color', resp))\n channel.on('text_border_opacity', resp => broadcast('text_border_opacity', resp))\n channel.on('text_border_width', resp => broadcast('text_border_width', resp))\n channel.on('text_outline_color', resp => broadcast('text_outline_color', resp))\n channel.on('text_outline_opacity', resp => broadcast('text_outline_opacity', resp))\n channel.on('text_outline_width', resp => broadcast('text_outline_width', resp))\n\n channel.on('point_icon', resp => broadcast('point_icon', resp))\n channel.on('point_size', resp => broadcast('point_size', resp))\n channel.on('point_angle', resp => broadcast('point_angle', resp))\n channel.on('point_min_pixels', resp => broadcast('point_min_pixels', resp))\n channel.on('point_max_pixels', resp => broadcast('point_max_pixels', resp))\n channel.on('point_tooltip_text', resp => broadcast('point_tooltip_text', resp))\n\n channel.on('line_color', resp => broadcast('line_color', resp))\n channel.on('line_opacity', resp => broadcast('line_opacity', resp))\n channel.on('line_width', resp => broadcast('line_width', resp))\n channel.on('line_cap_rounded', resp => broadcast('line_cap_rounded', resp))\n channel.on('line_joint_rounded', resp => broadcast('line_joint_rounded', resp))\n channel.on('line_show_points', resp => broadcast('line_show_points', resp))\n channel.on('line_show_distance', resp => broadcast('line_show_distance', resp))\n\n channel.on('video_url', resp => broadcast('video_url', resp))\n channel.on('video_coord1', resp => broadcast('video_coord1', resp))\n channel.on('video_coord2', resp => broadcast('video_coord2', resp))\n channel.on('video_coord3', resp => broadcast('video_coord3', resp))\n channel.on('video_coord4', resp => broadcast('video_coord4', resp))\n channel.on('video_min_zoom', resp => broadcast('video_min_zoom', resp))\n channel.on('video_max_zoom', resp => broadcast('video_max_zoom', resp))\n\n channel.on('text_settings', resp => broadcast('text_settings', resp))\n channel.on('video_settings', resp => broadcast('text_settings', resp))\n channel.on('point_settings', resp => broadcast('point_settings', resp))\n channel.on('line_settings', resp => broadcast('line_settings', resp))\n\n channel.on('update_polygon_opacity', resp => broadcast('update_polygon_opacity', resp))\n channel.on('update_polygon_color', resp => broadcast('update_polygon_color', resp))\n channel.on('update_polygon_border_width', resp => broadcast('update_polygon_border_width', resp))\n channel.on('update_polygon_border_opacity', resp => broadcast('update_polygon_border_opacity', resp))\n channel.on('update_polygon_border_color', resp => broadcast('update_polygon_border_color', resp))\n channel.on('update_polygon_pattern', resp => broadcast('update_polygon_pattern', resp))\n channel.on('update_polygon_pattern_scale', resp => broadcast('update_polygon_pattern_scale', resp))\n\n channel.on('update_point_icon', resp => broadcast('update_point_icon', resp))\n channel.on('update_point_size', resp => broadcast('update_point_size', resp))\n channel.on('update_point_angle', resp => broadcast('update_point_angle', resp))\n channel.on('update_point_min_pixels', resp => broadcast('update_point_min_pixels', resp))\n channel.on('update_point_max_pixels', resp => broadcast('update_point_max_pixels', resp))\n channel.on('update_point_tooltip_text', resp => broadcast('update_point_tooltip_text', resp))\n\n channel.on('update_line_color', resp => broadcast('update_line_color', resp))\n channel.on('update_line_opacity', resp => broadcast('update_line_opacity', resp))\n channel.on('update_line_width', resp => broadcast('update_line_width', resp))\n channel.on('update_line_cap_rounded', resp => broadcast('update_line_cap_rounded', resp))\n channel.on('update_line_joint_rounded', resp => broadcast('update_line_joint_rounded', resp))\n channel.on('update_line_show_points', resp => broadcast('update_line_show_points', resp))\n channel.on('update_line_show_distance', resp => broadcast('update_line_show_distance', resp))\n\n channel.on('update_video_url', resp => broadcast('update_video_url', resp))\n channel.on('update_video_coord1', resp => broadcast('update_video_coord1', resp))\n channel.on('update_video_coord2', resp => broadcast('update_video_coord2', resp))\n channel.on('update_video_coord3', resp => broadcast('update_video_coord3', resp))\n channel.on('update_video_coord4', resp => broadcast('update_video_coord4', resp))\n channel.on('update_video_min_zoom', resp => broadcast('update_video_min_zoom', resp))\n channel.on('update_video_max_zoom', resp => broadcast('update_video_max_zoom', resp))\n\n channel.on('update_text_color', resp => broadcast('update_text_color', resp))\n channel.on('update_text_opacity', resp => broadcast('update_text_opacity', resp))\n channel.on('update_text_text', resp => broadcast('update_text_text', resp))\n channel.on('update_text_size', resp => broadcast('update_text_size', resp))\n channel.on('update_text_anchor', resp => broadcast('update_text_anchor', resp))\n channel.on('update_text_alignment_baseline', resp => broadcast('update_text_alignment_baseline', resp))\n channel.on('update_text_angle', resp => broadcast('update_text_angle', resp))\n channel.on('update_text_font_family', resp => broadcast('update_text_font_family', resp))\n channel.on('update_text_font_weight', resp => broadcast('update_text_font_weight', resp))\n channel.on('update_text_max_width', resp => broadcast('update_text_max_width', resp))\n channel.on('update_text_word_break', resp => broadcast('update_text_word_break', resp))\n channel.on('update_text_background_padding_left', resp => broadcast('update_text_background_padding_left', resp))\n channel.on('update_text_background_padding_right', resp => broadcast('update_text_background_padding_right', resp))\n channel.on('update_text_background_padding_top', resp => broadcast('update_text_background_padding_top', resp))\n channel.on('update_text_background_padding_bottom', resp => broadcast('update_text_background_padding_bottom', resp))\n channel.on('update_text_background_color', resp => broadcast('update_text_background_color', resp))\n channel.on('update_text_background_opacity', resp => broadcast('update_text_background_opacity', resp))\n channel.on('update_text_border_color', resp => broadcast('update_text_border_color', resp))\n channel.on('update_text_border_opacity', resp => broadcast('update_text_border_opacity', resp))\n channel.on('update_text_border_width', resp => broadcast('update_text_border_width', resp))\n channel.on('update_text_outline_color', resp => broadcast('update_text_outline_color', resp))\n channel.on('update_text_outline_opacity', resp => broadcast('update_text_outline_opacity', resp))\n channel.on('update_text_outline_width', resp => broadcast('update_text_outline_width', resp))\n\n channel.on('finished_layer', resp => broadcast('finished_layer', resp))\n channel.on('layer_edit', resp => broadcast('user_layer_edit', resp))\n channel.on('delete_layer', resp => broadcast('remove_layer', resp.layer_id))\n\n channel.on('message_created', resp => broadcast('message_created', resp))\n channel.on('user_view_state', resp => broadcast('update_user_view_state', resp))\n\n return(channel)\n }\n}\n\nconst chanel_push = (channel, type, payload) => {\n if (channel)\n channel.push(type, payload)\n}\n\nclass Cont extends React.Component {\n constructor(props) {\n super(props)\n this.state = {channel: false, user_id: false, listners: []}\n }\n\n componentDidMount(){\n const listners = [\n {type: \"toolbar_mode_change\", fnc: ({detail}) => this.setState({mode: detail.mode})},\n {type: \"send_user_map_hover\", fnc: ({detail}) => chanel_push(this.state.channel, \"user_map_hover\", detail)},\n {type: \"send_user_map_drag_start\", fnc: ({detail}) => chanel_push(this.state.channel, \"user_map_drag_start\", detail)},\n {type: \"send_user_map_drag_end\", fnc: ({detail}) => chanel_push(this.state.channel, \"user_map_drag_end\", detail)},\n {type: \"send_user_map_drag\", fnc: ({detail}) => chanel_push(this.state.channel, \"user_map_drag\", detail)},\n\n {type: \"send_polygon_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_color\", detail)},\n {type: \"send_polygon_radius\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_radius\", detail)},\n {type: \"send_polygon_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_opacity\", detail)},\n {type: \"send_polygon_border_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_border_width\", detail)},\n {type: \"send_polygon_border_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_border_opacity\", detail)},\n {type: \"send_polygon_border_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_border_color\", detail)},\n {type: \"send_polygon_pattern\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_pattern\", detail)},\n {type: \"send_polygon_pattern_scale\", fnc: ({detail}) => chanel_push(this.state.channel, \"polygon_pattern_scale\", detail)},\n\n {type: \"send_text_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_color\", detail)},\n {type: \"send_text_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_opacity\", detail)},\n {type: \"send_text_text\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_text\", detail)},\n {type: \"send_text_size\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_size\", detail)},\n {type: \"send_text_anchor\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_anchor\", detail)},\n {type: \"send_text_alignment_baseline\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_alignment_baseline\", detail)},\n {type: \"send_text_angle\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_angle\", detail)},\n {type: \"send_text_font_family\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_font_family\", detail)},\n {type: \"send_text_font_weight\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_font_weight\", detail)},\n {type: \"send_text_max_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_max_width\", detail)},\n {type: \"send_text_word_break\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_word_break\", detail)},\n {type: \"send_text_background_padding_left\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_padding_left\", detail)},\n {type: \"send_text_background_padding_right\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_padding_right\", detail)},\n {type: \"send_text_background_padding_top\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_padding_top\", detail)},\n {type: \"send_text_background_padding_bottom\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_padding_bottom\", detail)},\n {type: \"send_text_background_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_color\", detail)},\n {type: \"send_text_background_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_background_opacity\", detail)},\n {type: \"send_text_border_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_border_color\", detail)},\n {type: \"send_text_border_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_border_opacity\", detail)},\n {type: \"send_text_border_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_border_width\", detail)},\n {type: \"send_text_outline_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_outline_color\", detail)},\n {type: \"send_text_outline_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_outline_opacity\", detail)},\n {type: \"send_text_outline_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_outline_width\", detail)},\n\n {type: \"send_video_url\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_url\", detail)},\n {type: \"send_video_coord1\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_coord1\", detail)},\n {type: \"send_video_coord2\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_coord2\", detail)},\n {type: \"send_video_coord3\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_coord3\", detail)},\n {type: \"send_video_coord4\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_coord4\", detail)},\n {type: \"send_video_min_zoom\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_min_zoom\", detail)},\n {type: \"send_video_max_zoom\", fnc: ({detail}) => chanel_push(this.state.channel, \"video_max_zoom\", detail)},\n\n {type: \"send_line_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_color\", detail)},\n {type: \"send_line_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_opacity\", detail)},\n {type: \"send_line_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_width\", detail)},\n {type: \"send_line_cap_rounded\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_cap_rounded\", detail)},\n {type: \"send_line_joint_rounded\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_joint_rounded\", detail)},\n {type: \"send_line_show_points\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_show_points\", detail)},\n {type: \"send_line_show_distance\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_show_distance\", detail)},\n\n {type: \"send_point_icon\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_icon\", detail)},\n {type: \"send_point_size\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_size\", detail)},\n {type: \"send_point_angle\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_angle\", detail)},\n {type: \"send_point_min_pixels\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_min_pixels\", detail)},\n {type: \"send_point_max_pixels\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_max_pixels\", detail)},\n\n {type: \"send_text_settings\", fnc: ({detail}) => chanel_push(this.state.channel, \"text_settings\", detail)},\n {type: \"send_line_settings\", fnc: ({detail}) => chanel_push(this.state.channel, \"line_settings\", detail)},\n {type: \"send_point_settings\", fnc: ({detail}) => chanel_push(this.state.channel, \"point_settings\", detail)},\n\n {type: \"send_update_polygon_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_opacity\", detail)},\n {type: \"send_update_polygon_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_color\", detail)},\n {type: \"send_update_polygon_border_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_border_width\", detail)},\n {type: \"send_update_polygon_border_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_border_opacity\", detail)},\n {type: \"send_update_polygon_border_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_border_color\", detail)},\n {type: \"send_update_polygon_pattern\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_pattern\", detail)},\n {type: \"send_update_polygon_pattern_scale\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_polygon_pattern_scale\", detail)},\n\n {type: \"send_update_point_icon\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_point_icon\", detail)},\n {type: \"send_update_point_size\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_point_size\", detail)},\n {type: \"send_update_point_angle\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_point_angle\", detail)},\n {type: \"send_update_point_min_pixels\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_point_min_pixels\", detail)},\n {type: \"send_update_point_max_pixels\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_point_max_pixels\", detail)},\n\n {type: \"send_update_line_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_color\", detail)},\n {type: \"send_update_line_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_opacity\", detail)},\n {type: \"send_update_line_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_width\", detail)},\n {type: \"send_update_line_cap_rounded\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_cap_rounded\", detail)},\n {type: \"send_update_line_joint_rounded\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_joint_rounded\", detail)},\n {type: \"send_update_line_show_points\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_show_points\", detail)},\n {type: \"send_update_line_show_distance\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_line_show_distance\", detail)},\n\n {type: \"send_update_video_url\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_url\", detail)},\n {type: \"send_update_video_coord1\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_coord1\", detail)},\n {type: \"send_update_video_coord2\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_coord2\", detail)},\n {type: \"send_update_video_coord3\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_coord3\", detail)},\n {type: \"send_update_video_coord4\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_coord4\", detail)},\n {type: \"send_update_video_min_zoom\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_min_zoom\", detail)},\n {type: \"send_update_video_max_zoom\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_video_max_zoom\", detail)},\n\n {type: \"send_update_text_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_color\", detail)},\n {type: \"send_update_text_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_opacity\", detail)},\n {type: \"send_update_text_text\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_text\", detail)},\n {type: \"send_update_text_size\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_size\", detail)},\n {type: \"send_update_text_anchor\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_anchor\", detail)},\n {type: \"send_update_text_alignment_baseline\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_alignment_baseline\", detail)},\n {type: \"send_update_text_angle\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_angle\", detail)},\n {type: \"send_update_text_font_family\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_font_family\", detail)},\n {type: \"send_update_text_font_weight\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_font_weight\", detail)},\n {type: \"send_update_text_max_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_max_width\", detail)},\n {type: \"send_update_text_word_break\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_word_break\", detail)},\n {type: \"send_update_text_background_padding_left\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_padding_left\", detail)},\n {type: \"send_update_text_background_padding_right\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_padding_right\", detail)},\n {type: \"send_update_text_background_padding_top\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_padding_top\", detail)},\n {type: \"send_update_text_background_padding_bottom\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_padding_bottom\", detail)},\n {type: \"send_update_text_background_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_color\", detail)},\n {type: \"send_update_text_background_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_background_opacity\", detail)},\n {type: \"send_update_text_border_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_border_color\", detail)},\n {type: \"send_update_text_border_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_border_opacity\", detail)},\n {type: \"send_update_text_border_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_border_width\", detail)},\n {type: \"send_update_text_outline_color\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_outline_color\", detail)},\n {type: \"send_update_text_outline_opacity\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_outline_opacity\", detail)},\n {type: \"send_update_text_outline_width\", fnc: ({detail}) => chanel_push(this.state.channel, \"update_text_outline_width\", detail)},\n\n {type: \"send_layer_edit\", fnc: ({detail}) => chanel_push(this.state.channel, \"layer_edit\", detail)},\n {type: \"user_view_state\", fnc: ({detail}) => chanel_push(this.state.channel, \"user_view_state\", detail)},\n {type: \"send_map_tile_links\", fnc: ({detail}) => chanel_push(this.state.channel, \"map_tile_links\", detail)},\n\n {type: \"current_user\", fnc: ({detail}) => {\n this.setState({user_id: detail.id, channel: reload_if_no_token(detail.id, detail.access_token)})\n }},\n ]\n\n listners.forEach(l => listen(l.type, l.fnc))\n this.setState({listners})\n }\n\n render() {\n return (\n \n \n
\n \n цвет\n broadcast(\"update_polygon_border_color\", {object_id: object_id, user_id: user_id, value: e.currentTarget.value})}\n />\n
\n \n толщина\n broadcast(\"update_polygon_border_width\", {object_id: object_id, user_id: user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n \n прозрачность\n broadcast(\"update_polygon_border_opacity\", {object_id: object_id, user_id: user_id, value: parseInt(e.currentTarget.value) || 0})}\n />\n
\n