Fix #169. Add globeOffset prop.

README.md

@@ -113,6 +113,7 @@ new Globe(<domElement>, { configOptions })
 | --- | --- | :--: |
 | <b>width</b>([<i>px</i>]) | Getter/setter for the canvas width. | *&lt;window width&gt;* |
 | <b>height</b>([<i>px</i>]) | Getter/setter for the canvas height. | *&lt;window height&gt;* |
+| <b>globeOffset</b>([<i>[px, px]</i>]) | Getter/setter for the position offset of the globe relative to the canvas center. | `[0, 0]` |
 | <b>backgroundColor</b>([<i>str</i>]) | Getter/setter for the background color. | `#000011` |
 | <b>backgroundImageUrl</b>([<i>url</i>]) | Getter/setter for the URL of the equirectangular projection image to be used as background to the globe. If no image is provided, the background color is shown instead. | `null` |
 

package.json

@@ -53,18 +53,18 @@
     "kapsule": "^1.16",
     "three": ">=0.154 <1",
     "three-globe": "^2.41",
-    "three-render-objects": "^1.38"
+    "three-render-objects": "^1.39"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/preset-env": "^7.26.7",
+    "@babel/core": "^7.26.9",
+    "@babel/preset-env": "^7.26.9",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.34.1",
+    "rollup": "^4.34.8",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.7.3"

src/globe.js

@@ -261,6 +261,11 @@ export default Kapsule({
         state.renderObjs.pointsHoverPrecision(val);
       }
     },
+    globeOffset: {
+      default: [0, 0],
+      triggerUpdate: false,
+      onChange: (o, state) => Array.isArray(o) && (o.length === 2) && state.renderObjs.viewOffset(o.map(v => -v))
+    },
     ...linkedGlobeProps,
     ...linkedRenderObjsProps
   },

src/index.d.ts

@@ -40,6 +40,8 @@ interface GlobeGenericInstance<ChainableInstance>
   width(width: number): ChainableInstance;
   height(): number;
   height(height: number): ChainableInstance;
+  globeOffset(): [number, number];
+  globeOffset(offset: [number, number]): ChainableInstance;
   backgroundColor(): string;
   backgroundColor(color: string): ChainableInstance;
   backgroundImageUrl(): string | null;