celestial-chart 0.8.0

package/celestial.css

@@ -0,0 +1,111 @@
+/* Copyright 2015-16 Olaf Frohn https://github.com/ofrohn, see LICENSE */
+
+#celestial-map { width: 100%; height: auto; margin: 0; padding: 0; display: inline-block; position: relative; min-width:720px; overflow: visible; }
+#celestial-map canvas { display: inline-block; position:relative; z-index:0; cursor:hand; cursor:grab; cursor:-moz-grab; cursor:-webkit-grab; }
+#celestial-map canvas:active { cursor:move; cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; }
+#d3-celestial-footer { text-align:center; color:#666; font:10pt/1 'Arial Unicode MS', Arial, Helvetica, sans-serif; }
+#d3-celestial-footer a { text-decoration:none; color:#99f; }
+
+/* Form */
+#celestial-form { font:12pt/1 'Arial Unicode MS', Arial, Helvetica, sans-serif;  display: inline-block; position: relative; }
+#error { position:absolute; min-width:100px; height:auto; padding: 2px 4px; color:#f00; background:#fff; border:2px solid #f00; border-radius:3px; font-weight:normal; display:block; top:-9999px; left:-9999px; opacity:0; transition:opacity 1s linear; }
+#celestial-form .col { border-top: 1px dotted #000; padding: 4px 6px; margin:0 0 4px; clear:both; white-space: nowrap; }
+/* What parts to show */
+#celestial-form #general,
+#celestial-form #location,
+#celestial-form #stars,
+#celestial-form #dsos,
+#celestial-form #constellations,
+#celestial-form #lines,
+#celestial-form #other,
+#celestial-form #download { display: block }
+
+#celestial-form input { vertical-align: 0px; }
+#celestial-form input[type='number'] { width:48px; height:18px; text-align:right; padding:0; }
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button { height: auto; }
+#celestial-form #centerx, #celestial-form #centery, #celestial-form #centerz,
+#celestial-form #lat, #celestial-form #lon { width:64px; margin-top:4px; }
+#celestial-form input[type='text'] { width:194px; height:18px; text-align:left; padding-left:2px; }
+#celestial-form input[type='checkbox'] { vertical-align: -2px; }
+#celestial-form input[type='color'] { width:48px; vertical-align: -3px; height:22px;  background:#fff; }
+#celestial-form #datepick { position:relative; display:inline-block; _vertical-align:-8px; top:7px; left:-31px; width:28px; height:24px; border:0px none; border-left:1px solid #ccc; background-color: #f7f7f7; background-image: url('images/dtpick.png'); background-position: -45px 1px; cursor:default; }
+#celestial-form #datepick.active { background-position: -69px 1px; }
+#celestial-form #datetime { cursor:default; } 
+#celestial-form input#now { position:relative; left:-24px; }
+#celestial-form #constellation { } 
+#celestial-form select option { color:#000; } 
+#celestial-form select option[value='---'] { color:#ccc; } 
+
+#celestial-form input[type='button'] { width:64px; padding-bottom:1px; margin-top:4px; background: #f7f7f7; }
+#celestial-form input#download-png,
+#celestial-form input#download-svg { display: inline-block; text-align: center; margin-left:4px; width:108px; height:24px; font: inherit; line-height:20px; text-decoration: none; color: #000; background: #f7f7f7;  }
+#celestial-form input#width { margin-left:2px; }
+#celestial-form input#now, 
+#celestial-form input#here  { width:48px; margin-left:2px; float:none; }
+#celestial-form input[type='button']:hover,
+#celestial-form #datepick:hover,
+#celestial-form input#download-png:hover,
+#celestial-form input#download-svg:hover { background-color:#eee; cursor:pointer; }
+
+#celestial-form input[type='text']:disabled, 
+#celestial-form input[type='number']:disabled, 
+#celestial-form input[type='color']:disabled { border: 1px solid #ccc; background:#eee }
+
+#celestial-form input[type='text'], 
+#celestial-form input[type='number'], 
+#celestial-form input[type='color'], 
+#celestial-form select, 
+#celestial-form input#now, 
+#celestial-form input#here, 
+#celestial-form input#show, 
+#celestial-form input#download-png,
+#celestial-form input#download-svg  { border: 1px solid #000; border-radius:3px; height:24px; }
+
+#celestial-form label { margin:0 2px 0 8px; }
+#celestial-form label.header { font-weight:bold; }
+#celestial-form input + span { margin:0 4px 0 2px; }
+#celestial-form label:first-child, 
+#celestial-form br + label { margin-left:0; }
+
+/* Zoom controls */
+#celestial-zoomin, 
+#celestial-zoomout { width:32px; height:32px; left:8px; top:12px; background: rgba(255,255,255,0.5); border:1px solid #000; border-radius:3px; position:absolute; font: normal bold 24px/1 Consolas, Courier, 'Courier New', monospace; cursor:pointer; }
+#celestial-zoomout { top: 48px; }
+#celestial-zoomin:hover, 
+#celestial-zoomout:hover { background: rgba(255,255,255,0.7); }
+#celestial-zoomin:disabled, 
+#celestial-zoomout:disabled { background: rgba(255,255,255,0.0); border:1px solid rgba(153,153,153,0.7); color:rgba(153,153,153,0.7); cursor:default; }
+
+#celestial-date { position:absolute; top:-9999px; width:193px; text-align:center; border:1px solid #000; background:#fff; opacity:0; transition:.6s ease-in opacity; font: 13px/1 sans-serif; }
+#celestial-date input, #celestial-date select { font:inherit; }
+#celestial-date #yr, #celestial-date #mon { margin: 2px 3px; vertical-align:middle; }
+#celestial-date #left, #celestial-date #right { display:inline-block; width:12px; height:24px; margin:0; vertical-align:-8px; cursor:pointer;  background-image: url('images/dtpick.png'); }
+#celestial-form #day-left, #celestial-form #day-right { display:inline-block; float:none; width:12px; height:24px; margin:0; padding:0; vertical-align:middle; cursor:pointer; border: 0 none; background-color:transparent; background-image: url('images/dtpick.png'); }
+#celestial-form #day-right { position:relative; left:-30px; }
+#celestial-date #left, #celestial-form #day-left { background-position: -8px 0px; }
+#celestial-date #right, #celestial-form #day-right { background-position: -30px 0px; }
+#celestial-date #hr, #celestial-date #min, #celestial-date #sec { margin: 0 0 2px 0; width:34px; }
+#celestial-date #hr { border-right: 0px none; border-radius: 3px 0 0 3px;  }
+#celestial-date #min { border-right: 0px none; border-left: 0px none;  border-radius: 0; }
+#celestial-date #sec { border-left: 0px none;  border-radius: 0 3px 3px 0; }
+#celestial-date #tz { margin: 0 0 2px 4px; }
+#celestial-date #cal { display:inline-block; width:182px; margin:0 4px;  }
+#celestial-date .date { display:inline-block; width:19px; height:14px; border:1px solid #fff; color:#000; font-weight: bold; text-align:right; vertical-align:middle; padding:2px 4px 2px 0; cursor:pointer; }
+#celestial-date .grey { color:#ccc; }
+#celestial-date .weekday { color:#666; font-sixe:11px; background:#eee; border:1px solid #eee; }
+#celestial-date .weekend { color:#f00; }
+#celestial-date .selected { border:1px solid #000; border-radius:3px; }
+#celestial-date .today { background:#ff0; }
+
+
+@media print {
+  #celestial-zoomin, #celestial-zoomout, #celestial-form { display: none; }
+}
+
+/* SVG styles
+
+svg .constname {
+  fill: "#ffff99";  fill-opacity:0.7; font: bold 14px 'Lucida Sans Unicode', Trebuchet, Helvetica, Arial, sans-serif; text-anchor: middle
+}
+ */

