गैंट एक्टिविटी रेंडरर शेड्यूलजेएस व्यूअर का मुख्य रेंडरर है। यह आलेख चर्चा करेगा कि इसे कैसे बनाया गया है और इस गतिविधि रेंडरर की विशिष्टताएँ क्या हैं।

कस्टम रेंडरर क्लास कैसे बनाएं

रेंडरर क्लास बनाने के लिए पहला कदम एक उच्च-क्रम फ्रेमवर्क क्लास का विस्तार करके विशेषताओं और विधियों को प्राप्त करना है।

हम कार्यों को केवल उनके प्रारंभ और समाप्ति समय आयामों के माध्यम से प्रस्तुत करना चाहते हैं। ऐसा करने के लिए शेड्यूलजेएस बेस रेंडरर क्लास ActivityBarRenderer क्लास है।

हमें ActivityBarRenderer वर्ग को कस्टम-प्रकार के तर्क प्रदान करने की आवश्यकता है ताकि हमारे कस्टम Row और Activity वर्गों द्वारा प्रदान की गई विशेषताएँ और विधियाँ सुलभ होंगी बेस क्लास एपीआई का उपयोग करना।

आइए प्रत्येक ScheduleJsViewerTaskActivity को उनके संबंधित ScheduleJsViewerTaskRow में खींचने के लिए ScheduleJsViewerTaskActivityRenderer क्लास बनाएं।

// Import the base ActivityBarRenderer class from ScheduleJS
import {ActivityBarRenderer} from "schedule";

// Import our custom Activity and Row types
import {ScheduleJsViewerTaskActivity} from "...";
import {ScheduleJsViewerTaskRow} from "...";

// Create our custom renderer by extending the ActivityBarRenderer class
export class ScheduleJsViewerTaskActivityRenderer extends ActivityBarRenderer { }

जैसा कि है, रेंडरर को ActivityBarRenderer के डिफ़ॉल्ट व्यवहार का उपयोग करके हमारी गतिविधियों को चित्रित करने के लिए पहले से ही पंजीकृत किया जा सकता है। अब आइए जानें कि इसे कैसे अनुकूलित किया जाए।

आधार वास्तुकला

शेड्यूलजेएस में, एक एक्टिविटी रेंडरर एक क्लास है जिसे हम ग्राफिक्स एपीआई का उपयोग करके प्रोग्रामेटिक रूप से पंजीकृत करते हैं ताकि इसकी रो पर एक विशिष्ट एक्टिविटी बनाई जा सके। हमारे ScheduleJsViewerTaskActivityRenderer को व्यवस्थित करने के लिए, हम इसके कोड को तीन खंडों में अलग करेंगे:

• विशेषताओं में वेरिएबल होंगे जो हमें एक विशिष्ट ड्राइंग प्रक्रिया के लिए व्यवहार को बदलने देंगे।
• कंस्ट्रक्टर हमें रेंडरर के लिए एक डिफ़ॉल्ट स्थिति परिभाषित करने देगा।
• ड्राइंग विधियों में कैनवास पर हमारी गतिविधियों को चित्रित करने के लिए सभी निर्देश होंगे।

गुण

विशेषताएँ स्थिरांक हैं जिनका पूरे रेंडरर में पुन: उपयोग किया जाएगा। जैसा कि है, इन गुणों को सीधे रेंडरर कोड में ही संपादित किया जाएगा। हम एक विशिष्ट स्क्रीन की कल्पना कर सकते हैं जहां उपयोगकर्ता इन सेटिंग्स को सीधे यूआई में संशोधित कर सकता है।

// Attributes

// Pixels sizings
private readonly _parentActivityTrianglesWidthPx: number = 5;
private readonly _parentActivityTrianglesHeightPx: number = 8;
private readonly _defaultLineWidthPx: number = 0.5;

// Colors palette
private readonly _parentActivityColor: string = Color.GRAY.toCssString();
private readonly _strokeColor: string = Color.BLACK.toCssString();
private readonly _defaultActivityGreen: Color = Color.rgb(28, 187, 158);
private readonly _defaultActivityBlue: Color = Color.rgb(53, 152, 214);
private readonly _onHoverFillColor: string = Color.ORANGE.toCssString();

// Opacity ratio for baseline activities
private readonly _baselineOpacityRatio: number = 0.6;

निर्माता

