import { IFluidHandle , IFluidLoadable } from "@fluidframework/core-interfaces" ; import { Serializable } from "@fluidframework/datastore-definitions" ; import { NamedFluidDataStoreRegistryEntries , IFluidDataStoreFactory , IFluidDataStoreContext , } from "@fluidframework/runtime-definitions" ; import { ReactViewAdapter } from "@fluidframework/view-adapters" ; import { fluidExport as cmfe } from "@fluid-example/codemirror/dist/codemirror" ; import { CollaborativeText } from "@fluid-example/collaborative-textarea" ; import { Coordinate } from "@fluid-example/multiview-coordinate-model" ; import { SliderCoordinateView } from "@fluid-example/multiview-slider-coordinate-view" ; import { fluidExport as pmfe } from "@fluid-example/prosemirror/dist/prosemirror" ; import { ClickerInstantiationFactory } from "@fluid-example/clicker" ; import { requestFluidObject } from "@fluidframework/runtime-utils" ; import * as React from "react" ; import { Layout } from "react-grid-layout" ; interface ISingleHandleItem { handle : IFluidHandle ; } function createSingleHandleItem ( subFactory ) { return async ( context ) : Promise < ISingleHandleItem > => { const packagePath = [ ... context . packagePath , subFactory . type ] ; const router = await context . containerRuntime . createDataStore ( packagePath ) ; const object = await requestFluidObject < IFluidLoadable > ( router , "/" ) ; return { handle : object . handle , } ; } ; } const getAdaptedViewForSingleHandleItem = async ( serializableObject ) => { const handle = serializableObject . handle ; const component = await handle . get ( ) ; return React . createElement ( ReactViewAdapter , { view : component } ) ; } ; const getSliderCoordinateView = async ( serializableObject ) => { const handle = serializableObject . handle as IFluidHandle < Coordinate > ; const model = await handle . get ( ) ; return React . createElement ( SliderCoordinateView , { label : "Coordinate" , model } ) ; } ; /**
 * A registry entry, with extra metadata.
 */ export interface ISpacesItemEntry < T = any > { create : ( context : IFluidDataStoreContext ) => Promise < Serializable < T > > ; getView : ( serializableObject : Serializable < T > ) => Promise < JSX . Element > ; friendlyName : string ; fabricIconName : string ; } const clickerItemEntry = { create : createSingleHandleItem ( ClickerInstantiationFactory ) , getView : getAdaptedViewForSingleHandleItem , friendlyName : "Clicker" , fabricIconName : "Touch" , } ; const codemirrorItemEntry = { create : createSingleHandleItem ( cmfe ) , getView : getAdaptedViewForSingleHandleItem , friendlyName : "Code" , fabricIconName : "Code" , } ; const textboxItemEntry = { create : createSingleHandleItem ( CollaborativeText . getFactory ( ) ) , getView : getAdaptedViewForSingleHandleItem , friendlyName : "Text Box" , fabricIconName : "Edit" , } ; const prosemirrorItemEntry = { create : createSingleHandleItem ( pmfe ) , getView : getAdaptedViewForSingleHandleItem , friendlyName : "Rich Text" , fabricIconName : "FabricTextHighlight" , } ; const sliderCoordinateItemEntry = { create : createSingleHandleItem ( Coordinate . getFactory ( ) ) , getView : getSliderCoordinateView , friendlyName : "Coordinate" , fabricIconName : "NumberSymbol" , } ; export const spacesItemMap = new Map < string , ISpacesItemEntry > ( [ [ "clicker" , clickerItemEntry ] , [ "codemirror" , codemirrorItemEntry ] , [ "textbox" , textboxItemEntry ] , [ "prosemirror" , prosemirrorItemEntry ] , [ "slider-coordinate" , sliderCoordinateItemEntry ] , ] ) ; export const spacesRegistryEntries = new Map ( [ ClickerInstantiationFactory . registryEntry , [ cmfe . type , Promise . resolve ( cmfe ) ] , [ CollaborativeText . Name , Promise . resolve ( CollaborativeText . getFactory ( ) ) ] , [ pmfe . type , Promise . resolve ( pmfe ) ] , Coordinate . getFactory ( ) . registryEntry , ] ) ; interface ITemplate { [ type ] : Layout [ ] ; } interface ITemplateDictionary { [ templateName ] : ITemplate ; } export const templateDefinitions = { [ "Collaborative Coding" ] : { [ "codemirror" ] : [ { x : 0 , y : 0 , w : 26 , h : 6 } ] , [ "textbox" ] : [ { x : 26 , y : 0 , w : 10 , h : 6 } ] , } , [ "Classroom" ] : { [ "textbox" ] : [ { x : 26 , y : 0 , w : 10 , h : 6 } ] , [ "prosemirror" ] : [ { x : 0 , y : 0 , w : 26 , h : 6 } ] , } , } ;