feat(core): Added Point.addText and Point.addCircle

packages/core/src/point.mjs

@@ -23,6 +23,33 @@ export function Point(x, y) {
 //            PUBLIC METHODS                //
 //////////////////////////////////////////////
 
+/**
+ * A chainable way to add a circle at a Point
+ *
+ * @param {float} radius - The circle radius
+ * @param {string} className - The CSS classes to apply to the circle
+ * @return {Point} this - The Point instance
+ */
+Point.prototype.addCircle = function (radius = false, className = false) {
+  if (radius) this.attributes.add('data-circle', radius)
+  if (className) this.attributes.add('data-circle-class', className)
+
+  return this.__check()
+}
+
+/**
+ * A chainable way to add text to a Point
+ *
+ * @param {string} text - The text to add to the Point
+ * @param {string} className - The CSS classes to apply to the text
+ * @return {Point} this - The Point instance
+ */
+Point.prototype.addText = function (text = '', className = false) {
+  this.attributes.add('data-text', text)
+  if (className) this.attributes.add('data-text-class', className)
+
+  return this.__check()
+}
 /**
  * Returns the angle between this Point and that Point
  *

packages/core/tests/point.test.mjs

@@ -455,22 +455,59 @@ describe('Point', () => {
     expect(invalid).to.equal(true)
   })
 
+  it('Should add the data-text property in a chainable way', () => {
+    const p1 = new Point(10, 10).addText('hello').addText('world')
+    expect(p1.attributes.get('data-text')).to.equal('hello world')
+  })
+
   it('Should set the data-text property in a chainable way', () => {
     const p1 = new Point(10, 10).setText('hello')
     expect(p1.attributes.get('data-text')).to.equal('hello')
   })
 
+  it('Should set the data-text-class property in a chainable way', () => {
+    const p1 = new Point(10, 10).addText('hello', 'fabric').addText('world', 'lining')
+    expect(p1.attributes.get('data-text')).to.equal('hello world')
+    expect(p1.attributes.get('data-text-class')).to.equal('fabric lining')
+  })
+
   it('Should set the data-text-class property in a chainable way', () => {
     const p1 = new Point(10, 10).setText('hello', 'fabric')
     expect(p1.attributes.get('data-text')).to.equal('hello')
     expect(p1.attributes.get('data-text-class')).to.equal('fabric')
   })
 
+  it('Should add the data-circle property in a chainable way', () => {
+    const p1 = new Point(10, 10).addCircle('20').addCircle('30').addCircle('40')
+    const radius = p1.attributes.getAsArray('data-circle')
+    expect(radius.length).to.equal(3)
+    expect(radius[0]).to.equal('20')
+    expect(radius[1]).to.equal('30')
+    expect(radius[2]).to.equal('40')
+  })
+
   it('Should set the data-circle property in a chainable way', () => {
     const p1 = new Point(10, 10).setCircle('20')
     expect(p1.attributes.get('data-circle')).to.equal('20')
   })
 
+  it('Should add the data-circle-class property in a chainable way', () => {
+    const p1 = new Point(10, 10)
+      .addCircle('20', 'fabric')
+      .addCircle('30', 'lining')
+      .addCircle('40', 'interfacing')
+    const radius = p1.attributes.getAsArray('data-circle')
+    const classes = p1.attributes.getAsArray('data-circle-class')
+    expect(radius.length).to.equal(3)
+    expect(radius[0]).to.equal('20')
+    expect(radius[1]).to.equal('30')
+    expect(radius[2]).to.equal('40')
+    expect(classes.length).to.equal(3)
+    expect(classes[0]).to.equal('fabric')
+    expect(classes[1]).to.equal('lining')
+    expect(classes[2]).to.equal('interfacing')
+  })
+
   it('Should set the data-circle-class property in a chainable way', () => {
     const p1 = new Point(10, 10).setCircle('20', 'fabric')
     expect(p1.attributes.get('data-circle')).to.equal('20')