कंस्ट्रक्टर हमारे रेंडरर जीवनचक्र विधि से मजबूती से जुड़ा हुआ है। शेड्यूलजेएस व्यूअर में, जब भी उपयोगकर्ता विशिष्टताओं को परिभाषित करने के लिए स्क्रीन स्विच करता है तो हमने रेंडरर को तुरंत चालू करने का निर्णय लिया और इस रेंडरर को लागू करने वाले प्रत्येक टैब में हमारे कोड का पुन: उपयोग किया। इसका मतलब है कि जब भी उपयोगकर्ता इस रेंडरर वाली स्क्रीन का चयन करता है तो कंस्ट्रक्टर फ़ंक्शन चलाया जाता है।

// Constructor

// The renderer requires the graphics and the current tab variable
constructor(graphics: GraphicsBase,
            private _currentRibbonMenuTab: ScheduleJsViewerRibbonMenuTabsEnum) {

  // The ActivityBarRenderer class requires the graphics and a name for the renderer
  super(graphics, ScheduleJsViewerRenderingConstants.taskActivityRendererName);

  // Default fill color when hovering an activity
  this.setFillHover(Color.web(this._onHoverFillColor));

  // Default stroke color when hovering an activity
  this.setStrokeHover(Color.BLACK);

  // Default stroke color
  this.setStroke(Color.BLACK);

  // Default thickness
  this.setLineWidth(this._defaultLineWidthPx);

  // Default bar height
  this.setBarHeight(8);

  // Default fill color based on current tab 
  switch (_currentRibbonMenuTab) {
    // Change color for the WBS tab
    case ScheduleJsViewerRibbonMenuTabsEnum.WBS:
      this._parentActivityColor = ScheduleJsViewerColors.brown;
      this.setFill(this._defaultActivityBlue);
      break;
    default:
      this._parentActivityColor = Color.GRAY.toCssString();
      this.setFill(this._defaultActivityGreen);
      break;
  }

}

सेटफिल, सेटस्ट्रोक, सेटफिलहोवर, सेटस्ट्रोकहोवर, सेटलाइनविड्थ, और सेटबारहाइट विरासत में मिले हैं और एक्टिविटीबाररेंडरर क्लास की डिफ़ॉल्ट रेंडरिंग विशेषताओं को बदलने के लिए उपयोग किए जाते हैं।

इस रेंडरर की डिफ़ॉल्ट विशेषताएं निम्नलिखित हैं:

• गतिविधियों को मँडराते समय एक कस्टम रंग
• एक काली रेखा स्ट्रोक (गतिविधि सीमाओं के लिए)
• 0.5 पिक्सेल की एक स्ट्रोक लाइन मोटाई
• 8 पिक्सेल की एक गतिविधि बार ऊंचाई
• एक सशर्त भरण रंग: WBS टैब में बच्चों के लिए नीला और माता-पिता के लिए भूरा अन्य टैब में बच्चों के लिए हरा और माता-पिता के लिए ग्रे

चित्रकला

फ्रेमवर्क हमारी गतिविधियों को कैनवास पर प्रस्तुत करने के लिए स्वचालित रूप से ड्रॉएक्टिविटी विधि को कॉल करेगा। इसके सभी पैरामीटर गतिशील रूप से भरे हुए हैं, जिससे आप अपनी गतिविधियों की वर्तमान स्थिति पर वास्तविक समय में प्रतिक्रिया कर सकते हैं।

// Main drawing method

drawActivity(activityRef: ActivityRef,
             position: ViewPosition,
             ctx: CanvasRenderingContext2D,
             x: number,
             y: number,
             w: number,
             h: number,
             selected: boolean,    
             hover: boolean,
             highlighted: boolean,
             pressed: boolean     
            ): ActivityBounds {    // This method has to return ActivityBounds

    // True if current activity includes a comparison task
    const hasModifications = !!activityRef.getActivity().diffTask;

    // True if current row has children
    const isParent = activityRef.getRow().getChildren().length;

    // Set colors dynamically
    this._setActivityColor(activityRef, hasModifications);

    // Draw text
    this._drawActivityText(activityRef, ctx, x, y, w, h, hasModifications);

    // Run a custom method to draw parent activities or delegate to the default method
    return isParent
      ? this._drawParentActivity(activityRef, ctx, x, y, w, h, hover, hasModifications)
      : super.drawActivity(activityRef, position, ctx, x, y, w, h, selected, hover, highlighted, pressed);
  }

चित्रांकन इस प्रकार होगा:

