rewrite to handler.js format

components/sections/graduatedoffset/handler.js

@@ -0,0 +1,37 @@
+module.exports = {
+  statics: {
+    keyHandlingOptions: {
+      propName: "distance",
+      values: {
+        "38": 1,  // up arrow
+        "40": -1 // down arrow
+      }
+    }
+  },
+
+  setup: function(api, curve) {
+    api.setCurve(curve);
+    api.distance = 20;
+  },
+
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    this.setup(api, curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    this.setup(api, curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+
+    api.setColor("blue");
+    var outline = curve.outline(0,0,api.distance,api.distance);
+    outline.curves.forEach(c => api.drawCurve(c));
+  }
+};

components/sections/graduatedoffset/index.js

@@ -1,57 +1,4 @@
-var React = require("react");
-
-var Locale = require("../../../lib/locale");
-var locale = new Locale();
-var page = "graduatedoffset";
-
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
 var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
-
-var GraduatedOffsetting = React.createClass({
-  statics: {
-    keyHandlingOptions: {
-      propName: "distance",
-      values: {
-        "38": 1,  // up arrow
-        "40": -1 // down arrow
-      }
-    }
-  },
-
-  getDefaultProps: function() {
-    return {
-      title: locale.getTitle(page)
-    };
-  },
-
-  setup: function(api, curve) {
-    api.setCurve(curve);
-    api.distance = 20;
-  },
-
-  setupQuadratic: function(api) {
-    var curve = api.getDefaultQuadratic();
-    this.setup(api, curve);
-  },
-
-  setupCubic: function(api) {
-    var curve = api.getDefaultCubic();
-    this.setup(api, curve);
-  },
-
-  draw: function(api, curve) {
-    api.reset();
-    api.drawSkeleton(curve);
-    api.drawCurve(curve);
-
-
-    api.setColor("blue");
-    var outline = curve.outline(0,0,api.distance,api.distance);
-    outline.curves.forEach(c => api.drawCurve(c));
-  },
-
-  render: function() {
-    return locale.getContent(page, this);
-  }
-});
-
-module.exports = keyHandling(GraduatedOffsetting);
+module.exports = keyHandling(generateBase("graduatedoffset", handler));