اندرونی میکانزم: ڈریگ، ٹچ، اور CSS کیسکیڈ

ایک قابلِ تبدیلی (resizable) UI پینل بنانا اس سے کہیں زیادہ مشکل ہے جتنا یہ نظر آتا ہے۔ آپ کو لے آؤٹس، ٹچ ایونٹس، اور CSS رولز کو ایک ساتھ سنبھالنا پڑتا ہے۔

ایک ویژول-ڈف (visual-diff) UI کے حالیہ ری ڈیزائن سے حاصل ہونے والے تین تکنیکی اسباق یہ ہیں:

  1. لے آؤٹس کے لیے ونڈو کی چوڑائی (window width) کا استعمال بند کریں

یہ فیصلہ کرنے کے لیے کہ آپ کا لے آؤٹ عمودی (vertical) ہے یا افقی (horizontal)، window.innerWidth کا استعمال نہ کریں۔ اگر صارف ونڈو کا سائز تبدیل کرتا ہے، تو آپ کا لاجک (logic) کام کرنا چھوڑ دے گا۔

اس کے بجائے، اصل CSS اسٹیٹ کا استعمال کریں۔ flex-direction کو چیک کرنے کے لیے getComputedStyle کا استعمال کریں۔ یہ تمام میڈیا کوئریز (media queries) کے لاگو ہونے کے بعد اصل ویلیو پڑھتا ہے۔ اس سے یہ یقینی بنتا ہے کہ آپ کا ڈریگ لاجک وہی ہو جو صارف کو اصل میں نظر آ رہا ہے۔

  1. ٹچ اور ماؤس ایونٹس کو ایک ساتھ ہینڈل کریں

ڈیسک ٹاپ اور موبائل دونوں پر ڈریگنگ کو کام کرنے کے قابل بنانے کے لیے، آپ کو ایک متحد طریقہ کار (unified approach) کی ضرورت ہے۔

  • کوآرڈینیٹس (coordinates) نکالنے کے لیے optional chaining کا استعمال کریں۔ اس سے ایک ہی فنکشن ماؤس اور ٹچ دونوں ایونٹس کو سنبھال سکتا ہے۔
  • touchmove کے لیے { passive: false } کا استعمال کریں۔ براؤزرز اسکرولنگ میں مدد کے لیے ٹچ ایونٹس کو ڈیفالٹ طور پر passive رکھتے ہیں۔ اگر آپ اسے false پر سیٹ نہیں کرتے، تو آپ e.preventDefault() کال نہیں کر سکیں گے۔ اس کال کے بغیر، جب آپ ڈریگ کرنے کی کوشش کریں گے تو پیج اسکرول ہونے لگے گا۔
  • move اور end لسنرز (listeners) کو document کے ساتھ منسلک کریں۔ اگر صارف اپنی انگلی بہت تیزی سے ہٹاتا ہے، تو ہو سکتا ہے کہ وہ ڈیوائیڈر (divider) سے باہر نکل جائے۔ document کے ساتھ منسلک کرنے سے یہ یقینی بنتا ہے کہ اگر پوائنٹر اپنی جگہ سے ہٹ بھی جائے، تب بھی ڈریگ جاری رہے۔
  1. اپنے ویزیبلٹی سسٹم (visibility system) سے ٹکرانے سے بچیں

میرا سامنا ایک CSS specificity بگ (bug) سے ہوا۔ میرے پاس پینلز کو چھپانے کے لیے ایک کلاس تھی اور لے آؤٹ کی سمت (direction) سیٹ کرنے کے لیے دوسری۔

مسئلہ:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

چونکہ ان کی specificity برابر تھی، اس لیے فائل میں موجود آخری کلاس جیت گئی۔ اس کا مطلب یہ تھا کہ میرے پینلز تب بھی نظر آتے رہے جب انہیں چھپا ہونا چاہیے تھا۔

حل: لے آؤٹ ہیلپر کلاس کو کبھی بھی display پراپرٹی سیٹ کرنے نہ دیں۔ اس کا اختیار ویزیبلٹی کلاس کے پاس رہنے دیں۔

اس کے بجائے: .diff-layout { display: flex; flex-direction: column; }

استعمال کریں: .view-panel.diff-layout { flex-direction: column; }

یہ specificity کو بڑھاتا ہے اور اس بات کو یقینی بناتا ہے کہ لے آؤٹ کلاس صرف سمت تبدیل کرے، ویزیبلٹی نہیں۔

ماخذ: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66