package/lib/geo-zoom.js

@@ -0,0 +1,116 @@
+import * as d3 from "../src/d3.js";
+import versor from "versor";
+
+// Spherical zoom and rotation: dragging turns the globe, the wheel zooms.
+//
+// The algorithm comes from Jason Davies' `d3.geo.zoom` plugin (2014,
+// http://www.jasondavies.com/maps/rotate/). The quaternion mathematics is not
+// copied from it: we use the `versor` package, which provides the same
+// computation from Mike Bostock under the ISC licence — so distributing this
+// fork is licence-clean. The D3 glue (v7 d3.zoom, d3.pointer) is ours.
+//
+// The outward interface deliberately stays that of the v3 `d3.geo.zoom`
+// (projection, center, scaleExtent, scale, on), so that celestial.js's call
+// sites did not have to change.
+export function geoZoom() {
+  var projection,
+      selection_ = null,             // what it was called on: the transform goes here
+      events = d3.dispatch("zoomstart", "zoom", "zoomend"),
+      view = { r: [0, 0, 0], k: 1 },
+      // Here d3.zoom's k is the projection scale itself (in pixels), not a
+      // factor around 1 — so scaleExtent receives the same numbers as in v3.
+      behavior = d3.zoom().on("start", onStart).on("zoom", onZoom).on("end", onEnd),
+      mouse0, rotate0, zoomPoint;
+
+  function zoom(selection) {
+    selection_ = selection;
+    selection.call(behavior);
+    behavior.transform(selection, d3.zoomIdentity.scale(view.k));
+  }
+
+  // d3.pointer returns [NaN, NaN] when the event carries no pointer position —
+  // for instance on a programmatic zoom.transform() call. v3's d3.mouse never
+  // saw such a case, because there the zoom always started from a real UI event.
+  // Left unhandled, the NaN travels through the quaternions and the projection's
+  // rotation becomes NaN.
+  function pointerOf(event_, el) {
+    var p = d3.pointer(event_, el);
+    return (isFinite(p[0]) && isFinite(p[1])) ? p : null;
+  }
+
+  // Use the projection's inverse to find which point of the sky is under the cursor.
+  function spherePoint(point_) {
+    var coord = projection.invert(point_);
+    return coord && isFinite(coord[0]) && isFinite(coord[1]) ? versor.cartesian(coord) : null;
+  }
+
+  // The angle subtended by the two pointer positions at the projection centre.
+  // This gives the "bank" component when the pointer slides off the globe.
+  function bank(p0, p1) {
+    var t = projection.translate(),
+        angle_ = Math.atan2(p0[1] - t[1], p0[0] - t[0]) - Math.atan2(p1[1] - t[1], p1[0] - t[0]);
+    return [Math.cos(angle_ / 2), 0, 0, Math.sin(angle_ / 2)];
+  }
+
+  function onStart(event_) {
+    mouse0 = pointerOf(event_, this);
+    rotate0 = versor(projection.rotate());
+    var point_ = mouse0 && spherePoint(mouse0);
+    if (point_) zoomPoint = point_;
+    events.call("zoomstart", zoom);
+  }
+
+  function onZoom(event_) {
+    projection.scale(view.k = event_.transform.k);
+    var mouse1 = pointerOf(event_, this);
+    // Without a pointer position only the scale changes; rotation is undefined.
+    if (mouse1 && mouse0) {
+      var point1 = spherePoint(mouse1),
+          between = zoomPoint && point1 ? versor.delta(zoomPoint, point1) : null;
+      rotate0 = between ? versor.multiply(rotate0, between)
+                       : versor.multiply(bank(mouse0, mouse1), rotate0);
+      projection.rotate(view.r = versor.rotation(rotate0));
+    }
+    if (mouse1) mouse0 = mouse1;
+    events.call("zoom", zoom);
+  }
+
+  function onEnd() {
+    events.call("zoomend", zoom);
+  }
+
+  zoom.projection = function(_) {
+    if (!arguments.length) return projection;
+    projection = _;
+    view = { r: projection.rotate(), k: projection.scale() };
+    return zoom;
+  };
+
+  // The focal point of v3's behavior.zoom. v7's d3.zoom zooms around the
+  // cursor and that cannot be pinned to a fixed point; the method is kept only
+  // because the call site expects it.
+  zoom.center = function(_) {
+    return arguments.length ? zoom : null;
+  };
+
+  zoom.scaleExtent = function(_) {
+    if (!arguments.length) return behavior.scaleExtent();
+    behavior.scaleExtent(_);
+    return zoom;
+  };
+
+  zoom.scale = function(_) {
+    if (!arguments.length) return view.k;
+    view.k = _;
+    if (selection_) behavior.transform(selection_, d3.zoomIdentity.scale(_));
+    return zoom;
+  };
+
+  zoom.on = function(type_, fn) {
+    if (arguments.length < 2) return events.on(type_);
+    events.on(type_, fn);
+    return zoom;
+  };
+
+  return zoom;
+}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "celestial-chart",
+  "version": "0.8.0",
+  "description": "Interactive celestial map for the browser — a modernised fork of d3-celestial (D3 v7, ES modules, TypeScript types, multiple maps per page)",
+  "keywords": [
+    "astronomy",
+    "star chart",
+    "sky map",
+    "celestial",
+    "constellations",
+    "planetarium",
+    "cartography",
+    "projection",
+    "d3",
+    "canvas",
+    "svg",
+    "visualization"
+  ],
+  "type": "module",
+  "license": "BSD-3-Clause",
+  "author": "Fekete László",
+  "homepage": "https://celestial.blackit.hu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Fekete85/celestial-chart.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Fekete85/celestial-chart/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "main": "build/celestial.cjs",
+  "module": "build/celestial.mjs",
+  "types": "types/celestial.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/celestial.d.ts",
+      "import": "./build/celestial.mjs",
+      "require": "./build/celestial.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "NOTICE.md",
+    "README.md",
+    "build",
+    "celestial.css",
+    "images",
+    "lib",
+    "src",
+    "types/celestial.d.ts"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "prepare": "node build.mjs",
+    "test": "node --test test/*.test.mjs",
+    "types": "tsc -p types/check/tsconfig.json",
+    "selftest": "node harness/compare.mjs --selftest harness/reference-d3v3.json",
+    "check": "node harness/verify.mjs",
+    "check:all": "node harness/verify.mjs --all",
+    "verify": "npm run build && npm run test && npm run types && npm run selftest && npm run check:all",
+    "serve": "node harness/server.mjs"
+  },
+  "dependencies": {
+    "d3-dispatch": "^3.0.1",
+    "d3-fetch": "^3.0.1",
+    "d3-geo": "^3.1.1",
+    "d3-geo-projection": "^4.0.0",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-time-format": "^4.1.0",
+    "d3-transition": "^3.0.1",
+    "d3-zoom": "^3.0.0",
+    "versor": "^0.2.0"
+  },
+  "devDependencies": {
+    "acorn": "^8.18.0",
+    "acorn-walk": "^8.3.5",
+    "esbuild": "^0.25.0",
+    "playwright": "^1.62.1",
+    "typescript": "^7.0.2"
+  }
+}

