Fix fabric.js definition and tests

This commit is contained in:
Neil Stalker
2013-06-24 21:53:20 +01:00
parent 4e89cd045d
commit 557b38099e
9 changed files with 60 additions and 51 deletions
+31 -22
View File
@@ -149,6 +149,7 @@ declare module fabric {
ry: number;
complexity(): number;
initialize(options: any);
initialize(points: number[], options: any): IRect;
toObject(propertiesToInclude: any[]): any;
toSVG(): string;
@@ -172,6 +173,7 @@ declare module fabric {
type: string;
useNative: Boolean;
initialize(options: any);
initialize(text: string, options: any): IText;
toString(): string;
render(ctx: CanvasRenderingContext2D, noTransform: bool);
@@ -387,15 +389,16 @@ declare module fabric {
destroy(): IGroup;
getObjects(): IObject[];
hasMoved(): bool;
initialize(options: any);
initialize(objects, options): any;
item(index): IObject;
remove(object): IGroup;
remove(object?): IGroup;
removeWithUpdate(object): IGroup;
render(ctx, noTransform): void;
saveCoords(): IGroup;
setObjectsCoords(): IGroup;
size(): number;
toGrayscale(): void;
toGrayscale(): IGroup;
toObject(propertiesToInclude: any[]): any;
tostring(): string;
toSVG(): string;
@@ -409,6 +412,7 @@ declare module fabric {
y2: number;
complexity(): number;
initialize(options: any);
initialize(points: number[], options: any): ILine;
toObject(propertiesToInclude: any[]): any;
toSVG(): string;
@@ -424,11 +428,13 @@ declare module fabric {
filters: any;
applyFilters(callback);
clone(callback?, propertiesToInclude?): IObject;
clone(propertiesToInclude, callback);
complexity(): number;
getElement(): HTMLImageElement;
getOriginalSize(): { width: number; height: number; };
getSrc(): string;
initialize(options: any);
initialize(element: string, options: any);
initialize(element: HTMLImageElement, options: any);
render(ctx: CanvasRenderingContext2D, noTransform: bool);
@@ -453,6 +459,7 @@ declare module fabric {
export interface IPath extends IObject {
complexity(): number;
initialize(options: any);
initialize(path, options);
render(ctx: CanvasRenderingContext2D, noTransform: bool);
toDatalessObject(propertiesToInclude): any;
@@ -463,6 +470,7 @@ declare module fabric {
export interface IPolygon extends IObject {
complexity(): number;
initialize(options: any);
initialize(points, options);
toObject(propertiesToInclude): any;
toSVG(): string;
@@ -470,6 +478,7 @@ declare module fabric {
export interface IPolyline extends IObject {
complexity(): number;
initialize(options: any);
initialize(points, options);
toObject(propertiesToInclude): any;
toSVG(): string;
@@ -477,11 +486,12 @@ declare module fabric {
export interface IPathGroup extends IObject {
complexity(): number;
initialize(options: any);
initialize(paths, options);
isSameColor(): bool;
render(ctx: CanvasRenderingContext2D);
toDatalessObject(propertiesToInclude): any;
toGrayscale();
toGrayscale(): IPathGroup;
toObject(propertiesToInclude): any;
tostring(): string;
toSVG(): string;
@@ -660,18 +670,18 @@ declare module fabric {
export interface ITriangleOptions extends IObjectOptions {
}
declare var Rect: {
var Rect: {
fromElement(element: SVGElement, options: IRectOptions): IRect;
fromObject(object): IRect;
new (options?: IRectOptions): IRect;
prototype: any;
}
declare var Triangle: {
var Triangle: {
new (options?: ITriangleOptions): ITriangle;
}
declare var Canvas: {
var Canvas: {
new (element: HTMLCanvasElement, options?: ICanvasOptions): ICanvas;
new (element: string, options?: ICanvasOptions): ICanvas;
@@ -680,7 +690,7 @@ declare module fabric {
prototype: any;
}
declare var StaticCanvas: {
var StaticCanvas: {
new (element: HTMLCanvasElement, options?: ICanvasOptions): ICanvas;
new (element: string, options?: ICanvasOptions): ICanvas;
@@ -689,7 +699,7 @@ declare module fabric {
prototype: any;
}
declare var Circle: {
var Circle: {
ATTRIBUTE_NAMES: string[];
fromElement(element: SVGElement, options: ICircleOptions): ICircle;
fromObject(object): ICircle;
@@ -697,11 +707,11 @@ declare module fabric {
prototype: any;
}
declare var Group: {
var Group: {
new (items?: any[], options?: IObjectOptions): IGroup;
}
declare var Line: {
var Line: {
ATTRIBUTE_NAMES: string[];
fromElement(element: SVGElement, options): ILine;
fromObject(object): ILine;
@@ -709,53 +719,53 @@ declare module fabric {
new (points: number[], objObjects?: IObjectOptions): ILine;
}
declare var Intersection: {
var Intersection: {
intersectLineLine(a1, a2, b1, b2);
intersectLinePolygon(a1, a2, points);
intersectPolygonPolygon(points1, points2);
intersectPolygonRectangle(points, r1, r2);
}
declare var Path: {
var Path: {
fromElement(element: SVGElement, options): IPath;
fromObject(object): IPath;
new (): IPath;
}
declare var PathGroup: {
var PathGroup: {
fromObject(object): IPathGroup;
new (): IPathGroup;
prototype: any;
}
declare var Point: {
var Point: {
new (x, y): IPoint;
prototype: any;
}
declare var Object: {
var Object: {
prototype: any;
}
declare var Polygon: {
var Polygon: {
fromObject(object): IPolygon;
fromElement(element: SVGElement, options): IPolygon;
new (): IPolygon;
prototype: any;
}
declare var Polyline: {
var Polyline: {
fromObject(object): IPolyline;
fromElement(element: SVGElement, options): IPolyline;
new (): IPolyline;
prototype: any;
}
declare var Text: {
var Text: {
new (text: string, options?: ITextOptions): IText;
}
declare var Image: {
var Image: {
fromURL(url: string): IImage;
fromURL(url: string, callback: (image: IImage) => any): IImage;
fromURL(url: string, callback: (image: IImage) => any, objObjects: IObjectOptions): IImage;
@@ -809,7 +819,7 @@ declare module fabric {
}
declare var util: {
var util: {
addClass(element: HTMLElement, className: string);
addListener(element, eventName: string, handler);
animate(options: {
@@ -846,5 +856,4 @@ declare module fabric {
toFixed(number, fractionDigits);
wrapElement(element: HTMLElement, wrapper, attributes);
}
};
}
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
var canvas = new fabric.Canvas('c', {
hoverCursor: 'pointer',
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
var dot, i,
t1, t2,
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
var $ = function(id){return document.getElementById(id)};
@@ -28,7 +28,7 @@ canvas.on({
for (var i = 0; i < filters.length; i++) {
var checkBox = <HTMLInputElement>$(filters[i]);
var image = <fabric.Image>canvas.getActiveObject();
var image = <fabric.IImage>canvas.getActiveObject();
checkBox.checked = !!image.filters[i];
}
},
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
var canvas = new fabric.Canvas('c');
var $ = function (id) { return document.getElementById(id); };
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
module fabric {
export interface CircleWithLineInfos extends ICircle {
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
var canvas = new fabric.Canvas('c');
fabric.loadSVGFromURL('../assets/135.svg', function (objects) {
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
module fabric {
export interface ImageWithInfo extends IImage {
@@ -1,4 +1,4 @@
///<reference path="..\fabricjs.d.ts" />
///<reference path="fabricjs.d.ts" />
module fabric {
export interface ImageWithInfo extends IImage {
@@ -41,7 +41,7 @@ function updateComplexity() {
}, 100);
}
document.getElementById('commands').onclick = function (ev) {
document.getElementById('commands').onclick = function (ev: any) {
var ev: any = ev || window.event;
if (ev.preventDefault) {
@@ -450,8 +450,8 @@ if (supportsColorpicker()) {
}, 100);
if (document.location.search.indexOf('guidelines') > -1) {
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
//initCenteringGuidelines(canvas);
//initAligningGuidelines(canvas);
}
gradientifyBtn.onclick = function() {
@@ -475,7 +475,7 @@ if (supportsColorpicker()) {
var activeObject = canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
this.value = (<fabric.Text>activeObject).text;
this.value = (<fabric.IText>activeObject).text;
}
};
textEl.onkeyup = function(e) {
@@ -485,7 +485,7 @@ if (supportsColorpicker()) {
canvas.discardActiveObject();
}
else {
(<fabric.Text>activeObject).text = this.value;
(<fabric.IText>activeObject).text = this.value;
}
canvas.renderAll();
}
@@ -497,7 +497,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdUnderlineBtn);
cmdUnderlineBtn.disabled = true;
cmdUnderlineBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
this.className = activeObject.textDecoration ? 'selected' : '';
@@ -511,7 +511,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdLinethroughBtn);
cmdLinethroughBtn.disabled = true;
cmdLinethroughBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
this.className = activeObject.textDecoration ? 'selected' : '';
@@ -525,7 +525,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdOverlineBtn);
cmdOverlineBtn.disabled = true;
cmdOverlineBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.textDecoration = (activeObject.textDecoration == 'overline' ? '' : 'overline');
this.className = activeObject.textDecoration ? 'selected' : '';
@@ -539,7 +539,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdBoldBtn);
cmdBoldBtn.disabled = true;
cmdBoldBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');
this.className = activeObject.fontWeight ? 'selected' : '';
@@ -553,7 +553,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdItalicBtn);
cmdItalicBtn.disabled = true;
cmdItalicBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');
this.className = activeObject.fontStyle ? 'selected' : '';
@@ -567,7 +567,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(cmdShadowBtn);
cmdShadowBtn.disabled = true;
cmdShadowBtn.onclick = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.textShadow = !activeObject.textShadow ? 'rgba(0,0,0,0.2) 2px 2px 10px' : '';
this.className = activeObject.textShadow ? 'selected' : '';
@@ -581,7 +581,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(textAlignSwitch);
textAlignSwitch.disabled = true;
textAlignSwitch.onchange = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.textAlign = this.value.toLowerCase();
canvas.renderAll();
@@ -594,7 +594,7 @@ if (supportsColorpicker()) {
activeObjectButtons.push(fontFamilySwitch);
fontFamilySwitch.disabled = true;
fontFamilySwitch.onchange = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.fontFamily = this.value;
canvas.renderAll();
@@ -605,7 +605,7 @@ if (supportsColorpicker()) {
var bgColorField = document.getElementById('text-bg-color');
if (bgColorField) {
bgColorField.onchange = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.backgroundColor = this.value;
canvas.renderAll();
@@ -616,7 +616,7 @@ if (supportsColorpicker()) {
var strokeColorField = document.getElementById('text-stroke-color');
if (strokeColorField) {
strokeColorField.onchange = function() {
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.strokeStyle = this.value;
canvas.renderAll();
@@ -639,7 +639,7 @@ if (supportsColorpicker()) {
label.appendChild(slider);
slider.title = "Line height";
slider.onchange = function(){
var activeObject = <fabric.Text>canvas.getActiveObject();
var activeObject = <fabric.IText>canvas.getActiveObject();
if (activeObject && activeObject.type === 'text') {
activeObject.lineHeight = this.value;
canvas.renderAll();
@@ -661,7 +661,7 @@ if (supportsColorpicker()) {
});
};
if (typeof Cufon !== 'undefined') {
Cufon.fonts.delicious.offsetLeft = 75;
Cufon.fonts.delicious.offsetTop = 25;
}
//if (typeof Cufon !== 'undefined') {
// Cufon.fonts.delicious.offsetLeft = 75;
// Cufon.fonts.delicious.offsetTop = 25;
//}