प्रतिक्रिया-पत्रक और पत्रक-संपादन योग्य: घटना के दौरान अतिरिक्त मार्कर बनाएं?

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

"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 में बदल दिया है ... आपको विंडोज़ के लिए या क्रॉस-प्लेटफ़ॉर्म संगतता के लिए कीडाउन और कीप ईवेंट में कीकोड को समायोजित करना पड़ सकता है।