// import { createMachine, assign } from 'xstate';
// import type { ImageEditContext, ImageEditEvent } from '../models';

// const initialise = async (context: ImageEditContext, event: any) => new Promise( async (resolve, reject) => {
    
//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( event.context );

//     trackTransforms(pcontext);
//     trackTransforms(rcontext);

//     let newContext = await loadFile( event.context );        

//     resolve( { 
//         ...context, 
//         ...newContext
//     } );

// });

// const loadFile = async ( event: any ): Promise<Partial<ImageEditContext>> => new Promise((resolve, reject) => {
     
//     const fr = new FileReader();
    
//     fr.addEventListener('load', async () => {
//         const context = await createPreview(fr, event); 
//         resolve( context )
//     });
//     fr.addEventListener('error', (err) => reject(err));

//     fr.readAsDataURL(event.file);

// });

// const createPreview = async ( 
//     fr: FileReader,
//     event: {
//         file: File, 
//         renderImage: any, 
//         renderCanvas: HTMLCanvasElement,
//         previewCanvas: HTMLCanvasElement, 
//         previewContainer: HTMLDivElement, 
//         maxWidth: number, 
//         maxHeight: number 
//     }
// ): Promise<Partial<ImageEditContext>> => {

//     return new Promise( resolve => {

//         event.renderImage.addEventListener('load', async () => {
//             const context = workingImageLoaded(event); 
//             resolve( context )
//         });
        
//         event.renderImage.src = fr.result;

//     })

// }

// const workingImageLoaded = ( 
//     event: {
//         file: File, 
//         renderImage: any, 
//         renderCanvas: HTMLCanvasElement,
//         previewCanvas: HTMLCanvasElement, 
//         previewContainer: HTMLDivElement, 
//         maxWidth: number, 
//         maxHeight: number 
//     } 
// ): Partial<ImageEditContext> => {

//     let aspectRatio = event.renderImage.width / event.renderImage.height; 
//     let orientation = aspectRatio >= 1 ? 'landscape' :  'portrait'; 
//     let renderWidth = event.renderImage.naturalWidth;
//     let renderHeight = event.renderImage.naturalHeight;
    
//     let previewWidth = event.previewContainer.clientWidth;
//     let previewHeight = previewWidth / aspectRatio; 
//     // let previewTransform = event?.previewCanvas?.getContext('2d')?.getTransform(); 
//     // let renderTransform = event?.renderCanvas?.getContext('2d')?.getTransform(); 
//     let previewTransform = !!event && !!event.previewCanvas && event.previewCanvas.getContext('2d') && event.previewCanvas.getContext('2d').getTransform();
//     let renderTransform = !!event && !!event.renderCanvas && event.renderCanvas.getContext('2d') && event.renderCanvas.getContext('2d').getTransform();

//     return { 
//         maxWidth: event.maxWidth,
//         maxHeight: event.maxHeight,
//         previewContainer: event.previewContainer,
//         previewCanvas: event.previewCanvas,
//         renderImage: event.renderImage,
//         renderCanvas: event.renderCanvas,
//         previewTransform,
//         renderTransform,
//         previewX: 0,
//         previewY: 0,
//         renderX: 0,
//         renderY: 0,
//         previewWidth,
//         previewHeight,
//         renderWidth,
//         renderHeight,
//         orientation,
//         aspectRatio,
//         rotation: 0
//     };

// }

// const stretchCanvas = (canvas: HTMLCanvasElement, width: number, height: number) => {
//     canvas.width = width;
//     canvas.height = height;
// }

// const getEnvironment = ( context: any ) => {

//     const pcanvas: HTMLCanvasElement = context.previewCanvas;
//     const pcontext = pcanvas.getContext('2d');
//     const rcanvas: HTMLCanvasElement = context.renderCanvas;
//     const rcontext = rcanvas.getContext('2d');

//     return { pcanvas, pcontext, rcanvas, rcontext }; 

// }

// // Exif functions 

