{"id":68842,"date":"2024-07-10T17:03:06","date_gmt":"2024-07-10T13:33:06","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/"},"modified":"2024-07-10T17:03:06","modified_gmt":"2024-07-10T13:33:06","slug":"building-an-activityrenderer-3o0","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u06cc\u06a9 ActivityRenderer &#8211; \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"<div data-article-id=\"1918518\" id=\"article-body\">\n<p>\u0631\u0646\u062f\u0631 \u0641\u0639\u0627\u0644\u06cc\u062a Gantt \u0631\u0646\u062f\u0631 \u0627\u0635\u0644\u06cc ScheduleJS Viewer \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0622\u0646 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0627\u06a9\u062a\u06cc\u0648\u06cc\u062a\u06cc \u0628\u062d\u062b \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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=\"Toggle Table of Content\"><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\/building-an-activityrenderer-3o0\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3_%D8%B1%D9%86%D8%AF%D8%B1_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85\" >\u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/#%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D9%BE%D8%A7%DB%8C%D9%87\" >\u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0627\u06cc\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<\/a><\/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\/building-an-activityrenderer-3o0\/#%D8%B3%D8%A7%D8%B2%D9%86%D8%AF%D9%87\" >\u0633\u0627\u0632\u0646\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/#%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\" >\u0637\u0631\u0627\u062d\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/#%D8%B1%D9%88%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%81%D8%B9%D8%A7%D9%84%DB%8C%D8%AA_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\" >\u0631\u0648\u0634 \u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/building-an-activityrenderer-3o0\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_%DB%8C%DA%A9_%DA%A9%D9%84%D8%A7%D8%B3_%D8%B1%D9%86%D8%AF%D8%B1_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631\u060c \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0648 \u0645\u062a\u062f\u0647\u0627 \u0628\u0627 \u06af\u0633\u062a\u0631\u0634 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0645\u0631\u062a\u0628\u0647 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u0641\u0642\u0637 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0628\u0639\u0627\u062f \u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u0648 \u067e\u0627\u06cc\u0627\u0646 \u0622\u0646\u0647\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645.  \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631 \u067e\u0627\u06cc\u0647 ScheduleJS \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0633\u062a <strong>ActivityBarRenderer<\/strong> \u06a9\u0644\u0627\u0633<\/p>\n<p>\u0645\u0627 \u0628\u0627\u06cc\u062f \u0622\u0631\u06af\u0648\u0645\u0627\u0646 \u0647\u0627\u06cc \u0646\u0648\u0639 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645 <strong>ActivityBarRenderer<\/strong> \u06a9\u0644\u0627\u0633 \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0648 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0641\u0627\u0631\u0634\u06cc \u0645\u0627 <strong>\u0631\u062f\u06cc\u0641<\/strong> \u0648 <strong>\u0641\u0639\u0627\u0644\u06cc\u062a<\/strong> \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API \u06a9\u0644\u0627\u0633 \u067e\u0627\u06cc\u0647 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <strong>ScheduleJsViewerTaskActivityRenderer<\/strong> \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0647\u0631 <strong>ScheduleJsViewerTaskActivity<\/strong> \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u062e\u0648\u062f <strong>ScheduleJsViewerTaskRow<\/strong>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Import the base ActivityBarRenderer class from ScheduleJS<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">ActivityBarRenderer<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">schedule<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Import our custom Activity and Row types<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">ScheduleJsViewerTaskActivity<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span><span class=\"nx\">ScheduleJsViewerTaskRow<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Create our custom renderer by extending the ActivityBarRenderer class<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">ScheduleJsViewerTaskActivityRenderer<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">ActivityBarRenderer<\/span><span class=\"o\"><span class=\"nx\">ScheduleJsViewerTaskActivity<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ScheduleJsViewerTaskRow<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0647\u0633\u062a\u060c \u0631\u0646\u062f\u0631 \u0627\u0632 \u0642\u0628\u0644 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0645\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u062b\u0628\u062a \u0634\u062f\u0647 \u0628\u0627\u0634\u062f <strong>ActivityBarRenderer<\/strong>.  \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0646\u062d\u0648\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0631\u062f\u0646 \u0622\u0646 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D9%85%D8%A7%D8%B1%DB%8C_%D9%BE%D8%A7%DB%8C%D9%87\"><\/span>\n<p>  \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0627\u06cc\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 ScheduleJS\u060c \u06cc\u06a9 <strong>ActivityRenderer<\/strong> \u06a9\u0644\u0627\u0633\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Graphics API \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u062e\u0627\u0635 \u062b\u0628\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 <strong>\u0641\u0639\u0627\u0644\u06cc\u062a<\/strong> \u0631\u0648\u06cc \u0622\u0646 <strong>\u0631\u062f\u06cc\u0641<\/strong>.  \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0645\u0627 <strong>ScheduleJsViewerTaskActivityRenderer<\/strong>\u060c \u06a9\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0647 \u0628\u062e\u0634 \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0631\u0641\u062a\u0627\u0631 \u06cc\u06a9 \u0631\u0648\u06cc\u0647 \u062a\u0631\u0633\u06cc\u0645\u06cc \u062e\u0627\u0635 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645.\n<\/li>\n<li>\u0633\u0627\u0632\u0646\u062f\u0647 \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645.<\/li>\n<li>\u0631\u0648\u0634 \u0647\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u0645\u0627 \u0631\u0627 \u0631\u0648\u06cc \u0628\u0648\u0645 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u0646\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7%DB%8C\"><\/span>\n<p>  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062b\u0627\u0628\u062a \u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0631\u0646\u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0647\u0633\u062a\u060c \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0641\u0642\u0637 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u06a9\u062f \u0631\u0646\u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0635\u06cc \u0631\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 UI \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Attributes<\/span>\n\n<span class=\"c1\">\/\/ Pixels sizings<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_parentActivityTrianglesWidthPx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">5<\/span><span class=\"p\">;<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_parentActivityTrianglesHeightPx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">8<\/span><span class=\"p\">;<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_defaultLineWidthPx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Colors palette<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_parentActivityColor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">GRAY<\/span><span class=\"p\">.<\/span><span class=\"nf\">toCssString<\/span><span class=\"p\">();<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_strokeColor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">BLACK<\/span><span class=\"p\">.<\/span><span class=\"nf\">toCssString<\/span><span class=\"p\">();<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_defaultActivityGreen<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Color<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nf\">rgb<\/span><span class=\"p\">(<\/span><span class=\"mi\">28<\/span><span class=\"p\">,<\/span> <span class=\"mi\">187<\/span><span class=\"p\">,<\/span> <span class=\"mi\">158<\/span><span class=\"p\">);<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_defaultActivityBlue<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Color<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nf\">rgb<\/span><span class=\"p\">(<\/span><span class=\"mi\">53<\/span><span class=\"p\">,<\/span> <span class=\"mi\">152<\/span><span class=\"p\">,<\/span> <span class=\"mi\">214<\/span><span class=\"p\">);<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_onHoverFillColor<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">ORANGE<\/span><span class=\"p\">.<\/span><span class=\"nf\">toCssString<\/span><span class=\"p\">();<\/span>\n\n<span class=\"c1\">\/\/ Opacity ratio for baseline activities<\/span>\n<span class=\"kr\">private<\/span> <span class=\"nx\">readonly<\/span> <span class=\"nx\">_baselineOpacityRatio<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.6<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%B2%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u0633\u0627\u0632\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0633\u0627\u0632\u0646\u062f\u0647 \u0628\u0647 \u0634\u062f\u062a \u0628\u0627 \u0631\u0648\u0634 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0631\u0646\u062f\u0631 \u0645\u0627 \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a.  \u062f\u0631 ScheduleJS Viewer\u060c \u0645\u0627 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u06cc\u0645 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0635\u0641\u062d\u0647\u200c\u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0647\u0631 \u0628\u0631\u06af\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0632 \u06a9\u062f \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u062f\u060c \u0631\u0646\u062f\u0631 \u0631\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0633\u0627\u0632\u0646\u062f\u0647 \u0647\u0631 \u0628\u0627\u0631 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Constructor<\/span>\n\n<span class=\"c1\">\/\/ The renderer requires the graphics and the current tab variable<\/span>\n<span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphics<\/span><span class=\"p\">:<\/span> <span class=\"nx\">GraphicsBase<\/span><span class=\"o\"><span class=\"nx\">ScheduleJsViewerTaskRow<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n            <span class=\"kr\">private<\/span> <span class=\"nx\">_currentRibbonMenuTab<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ScheduleJsViewerRibbonMenuTabsEnum<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"c1\">\/\/ The ActivityBarRenderer class requires the graphics and a name for the renderer<\/span>\n  <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphics<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ScheduleJsViewerRenderingConstants<\/span><span class=\"p\">.<\/span><span class=\"nx\">taskActivityRendererName<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Default fill color when hovering an activity<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setFillHover<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nf\">web<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_onHoverFillColor<\/span><span class=\"p\">));<\/span>\n\n  <span class=\"c1\">\/\/ Default stroke color when hovering an activity<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setStrokeHover<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">BLACK<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Default stroke color<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setStroke<\/span><span class=\"p\">(<\/span><span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">BLACK<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Default thickness<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setLineWidth<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_defaultLineWidthPx<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Default bar height<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setBarHeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"c1\">\/\/ Default fill color based on current tab <\/span>\n  <span class=\"k\">switch <\/span><span class=\"p\">(<\/span><span class=\"nx\">_currentRibbonMenuTab<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Change color for the WBS tab<\/span>\n    <span class=\"k\">case<\/span> <span class=\"nx\">ScheduleJsViewerRibbonMenuTabsEnum<\/span><span class=\"p\">.<\/span><span class=\"nx\">WBS<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ScheduleJsViewerColors<\/span><span class=\"p\">.<\/span><span class=\"nx\">brown<\/span><span class=\"p\">;<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setFill<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_defaultActivityBlue<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">default<\/span><span class=\"p\">:<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityColor<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nx\">GRAY<\/span><span class=\"p\">.<\/span><span class=\"nf\">toCssString<\/span><span class=\"p\">();<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">setFill<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_defaultActivityGreen<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n<span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0631\u0627 <code>setFill<\/code>\u060c \u0633<code>etStroke<\/code>\u060c <code>setFillHover<\/code>\u060c <code>setStrokeHover<\/code>\u060c <code>setLineWidth<\/code>\u060c \u0648 <code>setBarHeight<\/code> \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0631\u0646\u062f\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u06a9\u0644\u0627\u0633 ActivityBarRenderer \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0631\u0646\u06af \u0633\u0641\u0627\u0631\u0634\u06cc \u0647\u0646\u06af\u0627\u0645 \u0634\u0646\u0627\u0648\u0631 \u06a9\u0631\u062f\u0646 \u0641\u0639\u0627\u0644\u06cc\u062a\u200c\u0647\u0627<\/li>\n<li>\u06cc\u06a9 \u062e\u0637 \u0645\u0634\u06a9\u06cc (\u0628\u0631\u0627\u06cc \u0645\u0631\u0632\u0647\u0627\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a)<\/li>\n<li>\u0636\u062e\u0627\u0645\u062a \u062e\u0637 \u0633\u06a9\u062a\u0647 \u0645\u063a\u0632\u06cc 0.5 \u067e\u06cc\u06a9\u0633\u0644<\/li>\n<li>\u0627\u0631\u062a\u0641\u0627\u0639 \u0646\u0648\u0627\u0631 \u0641\u0639\u0627\u0644\u06cc\u062a 8 \u067e\u06cc\u06a9\u0633\u0644<\/li>\n<li>\u0631\u0646\u06af \u067e\u0631 \u0645\u0634\u0631\u0648\u0637: \u0622\u0628\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0648\u062f\u06a9\u0627\u0646 \u0648 \u0642\u0647\u0648\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u0644\u062f\u06cc\u0646 \u062f\u0631 \u0628\u0631\u06af\u0647 WBS \u0633\u0628\u0632 \u0628\u0631\u0627\u06cc \u06a9\u0648\u062f\u06a9\u0627\u0646 \u0648 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u0644\u062f\u06cc\u0646 \u062f\u0631 \u0628\u0631\u06af\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C\"><\/span>\n<p>  \u0637\u0631\u0627\u062d\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>drawActivity<\/code> \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u0645\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0628\u0648\u0645.  \u062a\u0645\u0627\u0645 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0622\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u067e\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0644\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u062e\u0648\u062f \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Main drawing method<\/span>\n\n<span class=\"nf\">drawActivity<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ActivityRef<\/span><span class=\"o\"><span class=\"nx\">ScheduleJsViewerTaskActivity<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">position<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ViewPosition<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">ctx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CanvasRenderingContext2D<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">x<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">y<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">w<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">h<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">selected<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>    \n             <span class=\"nx\">hover<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">highlighted<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>\n             <span class=\"nx\">pressed<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span>     \n            <span class=\"p\">):<\/span> <span class=\"nx\">ActivityBounds<\/span> <span class=\"p\">{<\/span>    <span class=\"c1\">\/\/ This method has to return ActivityBounds<\/span>\n\n    <span class=\"c1\">\/\/ True if current activity includes a comparison task<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">hasModifications<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!!<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">getActivity<\/span><span class=\"p\">().<\/span><span class=\"nx\">diffTask<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ True if current row has children<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">isParent<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">activityRef<\/span><span class=\"p\">.<\/span><span class=\"nf\">getRow<\/span><span class=\"p\">().<\/span><span class=\"nf\">getChildren<\/span><span class=\"p\">().<\/span><span class=\"nx\">length<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Set colors dynamically<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">_setActivityColor<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">hasModifications<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Draw text<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">_drawActivityText<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/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\">w<\/span><span class=\"p\">,<\/span> <span class=\"nx\">h<\/span><span class=\"p\">,<\/span> <span class=\"nx\">hasModifications<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Run a custom method to draw parent activities or delegate to the default method<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nx\">isParent<\/span>\n      <span class=\"p\">?<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">_drawParentActivity<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/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\">w<\/span><span class=\"p\">,<\/span> <span class=\"nx\">h<\/span><span class=\"p\">,<\/span> <span class=\"nx\">hover<\/span><span class=\"p\">,<\/span> <span class=\"nx\">hasModifications<\/span><span class=\"p\">)<\/span>\n      <span class=\"p\">:<\/span> <span class=\"k\">super<\/span><span class=\"p\">.<\/span><span class=\"nf\">drawActivity<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">position<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ctx<\/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\">w<\/span><span class=\"p\">,<\/span> <span class=\"nx\">h<\/span><span class=\"p\">,<\/span> <span class=\"nx\">selected<\/span><span class=\"p\">,<\/span> <span class=\"nx\">hover<\/span><span class=\"p\">,<\/span> <span class=\"nx\">highlighted<\/span><span class=\"p\">,<\/span> <span class=\"nx\">pressed<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0631\u0633\u06cc\u0645 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<ul>\n<li>\u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u062c\u0631\u06cc\u0627\u0646 <strong>\u0641\u0639\u0627\u0644\u06cc\u062a<\/strong> \u0648 <strong>\u0631\u062f\u06cc\u0641<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong>ActivityRef API<\/strong>\n<\/li>\n<li>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627 \u0631\u0646\u06af \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>_setActivityColor<\/code> \u0631\u0648\u0634<\/li>\n<li>\u0631\u0633\u0645 \u0645\u062a\u0646 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0627 <code>_drawActivityText<\/code> \u0631\u0648\u0634<\/li>\n<li>\u062e\u0648\u062f \u0641\u0639\u0627\u0644\u06cc\u062a \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0648 \u0631\u0648\u0634 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f: The <code>_drawParentActivity<\/code> \u0631\u0648\u0634 \u062a\u0631\u0633\u06cc\u0645 \u0648\u0627\u0644\u062f\u06cc\u0646 The <code>super.drawActivity<\/code> \u0631\u0648\u0634 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 ActivityBarRenderer \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0648\u062f\u06a9\u0627\u0646<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%D8%B4_%D9%87%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%81%D8%B9%D8%A7%D9%84%DB%8C%D8%AA_%D9%87%D8%A7%DB%8C_%D8%B3%D9%81%D8%A7%D8%B1%D8%B4%DB%8C\"><\/span>\n<p>  \u0631\u0648\u0634 \u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u062f\u0642\u06cc\u0642\u200c\u062a\u0631 \u0628\u0647 \u0646\u062d\u0648\u0647 \u062a\u0631\u0633\u06cc\u0645 \u0622\u0632\u0627\u062f\u0627\u0646\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u0627 \u0637\u0631\u0627\u062d\u06cc \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>_drawParentActivity<\/code> \u0631\u0648\u0634.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Draw the parent activity<\/span>\n\n<span class=\"kr\">private<\/span> <span class=\"nf\">_drawParentActivity<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ActivityRef<\/span><span class=\"o\"><span class=\"nx\">ScheduleJsViewerTaskActivity<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">ctx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CanvasRenderingContext2D<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">x<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">y<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">w<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">h<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">hover<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">,<\/span>\n                            <span class=\"nx\">hasModifications<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span>\n                           <span class=\"p\">):<\/span> <span class=\"nx\">ActivityBounds<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"c1\">\/\/ Set padding<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">topPadding<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">h<\/span> <span class=\"o\">\/<\/span> <span class=\"mf\">3.5<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">leftPadding<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ Set CanvasRenderingContext2D<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">lineWidth<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_defaultLineWidthPx<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">hover<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">fillStyle<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_onHoverFillColor<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">strokeStyle<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">ScheduleJsViewerColors<\/span><span class=\"p\">.<\/span><span class=\"nx\">brown<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">hasModifications<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">fillStyle<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Color<\/span><span class=\"p\">.<\/span><span class=\"nf\">web<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityColor<\/span><span class=\"p\">).<\/span><span class=\"nf\">withOpacity<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_baselineOpacityRatio<\/span><span class=\"p\">).<\/span><span class=\"nf\">toCssString<\/span><span class=\"p\">();<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">strokeStyle<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`rgba(0,0,0,<\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_baselineOpacityRatio<\/span><span class=\"p\">}<\/span><span class=\"s2\">)`<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">fillStyle<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityColor<\/span><span class=\"p\">;<\/span>\n      <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nx\">strokeStyle<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_strokeColor<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ Draw elements<\/span>\n    <span class=\"nx\">ScheduleJsViewerTaskActivityRenderer<\/span><span class=\"p\">.<\/span><span class=\"nf\">_drawParentActivityStartTriangle<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">leftPadding<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">topPadding<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesWidthPx<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesHeightPx<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ScheduleJsViewerTaskActivityRenderer<\/span><span class=\"p\">.<\/span><span class=\"nf\">_drawParentActivityBody<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">leftPadding<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">topPadding<\/span><span class=\"p\">,<\/span> <span class=\"nx\">w<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesWidthPx<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesHeightPx<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ScheduleJsViewerTaskActivityRenderer<\/span><span class=\"p\">.<\/span><span class=\"nf\">_drawParentActivityEndTriangle<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">,<\/span> <span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">leftPadding<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">topPadding<\/span><span class=\"p\">,<\/span> <span class=\"nx\">w<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesWidthPx<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">_parentActivityTrianglesHeightPx<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ Return positions to update where your activity should be responsive<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ActivityBounds<\/span><span class=\"p\">(<\/span><span class=\"nx\">activityRef<\/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\">w<\/span><span class=\"p\">,<\/span> <span class=\"nx\">h<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 <strong>HTMLCanvas API<\/strong> \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u062a\u0631\u0633\u06cc\u0645 \u062e\u0648\u062f \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645 <strong>CanvasRenderingContex2D<\/strong>.  \u062a\u0646\u0647\u0627 \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u062e\u06cc \u0645\u0648\u0627\u0631\u062f \u062c\u062f\u06cc\u062f \u0627\u0633\u062a <strong>\u0645\u062d\u062f\u0648\u062f\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a<\/strong> \u0628\u0631\u0627\u06cc \u0648\u0627\u0644\u062f\u06cc\u0646 \u0641\u0639\u0644\u06cc <strong>\u0641\u0639\u0627\u0644\u06cc\u062a<\/strong>.<\/p>\n<p>\u0686\u0627\u0631\u0686\u0648\u0628 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f <strong>\u0645\u062d\u062f\u0648\u062f\u0647 \u0641\u0639\u0627\u0644\u06cc\u062a<\/strong> \u0632\u06cc\u0631 \u06a9\u0627\u067e\u0648\u062a \u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u062a\u0645\u0627\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634.  \u0627\u06cc\u0646 \u0646\u0642\u0634\u0647 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u0645\u0646\u0637\u0642 \u0639\u0646\u0635\u0631 \u0645\u0627\u0646\u0646\u062f \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u06cc \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0642\u06cc\u0642 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f <strong>HTMLCanvas API<\/strong>.<\/p>\n<p>\u0631\u0648\u0634 \u0639\u0646\u0627\u0635\u0631 \u062a\u0631\u0633\u06cc\u0645 \u0645\u0627\u0646\u0646\u062f <code>_drawParentActivityStartTriangle<\/code> \u062a\u06a9\u06cc\u0647 \u0628\u0631 <strong>CanvasRenderingContext2D API<\/strong> \u0628\u0631\u0627\u06cc \u062a\u0631\u0633\u06cc\u0645 \u062f\u0631 \u0633\u0637\u062d \u067e\u06cc\u06a9\u0633\u0644<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Draw the start triangle element of the parent activity<\/span>\n\n<span class=\"kr\">private<\/span> <span class=\"kd\">static<\/span> <span class=\"nf\">_drawParentActivityStartTriangle<\/span><span class=\"p\">(<\/span><span class=\"nx\">ctx<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CanvasRenderingContext2D<\/span><span class=\"p\">,<\/span>\n                                                <span class=\"nx\">x<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                                                <span class=\"nx\">y<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                                                <span class=\"nx\">triangleWidth<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">,<\/span>\n                                                <span class=\"nx\">triangleHeight<\/span><span class=\"p\">:<\/span> <span class=\"nx\">number<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">beginPath<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">moveTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">lineTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">x<\/span> <span class=\"p\">,<\/span> <span class=\"nx\">y<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">triangleHeight<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">lineTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">x<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">triangleWidth<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">lineTo<\/span><span class=\"p\">(<\/span><span class=\"nx\">x<\/span><span class=\"p\">,<\/span> <span class=\"nx\">y<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">fill<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">stroke<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">ctx<\/span><span class=\"p\">.<\/span><span class=\"nf\">closePath<\/span><span class=\"p\">();<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%D9%86%D9%87%D8%A7%DB%8C%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062b\u0628\u062a \u0631\u0646\u062f\u0631 \u062c\u062f\u06cc\u062f \u062e\u0648\u062f\u060c \u0627\u0632 <code>graphics.setActivityRenderer<\/code> \u0631\u0648\u0634:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Register the renderer<\/span>\n\n<span class=\"nx\">graphics<\/span><span class=\"p\">.<\/span><span class=\"nf\">setActivityRenderer<\/span><span class=\"p\">(<\/span><span class=\"nx\">ScheduleJsViewerTaskActivity<\/span><span class=\"p\">,<\/span> <span class=\"nx\">GanttLayout<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ScheduleJsViewerTaskActivityRenderer<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphics<\/span><span class=\"p\">,<\/span> <span class=\"nx\">currentRibbonMenuTab<\/span><span class=\"p\">));<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<p>\u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0648\u06cc\u062f\u06cc\u0648\u06cc \u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0628\u062e\u0634 \u0633\u0627\u062e\u062a\u0646 ActivityRenderer \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0631\u0646\u062f\u0631 \u0641\u0639\u0627\u0644\u06cc\u062a Gantt \u0631\u0646\u062f\u0631 \u0627\u0635\u0644\u06cc ScheduleJS Viewer \u0627\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0622\u0646 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0627\u06a9\u062a\u06cc\u0648\u06cc\u062a\u06cc \u0628\u062d\u062b \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631 \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645 \u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0631\u0646\u062f\u0631\u060c \u0628\u0647 \u0627\u0631\u062b \u0628\u0631\u062f\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0648 \u0645\u062a\u062f\u0647\u0627 \u0628\u0627 \u06af\u0633\u062a\u0631\u0634 \u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0645\u0631\u062a\u0628\u0647 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0633\u062a. \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0648\u0638\u0627\u06cc\u0641 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":68843,"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-68842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/68842","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=68842"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/68842\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/68843"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=68842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=68842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=68842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}