w8r
TypeScript Declaration File
Any chance you've ever made a TypeScript declaration file for this plugin? If so, it would be very useful to share.
@carpiediem can you help me with this?
declare module L {
export interface MatrixStatic {
new (a: number, b: number, c: number, d: number, e: number, f: number): Matrix;
}
export var Matrix: MatrixStatic;
export interface Matrix {
/**
* Apply matrix to the point
*/
transform (point: L.Point): Matrix;
/**
* Reverse transformation
*/
untransform (point: L.Point): Matrix;
/**
* Cloen the matrix
*/
clone (): Matrix;
/**
* Set matrix translation component
*/
translate (translate?: L.Point): Matrix;
/**
* Set matrix translation component
*/
translate (translate?: number): Matrix;
/**
* Set scaling component
*/
scale (ratio: number, origin?: L.Point): Matrix;
/**
* Set scaling component
*/
scale (ratio: L.Point, origin?: L.Point): Matrix;
/**
* Set rotation component
*/
rotate (angle: number, origin?: L.Point): Matrix;
}
/**
* Matrix factory
*/
export function matrix(a: number, b: number, c: number, d: number, e: number, f: number): Matrix;
module PathTransform {
export interface Handle extends L.CircleMarker {
CursorsByType: string[];
}
export interface RotateHandle extends Handle {
}
}
export interface PathTransormOptions {
/**
* Is rotation enabled
*/
rotation?: boolean,
/**
* Is scaling enabled
*/
scaling?: boolean,
/**
* Maximum zoom for reprojection
*/
maxZoom?: number,
/**
* Corner handler options
*/
handlerOptions?: L.CircleMarkerOptions,
/**
* Rotation handler options
*/
rotateHandleOptions?: L.CircleMarkerOptions,
/**
* Rotation handle length in pixels
*/
handleLength?: number,
/**
* Corner handle class - you can use your own extended marker
*/
handleClass?: Object,
/**
* Rotation handle class - you can use your own extended marker
*/
rotateHandleClass?: Object
}
namespace Handler {
export interface PathTransformStatic extends L.Handler {
new (path: L.Path): PathTransform;
}
export var PathTransform: PathTransformStatic;
export interface PathTransform {
/**
* Set options to the handler
*/
setOptions (options: PathTransormOptions): PathTransform;
/**
* Enables handler optionally with new settings
*/
enable (options?: PathTransormOptions):void;
/**
* Disables the handler
*/
disable (): void;
/**
* Rotate the attached path
*/
rotate (angle: number, origin?: L.Point): PathTransform;
/**
* Scale the attached path
*/
scale (scale: L.Point, origin: L.Point): PathTransform;
/**
* Scale the attached path
*/
scale (scale: number, origin: L.Point): PathTransform;
/**
* Apply transformation to the path
*/
transform (angle: number, scale: L.Point, rotationOrigin?: L.LatLng, scaleOrigin?: L.LatLng): PathTransform;
}
}
namespace LineUtil {
export function pointOnLine (start:L.Point, final:L.Point, distPx: number): L.Point;
}
namespace Util {
/**
* Deep merge objects
*/
export function merge (dest: any, ...sources: any[]): any;
}
}
The error that I've had from the start is this (I still can't seem to get past it):
Typescript Error Argument of type '{ weight: number; draggable: boolean; transform: boolean; }' is not assignable to parameter of type 'PolylineOptions'. Object literal may only specify known properties, and 'draggable' does not exist in type 'PolylineOptions'.
I created a new directory in PROJECT/node_modules/@types/leaflet-path-transform and added your code as a file named index.d.js. I also copied files named package.json and types-metadata.json from other type declarations, then modified them for this package. In my page controller, I added import 'leaflet-path-transform';. At this point the project built successfully, without any import errors (which was not the casewhen I tried to import without your code).
To address the non-assignable argument error (above), I added this code to index.d.js:
export interface PolylineOptions extends PathOptions {
smoothFactor?: number;
noClip?: boolean;
draggable? boolean;
transform?:boolean;
}
I had hoped that this would overwrite TypeScripts expectations of what L.polyline() is able to do, but the error still persists. I'm not sure what ought to be changed, but I'll keep reading up on declaration files to see if I stumble upon a solution.
By the way, I've reached for help on StackOverflow, but haven't gotten a response yet.
Yes, draggable is the option added by a different module of mine - Leaflet.Path.Drag. So that one would need it too
A step in the right direction: I was able to overwrite the existing leaflet type declaration and get the page to load. Ployline dragging works, but I can't resize or rotate yet, so I'm guessing that I'm loading your code incorrectly. I'll keep checking in my spare time.
In the page controller:
import 'leaflet';
import 'leaflet-path-transform';
declare var L: any;
Edit:
Never mind, I've got your code working. I had forgotten to add polyline.transform.enable();. I'll tweak the declaration file and attach it here when it's working.
I'm still having trouble with the typings (getting the same 'draggable' does not exist in type 'PolylineOptions' error. At this point, I'm looking through existing type declarations for other leaflet plugins to find one that also modifies the available options for a Path or Marker object. Since DefinatelyTyped doesn't have a easy to read list (too many subdirectories for GitHub to display), I've copied them here.
- leaflet-editable
- leaflet-imageoverlay-rotated
- leaflet-markercluster
- mapbox
- leaflet.fullscreen
- leaflet.awesome-markers
- leaflet-label
- leaflet-geocoder-mapzen
- leaflet-curve
- heatmap.js
- leaflet.pm
- leaflet-draw
Hey, I would like to try Leaflet.Path.Transform in my Angular project. How can I use this typescript declaration?
Edit: Nevermind, I just found this: https://github.com/Asymmetrik/ngx-leaflet-tutorial-plugins/tree/master/Leaflet.Path.Transform
