import Vue , { VNode } from 'vue' ; type DialogEvent = 'ok' | 'cancel' | 'update' ; export interface DialogInterface { $on ( event , cb ) : void ; show ( app ? ) : void ; } interface LocaleChooserDialog extends DialogInterface { visible : boolean ; } interface StringChooserDialog extends DialogInterface { newString : string ; title : string ; label : string ; width : string ; $on ( event , cb ) : void ; } interface NumberChooserDialog extends DialogInterface { value : number | null ; title : string ; label : string ; width : string ; bodyText : string ; min : number ; max : number ; step : number ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; } interface LdColorPickerDialog extends DialogInterface { $on ( event , cb ) : void ; } interface DisplacePartValues { partDistance : number ; arrowOffset : number ; arrowLength : number ; arrowRotation : number ; } interface DisplacePartDialog extends DialogInterface { values : DisplacePartValues ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; } interface RotatePartImageValues { title : string ; addRotateIcon : boolean ; showRotateIconCheckbox : boolean ; initialRotation : string ; rotation : Rotation [ ] | null ; } interface RotatePartImageDialog extends RotatePartImageValues , DialogInterface { $on ( event , cb ) : void ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; } interface TransformPartProps { title : string ; rotation : { x : number ; y : number ; z : number ; } ; position : { x : number ; y : number ; z : number ; } ; addRotateIcon : boolean ; showRotateIconCheckbox : boolean ; } interface TransformPartDialog extends DialogInterface , TransformPartProps { $on ( event , cb ) : void ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; } interface PageLayoutDialog extends DialogInterface { autoRows : boolean ; autoCols : boolean ; values : GridLayout ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; $on ( event , cb ) : void ; } interface StyleDialogProps { text : string ; color : string ; font : string ; } interface StyleDialog extends StyleDialogProps , DialogInterface { title : string ; family : string ; size : string ; bold : boolean ; italic : boolean ; underline : boolean ; $on ( event , cb ) : void ; } interface ImportModelDialog extends DialogInterface { includePartsPerStep : boolean ; newState : any ; } interface ResizeImageDialog extends DialogInterface { imageInfo : { filename : string ; src : string ; width : number ; originalWidth : number ; height : number ; originalHeight : number ; x : number ; y : number ; dpi : number ; preserveSize : boolean ; preserveAspectRatio : boolean ; anchorPosition : Anchors ; pageWidth : number ; pageHeight : number ; } ; } let component ; interface DialogProps { visible : boolean ; currentDialog : any ; outstandingImport : any ; resolve : any ; } type DialogNames = 'localeChooserDialog' | 'stringChooserDialog' | 'numberChooserDialog' | 'missingPartsDialog' | 'sceneRenderingDialog' | 'ldColorPickerDialog' | 'displacePartDialog' | 'rotatePartImageDialog' | 'transformPartDialog' | 'pageLayoutDialog' | 'brickColorDialog' | 'gridDialog' | 'pdfExportDialog' | 'pngExportDialog' | 'styleDialog' | 'importModelDialog' | 'whatsNewDialog' | 'aboutLicDialog' | 'resizeImageDialog' | 'multiBookDialog' ; Vue . component ( 'dialogManager' , { components : { localeChooserDialog : ( ) => import ( './components/translate.vue' ) , stringChooserDialog : ( ) => import ( './dialogs/string_chooser.vue' ) , numberChooserDialog : ( ) => import ( './dialogs/number_chooser.vue' ) , missingPartsDialog : ( ) => import ( './dialogs/missing_parts.vue' ) , sceneRenderingDialog : ( ) => import ( './dialogs/scene_rendering.vue' ) , ldColorPickerDialog : ( ) => import ( './dialogs/ld_color_picker.vue' ) , displacePartDialog : ( ) => import ( './dialogs/displace_part.vue' ) , rotatePartImageDialog : ( ) => import ( './dialogs/rotate_part_image.vue' ) , transformPartDialog : ( ) => import ( './dialogs/transform_part.vue' ) , pageLayoutDialog : ( ) => import ( './dialogs/page_layout.vue' ) , brickColorDialog : ( ) => import ( './dialogs/brick_colors.vue' ) , gridDialog : ( ) => import ( './dialogs/grid_dialog.vue' ) , pdfExportDialog : ( ) => import ( './dialogs/export_pdf.vue' ) , pngExportDialog : ( ) => import ( './dialogs/export_png.vue' ) , styleDialog : ( ) => import ( './dialogs/style.vue' ) , importModelDialog : ( ) => import ( './dialogs/import_model.vue' ) , whatsNewDialog : ( ) => import ( './dialogs/whats_new.vue' ) , aboutLicDialog : ( ) => import ( './dialogs/about_lic.vue' ) , resizeImageDialog : ( ) => import ( './dialogs/resize_image.vue' ) , multiBookDialog : ( ) => import ( './dialogs/multi_book.vue' ) , } , data ( ) { return { visible : false , currentDialog : null , outstandingImport : null , resolve : null , } ; } , render ( createElement ) { return this . visible ? createElement ( this . currentDialog , { ref : 'currentDialog' , tag : 'component' } ) : createElement ( ) ; } , updated ( ) { Vue . nextTick ( ( ) => { if ( this . $refs && this . $refs . currentDialog ) { const dlg = this . $refs . currentDialog ; if ( typeof this . outstandingImport === 'function' ) { this . outstandingImport ( dlg ) ; this . outstandingImport = null ; } if ( dlg . $refs && dlg . $refs . set_focus ) { dlg . $refs . set_focus . focus ( ) ; } dlg . $on ( 'close' , ( ) => { this . visible = false ; this . resolve ( ) ; } ) ; } } ) ; } , mounted ( ) { component = this ; } , } ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) ; function setDialog ( dialogName , cb ? ) { component . currentDialog = null ; component . outstandingImport = cb ; return new Promise ( resolve => { Vue . nextTick ( ( ) => { component . currentDialog = dialogName ; component . resolve = resolve ; component . visible = true ; } ) ; } ) ; } setDialog . ok = function ( ) { if ( component . visible && component . $refs . currentDialog ) { if ( typeof component . $refs . currentDialog . ok === 'function' ) { component . $refs . currentDialog . ok ( ) ; } else if ( typeof component . $refs . currentDialog . cancel === 'function' ) { component . $refs . currentDialog . cancel ( ) ; } } } ; setDialog . cancel = function ( ) { if ( component . visible && component . $refs . currentDialog && typeof component . $refs . currentDialog . cancel === 'function' ) { component . $refs . currentDialog . cancel ( ) ; } } ; export default setDialog ;