https://github.com/bahrus/dom-arrow

dom-arrow is a web component wrapper around the leader-line npm package.
https://github.com/bahrus/dom-arrow

custom-element custom-elements euclid euclidean-geometry leader-line web-component web-components

Last synced: about 1 month ago
JSON representation

dom-arrow is a web component wrapper around the leader-line npm package.

• Host: GitHub
• URL: https://github.com/bahrus/dom-arrow
• Owner: bahrus
• License: mit
• Created: 2021-07-09T20:25:48.000Z (over 3 years ago)
• Default Branch: baseline
• Last Pushed: 2022-01-08T13:38:33.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T14:21:31.277Z (9 months ago)
• Topics: custom-element, custom-elements, euclid, euclidean-geometry, leader-line, web-component, web-components
• Language: JavaScript
• Homepage:
• Size: 651 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/dom-arrow)

# dom-arrow





dom-arrow is a web component wrapper around the [leader-line npm package](https://www.npmjs.com/package/leader-line).

The name / idea of this web component was inspired by [this library](https://www.cssscript.com/connect-elements-directional-arrow/) which helpfully [links](https://www.cssscript.com/draw-svg-paths-two-elements-leader-line/) to a [rather powerful library called leader-line](https://www.npmjs.com/package/leader-line).

## Sample syntax

```html

Hello



    Euclid [described](https://en.wikipedia.org/wiki/Line_(geometry)) a line as "breathless length" which "lies equally with respect to the points on itself"; 

    he introduced several postulates as basic unprovable properties from which he constructed all of geometry, 

    which is now called Euclidean geometry to avoid confusion with other geometries which 

    have been introduced since the end of the 19th century (such as non-Euclidean, projective and affine geometry).



Goodbye


```

## Demo

[Codepen demo](https://codepen.io/bahrus/pen/LYybPVP)

## Running locally

1.  Do a git clone or a git fork of repository https://github.com/bahrus/dom-arrow

2.  Install node.js

3.  Run "npm install" from location of folder created in step 1.

4.  Run npm run serve.  Open browser to http://localhost:3030/demo/dev.html