// const toOne = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, Math.abs(pxf.d), pxf.e, pxf.f,
//         0,
//         context.previewWidth,
//         context.previewHeight,
//         0, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, Math.abs(rxf.d), rxf.e, rxf.f,
//         0,
//         context.renderWidth,
//         context.renderHeight,
//         0, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toTwo = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         -Math.abs(pxf.a), pxf.b, pxf.c, Math.abs(pxf.d), pxf.e, pxf.f,
//         0,
//         context.previewWidth,
//         context.previewHeight,
//         -pcanvas.width, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         -Math.abs(rxf.a), rxf.b, rxf.c, Math.abs(rxf.d), rxf.e, rxf.f,
//         0,
//         context.renderWidth,
//         context.renderHeight,
//         -rcanvas.width, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toThree = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         -Math.abs(pxf.a), pxf.b, pxf.c, -Math.abs(pxf.d), pxf.e, pxf.f,
//         0,
//         context.previewWidth,
//         context.previewHeight,
//         -pcanvas.width, -pcanvas.height, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         -Math.abs(rxf.a), rxf.b, rxf.c, -Math.abs(rxf.d), rxf.e, rxf.f,
//         0,
//         context.renderWidth,
//         context.renderHeight,
//         -rcanvas.width, -rcanvas.height, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toFour = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, -Math.abs(pxf.d), pxf.e, pxf.f,
//         0,
//         context.previewWidth,
//         context.previewHeight,
//         0, -pcanvas.height, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )
    
//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, -Math.abs(rxf.d), rxf.e, rxf.f,
//         0,
//         context.renderWidth,
//         context.renderHeight,
//         0, -rcanvas.height, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toFive = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, -Math.abs(pxf.d), pxf.e, pxf.f,
//         270,
//         context.previewWidth,
//         context.previewHeight,
//         pcanvas.height, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, -Math.abs(rxf.d), rxf.e, rxf.f,
//         270,
//         context.renderWidth,
//         context.renderHeight,
//         rcanvas.height, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toSix = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, Math.abs(pxf.d), pxf.e, pxf.f,
//         270,
//         context.previewWidth,
//         context.previewHeight,
//         0, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, Math.abs(rxf.d), rxf.e, rxf.f,
//         270,
//         context.renderWidth,
//         context.renderHeight,
//         0, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toSeven = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context ); 
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, -Math.abs(pxf.d), pxf.e, pxf.f,
//         90,
//         context.previewWidth,
//         context.previewHeight,
//         -pcanvas.height, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, -Math.abs(rxf.d), rxf.e, rxf.f,
//         90,
//         context.renderWidth,
//         context.renderHeight,
//         -rcanvas.height, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const toEight = assign(( context: ImageEditContext ) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );
//     const pxf = context.previewTransform;
//     const rxf = context.renderTransform;

//     const previewContextState = transform( 
//         'preview',
//         pcanvas, 
//         pcontext, 
//         Math.abs(pxf.a), pxf.b, pxf.c, Math.abs(pxf.d), pxf.e, pxf.f,
//         90,
//         context.previewWidth,
//         context.previewHeight,
//         0, 0, pcanvas.width, pcanvas.height,
//         context.renderImage
//     )

//     const renderContextState = transform( 
//         'render',
//         rcanvas, 
//         rcontext, 
//         Math.abs(rxf.a), rxf.b, rxf.c, Math.abs(rxf.d), rxf.e, rxf.f,
//         90,
//         context.renderWidth,
//         context.renderHeight,
//         0, 0, rcanvas.width, rcanvas.height,
//         context.renderImage
//     )

//     return { 
//         ...context, 
//         ...previewContextState, 
//         previewTransform: previewContextState.currentTransform,
//         renderTransform: renderContextState.currentTransform 
//     };

// });

