{"size": 3267, "ext": "js", "max_stars_repo_path": "js/aboutedge.js", "max_stars_repo_name": "JarenChow/JanvasExamples", "max_stars_repo_stars_event_min_datetime": "2021-01-16T04:27:49.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-21T03:28:04.000Z", "max_issues_repo_path": "js/aboutedge.js", "max_issues_repo_name": "JarenChow/JanvasExamples", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "js/aboutedge.js", "max_forks_repo_name": "JarenChow/JanvasExamples", "max_forks_repo_forks_event_min_datetime": "2021-01-16T08:02:25.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-07T16:21:57.000Z"}
{"max_stars_count": 65, "max_issues_count": null, "max_forks_count": 5, "avg_line_length": 35.9010989011, "max_line_length": 98, "alphanum_fraction": 0.5736149373}
var aboutEdge = new janvas.Canvas({
  container: "#app",
  props: {
    points: [],
    current: void (0)
  },
  methods: {
    init: function () {
      this.background = new janvas.Rect(this.$ctx, 0, 0, this.$width, this.$height);
      this.start = new janvas.Arc(this.$ctx, 200, 250, 5);
      this.start.getStyle().setFillStyle("hsl(0, 80%, 60%)");
      this.end = new janvas.Arc(this.$ctx, 500, 250, 5);
      this.end.getStyle().setFillStyle("hsl(90, 80%, 60%)");
      this.an = new janvas.Arc(this.$ctx, 525, 300, 5);
      this.an.getStyle().setFillStyle("hsl(180, 80%, 60%)");
      this.points.push(this.start, this.end, this.an);
      this.edge = new janvas.Edge(this.$ctx);
      this.text = new janvas.Text(this.$ctx, 0, 0, "Janvas");
      this.text.getStyle().setFont("12px sans-serif").setTextAlign("center")
        .setTextBaseline("middle");
      this.edge.setEmptyLength(janvas.Utils.measureTextWidth(this.text.getText(),
        this.text.getStyle().getFont()) / 0.809);
      this.head = new janvas.Triangle(this.$ctx).setLength(12);
      this.head.getStyle().setFillStyle("hsl(270, 80%, 60%)");
      this.setCurvePropsAndDraw();
    },
    draw: function () {
      this.$clear();
      this.edge.stroke();
      if (this.edge.ratioInRange()) {
        var an = this.edge.getAngle();
        this.text.getMatrix().setAngle(an > -Math.PI / 2 && an < Math.PI / 2 ? an : an + Math.PI);
        this.text.init(this.edge.getTargetX(), this.edge.getTargetY(),
          this.edge.getTargetX(), this.edge.getTargetY()).fill();
      }
      this.start.fill();
      this.end.fill();
      this.an.fill();
      this.head.setRotation(this.edge.getAnchorAngle()).fill();
    }
  },
  events: {
    mousedown: function () {
      this._mousedown = true;
      this.points.forEach(function (point) {
        point.lastX = point.getStartX();
        point.lastY = point.getStartY();
      });
    },
    mousemove: function (ev) {
      if (this._mousedown) {
        if (ev.buttons === 2) {
          this.points.forEach(function (point) {
            point.setStart(point.lastX + ev.$moveX, point.lastY + ev.$moveY);
          }, this);
          this.setCurvePropsAndDraw();
        } else {
          if (!this.current) return;
          this.current.setStart(this.current.lastX + ev.$moveX,
            this.current.lastY + ev.$moveY);
          this.setCurvePropsAndDraw();
        }
      } else {
        this.current = void (0);
        this.points.forEach(function (point) {
          if (point.isPointInPath(ev.$x, ev.$y)) {
            this.current = point;
            this.setCursor("pointer");
          }
        }, this);
        if (!this.current) this.setCursor("");
      }
    },
    mouseup: function () {
      this._mousedown = false;
    }
  },
  functions: {
    setCurvePropsAndDraw: function () {
      this.edge.setStart(this.start.getStartX(), this.start.getStartY())
        .setEnd(this.end.getStartX(), this.end.getStartY())
        .setAnchor(this.an.getStartX(), this.an.getStartY());
      this.head.setStart(this.end.getStartX(), this.end.getStartY());
      this.draw();
    },
    setCursor: function (cursor) {
      if (this.$canvas.style.cursor !== cursor) this.$canvas.style.cursor = cursor;
    }
  }
});