package/src/add.js

@@ -0,0 +1,46 @@
+import { Celestial } from "./core.js";
+import { has } from "./util.js";
+
+//Add more JSON data to the map
+var hasCallback = false;
+
+Celestial.add = function(dat) {
+  var res = {};
+  //dat: {file: path, type:'json|raw', callback: func(), redraw: func()} 
+  //or {file:file, size:null, shape:null, color:null}  TBI
+  //  with size,shape,color: "prop=val:result;.." || function(prop) { .. return res; } 
+  if (!has(dat, "type")) return console.log("Missing type");
+  
+  if ((dat.type === "dso" || dat.type === "json") && (!has(dat, "file") || !has(dat, "callback"))) return console.log("Can't add data file");
+  if ((dat.type === "line" || dat.type === "raw") && !has(dat, "callback")) return console.log("Can't add data");
+  
+  if (has(dat, "file")) res.file = dat.file;
+  res.type = dat.type;
+  if (has(dat, "callback")) res.callback = dat.callback;
+  if (has(dat, "redraw")) res.redraw = dat.redraw;
+  if (has(dat, "save")) res.save = dat.save;
+  Celestial.data.push(res);
+};
+
+Celestial.remove = function(i) {
+  if (i !== null && i < Celestial.data.length) {
+    return Celestial.data.splice(i,1);
+  }
+};
+
+Celestial.clear = function() {
+  Celestial.data = [];
+};
+
+Celestial.addCallback = function(dat) {
+  Celestial.callback = dat;
+  hasCallback = (dat !== null);
+};
+
+Celestial.runCallback = function(dat) {
+  hasCallback = false; // avoid recursion
+  Celestial.callback();
+  hasCallback = true;
+};
+
+export { hasCallback };