// const transform = (
//     type = 'preview', 
//     canvas: any,
//     context: any,
//     a: any, b: any, c: any, d: any, e: any, f: any,
//     rotation: any,
//     canvasWidth: any,
//     canvasHeight: any,
//     drawX: any,
//     drawY: any,
//     drawWidth: any,
//     drawHeight: any,
//     image : any
// ) => {

//     canvas.width = canvasWidth;
//     canvas.height = canvasHeight;
    
//     context.setTransform( a, b, c, d, e, f );  

//     if(rotation) {
//         context.translate( canvas.width / 2, canvas.height / 2 );
//         context.rotate( rotation * Math.PI / 180 );
//         context.translate( -canvas.width / 2, -canvas.height / 2 );
//     }

//     context.drawImage(image, drawX, drawY, drawWidth, drawHeight);   

//     return type === 'preview'  
//         ? { currentTransform: context.getTransform(), previewX: drawX, previewY: drawY, previewWidth: drawWidth, previewHeight: drawHeight, rotation }
//         : { currentTransform: context.getTransform(), renderX: drawX, renderY: drawY, renderWidth: drawWidth, renderHeight: drawHeight, rotation }

// }

// const establishRotation = assign((context: ImageEditContext, event) => {
    
//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );
    
//     // if(context.rotation) {
//     //     pcontext?.translate(pcanvas.width/2, pcanvas.height/2);
//     //     pcontext?.rotate( context.rotation * Math.PI / 180 );
//     //     pcontext?.translate(-pcanvas.width/2, -pcanvas.height/2);

//     //     rcontext?.translate(rcanvas.width/2, rcanvas.height/2);
//     //     rcontext?.rotate( context.rotation * Math.PI / 180 );
//     //     rcontext?.translate(-rcanvas.width/2, -rcanvas.height/2);
//     // }

//     if(context.rotation && pcontext && rcontext) {
//         pcontext.translate(pcanvas.width/2, pcanvas.height/2);
//         pcontext.rotate( context.rotation * Math.PI / 180 );
//         pcontext.translate(-pcanvas.width/2, -pcanvas.height/2);

//         rcontext.translate(rcanvas.width/2, rcanvas.height/2);
//         rcontext.rotate( context.rotation * Math.PI / 180 );
//         rcontext.translate(-rcanvas.width/2, -rcanvas.height/2);
//     }

//     const previewTransform = pcontext.getTransform();
//     const renderTransform = rcontext.getTransform();

//     return { ...context, previewTransform, renderTransform };

// })

// const negateRotation = assign((context: ImageEditContext, event) => {
    
//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );

//     // if(context.rotation) {
//     //     pcontext?.translate( pcanvas.width/2, pcanvas.height/2 );
//     //     pcontext?.rotate( -context.rotation * Math.PI / 180 );
//     //     pcontext?.translate(-pcanvas.width/2, -pcanvas.height/2);

//     //     rcontext?.translate( rcanvas.width/2, rcanvas.height/2 );
//     //     rcontext?.rotate( -context.rotation * Math.PI / 180 );
//     //     rcontext?.translate(-rcanvas.width/2, -rcanvas.height/2);
//     // }

//     if(context.rotation && pcontext && rcontext) {
//         pcontext.translate( pcanvas.width/2, pcanvas.height/2 );
//         pcontext.rotate( -context.rotation * Math.PI / 180 );
//         pcontext.translate(-pcanvas.width/2, -pcanvas.height/2);

//         rcontext.translate( rcanvas.width/2, rcanvas.height/2 );
//         rcontext.rotate( -context.rotation * Math.PI / 180 );
//         rcontext.translate(-rcanvas.width/2, -rcanvas.height/2);
//     }

//     const previewTransform = pcontext.getTransform();
//     const renderTransform = rcontext.getTransform();

//     return { ...context, previewTransform, renderTransform };
// })

// // Zooming

// const zooming = assign(( context: ImageEditContext, event: any ) => {

//     const domEvent = event.event;

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );
//     const delta = domEvent.wheelDelta ? domEvent.wheelDelta/40 : domEvent.detail ? -domEvent.detail : 0;
   
