CSS Houdiniಯ ಲೇಔಟ್ APIಯ ಶಕ್ತಿಯನ್ನು ಅನ್ವೇಷಿಸಿ. ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ಗಳನ್ನು ರಚಿಸುವುದು, ವೆಬ್ ವಿನ್ಯಾಸ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸುವುದು ಮತ್ತು ಈ ಅದ್ಭುತ ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ನವೀನ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ.
CSS Houdini ಲೇಔಟ್ API: ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅಭಿವೃದ್ಧಿಯ ಒಂದು ಆಳವಾದ ನೋಟ
ವೆಬ್ ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಮತ್ತು ಅದರೊಂದಿಗೆ, ವೆಬ್ ಡೆವಲಪರ್ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ರಚಿಸುವ ಬೇಡಿಕೆಗಳು ಹೆಚ್ಚುತ್ತಿವೆ. ಸಾಂಪ್ರದಾಯಿಕ CSS ಲೇಔಟ್ ವಿಧಾನಗಳು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ನಿಜವಾಗಿಯೂ ವಿಶಿಷ್ಟ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ವಿನ್ಯಾಸಗಳನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಕೆಲವೊಮ್ಮೆ ಸೀಮಿತವೆಂದು ಅನಿಸಬಹುದು. ಇಲ್ಲಿಯೇ CSS Houdiniಯ ಲೇಔಟ್ API ಪ್ರವೇಶಿಸುತ್ತದೆ, ಇದು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅಭಿವೃದ್ಧಿಗೆ ಕ್ರಾಂತಿಕಾರಕ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ.
CSS Houdini ಎಂದರೇನು?
CSS Houdini ಎನ್ನುವುದು ಡೆವಲಪರ್ಗಳಿಗೆ CSS ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ನ ಭಾಗಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಕೆಳಮಟ್ಟದ APIಗಳ ಒಂದು ಗುಂಪಿಗೆ ಬಳಸುವ ಸಾಮಾನ್ಯ ಪದವಾಗಿದೆ. ಇದು ವೆಬ್ ಪುಟಗಳ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಲೇಔಟ್ ಮೇಲೆ ಅಭೂತಪೂರ್ವ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ನ ಅಂತರ್ನಿರ್ಮಿತ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್ ಮೇಲೆ ಮಾತ್ರ ಅವಲಂಬಿತವಾಗುವ ಬದಲು, Houdini ಡೆವಲಪರ್ಗಳಿಗೆ ಅದನ್ನು ಕಸ್ಟಮ್ ಕೋಡ್ನೊಂದಿಗೆ ವಿಸ್ತರಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಇದನ್ನು ಬ್ರೌಸರ್ನ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಗೆ "ಹುಕ್ಸ್" ಗಳ ಒಂದು ಸೆಟ್ ಎಂದು ಯೋಚಿಸಿ.
ಪ್ರಮುಖ Houdini APIಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ:
- CSS ಪಾರ್ಸರ್ API: CSS-ರೀತಿಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು ಮತ್ತು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- CSS ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ವ್ಯಾಲ್ಯೂಸ್ API: ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರಗಳು ಮತ್ತು ನಡವಳಿಕೆಗಳೊಂದಿಗೆ ಕಸ್ಟಮ್ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೋಂದಾಯಿಸಲು ಶಕ್ತಗೊಳಿಸುತ್ತದೆ.
- Typed OM (ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್): CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಟೈಪ್-ಸುರಕ್ಷಿತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಪೇಂಟ್ API: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಧಾರಿತ ರೆಂಡರಿಂಗ್ ಬಳಸಿ ಕಸ್ಟಮ್ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು, ಬಾರ್ಡರ್ಗಳು ಮತ್ತು ಇತರ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ಅನಿಮೇಷನ್ API: CSS ಅನಿಮೇಷನ್ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
- ಲೇಔಟ್ API: ಈ ಲೇಖನದ ಕೇಂದ್ರಬಿಂದು, ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ವರ್ಕ್ಲೆಟ್ಗಳು: ಬ್ರೌಸರ್ನ ರೆಂಡರಿಂಗ್ ಪೈಪ್ಲೈನ್ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಹಗುರವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಪರಿಸರ. Houdini APIಗಳು ವರ್ಕ್ಲೆಟ್ಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿವೆ.
ಲೇಔಟ್ API ಪರಿಚಯ
ಲೇಔಟ್ API ಬಹುಶಃ CSS Houdiniಯ ಅತ್ಯಂತ ರೋಮಾಂಚಕಾರಿ ಭಾಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದು ಡೆವಲಪರ್ಗಳಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ತಮ್ಮದೇ ಆದ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಮೂಲಭೂತವಾಗಿ ಪುಟದ ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳಿಗೆ ಬ್ರೌಸರ್ನ ಡೀಫಾಲ್ಟ್ ಲೇಔಟ್ ಇಂಜಿನ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ಸಾಂಪ್ರದಾಯಿಕ CSS ನೊಂದಿಗೆ ಹಿಂದೆ ಅಸಾಧ್ಯವಾಗಿದ್ದ ಅಥವಾ ಅತ್ಯಂತ ಕಷ್ಟಕರವಾಗಿದ್ದ ನವೀನ ಮತ್ತು ಹೆಚ್ಚು ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯತೆಗಳ ಜಗತ್ತನ್ನು ತೆರೆಯುತ್ತದೆ.
ಒಂದು ಲೇಔಟ್ ಅನ್ನು ರಚಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅಂಶಗಳನ್ನು ಸುರುಳಿಯಾಕಾರದಲ್ಲಿ ಜೋಡಿಸುತ್ತದೆ, ಅಥವಾ ವಿಷಯದ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಕಾಲಮ್ ಅಗಲಗಳೊಂದಿಗೆ ಮೇಸನ್ರಿ ಗ್ರಿಡ್, ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ದೃಶ್ಯೀಕರಣಕ್ಕಾಗಿ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಸ ಲೇಔಟ್. ಲೇಔಟ್ API ಈ ಸನ್ನಿವೇಶಗಳನ್ನು ವಾಸ್ತವವಾಗಿಸುತ್ತದೆ.
ಲೇಔಟ್ API ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?
ಲೇಔಟ್ API ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಲು ಕೆಲವು ಪ್ರಮುಖ ಕಾರಣಗಳು ಇಲ್ಲಿವೆ:
- ಅಭೂತಪೂರ್ವ ಲೇಔಟ್ ನಿಯಂತ್ರಣ: ಒಂದು ಕಂಟೇನರ್ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಇರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ನಿಗದಿಪಡಿಸಲಾಗುತ್ತದೆ ಎಂಬುದರ ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ಪಡೆಯಿರಿ.
- ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗೆ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ ಲೇಔಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಂಭಾವ್ಯವಾಗಿ ಸುಧಾರಿಸಿ. ಉದಾಹರಣೆಗೆ, ನೀವು ನಿರ್ದಿಷ್ಟ ವಿಷಯದ ಗುಣಲಕ್ಷಣಗಳ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯುವ ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು.
- ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಥಿರತೆ: Houdini ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಬೆಂಬಲಿಸುವ ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸ್ಥಿರವಾದ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದ್ದರೂ, ಇದು ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಊಹಿಸಬಹುದಾದ ಲೇಔಟ್ ಪರಿಸರದ ಭರವಸೆಯನ್ನು ನೀಡುತ್ತದೆ.
- ಕಾಂಪೊನೆಂಟೈಸೇಶನ್ ಮತ್ತು ಮರುಬಳಕೆ: ಸಂಕೀರ್ಣ ಲೇಔಟ್ ತರ್ಕವನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್ಗಳಾಗಿ ಸಂಯೋಜಿಸಿ, ಇವುಗಳನ್ನು ಯೋಜನೆಗಳಾದ್ಯಂತ ಸುಲಭವಾಗಿ ಹಂಚಿಕೊಳ್ಳಬಹುದು.
- ಪ್ರಯೋಗ ಮತ್ತು ನಾವೀನ್ಯತೆ: ವೆಬ್ ವಿನ್ಯಾಸದ ಗಡಿಗಳನ್ನು ಮೀರಿ, ಹೊಸ ಮತ್ತು ಅಸಾಂಪ್ರದಾಯಿಕ ಲೇಔಟ್ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸಿ.
ಲೇಔಟ್ API ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ: ಹಂತ-ಹಂತದ ಮಾರ್ಗದರ್ಶಿ
ಲೇಔಟ್ API ಅನ್ನು ಬಳಸುವುದು ಹಲವಾರು ಪ್ರಮುಖ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
- ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ: ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ("ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್") ಅನ್ನು ರಚಿಸಿ. ಈ ಫೈಲ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಥ್ರೆಡ್ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಇದು ಮುಖ್ಯ ಬ್ರೌಸರ್ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ನೋಂದಾಯಿಸಿ: ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ಬ್ರೌಸರ್ನೊಂದಿಗೆ ನೋಂದಾಯಿಸಲು `CSS.layoutWorklet.addModule()` ವಿಧಾನವನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಲಭ್ಯವಿದೆ ಎಂದು ಬ್ರೌಸರ್ಗೆ ತಿಳಿಸುತ್ತದೆ.
- `layout()` ಫಂಕ್ಷನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ: ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಒಳಗೆ, `layout()` ಫಂಕ್ಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ. ಈ ಫಂಕ್ಷನ್ ನಿಮ್ಮ ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ನ ಹೃದಯವಾಗಿದೆ. ಇದು ಲೇಔಟ್ ಮಾಡಲಾಗುತ್ತಿರುವ ಅಂಶದ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು (ಉದಾ., ಲಭ್ಯವಿರುವ ಸ್ಥಳ, ವಿಷಯದ ಗಾತ್ರ, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು) ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಅಂಶದ ಮಕ್ಕಳ ಸ್ಥಾನ ಮತ್ತು ಗಾತ್ರದ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
- ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೋಂದಾಯಿಸಿ (ಐಚ್ಛಿಕ): ನಿಮ್ಮ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಬಳಸುವ ಯಾವುದೇ ಕಸ್ಟಮ್ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ನೋಂದಾಯಿಸಲು `CSS.registerProperty()` ವಿಧಾನವನ್ನು ಬಳಸಿ. ಇದು CSS ಶೈಲಿಗಳ ಮೂಲಕ ಲೇಔಟ್ನ ನಡವಳಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- ಲೇಔಟ್ ಅನ್ನು ಅನ್ವಯಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಒಂದು ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಲು `layout:` CSS ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ. ನೋಂದಣಿಯ ಸಮಯದಲ್ಲಿ ನೀವು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ಗೆ ನೀಡಿದ ಹೆಸರನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೀರಿ.
ಹಂತಗಳ ವಿವರವಾದ ವಿಶ್ಲೇಷಣೆ
1. ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ
ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಎನ್ನುವುದು ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಆಗಿದೆ. ಇದನ್ನು ಪ್ರತ್ಯೇಕ ಥ್ರೆಡ್ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಗೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಒಂದು ಸರಳ ಉದಾಹರಣೆಯನ್ನು ರಚಿಸೋಣ, `spiral-layout.js`:
```javascript
// spiral-layout.js
registerLayout('spiral-layout', class {
static get inputProperties() { return ['--spiral-turns', '--spiral-growth']; }
async layout(children, edges, constraints, styleMap) {
const turnCount = parseFloat(styleMap.get('--spiral-turns').value) || 5;
const growthFactor = parseFloat(styleMap.get('--spiral-growth').value) || 20;
const childCount = children.length;
const centerX = constraints.inlineSize / 2;
const centerY = constraints.blockSize / 2;
for (let i = 0; i < childCount; i++) {
const child = children[i];
const angle = (i / childCount) * turnCount * 2 * Math.PI;
const radius = growthFactor * i;
const x = centerX + radius * Math.cos(angle) - child.inlineSize / 2;
const y = centerY + radius * Math.sin(angle) - child.blockSize / 2;
child.styleMap.set('top', y + 'px');
child.styleMap.set('left', x + 'px');
}
return { blockSizes: [constraints.blockSize] };
}
});
```
ವಿವರಣೆ:
- `registerLayout('spiral-layout', class { ... })`: ಈ ಸಾಲು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು `spiral-layout` ಹೆಸರಿನೊಂದಿಗೆ ನೋಂದಾಯಿಸುತ್ತದೆ. ಈ ಹೆಸರನ್ನು ನೀವು ನಿಮ್ಮ CSS ನಲ್ಲಿ ಬಳಸುತ್ತೀರಿ.
- `static get inputProperties() { return ['--spiral-turns', '--spiral-growth']; }`: ಇದು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ ಬಳಸುವ ಕಸ್ಟಮ್ CSS ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, `--spiral-turns` ಸುರುಳಿಯಲ್ಲಿನ ತಿರುವುಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ, ಮತ್ತು `--spiral-growth` ಸುರುಳಿಯು ಹೊರಕ್ಕೆ ಎಷ್ಟು ವೇಗವಾಗಿ ಬೆಳೆಯುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ.
- `async layout(children, edges, constraints, styleMap) { ... }`: ಇದು ಲೇಔಟ್ ಅಲ್ಗಾರಿದಮ್ನ ತಿರುಳು. ಇದು ಈ ಕೆಳಗಿನ ಆರ್ಗ್ಯುಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ:
- `children`: ಲೇಔಟ್ ಮಾಡಲಾಗುತ್ತಿರುವ ಅಂಶದ ಮಕ್ಕಳನ್ನು ಪ್ರತಿನಿಧಿಸುವ `LayoutChild` ಆಬ್ಜೆಕ್ಟ್ಗಳ ಒಂದು ಸರಣಿ.
- `edges`: ಅಂಶದ ಅಂಚುಗಳ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್.
- `constraints`: ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ (ಉದಾ., `inlineSize` ಮತ್ತು `blockSize`).
- `styleMap`: ಒಂದು `StylePropertyMapReadOnly` ಆಬ್ಜೆಕ್ಟ್, ಇದು ನೀವು ನೋಂದಾಯಿಸಿದ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಸೇರಿದಂತೆ CSS ಪ್ರಾಪರ್ಟಿಗಳ ಗಣಿಸಿದ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- `layout()` ಫಂಕ್ಷನ್ನೊಳಗಿನ ಕೋಡ್ ಸುರುಳಿ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಆಧರಿಸಿ ಪ್ರತಿ ಮಗುವಿನ ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇದು ಸುರುಳಿಯ ಆಕಾರವನ್ನು ನಿಯಂತ್ರಿಸಲು `turnCount` ಮತ್ತು `growthFactor` ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುತ್ತದೆ.
- `child.styleMap.set('top', y + 'px'); child.styleMap.set('left', x + 'px');`: ಇದು ಪ್ರತಿ ಮಗುವಿನ ಅಂಶದ `top` ಮತ್ತು `left` ಶೈಲಿಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ಅವುಗಳನ್ನು ಸುರುಳಿಯೊಳಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಇರಿಸುತ್ತದೆ.
- `return { blockSizes: [constraints.blockSize] };`: ಇದು ಅಂಶದ ಬ್ಲಾಕ್ ಗಾತ್ರಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಕೇವಲ ಲಭ್ಯವಿರುವ ಬ್ಲಾಕ್ ಗಾತ್ರವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತಿದ್ದೇವೆ, ಆದರೆ ಅಗತ್ಯವಿದ್ದರೆ ನೀವು ಬೇರೆ ಬೇರೆ ಬ್ಲಾಕ್ ಗಾತ್ರಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಿ ಹಿಂದಿರುಗಿಸಬಹುದು.
2. ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ನೋಂದಾಯಿಸಿ
ಕಸ್ಟಮ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸುವ ಮೊದಲು, ನೀವು ಲೇಔಟ್ ವರ್ಕ್ಲೆಟ್ ಅನ್ನು ಬ್ರೌಸರ್ನೊಂದಿಗೆ ನೋಂದಾಯಿಸಬೇಕು. ನೀವು ಇದನ್ನು `CSS.layoutWorklet.addModule()` ವಿಧಾನವನ್ನು ಬಳಸಿ ಮಾಡಬಹುದು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತ್ಯೇಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ನಲ್ಲಿ ಅಥವಾ ನಿಮ್ಮ HTML ನಲ್ಲಿನ `