{"id":80261,"date":"2024-10-15T18:55:19","date_gmt":"2024-10-15T15:25:19","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/"},"modified":"2024-10-15T18:55:19","modified_gmt":"2024-10-15T15:25:19","slug":"%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/","title":{"rendered":"\u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 React Flow \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"<p><\/p>\n<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u06af\u06cc \ud83d\udc4b\ud83c\udffc<\/p>\n<p>\u0622\u0645\u0648\u0632\u0634 \u0627\u0645\u0631\u0648\u0632 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0641\u0632\u0648\u062f\u0646 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 React Flow \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 SuperViz \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0631\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u0648\u0642\u0648\u0639 \u0628\u0628\u06cc\u0646\u0646\u062f. \u0628\u0627 React Flow \u0648 SuperViz\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0644\u0648\u0686\u0627\u0631\u062a\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u0632\u0646\u062f\u0647 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0645\u0634\u062a\u0631\u06a9 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0646\u0634\u0627\u0646 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0646\u0638\u0631\u0627\u062a \u0645\u062a\u0646\u06cc \u0648 \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627\u06cc \u0645\u0627\u0648\u0633 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React Flow \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0627 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u062f\u0631 \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u062c\u0631\u06cc\u0627\u0646\u06cc \u0647\u0645\u06a9\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u06af\u0631\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0646\u062f\u060c \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0646\u062f \u0648 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0628\u06a9\u0634\u0646\u062f\u060c \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u06a9\u0647 \u0641\u0648\u0631\u0627\u064b \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062c\u0644\u0633\u0647 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a. <\/p>\n<p><strong>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/strong><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%DB%8C%DA%A9_%D8%AD%D8%B3%D8%A7%D8%A8_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D8%A8%D8%A7%D8%B2%DB%8C%D8%A7%D8%A8%DB%8C_%D8%AA%D9%88%DA%A9%D9%86_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87\" >\u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_React_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: \u0628\u0631\u0646\u0627\u0645\u0647 React \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#1_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_React_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >1. \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#2_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%B1%D8%AF_%D9%86%DB%8C%D8%A7%D8%B2_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >2. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#3_tailwind_%D8%B1%D8%A7_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >3. tailwind \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#4_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7%DB%8C\" >4. \u062a\u0646\u0638\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#1_App_Component_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\" >1. App Component \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u062a\u0627\u0642 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D8%AA%D8%AC%D8%B2%DB%8C%D9%87_%DA%AF%D8%A7%D9%85_%D8%A8%D9%87_%DA%AF%D8%A7%D9%85_%D8%AC%D8%B2%D8%A1_%D8%A7%D8%AA%D8%A7%D9%82\" >\u062a\u062c\u0632\u06cc\u0647 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062c\u0632\u0621 \u0627\u062a\u0627\u0642<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#1_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%87%D8%A7%DB%8C_%D8%B6%D8%B1%D9%88%D8%B1%DB%8C\" >1. \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#2_%DA%AF%D8%B1%D9%87_%D9%87%D8%A7_%D9%88_%D9%84%D8%A8%D9%87_%D9%87%D8%A7%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\" >2. \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#3_%D9%85%D9%88%D9%84%D9%81%D9%87_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\" >3. \u0645\u0648\u0644\u0641\u0647 \u0627\u062a\u0627\u0642 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#4_%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7_%D9%88_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\" >4. \u0642\u0644\u0627\u0628 \u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#5_%D8%AD%D8%A7%D9%84%D8%AA_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%AF%D8%B1%D9%87_%D9%87%D8%A7_%D9%88_%D9%84%D8%A8%D9%87_%D9%87%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\" >5. \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#6_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84%D8%A7%D8%AA_%D9%84%D8%A8%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >6. \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0644\u0628\u0647 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#7_%DA%A9%D8%B4%DB%8C%D8%AF%D9%86_%DA%AF%D8%B1%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\" >7. \u06a9\u0634\u06cc\u062f\u0646 \u06af\u0631\u0647 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#8_Drag_Over_Events_%D8%B1%D8%A7_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\" >8. Drag Over Events \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#9_Viewport_%D8%B1%D8%A7_%D8%AF%D8%B1_Mouse_Movement_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF\" >9. Viewport \u0631\u0627 \u062f\u0631 Mouse Movement \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#10_%D9%85%D8%B4%D8%AE%D8%B5%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%BE%DB%8C%D9%86_%DA%A9%D8%B1%D8%AF%D9%86_SuperViz_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\" >10. \u0645\u0634\u062e\u0635\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0646 \u06a9\u0631\u062f\u0646 SuperViz \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#11_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9_%D8%B4%D8%AF%D9%86_%D8%AF%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" >11. \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0646 \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#12_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\" >12. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u062a\u0627\u0642 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0645\u0631\u062d\u0644\u0647 4: \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_React_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\" >1. \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B3%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\" >2. \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u0633\u062a \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D8%AE%D9%84%D8%A7%D8%B5%D9%87\" >\u062e\u0644\u0627\u0635\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-%da%a9%d9%87-%da%86%da%af%d9%88%d9%86%d9%87-%d9%87%d9%85%da%af%d8%a7%d9%85-%d8%b3%d8%a7%d8%b2%db%8c-%d8%a8%d9%84%d8%a7%d8%af%d8%b1%d9%86%da%af-%d8%b1\/#%D8%A8%D9%87_%D9%85%D8%A7_%D8%A8%D9%BE%DB%8C%D9%88%D9%86%D8%AF%DB%8C%D8%AF_SuperViz_Hackathon_20_AI_%D8%A8%D8%A7_RealTime_%D9%85%D9%84%D8%A7%D9%82%D8%A7%D8%AA_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\" >\u0628\u0647 \u0645\u0627 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f: SuperViz Hackathon 2.0: AI \u0628\u0627 RealTime \u0645\u0644\u0627\u0642\u0627\u062a \u0645\u06cc \u06a9\u0646\u062f<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0647 \u06cc\u06a9 \u062d\u0633\u0627\u0628 SuperViz \u0648 \u06cc\u06a9 \u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f. \u0627\u06af\u0631 \u0642\u0628\u0644\u0627 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u06cc\u06a9 \u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u062f\u0627\u0631\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DB%8C%DA%A9_%D8%AD%D8%B3%D8%A7%D8%A8_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0628\u0647 https:\/\/dashboard.superviz.com\/register \u0628\u0631\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u062d\u0633\u0627\u0628 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Google \u06cc\u0627 \u0627\u06cc\u0645\u06cc\u0644\/\u0631\u0645\u0632 \u0639\u0628\u0648\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0645\u06cc\u0644\/\u06af\u0630\u0631\u0648\u0627\u0698\u0647\u060c \u06cc\u06a9 \u067e\u06cc\u0648\u0646\u062f \u062a\u0623\u06cc\u06cc\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u062d\u0633\u0627\u0628 \u062e\u0648\u062f \u0628\u0627\u06cc\u062f \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%D8%B2%DB%8C%D8%A7%D8%A8%DB%8C_%D8%AA%D9%88%DA%A9%D9%86_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%AF%D9%87%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 SDK\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u062a\u0648\u06a9\u0646 \u0628\u0631\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u06a9\u0631\u062f\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc SDK \u0628\u0627 \u062d\u0633\u0627\u0628 \u0634\u0645\u0627 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0648\u06a9\u0646 \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648 \u062a\u0648\u0644\u06cc\u062f SuperViz \u0631\u0627 \u0627\u0632 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062a\u0648\u06a9\u0646 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u06a9\u067e\u06cc \u0648 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u0634\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_React_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: \u0628\u0631\u0646\u0627\u0645\u0647 React \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React \u062c\u062f\u06cc\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 React Flow \u0648 SuperViz SDK \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_React_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  1. \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Create React App \u0628\u0627 TypeScript \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">npx<\/span> <span class=\"nx\">create<\/span><span class=\"o\">-<\/span><span class=\"nx\">react<\/span><span class=\"o\">-<\/span><span class=\"nx\">app<\/span> <span class=\"nx\">realtime<\/span><span class=\"o\">-<\/span><span class=\"nx\">react<\/span><span class=\"o\">-<\/span><span class=\"nx\">flow<\/span> <span class=\"o\">--<\/span><span class=\"nx\">template<\/span> <span class=\"nx\">typescript<\/span>\n<span class=\"nx\">cd<\/span> <span class=\"nx\">realtime<\/span><span class=\"o\">-<\/span><span class=\"nx\">react<\/span><span class=\"o\">-<\/span><span class=\"nx\">flow<\/span>\n\n<\/code><\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"2_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%B1%D8%AF_%D9%86%DB%8C%D8%A7%D8%B2_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  2. \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">npm<\/span> <span class=\"nx\">install<\/span> <span class=\"p\">@<\/span><span class=\"nd\">superviz<\/span><span class=\"sr\">\/react-sdk reactflow uui<\/span><span class=\"err\">d\n<\/span>\n<\/code><\/pre>\n<\/div>\n<ul>\n<li>  <strong>@superviz\/react-sdk:<\/strong>  SuperViz SDK \u0628\u0631\u0627\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af.<\/li>\n<li>  <strong>\u062c\u0631\u06cc\u0627\u0646 \u0648\u0627\u06a9\u0646\u0634:<\/strong>  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0647\u0627 \u0648 \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc.<\/li>\n<li>  <strong>uuid:<\/strong>  \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f\u060c \u0645\u0641\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u0646\u0627\u0633\u0647 \u0647\u0627\u06cc \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"3_tailwind_%D8%B1%D8%A7_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  3. tailwind \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0627\u0632 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 Tailwind css \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u0628\u062a\u062f\u0627 \u067e\u06a9\u06cc\u062c tailwind \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">npm<\/span> <span class=\"nx\">install<\/span> <span class=\"o\">-<\/span><span class=\"nx\">D<\/span> <span class=\"nx\">tailwindcss<\/span> <span class=\"nx\">postcss<\/span> <span class=\"nx\">autoprefixer<\/span>\n<span class=\"nx\">npx<\/span> <span class=\"nx\">tailwindcss<\/span> <span class=\"nx\">init<\/span> <span class=\"o\">-<\/span><span class=\"nx\">p<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p>\u0633\u067e\u0633 \u0628\u0627\u06cc\u062f \u0645\u0633\u06cc\u0631 \u0642\u0627\u0644\u0628 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u0645. \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f  <code>tailwind.config.js<\/code>  \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"cm\">\/** @type  {import('tailwindcss').Config} *\/<\/span>\n<span class=\"k\">export<\/span>  <span class=\"k\">default<\/span>  <span class=\"p\">{<\/span>\n<span class=\"na\">content<\/span><span class=\"p\">:<\/span>  <span class=\"p\">[<\/span>\n<span class=\"dl\">\"<\/span><span class=\"s2\">.\/index.html<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"dl\">\"<\/span><span class=\"s2\">.\/src\/**\/*.{js,ts,jsx,tsx}<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">],<\/span>\n<span class=\"na\">theme<\/span><span class=\"p\">:<\/span>  <span class=\"p\">{<\/span>\n<span class=\"na\">extend<\/span><span class=\"p\">:<\/span>  <span class=\"p\">{},<\/span>\n<span class=\"p\">},<\/span>\n<span class=\"na\">plugins<\/span><span class=\"p\">:<\/span>  <span class=\"p\">[],<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p>\u0633\u067e\u0633 \u0628\u0627\u06cc\u062f \u062f\u0633\u062a\u0648\u0631\u0627\u062a tailwind \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 CSS \u062c\u0647\u0627\u0646\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645. (src\/index.css)\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"p\">@<\/span><span class=\"nd\">tailwind<\/span> <span class=\"nx\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">tailwind<\/span> <span class=\"nx\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">tailwind<\/span> <span class=\"nx\">utilities<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"4_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AA%D8%BA%DB%8C%D8%B1%D9%87%D8%A7%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7%DB%8C\"><\/span>\n<p>  4. \u062a\u0646\u0638\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9  <code>.env<\/code>  \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0644\u06cc\u062f \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 SuperViz \u062e\u0648\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u06a9\u0644\u06cc\u062f \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0628\u0627 \u062e\u062f\u0645\u0627\u062a SuperViz \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">VITE_SUPERVIZ_API_KEY<\/span><span class=\"o\">=<\/span><span class=\"nx\">YOUR_SUPERVIZ_DEVELOPER_KEY<\/span>\n\n<\/code><\/pre>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%D8%B5%D9%84%DB%8C_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0645\u0646\u0637\u0642 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 SuperViz \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u062f\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React Flow \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_App_Component_%D8%B1%D8%A7_%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  1. App Component \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f  <code>src\/App.tsx<\/code>  \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632  <code>SuperVizRoomProvider<\/code>  \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u06cc\u0637 \u0645\u0634\u0627\u0631\u06a9\u062a\u06cc\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SuperVizRoomProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@superviz\/react-sdk<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> \n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">v4<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">generateId<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">uuid<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> \n<span class=\"k\">import<\/span> <span class=\"nx\">Room<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Room<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> \n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ReactFlowProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">reactflow<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> \n\n<span class=\"kd\">const<\/span> <span class=\"nx\">developerKey<\/span> <span class=\"o\">=<\/span> <span class=\"k\">import<\/span><span class=\"p\">.<\/span><span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">VITE_SUPERVIZ_API_KEY<\/span><span class=\"p\">;<\/span> \n<span class=\"kd\">const<\/span> <span class=\"nx\">participantId<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">generateId<\/span><span class=\"p\">();<\/span> \n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">App<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span> \n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span> \n        <span class=\"o\">&lt;<\/span><span class=\"nx\">SuperVizRoomProvider<\/span> \n            <span class=\"nx\">developerKey<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">developerKey<\/span><span class=\"p\">}<\/span> \n            <span class=\"nx\">group<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> \n                <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-flow-tutorial<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> \n                <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-flow-tutorial<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> \n            <span class=\"p\">}}<\/span> \n            <span class=\"nx\">participant<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> \n            <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nx\">participantId<\/span><span class=\"p\">,<\/span> \n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Participant<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> \n            <span class=\"p\">}}<\/span> \n            <span class=\"nx\">roomId<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">react-flow-tutorial<\/span><span class=\"dl\">'<\/span> \n        <span class=\"o\">&gt;<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">ReactFlowProvider<\/span><span class=\"o\">&gt;<\/span> \n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Room<\/span> <span class=\"nx\">participantId<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">participantId<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt;<\/span><span class=\"err\"> \n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ReactFlowProvider&gt;<\/span><span class=\"err\"> \n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/SuperVizRoomProvider&gt;<\/span><span class=\"err\"> \n<\/span>    <span class=\"p\">);<\/span> \n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>SuperVizRoomProvider:<\/strong>  \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc\u200c\u067e\u06cc\u0686\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u062f \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u06af\u0631\u0648\u0647 \u0648 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u06a9\u0644\u06cc\u062f:<\/strong>  \u06a9\u0644\u06cc\u062f \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0627\u0632 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u0627 SuperViz \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>ReactFlowProvider:<\/strong>  \u0645\u0648\u0644\u0641\u0647 Room \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0632\u0645\u06cc\u0646\u0647 React Flow \u06a9\u0647 \u0648\u0636\u0639\u06cc\u062a \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u067e\u06cc\u0686\u062f.<\/li>\n<li>  <strong>\u0627\u062c\u0632\u0627\u06cc \u0627\u062a\u0627\u0642:<\/strong>  \u0634\u0627\u0645\u0644 \u0645\u0646\u0637\u0642 \u0627\u0631\u0627\u0626\u0647 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0627\u0633\u062a.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u062a\u0627\u0642 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Room \u0645\u0633\u0626\u0648\u0644 \u0627\u062f\u063a\u0627\u0645 React Flow \u0628\u0627 SuperViz \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0631 \u0631\u0648\u06cc \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0647\u0645\u06a9\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D8%AC%D8%B2%DB%8C%D9%87_%DA%AF%D8%A7%D9%85_%D8%A8%D9%87_%DA%AF%D8%A7%D9%85_%D8%AC%D8%B2%D8%A1_%D8%A7%D8%AA%D8%A7%D9%82\"><\/span>\n<p>  \u062a\u062c\u0632\u06cc\u0647 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062c\u0632\u0621 \u0627\u062a\u0627\u0642<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0648\u0644\u0641\u0647 Room \u0631\u0627 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0641\u0647\u0645\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Flow \u0648 SuperViz \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u0645\u0645\u06a9\u0646 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%D9%85%D8%A7%DA%98%D9%88%D9%84_%D9%87%D8%A7%DB%8C_%D8%B6%D8%B1%D9%88%D8%B1%DB%8C\"><\/span>\n<p>  1. \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627 \u0648 \u0627\u062c\u0632\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0631\u0627 \u0627\u0632 \u0647\u0631 \u062f\u0648 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f  <code>reactflow<\/code>  \u0648  <code>@superviz\/react-sdk<\/code>.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"k\">import<\/span>  <span class=\"p\">{<\/span> <span class=\"nx\">useCallback<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">MouseEvent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useRef<\/span> <span class=\"p\">}<\/span>  <span class=\"k\">from<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">ReactFlow<\/span><span class=\"p\">,<\/span>  <span class=\"p\">{<\/span>\n      <span class=\"nx\">useNodesState<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">Controls<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">Background<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">ConnectionLineType<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">addEdge<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">useEdgesState<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">ConnectionMode<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">Connection<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">useViewport<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">Node<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span>  <span class=\"k\">from<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">reactflow<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">reactflow\/dist\/style.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span>  <span class=\"p\">{<\/span>\n     <span class=\"nx\">Comments<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">MousePointers<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">Realtime<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">useComments<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">useHTMLPin<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">useMouse<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">useRealtime<\/span><span class=\"p\">,<\/span>\n     <span class=\"nx\">WhoIsOnline<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span>  <span class=\"k\">from<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">@superviz\/react-sdk<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>\u0648\u0627\u0631\u062f\u0627\u062a ReactFlow:<\/strong>  \u0627\u062c\u0632\u0627\u0621 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0648\u062f\u0627\u0631\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f.<\/li>\n<li>  <strong>\u0648\u0627\u0631\u062f\u0627\u062a SDK SuperViz:<\/strong>  \u0634\u0627\u0645\u0644 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc\u060c \u0645\u0627\u0646\u0646\u062f \u0646\u0638\u0631\u0627\u062a\u060c \u0627\u0634\u0627\u0631\u0647 \u06af\u0631\u0647\u0627\u06cc \u0645\u0627\u0648\u0633\u060c \u0648 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0627\u0633\u062a.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"2_%DA%AF%D8%B1%D9%87_%D9%87%D8%A7_%D9%88_%D9%84%D8%A8%D9%87_%D9%87%D8%A7%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  2. \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0648\u0636\u0639\u06cc\u062a \u0627\u0648\u0644\u06cc\u0647 \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">initialNodes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span> \n    <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"mi\">381<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">265<\/span> <span class=\"p\">},<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Start<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span> \n    <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"mi\">556<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">335<\/span> <span class=\"p\">},<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Action<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span> \n    <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"mi\">701<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">220<\/span> <span class=\"p\">},<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Process<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span> \n    <span class=\"p\">{<\/span> <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">4<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">position<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"mi\">823<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">333<\/span> <span class=\"p\">},<\/span> <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">End<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}<\/span> <span class=\"p\">},<\/span> \n<span class=\"p\">];<\/span> \n\n<span class=\"kd\">const<\/span> <span class=\"nx\">initialEdges<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span> \n    <span class=\"p\">{<\/span> \n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">e1-2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">source<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">1<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">target<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ConnectionLineType<\/span><span class=\"p\">.<\/span><span class=\"nx\">SmoothStep<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">animated<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> \n    <span class=\"p\">},<\/span> \n    <span class=\"p\">{<\/span> \n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">e2-3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">source<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">2<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">target<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ConnectionLineType<\/span><span class=\"p\">.<\/span><span class=\"nx\">SmoothStep<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">animated<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> \n    <span class=\"p\">},<\/span> \n    <span class=\"p\">{<\/span> \n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">e3-4<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">source<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">3<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">target<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">4<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ConnectionLineType<\/span><span class=\"p\">.<\/span><span class=\"nx\">SmoothStep<\/span><span class=\"p\">,<\/span> \n        <span class=\"na\">animated<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> \n    <span class=\"p\">},<\/span> \n<span class=\"p\">];<\/span>\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>\u06af\u0631\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647:<\/strong>  \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0628\u0631\u0686\u0633\u0628 \u0647\u0631 \u06af\u0631\u0647 \u0631\u0627 \u062f\u0631 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u0644\u0628\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647:<\/strong>  \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0634\u06cc\u0627\u0621 \u06a9\u0647 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0628\u06cc\u0646 \u06af\u0631\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u062e\u0637 \u0627\u062a\u0635\u0627\u0644 \u06af\u0627\u0645 \u0635\u0627\u0641 \u0628\u0627 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"3_%D9%85%D9%88%D9%84%D9%81%D9%87_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  3. \u0645\u0648\u0644\u0641\u0647 \u0627\u062a\u0627\u0642 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f  <code>Room<\/code>  \u062c\u0632\u0621 \u0628\u0627 \u062e\u0648\u0627\u0635 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u0646\u0627\u0633\u0647 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">type<\/span>  <span class=\"nx\">Props<\/span>  <span class=\"o\">=<\/span>  <span class=\"p\">{<\/span>\n     <span class=\"na\">participantId<\/span><span class=\"p\">:<\/span>  <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span>  <span class=\"k\">default<\/span>  <span class=\"kd\">function<\/span>  <span class=\"nf\">Room<\/span><span class=\"p\">({<\/span> <span class=\"nx\">participantId<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">Props<\/span><span class=\"p\">)<\/span>  <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">subscribed<\/span> <span class=\"o\">=<\/span>  <span class=\"nf\">useRef<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>\u0646\u0648\u0639 \u0644\u0648\u0627\u0632\u0645 \u062c\u0627\u0646\u0628\u06cc:<\/strong>  \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u0648\u0631\u062f \u0627\u0646\u062a\u0638\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc  <code>Room<\/code>  \u062c\u0632\u0621\u060c \u0627\u0632 \u062c\u0645\u0644\u0647  <code>participantId<\/code>.<\/li>\n<li>  <strong>\u0645\u0631\u062c\u0639 \u0645\u0634\u062a\u0631\u06a9:<\/strong>  \u0645\u0631\u062c\u0639\u06cc \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u0622\u06cc\u0627 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0647 \u0627\u0633\u062a \u06cc\u0627 \u062e\u06cc\u0631\u060c \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0634\u062a\u0631\u06a9 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"4_%D9%82%D9%84%D8%A7%D8%A8_%D9%87%D8%A7_%D9%88_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C_%D8%A8%D9%84%D8%A7%D8%AF%D8%B1%D9%86%DA%AF_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  4. \u0642\u0644\u0627\u0628 \u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0646\u0638\u0631\u0627\u062a\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u06cc\u200c\u062f\u0631\u0646\u06af \u0648 \u062a\u0628\u062f\u06cc\u0644\u200c\u0647\u0627\u06cc \u0645\u0627\u0648\u0633\u060c \u0642\u0644\u0627\u0628\u200c\u0647\u0627 \u0648 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc SuperViz \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"c1\">\/\/ Managing comments <\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">openThreads<\/span><span class=\"p\">,<\/span> <span class=\"nx\">closeThreads<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useComments<\/span><span class=\"p\">();<\/span> \n\n<span class=\"c1\">\/\/ Managing real-time updates <\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">isReady<\/span><span class=\"p\">,<\/span> <span class=\"nx\">subscribe<\/span><span class=\"p\">,<\/span> <span class=\"nx\">unsubscribe<\/span><span class=\"p\">,<\/span> <span class=\"nx\">publish<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useRealtime<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">default<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span> \n\n<span class=\"c1\">\/\/ Managing mouse pointers <\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">transform<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useMouse<\/span><span class=\"p\">();<\/span> \n\n<span class=\"c1\">\/\/ Pinning functionality for comments <\/span>\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">pin<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useHTMLPin<\/span><span class=\"p\">({<\/span> \n    <span class=\"na\">containerId<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-flow-container<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n    <span class=\"na\">dataAttributeName<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">data-id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n    <span class=\"na\">dataAttributeValueFilters<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"sr\">\/.*null-<\/span><span class=\"se\">(<\/span><span class=\"sr\">target|source<\/span><span class=\"se\">)<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">],<\/span> \n<span class=\"p\">});<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0638\u0631\u0627\u062a:<\/strong>  \u062a\u0648\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0648 \u0628\u0633\u062a\u0646 \u0645\u0648\u0636\u0648\u0639\u0627\u062a \u0646\u0638\u0631\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>  <strong>useRealtime:<\/strong>  \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0645\u0627\u0646\u0646\u062f  <code>subscribe<\/code>\u060c  <code>unsubscribe<\/code>\u060c \u0648  <code>publish<\/code>.<\/li>\n<li>  <strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627\u0648\u0633:<\/strong>  \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633.<\/li>\n<li>  <strong>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTMLPin:<\/strong>  \u067e\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 \u062e\u0627\u0635 HTML \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"5_%D8%AD%D8%A7%D9%84%D8%AA_%D8%A7%D9%88%D9%84%DB%8C%D9%87_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%DA%AF%D8%B1%D9%87_%D9%87%D8%A7_%D9%88_%D9%84%D8%A8%D9%87_%D9%87%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  5. \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0648\u06a9 \u0647\u0627\u06cc React Flow \u0648\u0636\u0639\u06cc\u062a \u06af\u0631\u0647 \u0647\u0627 \u0648 \u0644\u0628\u0647 \u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span>  <span class=\"p\">{<\/span> <span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">zoom<\/span> <span class=\"p\">}<\/span>  <span class=\"o\">=<\/span>  <span class=\"nf\">useViewport<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span>  <span class=\"p\">[<\/span><span class=\"nx\">nodes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNodes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onNodesChange<\/span><span class=\"p\">]<\/span>  <span class=\"o\">=<\/span>  <span class=\"nf\">useNodesState<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialNodes<\/span><span class=\"p\">);<\/span>\n<span class=\"kd\">const<\/span>  <span class=\"p\">[<\/span><span class=\"nx\">edges<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEdges<\/span><span class=\"p\">,<\/span> <span class=\"nx\">onEdgesChange<\/span><span class=\"p\">]<\/span>  <span class=\"o\">=<\/span>  <span class=\"nf\">useEdgesState<\/span><span class=\"p\">(<\/span><span class=\"nx\">initialEdges<\/span><span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>useViewport:<\/strong>  \u0648\u0636\u0639\u06cc\u062a \u0646\u0645\u0627\u06cc \u0641\u0639\u0644\u06cc\u060c \u0627\u0632 \u062c\u0645\u0644\u0647  <code>x<\/code>  \u0648  <code>y<\/code>  \u062a\u0631\u062c\u0645\u0647 \u0648  <code>zoom<\/code>  \u0633\u0637\u062d<\/li>\n<li>  <strong>useNodesState:<\/strong>  \u0648\u0636\u0639\u06cc\u062a \u06af\u0631\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>useEdgesState:<\/strong>  \u0648\u0636\u0639\u06cc\u062a \u0644\u0628\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"6_%D8%A7%D8%AA%D8%B5%D8%A7%D9%84%D8%A7%D8%AA_%D9%84%D8%A8%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  6. \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0644\u0628\u0647 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0644\u0628\u0647 \u062c\u062f\u06cc\u062f \u062f\u0631 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">onConnect<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCallback<\/span><span class=\"p\">(<\/span> \n    <span class=\"p\">(<\/span><span class=\"nx\">connection<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Connection<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> \n        <span class=\"kd\">const<\/span> <span class=\"nx\">edge<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> \n            <span class=\"p\">...<\/span><span class=\"nx\">connection<\/span><span class=\"p\">,<\/span> \n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ConnectionLineType<\/span><span class=\"p\">.<\/span><span class=\"nx\">SmoothStep<\/span><span class=\"p\">,<\/span> \n            <span class=\"na\">animated<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> \n        <span class=\"p\">};<\/span> \n\n        <span class=\"nf\">setEdges<\/span><span class=\"p\">((<\/span><span class=\"nx\">eds<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">addEdge<\/span><span class=\"p\">(<\/span><span class=\"nx\">edge<\/span><span class=\"p\">,<\/span> <span class=\"nx\">eds<\/span><span class=\"p\">));<\/span> \n\n        <span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">new-edge<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> \n            <span class=\"nx\">edge<\/span><span class=\"p\">,<\/span> \n        <span class=\"p\">});<\/span> \n    <span class=\"p\">},<\/span> \n    <span class=\"p\">[<\/span><span class=\"nx\">setEdges<\/span><span class=\"p\">,<\/span> <span class=\"nx\">publish<\/span><span class=\"p\">]<\/span> \n<span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>onConnect:<\/strong>  \u0627\u06cc\u062c\u0627\u062f \u0644\u0628\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u060c \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0648 \u0627\u0646\u062a\u0634\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li>  <strong>addEdge:<\/strong>  \u06cc\u06a9 \u0644\u0628\u0647 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0644\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"7_%DA%A9%D8%B4%DB%8C%D8%AF%D9%86_%DA%AF%D8%B1%D9%87_%D8%B1%D8%A7_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  7. \u06a9\u0634\u06cc\u062f\u0646 \u06af\u0631\u0647 \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06a9\u0634\u06cc\u062f\u0646 \u06af\u0631\u0647\u060c \u06cc\u06a9 \u062a\u0645\u0627\u0633 \u067e\u0627\u0633\u062e \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">onNodeDrag<\/span> <span class=\"o\">=<\/span>  <span class=\"nf\">useCallback<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">(<\/span><span class=\"nx\">_<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MouseEvent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">node<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Node<\/span><span class=\"p\">)<\/span>  <span class=\"o\">=&gt;<\/span>  <span class=\"p\">{<\/span>\n        <span class=\"nf\">publish<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">node-drag<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>  <span class=\"p\">{<\/span> <span class=\"nx\">node<\/span> <span class=\"p\">});<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"p\">[<\/span><span class=\"nx\">publish<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>onNodeDrag:<\/strong>  \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u06af\u0631\u0647 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0634\u06cc\u062f\u0647 \u0634\u062f\u0646 \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u0628\u06cc\u0646\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"8_Drag_Over_Events_%D8%B1%D8%A7_%D9%85%D8%AF%DB%8C%D8%B1%DB%8C%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  8. Drag Over Events \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u06a9\u0634\u06cc\u062f\u0646 \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u0627\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u06a9\u0634\u06cc\u062f\u0646 \u0628\u0631 \u0631\u0648\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">onDragOver<\/span> <span class=\"o\">=<\/span>  <span class=\"nf\">useCallback<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">(<\/span><span class=\"nx\">event<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">DragEvent<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">HTMLButtonElement<\/span> <span class=\"o\">|<\/span> <span class=\"nx\">HTMLDivElement<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">)<\/span>  <span class=\"o\">=&gt;<\/span>  <span class=\"p\">{<\/span>\n        <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n        <span class=\"nx\">event<\/span><span class=\"p\">.<\/span><span class=\"nx\">dataTransfer<\/span><span class=\"p\">.<\/span><span class=\"nx\">dropEffect<\/span> <span class=\"o\">=<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">move<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"p\">[]<\/span>\n<span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>onDragOver:<\/strong>  \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0628\u0635\u0631\u06cc \u062f\u0631 \u062d\u06cc\u0646 \u0639\u0645\u0644\u06cc\u0627\u062a \u06a9\u0634\u06cc\u062f\u0646\u060c \u062c\u0644\u0648\u0647 \u06a9\u0634\u06cc\u062f\u0646 \u0631\u0627 \u0631\u0648\u06cc &#8220;\u062d\u0631\u06a9\u062a&#8221; \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"9_Viewport_%D8%B1%D8%A7_%D8%AF%D8%B1_Mouse_Movement_%D8%A8%D9%87_%D8%B1%D9%88%D8%B2_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  9. Viewport \u0631\u0627 \u062f\u0631 Mouse Movement \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062d\u0631\u06a9\u0627\u062a \u0645\u0627\u0648\u0633 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u062f\u0631 \u06cc\u06a9 \u0631\u0627\u0633\u062a\u0627 \u0628\u0627\u0634\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span>  <span class=\"o\">=&gt;<\/span>  <span class=\"p\">{<\/span>\n    <span class=\"nf\">transform<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">translate<\/span><span class=\"p\">:<\/span>  <span class=\"p\">{<\/span>\n            <span class=\"na\">x<\/span><span class=\"p\">:<\/span> <span class=\"nx\">x<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">},<\/span>\n        <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"nx\">zoom<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n<span class=\"p\">},<\/span>  <span class=\"p\">[<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">,<\/span> <span class=\"nx\">zoom<\/span><span class=\"p\">,<\/span> <span class=\"nx\">transform<\/span><span class=\"p\">]);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>useEffect:<\/strong>  \u0645\u0648\u0642\u0639\u06cc\u062a \u0648 \u0645\u0642\u06cc\u0627\u0633 \u062f\u0631\u06af\u0627\u0647 \u062f\u06cc\u062f \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u062d\u0631\u06a9\u062a \u0645\u0627\u0648\u0633 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u06cc\u06a9 \u0646\u0645\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u062f\u0627\u0631\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"10_%D9%85%D8%B4%D8%AE%D8%B5%D9%87_%D8%AF%D8%A7%D8%AF%D9%87_%D8%B1%D8%A7_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%BE%DB%8C%D9%86_%DA%A9%D8%B1%D8%AF%D9%86_SuperViz_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  10. \u0645\u0634\u062e\u0635\u0647 \u062f\u0627\u062f\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0646 \u06a9\u0631\u062f\u0646 SuperViz \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0646 \u06a9\u0631\u062f\u0646 SuperViz \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0627\u062f\u0647 \u0628\u0647 \u0638\u0631\u0641 React Flow \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span>  <span class=\"o\">=&gt;<\/span>  <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">element<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">.react-flow__pane<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">if  <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">element<\/span><span class=\"p\">)<\/span>  <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"nx\">element<\/span><span class=\"p\">.<\/span><span class=\"nf\">setAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">data-superviz-id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>  <span class=\"dl\">\"<\/span><span class=\"s2\">plane<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">},<\/span>  <span class=\"p\">[]);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>data-superviz-id:<\/strong>  \u0628\u0647 SuperViz \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0639\u0646\u0627\u0635\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u067e\u06cc\u0646\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646\u200c\u0647\u0627 \u0645\u062a\u0635\u0644 \u06a9\u0646\u0646\u062f\u060c \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u062f \u0648 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0646\u0638\u0631 \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"11_%D9%85%D8%B4%D8%AA%D8%B1%DA%A9_%D8%B4%D8%AF%D9%86_%D8%AF%D8%B1_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B2%D9%85%D8%A7%D9%86_%D9%88%D8%A7%D9%82%D8%B9%DB%8C\"><\/span>\n<p>  11. \u0645\u0634\u062a\u0631\u06a9 \u0634\u062f\u0646 \u062f\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0648 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0648\u0636\u0639\u06cc\u062a \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> \n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">subscribed<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span> \n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">centerNodes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> \n        <span class=\"kd\">const<\/span> <span class=\"nx\">centerButton<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span> \n            <span class=\"dl\">\"<\/span><span class=\"s2\">.react-flow__controls-fitview<\/span><span class=\"dl\">\"<\/span> \n        <span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLButtonElement<\/span><span class=\"p\">;<\/span> \n        <span class=\"nx\">centerButton<\/span><span class=\"p\">?.<\/span><span class=\"nf\">click<\/span><span class=\"p\">();<\/span> \n    <span class=\"p\">};<\/span> \n\n    <span class=\"nf\">centerNodes<\/span><span class=\"p\">();<\/span> \n\n    <span class=\"c1\">\/\/ Subscribe to new-edge events <\/span>\n    <span class=\"nf\">subscribe<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">new-edge<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">data<\/span><span class=\"p\">,<\/span> <span class=\"na\">participantId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">senderId<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> \n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">senderId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">participantId<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span> \n\n        <span class=\"nf\">setEdges<\/span><span class=\"p\">((<\/span><span class=\"nx\">eds<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">addEdge<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">edge<\/span><span class=\"p\">,<\/span> <span class=\"nx\">eds<\/span><span class=\"p\">));<\/span> \n    <span class=\"p\">});<\/span> \n\n\n    <span class=\"c1\">\/\/ Subscribe to node-drag events <\/span>\n    <span class=\"nf\">subscribe<\/span><span class=\"p\">(<\/span> \n        <span class=\"dl\">\"<\/span><span class=\"s2\">node-drag<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> \n        <span class=\"p\">({<\/span> \n            <span class=\"nx\">data<\/span><span class=\"p\">,<\/span> \n            <span class=\"na\">participantId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">senderId<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> \n            <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">node<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Node<\/span> <span class=\"p\">};<\/span> \n            <span class=\"nl\">participantId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span> \n        <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span> \n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">senderId<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">participantId<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span><span class=\"p\">;<\/span> \n\n            <span class=\"nf\">setNodes<\/span><span class=\"p\">((<\/span><span class=\"nx\">nds<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> \n                <span class=\"nx\">nds<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">node<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> \n                    <span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">node<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">?<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">node<\/span><span class=\"p\">,<\/span> <span class=\"p\">...<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">node<\/span> <span class=\"p\">}<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">node<\/span> \n                <span class=\"p\">)<\/span> \n            <span class=\"p\">);<\/span> \n        <span class=\"p\">}<\/span> \n    <span class=\"p\">);<\/span> \n\n    <span class=\"nx\">subscribed<\/span><span class=\"p\">.<\/span><span class=\"nx\">current<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span> \n<span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isReady<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setEdges<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setNodes<\/span><span class=\"p\">,<\/span> <span class=\"nx\">unsubscribe<\/span><span class=\"p\">,<\/span> <span class=\"nx\">subscribe<\/span><span class=\"p\">,<\/span> <span class=\"nx\">participantId<\/span><span class=\"p\">]);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>\u0627\u0634\u062a\u0631\u0627\u06a9:<\/strong>  \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u062e\u0627\u0635 \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f (<code>new-edge<\/code>\u060c  <code>node-drag<\/code>) \u0648 \u0648\u0636\u0639\u06cc\u062a \u0645\u062d\u0644\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u0644\u063a\u0648 \u0627\u0634\u062a\u0631\u0627\u06a9:<\/strong>  \u0627\u0634\u062a\u0631\u0627\u06a9 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0639\u062f\u0645 \u0646\u06cc\u0627\u0632 \u067e\u0627\u06a9 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"12_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%A7%D8%AA%D8%A7%D9%82_%D8%B1%D8%A7_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  12. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u062a\u0627\u0642 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Room \u0631\u0627 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc React Flow \u0648 SuperViz \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f.\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"k\">return <\/span><span class=\"p\">(<\/span> \n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full h-full bg-gray-200 flex items-center justify-center flex-col<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">header<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full p-5 bg-purple-400 flex items-center justify-between<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-white text-2xl font-bold<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">React<\/span> <span class=\"nx\">Flow<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">SuperViz<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1&gt;<\/span><span class=\"err\"> \n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">comments<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex gap-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/div&gt;<\/span><span class=\"err\"> \n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/header&gt;<\/span><span class=\"err\"> \n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">main<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1 w-full h-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">id<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">react-flow-container<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-full h-full<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span> \n                <span class=\"o\">&lt;<\/span><span class=\"nx\">ReactFlow<\/span> \n                    <span class=\"nx\">nodes<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">nodes<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">onNodeDrag<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onNodeDrag<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">edges<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">edges<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">onConnect<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onConnect<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">onNodesChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onNodesChange<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">onEdgesChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onEdgesChange<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">onDragOver<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">onDragOver<\/span><span class=\"p\">}<\/span> \n                    <span class=\"nx\">connectionMode<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ConnectionMode<\/span><span class=\"p\">.<\/span><span class=\"nx\">Loose<\/span><span class=\"p\">}<\/span> \n                <span class=\"o\">&gt;<\/span> \n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">Controls<\/span> <span class=\"nx\">showFitView<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"kc\">false<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt;<\/span><span class=\"err\"> \n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"nx\">Background<\/span> <span class=\"o\">\/&gt;<\/span> \n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ReactFlow&gt;<\/span><span class=\"err\"> \n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div&gt;<\/span><span class=\"err\"> \n<\/span>\n            <span class=\"p\">{<\/span><span class=\"cm\">\/* SuperViz Components *\/<\/span><span class=\"p\">}<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Realtime<\/span> <span class=\"o\">\/&gt;<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">WhoIsOnline<\/span> <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">comments<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span> \n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Comments<\/span> \n                <span class=\"nx\">pin<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">pin<\/span><span class=\"p\">}<\/span> \n                <span class=\"nx\">position<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">left<\/span><span class=\"dl\">\"<\/span> \n                <span class=\"nx\">buttonLocation<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">comments<\/span><span class=\"dl\">\"<\/span> \n                <span class=\"nx\">onPinActive<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">openThreads<\/span><span class=\"p\">}<\/span> \n                <span class=\"nx\">onPinInactive<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">closeThreads<\/span><span class=\"p\">}<\/span> \n            <span class=\"sr\">\/&gt;<\/span><span class=\"err\"> \n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">MousePointers<\/span> <span class=\"nx\">elementId<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">react-flow-container<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span> \n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/main&gt;<\/span><span class=\"err\"> \n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div&gt; <\/span><span class=\"err\"> \n<\/span><span class=\"p\">);<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p><strong>\u062a\u0648\u0636\u06cc\u062d:<\/strong><\/p>\n<ul>\n<li>  <strong>ReactFlow:<\/strong>  \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0631\u0627 \u0628\u0627 \u06af\u0631\u0647 \u0647\u0627\u060c \u0644\u0628\u0647 \u0647\u0627 \u0648 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>  <strong>\u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc:<\/strong>  \u0647\u0645\u0627\u0647\u0646\u06af\u200c\u0633\u0627\u0632\u06cc \u0628\u06cc\u200c\u062f\u0631\u0646\u06af \u0648\u0636\u0639\u06cc\u062a \u0628\u06cc\u0646 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/li>\n<li>  <strong>WhoIsOnline:<\/strong>  \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u0631 \u062c\u0644\u0633\u0647 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>  <strong>\u0646\u0638\u0631\u0627\u062a:<\/strong>  \u0627\u0645\u06a9\u0627\u0646 \u0627\u0641\u0632\u0648\u062f\u0646 \u0648 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0638\u0631\u0627\u062a \u0645\u062a\u0646\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>  <strong>\u0645\u0627\u0648\u0633 \u0627\u0634\u0627\u0631\u0647 \u06af\u0631:<\/strong>  \u0646\u0634\u0627\u0646\u06af\u0631\u0647\u0627\u06cc \u0645\u0627\u0648\u0633 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4: \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_React_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  1. \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"nx\">npm<\/span> <span class=\"nx\">run<\/span> <span class=\"nx\">dev<\/span>\n\n<\/code><\/pre>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0628 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u0628\u06cc\u0646 \u0686\u0646\u062f\u06cc\u0646 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%B1%D8%A7_%D8%AA%D8%B3%D8%AA_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  2. \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062a\u0633\u062a \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>  <strong>\u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0645\u0634\u0627\u0631\u06a9\u062a\u06cc:<\/strong>  \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u067e\u0646\u062c\u0631\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u06cc\u0627 \u0628\u0631\u06af\u0647 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0686\u0646\u062f\u06cc\u0646 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u0634\u0628\u06cc\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0631\u0627\u06cc \u062f\u06cc\u06af\u0631\u0627\u0646 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>  <strong>\u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc:<\/strong>  \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f \u0622\u06cc\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0628\u0627 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0627\u06cc\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0647\u0645\u06af\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f \u06cc\u0627 \u062e\u06cc\u0631.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A7%D8%B5%D9%87\"><\/span>\n<p>  \u062e\u0644\u0627\u0635\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0644\u0648\u0686\u0627\u0631\u062a \u0645\u0634\u062a\u0631\u06a9 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React Flow \u0648 SuperViz \u0628\u0631\u0627\u06cc \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0633\u0627\u062e\u062a\u06cc\u0645. \u0645\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 React \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0631\u062f\u06cc\u0645 \u062a\u0627 \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0646\u0648\u062f \u0648 \u0644\u0628\u0647 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f \u0648 \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u062a\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u0631 \u06cc\u06a9 \u0646\u0645\u0648\u062f\u0627\u0631 \u0645\u0634\u062a\u0631\u06a9 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0631\u0627\u06cc \u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0648 \u062a\u062c\u0633\u0645 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a\u060c \u06af\u0633\u062a\u0631\u0634 \u062f\u0627\u062f \u0648 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0648 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0631\u0627 \u062f\u0631 \u0645\u062e\u0632\u0646 GitHub \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D9%87_%D9%85%D8%A7_%D8%A8%D9%BE%DB%8C%D9%88%D9%86%D8%AF%DB%8C%D8%AF_SuperViz_Hackathon_20_AI_%D8%A8%D8%A7_RealTime_%D9%85%D9%84%D8%A7%D9%82%D8%A7%D8%AA_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF\"><\/span>\n<p>  \u0628\u0647 \u0645\u0627 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f: SuperViz Hackathon 2.0: AI \u0628\u0627 RealTime \u0645\u0644\u0627\u0642\u0627\u062a \u0645\u06cc \u06a9\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u06a9\u062a \u062f\u0631 Super Hackathon 2.0 \u0645\u0627 \u062f\u0631 \u0627\u06a9\u062a\u0628\u0631 \u0627\u0645\u0633\u0627\u0644 \u0622\u0645\u0627\u062f\u0647 \u0634\u0648\u06cc\u062f \u062a\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc \u0646\u0648\u0622\u0648\u0631\u0627\u0646\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f! \u0628\u0647 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc SuperViz \u0648 \u0628\u0627 \u062c\u0648\u0627\u06cc\u0632 5000 \u062f\u0644\u0627\u0631\u06cc\u060c \u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0686\u0627\u0644\u0634 \u0645\u06cc\u200c\u06a9\u0634\u06cc\u0645 \u062a\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u0628\u0627 \u067e\u0644\u062a\u0641\u0631\u0645 \u0628\u0644\u0627\u062f\u0631\u0646\u06af SuperViz \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f \u0648 \u0645\u0631\u0632\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u062c\u0627\u0628\u062c\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0622\u0645\u0627\u062f\u0647 \u067e\u06cc\u0648\u0633\u062a\u0646 \u0647\u0633\u062a\u06cc\u062f\u061f \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0646\u0627\u0645 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0645\u0627\u0646\u062f\u0646 \u0628\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a Super Hackathon 2.0 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u06af\u06cc \ud83d\udc4b\ud83c\udffc \u0622\u0645\u0648\u0632\u0634 \u0627\u0645\u0631\u0648\u0632 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0641\u0632\u0648\u062f\u0646 \u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 React Flow \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 SuperViz \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0634\u062a\u0631\u06a9 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u0631\u0627 \u062f\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-80261","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/80261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=80261"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/80261\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=80261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=80261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=80261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}