//     let { 
//         lastPreviewX, 
//         lastPreviewY, 
//         lastRenderX, 
//         lastRenderY
//     } = getPoints( context, event.event, pcanvas, pcontext, rcanvas, rcontext ); 
    
//     let previewTransform;
//     let renderTransform;

//     if (delta) {
//         previewTransform = zoom( 
//             pcanvas, 
//             pcontext, 
//             context.renderImage, 
//             delta, 
//             lastPreviewX, 
//             lastPreviewY,  
//             context.previewX,
//             context.previewY,
//             context.previewWidth,
//             context.previewHeight
//         );
//         renderTransform = zoom( 
//             rcanvas, 
//             rcontext, 
//             context.renderImage, 
//             delta, 
//             lastRenderX, 
//             lastRenderY,  
//             context.renderX,
//             context.renderY,
//             context.renderWidth,
//             context.renderHeight
//         );
//     }

//     domEvent.preventDefault();

//     return { ...context, previewTransform, renderTransform };

// });

// const zoom = ( 
//     canvas: HTMLCanvasElement, 
//     ctx: CanvasRenderingContext2D, 
//     renderImage, 
//     delta, 
//     lastX, 
//     lastY,
//     drawX,
//     drawY,
//     drawWidth,
//     drawHeight
// ) => {

//     if(delta < 0) {
//         lastX = canvas.width / 2;
//         lastY = canvas.height / 2;
//     }
//     const pt = ( ctx as any ).transformedPoint( lastX, lastY );
    
//     ctx.translate( pt.x, pt.y );
//     const factor = Math.pow( 1.1, delta ); // 1.1 is the scale factor. Work this into the config / ctx
//     ctx.scale( factor, factor );
//     ctx.translate( -pt.x, -pt.y );

//     ctx.save();
//         ctx.setTransform( 1,0,0,1,0,0 );
//         ctx.clearRect( 0, 0, canvas.width, canvas.height );
//     ctx.restore();
     
//     ctx.drawImage(renderImage, drawX, drawY, drawWidth, drawHeight);  
    
//     return ctx.getTransform();

// }

// // Dragging

// const dragStartPreview = assign((context: ImageEditContext, event: any) => {
    
//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );

//     let { 
//         lastPreviewX, 
//         lastPreviewY, 
//         lastRenderX, 
//         lastRenderY, 
//         dragStartPreview, 
//         dragStartRender 
//     } = getPoints( context, event.event, pcanvas, pcontext, rcanvas, rcontext ); 

//     return {
//         ...context,
//         lastPreviewX,
//         lastPreviewY,
//         lastRenderX,
//         lastRenderY,
//         dragStartPreview,
//         dragStartRender
//     }

// });

// const dragging = assign((context: ImageEditContext, event: any) => {

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );

//     let { 
//         lastPreviewX, 
//         lastPreviewY, 
//         lastRenderX, 
//         lastRenderY
//     } = getPoints( context, event.event, pcanvas, pcontext, rcanvas, rcontext );

//     if (context.dragStartPreview && context.dragStartRender) {
        
//         const pt = (pcontext as any).transformedPoint( lastPreviewX, lastPreviewY );
//         pcontext.translate( pt.x - context.dragStartPreview.x, pt.y - context.dragStartPreview.y );

//         pcontext.save();
//             pcontext.setTransform( 1,0,0,1,0,0 );
//             pcontext.clearRect( 0, 0, pcanvas.width, pcanvas.height );
//         pcontext.restore();
        
//         pcontext.drawImage( context.renderImage, context.previewX, context.previewY, context.previewWidth, context.previewHeight );     

//         // 

//         const rt = (rcontext as any).transformedPoint( lastRenderX, lastRenderY );
//         rcontext.translate( rt.x - context.dragStartRender.x, rt.y - context.dragStartRender.y );