package/src/canvas.js

@@ -0,0 +1,269 @@
+import { Celestial } from "./core.js";
+import { functor } from "./util.js";
+
+var Canvas = {}; 
+
+Canvas.symbol = function () {
+  // parameters and default values
+  var type = functor("circle"), 
+      size = functor(64), 
+      age = functor(Math.PI), //crescent shape 0..2Pi
+      color = functor("#fff"),  
+      text = functor(""),  
+      padding = functor([2,2]),  
+      pos;
+  
+  function canvas_symbol(context) {
+    draw_symbol[type()](context);
+  }
+  
+  var draw_symbol = {
+    "circle": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2;
+      ctx.arc(pos[0], pos[1], r, 0, 2 * Math.PI);
+      ctx.closePath();
+      return r;
+    },
+    "square": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/1.7;
+      ctx.moveTo(pos[0]-r, pos[1]-r);
+      ctx.lineTo(pos[0]+r, pos[1]-r);
+      ctx.lineTo(pos[0]+r, pos[1]+r);
+      ctx.lineTo(pos[0]-r, pos[1]+r);
+      ctx.closePath();
+      return r;
+    },
+    "diamond": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/1.5;
+      ctx.moveTo(pos[0], pos[1]-r);
+      ctx.lineTo(pos[0]+r, pos[1]);
+      ctx.lineTo(pos[0], pos[1]+r);
+      ctx.lineTo(pos[0]-r, pos[1]);
+      ctx.closePath();
+      return r;
+    },
+    "triangle": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/Math.sqrt(3);
+      ctx.moveTo(pos[0], pos[1]-r);
+      ctx.lineTo(pos[0]+r, pos[1]+r);
+      ctx.lineTo(pos[0]-r, pos[1]+r);
+      ctx.closePath();
+      return r;
+    },
+    "ellipse": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2;
+      ctx.save();
+      ctx.translate(pos[0], pos[1]);
+      ctx.scale(1.6, 0.8); 
+      ctx.beginPath();
+      ctx.arc(0, 0, r, 0, 2 * Math.PI); 
+      ctx.closePath();
+      ctx.restore();      
+      return r;
+    },
+    "marker": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2;
+      ctx.moveTo(pos[0], pos[1]-r);
+      ctx.lineTo(pos[0], pos[1]+r);
+      ctx.moveTo(pos[0]-r, pos[1]);
+      ctx.lineTo(pos[0]+r, pos[1]);
+      ctx.closePath();
+      return r;
+    },
+    "cross-circle": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2;
+      ctx.moveTo(pos[0], pos[1]-s);
+      ctx.lineTo(pos[0], pos[1]+s);
+      ctx.moveTo(pos[0]-s, pos[1]);
+      ctx.lineTo(pos[0]+s, pos[1]);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(pos[0], pos[1]);
+      ctx.arc(pos[0], pos[1], r, 0, 2 * Math.PI);    
+      ctx.closePath();
+      return r;
+    },
+    "stroke-circle": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2;
+      ctx.moveTo(pos[0], pos[1]-s);
+      ctx.lineTo(pos[0], pos[1]+s);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(pos[0], pos[1]);
+      ctx.arc(pos[0], pos[1], r, 0, 2 * Math.PI);    
+      ctx.closePath();
+      return r;
+    }, 
+    "crescent": function(ctx) {
+      var s = Math.sqrt(size()), 
+          r = s/2,
+          ag = age(),
+          ph = 0.5 * (1 - Math.cos(ag)),
+          // The terminator's semi-minor axis is |cos(phase angle)| times the disc
+          // radius, which in terms of the illuminated fraction is
+          // |2*ph - 1| = 2*|ph - 0.5|. The factor of 1.6 drew a full moon 19% too
+          // narrow — as a gibbous disc (#130). 1.98 + 0.01 gives exactly 1 at full
+          // and new moon while keeping the guard against a degenerate ellipse at
+          // the quarters.
+          e = 1.98 * Math.abs(ph - 0.5) + 0.01,
+          dir = ag > Math.PI,
+          termdir = Math.abs(ph) > 0.5 ? dir : !dir,
+          moonFill = ctx.fillStyle,
+          darkFill = ph < 0.157 ? "#669" : "#557";
+      ctx.save();
+      ctx.fillStyle = darkFill;
+      ctx.beginPath();
+      ctx.moveTo(pos[0], pos[1]);
+      ctx.arc(pos[0], pos[1], r, 0, 2 * Math.PI);    
+      ctx.closePath();
+      ctx.fill();
+      ctx.fillStyle = moonFill;
+      ctx.beginPath();
+      ctx.moveTo(pos[0], pos[1]);
+      ctx.arc(pos[0], pos[1], r, -Math.PI/2, Math.PI/2, dir); 
+      ctx.scale(e, 1);
+      ctx.arc(pos[0]/e, pos[1], r, Math.PI/2, -Math.PI/2, termdir); 
+      ctx.closePath();
+      ctx.fill();
+      ctx.restore();
+      
+      return r;
+    } 
+  };
+
+  
+  canvas_symbol.type = function(_) {
+    if (!arguments.length) return type; 
+    type = functor(_);
+    return canvas_symbol;
+  };
+  canvas_symbol.size = function(_) {
+    if (!arguments.length) return size; 
+    size = functor(_);
+    return canvas_symbol;
+  };
+  canvas_symbol.age = function(_) {
+    if (!arguments.length) return age; 
+    age = functor(_);
+    return canvas_symbol;
+  };
+  canvas_symbol.text = function(_) {
+    if (!arguments.length) return text; 
+    text = functor(_);
+    return canvas_symbol;
+  };
+  canvas_symbol.position = function(_) {
+    if (!arguments.length) return; 
+    pos = _;
+    return canvas_symbol;
+  };
+
+  return canvas_symbol;
+};
+
+Celestial.Canvas = Canvas;
+
+
+/*var color = "#fff", angle = 0, align = "center", baseline = "middle", font = "10px sans-serif", padding = [0,0], aPos, sText;
+
+canvas.text = function () {
+
+  function txt(ctx){
+    ctx.fillStyle = color;
+    ctx.textAlign = align;
+    ctx.textBaseline = baseline;
+    
+    //var pt = projection(d.geometry.coordinates);
+    if (angle) {
+      canvas.save();     
+      canvas.translate(aPos[0], aPos[1]);
+      canvas.rotate(angle); 
+      canvas.fillText(sText, 0, 0);
+      canvas.restore();     
+    } else
+      canvas.fillText(sText, aPos[0], aPos[1]);
+  }
+  
+  txt.angle = function(x) {
+    if (!arguments.length) return angle * 180 / Math.PI;
+    color = x  * Math.PI / 180;
+    return txt;
+  };  
+  txt.color = function(s) {
+    if (!arguments.length) return color;
+    color = s;
+    return txt;
+  };  
+  txt.align = function(s) {
+    if (!arguments.length) return align;
+    align = s;
+    return txt;
+  };
+  txt.baseline = function(s) {
+    if (!arguments.length) return baseline;
+    baseline = s;
+    return txt;
+  };
+  txt.padding = function(a) {
+    if (!arguments.length) return padding;
+    padding = a;
+    return txt;
+  };
+  txt.text = function(s) {
+    if (!arguments.length) return sText;
+    sText = s;
+    return txt;
+  };
+  txt.font = function(s) {
+    if (!arguments.length) return font;
+    font = s;
+    return txt;
+  };
+  txt.style = function(o) {
+    if (!arguments.length) return;
+    if (o.fill) color = o.fill;
+    if (o.font) font = o.font;
+    return txt;
+  }; 
+  
+}
+
+  function ctxPath(d) {
+    var pt;
+    //d.map( function(axe, i) {
+    context.beginPath();
+    for (var i = 0; i < d.length; i++) {
+      pt = projection(d[i]);
+      if (i === 0)
+        context.moveTo(pt[0], pt[1]);
+      else
+        context.lineTo(pt[0], pt[1]);
+    }
+    context.fill();
+  }
+  
+
+  function ctxText(d, ang) {
+    var pt = projection(d.geometry.coordinates);
+    if (ang) {
+      canvas.save();     
+      canvas.translate(pt[0], pt[1]);
+      canvas.rotate(Math.PI/2); 
+      canvas.fillText(txt, 0, 0);
+      canvas.restore();     
+    } else
+      canvas.fillText(d.properties.txt, pt[0], pt[1]);
+  }
+  
+
+*/
+
+export { Canvas };