Developer-Mike / obsidian-advanced-canvas

⚡ Supercharge your Obsidian.md canvas experience! Create presentations, flowcharts and more!
GNU General Public License v3.0
365 stars 17 forks source link

The arrows are displayed backwards in direct edge path route. #75

Closed 1001ruchka closed 5 months ago

1001ruchka commented 5 months ago

The arrows are displayed backwards in direct edge path route.

SCR-20240615-lqqe SCR-20240615-lqvx

Other edge path route do not have this problem.

SCR-20240615-lrbu SCR-20240615-lrgq
1001ruchka commented 5 months ago

I took a closer look. The arrows are not displayed backwards, they are simply not parallel to the line, and since the arrow is triangular there is an illusion that it is directed in the opposite direction. For straight lines, the direction of the arrow must be parallel to the route line.

SCR-20240615-mdll
1001ruchka commented 5 months ago

In the plugin https://github.com/michaellw/Obsidian-Canvas-Style-Menu the arrow part of the code is implemented as follows:

 if (propertyValue === "cs-line-straight") {
                  const displayPath = this.lineGroupEl.querySelector(".canvas-display-path");
                  const interactionPath = this.lineGroupEl.querySelector(".canvas-interaction-path");
                  displayPath.setAttribute("d", linePath);
                  interactionPath.setAttribute("d", linePath);
                  if (this.toLineEnd && !this.fromLineEnd) {
                    const toNewTransform = this.toLineEnd.el.style.transform.replace(/rotate\([-\d]+deg\)/, `rotate(${toRotateAngle}deg)`);
                    this.toLineEnd.el.style.transform = toNewTransform;
                  }
                  if (this.fromLineEnd) {
                    const fromNewTransform = this.fromLineEnd.el.style.transform.replace(/rotate\([-\d]+deg\)/, `rotate(${fromRotateAngle}deg)`);
                    const toNewTransform = this.toLineEnd.el.style.transform.replace(/rotate\([-\d]+deg\)/, `rotate(${toRotateAngle}deg)`);
                    this.fromLineEnd.el.style.transform = fromNewTransform;
                    this.toLineEnd.el.style.transform = toNewTransform;
                  }
                }
Developer-Mike commented 5 months ago

Added an option to rotate the arrows in version 3.0.0 (currently pre-release)