//         rcontext.save();
//             rcontext.setTransform( 1,0,0,1,0,0 );
//             rcontext.clearRect( 0, 0, rcanvas.width, rcanvas.height );
//         rcontext.restore();
        
//         rcontext.drawImage( context.renderImage, context.renderX, context.renderY, context.renderWidth, context.renderHeight );     

//     }

//     const previewTransform = pcontext.getTransform();
//     const renderTransform = rcontext.getTransform();

//     return { ...context, lastPreviewX, lastPreviewY, lastRenderX, lastRenderY, previewTransform, renderTransform };

// });

// const dragEnd = assign((context: ImageEditContext, event) => {
  
//     return {
//         ...context,
//         dragStartPreview: null
//     }
    
// });

// const rotating = (context: ImageEditContext, event: any) => {

//     const domEvent = event.event;

//     const { pcanvas, pcontext, rcanvas, rcontext } = getEnvironment( context );
    
//     let lastX = pcanvas.width / 2;
//     let lastY = pcanvas.height / 2;

//     const pt = ( pcontext as any ).transformedPoint( lastX, lastY );

//     pcontext.save();
//             pcontext.setTransform( 1,0,0,1,0,0 );
//             pcontext.clearRect( 0, 0, pcanvas.width, pcanvas.height );
//     pcontext.restore();
        
//     pcontext.translate(pt.x, pt.y);
//     pcontext.rotate(+domEvent.target.value * Math.PI / 180);
//     pcontext.drawImage( context.renderImage, 0, 0, context.previewWidth, context.previewHeight );     
//     pcontext.translate(-pt.x, -pt.y);

// };

// const getPoints = ( context: ImageEditContext, data: MouseEvent, pcanvas, pcontext, rcanvas, rcontext ) => {

//     let lastPreviewX = data.offsetX || (data.pageX - pcanvas.offsetLeft);
//     let lastPreviewY = data.offsetY || (data.pageY - pcanvas.offsetTop);

//     let lastRenderX = lastPreviewX/context.previewWidth * context.renderWidth;
//     let lastRenderY = lastPreviewY/context.previewHeight * context.renderHeight;

//     let dragStartPreview = (pcontext as any).transformedPoint(lastPreviewX,lastPreviewY);
//     let dragStartRender = (rcontext as any).transformedPoint(lastRenderX,lastRenderY);

//     return { lastPreviewX, lastPreviewY, lastRenderX, lastRenderY, dragStartPreview, dragStartRender }; 

// }

// // Tracking of canvas state 

// const trackTransforms = (ctx) => {

//     const svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
//     let xform = svg.createSVGMatrix();
//     ctx.getTransform = function(){ return xform; };
    
//     const savedTransforms = [];
//     const save = ctx.save;
//     ctx.save = function(){
//         savedTransforms.push(xform.translate(0,0));
//         return save.call(ctx);
//     };
//     const restore = ctx.restore;
//     ctx.restore = function(){
//         xform = savedTransforms.pop();
//         return restore.call(ctx);
//     };

//     const scale = ctx.scale;
//     ctx.scale = function(sx,sy){
//         xform = xform.scale(sx,sy);
//         return scale.call(ctx,sx,sy);
//     };
//     const rotate = ctx.rotate;
//     ctx.rotate = function(radians){
//         xform = xform.rotate(radians*180/Math.PI);
//         return rotate.call(ctx,radians);
//     };
//     const translate = ctx.translate;
//     ctx.translate = function(dx,dy){
//         xform = xform.translate(dx,dy);
//         return translate.call(ctx,dx,dy);
//     };
    
//     const transform = ctx.transform;
//     ctx.transform = function( a,b,c,d,e,f ){
//         const m2 = svg.createSVGMatrix();
//         m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
//         xform = xform.multiply(m2);
//         return transform.call(ctx,a,b,c,d,e,f);
//     };

