text: 
  /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
  
  
  /**
   * AUTO-GENERATED FILE. DO NOT MODIFY.
   */
  
  /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
  import { __extends } from "tslib";
  import * as zrUtil from 'zrender/lib/core/util.js';
  import * as graphic from '../../util/graphic.js';
  import { getECData } from '../../util/innerStore.js';
  import { createTextStyle } from '../../label/labelStyle.js';
  import { getLayoutRect } from '../../util/layout.js';
  import ComponentModel from '../../model/Component.js';
  import ComponentView from '../../view/Component.js';
  import { windowOpen } from '../../util/format.js';
  
  var TitleModel =
  /** @class */
  function (_super) {
    __extends(TitleModel, _super);
  
    function TitleModel() {
      var _this = _super !== null && _super.apply(this, arguments) || this;
  
      _this.type = TitleModel.type;
      _this.layoutMode = {
        type: 'box',
        ignoreSize: true
      };
      return _this;
    }
  
    TitleModel.type = 'title';
    TitleModel.defaultOption = {
      // zlevel: 0,
      z: 6,
      show: true,
      text: '',
      target: 'blank',
      subtext: '',
      subtarget: 'blank',
      left: 0,
      top: 0,
      backgroundColor: 'rgba(0,0,0,0)',
      borderColor: '#ccc',
      borderWidth: 0,
      padding: 5,
      itemGap: 10,
      textStyle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#464646'
      },
      subtextStyle: {
        fontSize: 12,
        color: '#6E7079'
      }
    };
    return TitleModel;
  }(ComponentModel); // View
  
  
  var TitleView =
  /** @class */
  function (_super) {
    __extends(TitleView, _super);
  
    function TitleView() {
      var _this = _super !== null && _super.apply(this, arguments) || this;
  
      _this.type = TitleView.type;
      return _this;
    }
  
    TitleView.prototype.render = function (titleModel, ecModel, api) {
      this.group.removeAll();
  
      if (!titleModel.get('show')) {
        return;
      }
  
      var group = this.group;
      var textStyleModel = titleModel.getModel('textStyle');
      var subtextStyleModel = titleModel.getModel('subtextStyle');
      var textAlign = titleModel.get('textAlign');
      var textVerticalAlign = zrUtil.retrieve2(titleModel.get('textBaseline'), titleModel.get('textVerticalAlign'));
      var textEl = new graphic.Text({
        style: createTextStyle(textStyleModel, {
          text: titleModel.get('text'),
          fill: textStyleModel.getTextColor()
        }, {
          disableBox: true
        }),
        z2: 10
      });
      var textRect = textEl.getBoundingRect();
      var subText = titleModel.get('subtext');
      var subTextEl = new graphic.Text({
        style: createTextStyle(subtextStyleModel, {
          text: subText,
          fill: subtextStyleModel.getTextColor(),
          y: textRect.height + titleModel.get('itemGap'),
          verticalAlign: 'top'
        }, {
          disableBox: true
        }),
        z2: 10
      });
      var link = titleModel.get('link');
      var sublink = titleModel.get('sublink');
      var triggerEvent = titleModel.get('triggerEvent', true);
      textEl.silent = !link && !triggerEvent;
      subTextEl.silent = !sublink && !triggerEvent;
  
      if (link) {
        textEl.on('click', function () {
          windowOpen(link, '_' + titleModel.get('target'));
        });
      }
  
      if (sublink) {
        subTextEl.on('click', function () {
          windowOpen(sublink, '_' + titleModel.get('subtarget'));
        });
      }
  
      getECData(textEl).eventData = getECData(subTextEl).eventData = triggerEvent ? {
        componentType: 'title',
        componentIndex: titleModel.componentIndex
      } : null;
      group.add(textEl);
      subText && group.add(subTextEl); // If no subText, but add subTextEl, there will be an empty line.
  
      var groupRect = group.getBoundingRect();
      var layoutOption = titleModel.getBoxLayoutParams();
      layoutOption.width = groupRect.width;
      layoutOption.height = groupRect.height;
      var layoutRect = getLayoutRect(layoutOption, {
        width: api.getWidth(),
        height: api.getHeight()
      }, titleModel.get('padding')); // Adjust text align based on position
  
      if (!textAlign) {
        // Align left if title is on the left. center and right is same
        textAlign = titleModel.get('left') || titleModel.get('right'); // @ts-ignore
  
        if (textAlign === 'middle') {
          textAlign = 'center';
        } // Adjust layout by text align
  
  
        if (textAlign === 'right') {
          layoutRect.x += layoutRect.width;
        } else if (textAlign === 'center') {
          layoutRect.x += layoutRect.width / 2;
        }
      }
  
      if (!textVerticalAlign) {
        textVerticalAlign = titleModel.get('top') || titleModel.get('bottom'); // @ts-ignore
  
        if (textVerticalAlign === 'center') {
          textVerticalAlign = 'middle';
        }
  
        if (textVerticalAlign === 'bottom') {
          layoutRect.y += layoutRect.height;
        } else if (textVerticalAlign === 'middle') {
          layoutRect.y += layoutRect.height / 2;
        }
  
        textVerticalAlign = textVerticalAlign || 'top';
      }
  
      group.x = layoutRect.x;
      group.y = layoutRect.y;
      group.markRedraw();
      var alignStyle = {
        align: textAlign,
        verticalAlign: textVerticalAlign
      };
      textEl.setStyle(alignStyle);
      subTextEl.setStyle(alignStyle); // Render background
      // Get groupRect again because textAlign has been changed
  
      groupRect = group.getBoundingRect();
      var padding = layoutRect.margin;
      var style = titleModel.getItemStyle(['color', 'opacity']);
      style.fill = titleModel.get('backgroundColor');
      var rect = new graphic.Rect({
        shape: {
          x: groupRect.x - padding[3],
          y: groupRect.y - padding[0],
          width: groupRect.width + padding[1] + padding[3],
          height: groupRect.height + padding[0] + padding[2],
          r: titleModel.get('borderRadius')
        },
        style: style,
        subPixelOptimize: true,
        silent: true
      });
      group.add(rect);
    };
  
    TitleView.type = 'title';
    return TitleView;
  }(ComponentView);
  
  export function install(registers) {
    registers.registerComponentModel(TitleModel);
    registers.registerComponentView(TitleView);
  }