add text in new api

demos/bezier.js

@@ -19,11 +19,11 @@ var demo = g9({
 	t,
 
 }, {
-	point, line, height
+	text, point, line, height
 }) => {
 
 	var tlabel = 'tween='+t.toString().slice(0,4)
-	// text(tlabel, (t- .5)*300, height/2 - 30, {alignmentBaseline: "middle"})
+	text(tlabel, (t- .5)*300, height/2 - 30, {alignmentBaseline: "middle"})
 
 	var steps = 30
 	var smooth = []

src/shapes/index.js

@@ -6,6 +6,7 @@ import circle from './circle'
 import point from './point'
 import line from './line'
 import rect from './rect'
+import text from './text'
 
 var shapes = {}
 
@@ -18,6 +19,7 @@ addShape(point)
 addShape(circle)
 addShape(line)
 addShape(rect)
+addShape(text)
 
 
 // export function addShape({type, renderer, base, options, cost}){

src/shapes/text.js

@@ -1,48 +1,40 @@
-import {makeDraggable,setAttributes} from '../utils'
+import {addDragHandler, setAttributes} from '../utils'
 
-export const type = "text"
-export const base = {}
-export const options = ['text','x', 'y', 'affects']
-export function cost(renderable, x, y){
-    var dx = renderable.x - x
-    var dy = renderable.y - y
-    return dx*dx + dy*dy
-}
+export default class text {
+    static argNames = ['text', 'x', 'y', 'affects'];
 
-export class renderer {
+    constructor(container, minimize, get_args){
+        this.container = container
+        this.minimize = minimize
+        this.get_args = get_args
+    }
 
-    constructor(id, container, desire){
+    mount(){
         this.el = document.createElementNS("http://www.w3.org/2000/svg", "text")
-        container.appendChild(this.el)
+        this.container.appendChild(this.el)
 
-        makeDraggable(
-            this.el,
-            this.getPos.bind(this),
-            (x, y) => desire(id, x, y)
-        )
-    }
+        var dragstart = e => {
+            var {x, y} = this.get_args()
 
-    remove(){
-        this.el.parentNode.removeChild(this.el)
-        delete this.el
-    }
+            return (dx, dy) => {
+                this.minimize(this.get_args().affects, r => {
+                    var drx = r.x - (x + dx)
+                    var dry = r.y - (y + dy)
+                    return drx*drx + dry*dry
+                })
+            }
+        }
 
-    getPos(){
-        return [this.renderable.x, this.renderable.y]   
+        addDragHandler(this.el, dragstart)
     }
 
-    setOffset(topOffset, leftOffset){
-        this.topOffset = topOffset
-        this.leftOffset = leftOffset        
+    unmount() {
+        this.container.removeChild(this.el)
     }
 
-    render(renderable){
-        this.renderable = renderable
-        setAttributes(this.el, renderable.attributes)
-        setAttributes(this.el, {
-            x:renderable.x,
-            y:renderable.y
-        })
-        this.el.innerHTML = renderable.text
+    update() {
+        var args = this.get_args()
+        setAttributes(this.el, args)
+        this.el.innerHTML = args.text
     }
 }