//     const setTransform = ctx.setTransform;
//     ctx.setTransform = function(a,b,c,d,e,f){
//         xform.a = a;
//         xform.b = b;
//         xform.c = c;
//         xform.d = d;
//         xform.e = e;
//         xform.f = f;
//         return setTransform.call(ctx,a,b,c,d,e,f);
//     };
//     const pt  = svg.createSVGPoint();
//     ctx.transformedPoint = function(x,y){
//         pt.x = x; pt.y = y;
//         return pt.matrixTransform( xform.inverse() );
//     }
// }

// const saveFileAsync = async ( context: ImageEditContext, event ): Promise<File> => new Promise((resolve, reject) => {
     
//     return context.renderCanvas.toBlob(( blob ) => {
//         resolve( new File([ blob ], context.active.name, { type: 'image/jpeg' }) );
//     });

// });

// export const imageEditingMachine = ( ) => createMachine<ImageEditContext, ImageEditEvent>(
//     {
//         id: 'fetch',
//         initial: 'idle',
//         context: {
//             retries: 0,
//             files: [],
//             active: null,
//             maxWidth: 1920,
//             maxHeight: 1200,
//             previewContainer: null,
//             previewCanvas: null,
//             renderImage: null,
//             renderCanvas: null,
//             previewTransform: null,
//             renderTransform: null,
//             orientation: 'landscape',
//             previewX: 0,
//             previewY: 0,
//             previewWidth: 1,
//             previewHeight: 1,
//             renderX: 0,
//             renderY: 0,
//             renderWidth: 1,
//             renderHeight: 1,
//             lastPreviewX: 0,
//             lastPreviewY: 0,
//             lastRenderX: 0,
//             lastRenderY: 0,
//             dragStartPreview: null,
//             dragStartRender: null,
//             aspectRatio: 1,
//             src: '',
//             rotation: 0
//         },
//         states: {
//             idle: {
//                 on: {
//                     FETCH: 'loading'
//                 }
//             },
//             loading: {
//                 on: {
//                     SUCCESS: {
//                         target: 'loaded',
//                         actions: assign({
//                             files: (context, event) => event.files
//                         })
//                     }
//                 }
//             },
//             loaded: {
//                 entry: assign({
//                     active: null as any
//                 }),
//                 on: {
//                     SELECT: {
//                         actions: assign({
//                             active: (context, event) => event.file
//                         })
//                     },
//                     EDITING_CANVASSES: {
//                         target: 'edit'
//                     },
//                     UPLOAD: 'uploading',
//                     REMOVE: {
//                         actions: assign({
//                             files: (context, event) => context.files.filter(i => i.name != event.name)
//                         })
//                     }
//                 }
//             },
//             edit: {
//                 initial: 'setup',
//                 states: {
//                     hist: { type: 'history' },
//                     setup: {
//                         invoke: {
//                             id: 'initialise',
//                             src: initialise,
//                             onDone: {
//                               target: 'one',
//                               actions: assign((context, event) => {
//                                     const newContext = { ...context, ...event.data };
//                                     stretchCanvas(newContext.previewCanvas, newContext.previewWidth, newContext.previewHeight);
//                                     stretchCanvas(newContext.renderCanvas, newContext.renderWidth, newContext.renderHeight);
//                                     return newContext;
//                                 })
//                             },
//                             // onError: { target: 'failure' }
//                         },
//                     },
//                     one:{
//                         entry: toOne,
//                         on: {
//                             FLIP: 'two',
//                             FLOP: 'four',
//                             ROTATE_RIGHT: 'eight',
//                             ROTATE_LEFT: 'six',
//                         }
//                     },
//                     two:{
//                         entry: toTwo,
//                         on: {
//                             FLIP: 'one',
//                             FLOP: 'three',
//                             ROTATE_RIGHT: 'seven',
//                             ROTATE_LEFT: 'five',
//                         }
//                     },
//                     three:{
//                         entry: toThree,
//                         on: {
//                             FLIP: 'four',
//                             FLOP: 'two',
//                             ROTATE_RIGHT: 'six',
//                             ROTATE_LEFT: 'eight',
//                         }
//                     },
//                     four:{
//                         entry: toFour,
//                         on: {
//                             FLIP: 'three',
//                             FLOP: 'one',
//                             ROTATE_RIGHT: 'five',
//                             ROTATE_LEFT: 'seven',
//                         }
//                     },
//                     five:{
//                         entry: toFive,
//                         exit: negateRotation,
//                         on: {
//                             FLIP: 'eight',
//                             FLOP: 'six',
//                             ROTATE_RIGHT: 'two',
//                             ROTATE_LEFT: 'four',
//                         }
//                     },
//                     six:{
//                         entry: toSix,
//                         exit: negateRotation,
//                         on: {
//                             FLIP: 'seven',
//                             FLOP: 'five',
//                             ROTATE_RIGHT: 'one',
//                             ROTATE_LEFT: 'three',
//                         }
//                     },
//                     seven:{
//                         entry: toSeven,
//                         exit: negateRotation,
//                         on: {
//                             FLIP: 'six',
//                             FLOP: 'eight',
//                             ROTATE_RIGHT: 'four',
//                             ROTATE_LEFT: 'two',
//                         }
//                     },
//                     eight:{
//                         entry: toEight,
//                         exit: negateRotation,
//                         on: {
//                             FLIP: 'five',
//                             FLOP: 'seven',
//                             ROTATE_RIGHT: 'three',
//                             ROTATE_LEFT: 'one',
//                         }
//                     }
//                 },
//                 on: {
//                     FETCH: 'loading',
//                     RESAMPLE: 'edit',   
//                     ZOOM: {
//                         target: 'zoom',
//                     },
//                     DRAG: {
//                         target: 'drag',
//                         actions: [ 'dragStartPreview' ]
//                     },  
//                     TEXT: 'edit',
//                     CROP: 'edit',
//                     RESIZE: 'edit',
//                     FILTER: 'edit',
//                     DONE: 'loaded',
//                     SAVE: 'success',
//                     CANCEL: 'loaded'
//                     // ROTATE: {
//                     //     actions: rotating
//                     // }
//                 }
//             },
//             zoom: {
//                 entry: establishRotation,
//                 exit: negateRotation,
//                 on: {
//                     ZOOMING: {
//                         actions: [ 'zooming' ]
//                     },
//                     STOP_ZOOM: {
//                         target: 'edit.hist'
//                     }
//                 }
//             },
//             drag: {
//                 entry: establishRotation,
//                 exit: negateRotation,
//                 on: {
//                     DRAGGING: {
//                         actions: [ 'dragging' ]
//                     },
//                     STOP_DRAG: {
//                         target: 'edit.hist',
//                         actions: [ 'dragEnd' ]
//                     }
//                 }
//             },
//             uploading: {
//                 on: {
//                     RESOLVE: 'success',
//                     REJECT: 'failure'
//                 }
//             },
//             success: {
//                 // type: 'final',
//                 invoke: {
//                     id: 'saveFileAsync',
//                     src: saveFileAsync,
//                     onDone: {
//                       target: 'loaded',
//                       actions: assign(( context: ImageEditContext, event: any ) => {
//                             const files = [ ...context.files.filter(f => f.name !== event.data.name), event.data  ];
//                             return { ...context, files };
//                         })
//                     },
//                 }
//             },
//             failure: {
//                 on: {
//                     RETRY: {
//                         target: 'uploading',
//                         actions: assign({
//                             retries: (context, event) => context.retries + 1
//                         })
//                     }
//                 }
//             }
//         }
//     },
//     {
//         actions: {
//             initialise,
//             zooming,
//             dragStartPreview,
//             dragging,
//             dragEnd,
//             toOne,
//             toTwo,
//             toThree,
//             toFour,
//             toFive,
//             toSix,
//             toSeven,
//             toEight,
//             establishRotation,
//             negateRotation,
//             saveFileAsync
//         }
//     }
// );