मैं कार्यक्षमता को लागू करने की कोशिश कर रहा हूं जो मुझे अनुमति देगा, जब एक मार्कर को पत्रक-संपादन योग्य के साथ रखा जाए, तो एक मार्कर लगाने के लिए क्लिक करते समय नियंत्रण रखें, इससे पहले कि एक और मार्कर रखा जाए। नतीजा यह होगा कि उपयोगकर्ता एक पंक्ति में कई मार्करों को तेजी से रखने के लिए नियंत्रण रख सकता है।

मैंने editable:drawing:commit ईवेंट का जवाब देकर और वहां map.editTools.createMarker को कॉल करके इस कार्यक्षमता को लागू करने का प्रयास किया है। हालांकि, ऐसा प्रतीत होता है कि ऐसा करने से कोई प्रभाव नहीं पड़ता है; मार्कर रखने के बाद, उपयोगकर्ता संपादन मोड छोड़ देता है और मैन्युअल रूप से एक और मार्कर रखने की पहल करनी पड़ती है।

मैंने editable:drawing:end का जवाब देने का भी प्रयास किया, हालांकि ऐसा लगता है कि यह असंगत व्यवहार है, जहां कभी-कभी यह वर्णित के रूप में कार्य करेगा और कभी-कभी यह दूसरा मार्कर नहीं रखेगा।

यहां कोडसैंडबॉक्स है मैं सक्षम था एक न्यूनतम उदाहरण को पुन: पेश करने के लिए। क्या कोई बग है कि कैसे घटनाओं को संभाला जाता है या क्या मैं गलत घटना को कैप्चर कर रहा हूं?

1
EliteMasterEric 11 फरवरी 2021, 12:32

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसके साथ खेलने में कुछ समय बिताया, और समस्या प्रतिक्रिया में उपयोगस्टेट कॉल की असीमित प्रकृति है। जब आप ऐसा करते हैं:

"editable:drawing:commit": (event) => {
  if (event.originalEvent.ctrlKey) {
    setAdditionalMarker(true);
  }
},

यह राज्य परिवर्तन तत्काल नहीं है। ऐसा लगता है कि drawing:end इवेंट drawing:commit इवेंट के तुरंत बाद होता है, जब एकवचन मार्कर लगाया जाता है। इसलिए जब आप end इवेंट सुनते हैं:

"editable:drawing:end": (event) => {
  if (additionalMarker) {
    addMarker();
    setAdditionalMarker(false);
  }
}

additionalMarker अभी तक सत्य नहीं है, क्योंकि setAdditionalMarker(true) ने अभी तक प्रतिक्रिया के साथ पंजीकृत नहीं किया है, क्योंकि यह async है। ताकि if स्टेटमेंट कभी न कहा जाए।

यूएक्स परिप्रेक्ष्य से, इसका भी कोई मतलब नहीं है, क्योंकि भले ही यूज़स्टेट सिंक्रोनस था, अगर उपयोगकर्ता क्लिक करते समय ctrl दबाए रखता है, लेकिन फिर वे फिर से मानचित्र पर क्लिक करने से पहले ctrl कुंजी जारी करते हैं, तो यह होगा संपादन मोड में रहें। लेकिन कीप पर, इसे एडिट मोड से बाहर निकलना चाहिए। मेरा लक्ष्य keyup और keydown श्रोताओं को दस्तावेज़ से जोड़ना था। कीडाउन पर हम setAdditionalMarker(true) कर सकते हैं, और इसके विपरीत की-अप पर। अगर additionalMarkers सही है, तो हम एक क्लिक इवेंट के बाद addMarkers() को फिर से फायर करते हैं। हालांकि, यदि कोई की-अप घटना होती है, तो हम संपादन मोड से बाहर निकलने के लिए बाध्य करने के लिए map.editTools.commitDrawing() पर कॉल कर सकते हैं, और पृष्ठ कर्सर वापस सामान्य हो जाता है।

हमारे पास अभी भी async useState समस्या है, क्योंकि keyup पर, हम additionalMarkers को गलत पर सेट करते हैं, और उसी समय editable:drawing:end ईवेंट को सक्रिय करते हैं, लेकिन setAdditionalMarkers async है, इसलिए additionalMarkers अभी भी सत्य है, और हम संपादन योग्य मोड में फंस जाते हैं। इसे ठीक करने के लिए, मैंने map.editTools.commitDrawing() को 50ms टाइमआउट में लपेटा, ताकि यह async useState कॉल पूर्ण होने के बाद बाद हो। यह थोड़ा हैकी है, लेकिन यह काम करता है और UX के लिए अच्छा है। ऐसा करने का शायद एक और उचित तरीका है।

वर्किंग कोडसैंडबॉक्स

**नोट: मैं मैक पर हूं इसलिए मैंने लेफ्ट कमांड कुंजी के लिए कुंजी को lsiten में बदल दिया है ... आपको विंडोज़ के लिए या क्रॉस-प्लेटफ़ॉर्म संगतता के लिए कीडाउन और कीप ईवेंट में कीकोड को समायोजित करना पड़ सकता है।

1
Seth Lutske 14 फरवरी 2021, 23:51
इस सटीक उत्तर के लिए बहुत-बहुत धन्यवाद! UX के दृष्टिकोण से, मैं केवल यह जानने पर विचार कर रहा था कि क्या क्लिक होने के दौरान CTRL दबाया जा रहा था, जो कि पूर्व-निरीक्षण में सहज नहीं होता। एसिंक्स मुद्दा भी समझ में आता है, क्योंकि यह बताता है कि क्यों, मेरे कोडसैंडबॉक्स में, एक दूसरा मार्कर केवल हर बार या तो रखा जाएगा।
 – 
EliteMasterEric
16 फरवरी 2021, 00:19
1
मैं इस बारे में सोच रहा था....मुझे setTimeout से नफरत है, इसकी मेगा-हैकी। यदि आप इसे एक वर्ग घटक में परिवर्तित करते हैं, तो आप this.setState({ additionalMarkers: false }, callback) पैटर्न का लाभ उठा सकते हैं, और उस कॉलबैक में अतुल्यकालिकता का प्रबंधन कर सकते हैं। सोच के लिए भोजन।
 – 
Seth Lutske
16 फरवरी 2021, 00:37
additionalMarkers कब झूठा हो जाता है, यह जांचने के लिए एक useEffect हुक कार्य जोड़ना चाहेंगे?
 – 
EliteMasterEric
16 फरवरी 2021, 01:30
1
हां, आप इसे उपयोग प्रभाव के साथ व्यवस्थित कर सकते हैं, आप उपयोग प्रभाव में map.editTools.commitDrawing() लपेट सकते हैं। यहां एक CSB है जो ऐसा करता है
 – 
Seth Lutske
16 फरवरी 2021, 01:47