• ActivityRef API का उपयोग करके वर्तमान गतिविधि और पंक्ति पर जानकारी प्राप्त करें
• हमारे _setActivityColor विधि का उपयोग करके गतिशील रूप से रंग सेट करें
• हमारी _drawActivityText विधि का उपयोग करके गतिविधि टेक्स्ट बनाएं
• दो तरीकों का उपयोग करके गतिविधि को स्वयं बनाएं: माता-पिता को आकर्षित करने के लिए _drawParentActivity विधि बच्चों को आकर्षित करने के लिए super.drawActivity डिफ़ॉल्ट ActivityBarRenderer विधि

कस्टम गतिविधि आरेखण विधियाँ

आइए _drawParentActivity विधि के साथ अपने स्वयं के तरीकों को डिज़ाइन करके अपनी गतिविधि को स्वतंत्र रूप से कैसे आकर्षित करें, इस पर करीब से नज़र डालें।

// Draw the parent activity

private _drawParentActivity(activityRef: ActivityRef,
                            ctx: CanvasRenderingContext2D,
                            x: number,
                            y: number,
                            w: number,
                            h: number,
                            hover: boolean,
                            hasModifications: boolean
                           ): ActivityBounds {

    // Set padding
    const topPadding = h / 3.5;
    const leftPadding = 1;

    // Set CanvasRenderingContext2D
    ctx.lineWidth = this._defaultLineWidthPx;
    if (hover) {
      ctx.fillStyle = this._onHoverFillColor;
      ctx.strokeStyle = ScheduleJsViewerColors.brown;
    } else if (hasModifications) {
      ctx.fillStyle = Color.web(this._parentActivityColor).withOpacity(this._baselineOpacityRatio).toCssString();
      ctx.strokeStyle = `rgba(0,0,0,${this._baselineOpacityRatio})`;
    } else {
      ctx.fillStyle = this._parentActivityColor;
      ctx.strokeStyle = this._strokeColor;
    }

    // Draw elements
    ScheduleJsViewerTaskActivityRenderer._drawParentActivityStartTriangle(ctx, x   leftPadding, y   topPadding, this._parentActivityTrianglesWidthPx, this._parentActivityTrianglesHeightPx);
    ScheduleJsViewerTaskActivityRenderer._drawParentActivityBody(ctx, x   leftPadding, y   topPadding, w, this._parentActivityTrianglesWidthPx, this._parentActivityTrianglesHeightPx);
    ScheduleJsViewerTaskActivityRenderer._drawParentActivityEndTriangle(ctx, x   leftPadding, y   topPadding, w, this._parentActivityTrianglesWidthPx, this._parentActivityTrianglesHeightPx);

    // Return positions to update where your activity should be responsive
    return new ActivityBounds(activityRef, x, y, w, h);
  }

यहां हम CanvasRenderingContex2D सेट करके अपनी ड्राइंग रणनीति को परिभाषित करने के लिए सीधे HTMLCanvas API का उपयोग करते हैं। इस पद्धति में किया गया एकमात्र फ्रेमवर्क-संबंधी ऑपरेशन वर्तमान मूल गतिविधि के लिए कुछ नए ActivityBounds का निर्माण कर रहा है।

फ्रेमवर्क स्क्रीन पर सभी गतिविधियों को पंजीकृत करने के लिए हुड के नीचे ActivityBounds का उपयोग करके एक मानचित्र बनाता है। यह मानचित्र HTMLCanvas API के प्रदर्शन का लाभ उठाते हुए सटीक जानकारी के आधार पर उन्नत उपयोगकर्ता अनुभव बनाने के लिए एक तत्व जैसा तर्क प्रदान करके डेवलपर की मदद करता है।

_drawParentActivityStartTriangle जैसी ड्रॉ एलिमेंट विधियां पिक्सेल स्तर पर ड्रॉ करने के लिए CanvasRenderingContext2D API पर निर्भर करती हैं।

// Draw the start triangle element of the parent activity

private static _drawParentActivityStartTriangle(ctx: CanvasRenderingContext2D,
                                                x: number,
                                                y: number,
                                                triangleWidth: number,
                                                triangleHeight: number): void {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x , y   triangleHeight);
    ctx.lineTo(x   triangleWidth, y);
    ctx.lineTo(x, y);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

अंतिम परिणाम

अपने बिल्कुल नए रेंडरर को पंजीकृत करने के लिए, ग्राफ़िक्स.सेटएक्टिविटी रेंडरर विधि का उपयोग करें:

// Register the renderer

graphics.setActivityRenderer(ScheduleJsViewerTaskActivity, GanttLayout, new ScheduleJsViewerTaskActivityRenderer(graphics, currentRibbonMenuTab));

अंतिम परिणाम का वीडियो देखने के लिए आप यहां जा सकते हैं: एक एक्टिविटी रेंडरर का निर्माण