static async void LoadLoadingDialog(FigmaViewRendererService rendererService, FigmaViewRendererServiceOptions options)
{
mainWindow.Size = new Size(720, 467);
var loadingSpinnerConverter = new LoadingSpinnerConverter();
rendererService.CustomConverters.Add(loadingSpinnerConverter);
var loadingDialogFigmaNode = rendererService.FindNodeByName(LoadingDialog);
var loadingDialog = rendererService.RenderByName <IView>(LoadingDialog, options);
loadingDialog.BackgroundColor = new Color(0.27f, 0.15f, 0.41f);
loadingDialog.CornerRadius = 5;
SetContentDialog(loadingDialog);
rendererService.CustomConverters.Remove(loadingSpinnerConverter);
//finds view and process animation
var spinnerView = rendererService.FindViewByName <ISpinner>(LoadingSpinnerConverter.LoadingSpinnerName);
spinnerView.Start();
//we wait for 5 seconds and we show next screen
await Task.Run(() =>
{
if (loadingDialogFigmaNode is FigmaFrameEntity figmaFrameEntity)
{
Thread.Sleep((int)figmaFrameEntity.transitionDuration);
FigmaSharp.AppContext.Current.BeginInvoke(() => ProcessTransitionNodeID(figmaFrameEntity.transitionNodeID, rendererService, options));
}
});
}
static void Example2()
{
var document = "b05oGrcu9WI9txiHqdhCUyE4";
mainWindow.Size = new Size(720, 467);
mainWindow.Center();
//windows properties
mainWindow.Content.BackgroundColor = Color.Transparent;
mainWindow.Borderless = true;
mainWindow.Resizable = false;
mainWindow.BackgroundColor = Color.Transparent;
//we add the control converters
var converters = Resources.GetConverters()
.Union(FigmaSharp.AppContext.Current.GetFigmaConverters())
.ToArray();
fileProvider = new FigmaRemoteFileProvider();
fileProvider.Load(document);
var rendererService = new FigmaViewRendererService(fileProvider, converters);
var options = new FigmaViewRendererServiceOptions {
ScanChildrenFromFigmaInstances = false
};
var figmaCanvas = fileProvider.Nodes
.OfType <FigmaCanvas>()
.FirstOrDefault();
rendererService.CustomConverters.Add(new CloseButtonConverter());
ProcessTransitionNodeID(figmaCanvas.prototypeStartNodeID, rendererService, options);
}
public static void RenderInWindow(this FigmaViewRendererService sender, IWindow mainWindow, FigmaViewRendererServiceOptions options, params string[] path)
{
var contentPath = path.Concat(new[] { "content" }).ToArray();
var contentFigmaNode = (IAbsoluteBoundingBox)sender.FileProvider.FindByPath(contentPath);
var contentView = sender.RenderByNode <IView>((FigmaNode)contentFigmaNode, options);
var windowFigmaNode = (IAbsoluteBoundingBox)sender.FileProvider.FindByPath(path);
mainWindow.Size = windowFigmaNode.absoluteBoundingBox.Size;
var windowNodeContainer = (IFigmaNodeContainer)windowFigmaNode;
var windowComponent = windowNodeContainer.children
.OfType <FigmaInstance>()
.FirstOrDefault(s => s.Component.key == "b666bac2b68d976c9e3e5b52a0956a9f1857c1f2");
var windowLabel = windowComponent.children
.OfType <FigmaText>()
.FirstOrDefault();
mainWindow.Title = windowLabel.characters;
var difX = contentFigmaNode.absoluteBoundingBox.X - windowFigmaNode.absoluteBoundingBox.X;
var difY = contentFigmaNode.absoluteBoundingBox.Y - windowFigmaNode.absoluteBoundingBox.Y;
const int WindowTitleHeight = 20;
difY -= WindowTitleHeight;
mainWindow.Content.AddChild(contentView);
contentView.SetPosition(difX, difY);
}
static void ProcessTransitionNodeID(string transitionNodeId, FigmaViewRendererService rendererService, FigmaViewRendererServiceOptions options)
{
if (string.IsNullOrEmpty(transitionNodeId))
{
return;
}
var node = rendererService.FindNodeById(transitionNodeId);
if (node.name == SignInDialog)
{
LoadSignInDialog(rendererService, options);
}
else if (node.name == RecentItemsDialog)
{
LoadRecentItemsDialog(rendererService, options);
}
else if (node.name == LoginDialog)
{
LoadLoginDialog(rendererService, options);
}
else if (node.name == LoadingDialog)
{
LoadLoadingDialog(rendererService, options);
}
else
{
var selectedNode = rendererService.FindNodeById(transitionNodeId);
var storyboardRedered = rendererService.RenderByNode <IView>(selectedNode);
storyboardRedered.CornerRadius = 5;
SetContentDialog(storyboardRedered);
}
}
static void LoadSignInDialog(FigmaViewRendererService rendererService, FigmaViewRendererServiceOptions options)
{
mainWindow.Size = new Size(440, 456);
//var customConverters = new FigmaViewConverter[] {
// new SearchFilterConverter(),
//};
//rendererService.CustomConverters.AddRange(customConverters);
//new SearchFilterConverter ()
var dialog = rendererService.RenderByName <IView>(SignInDialog, options);
dialog.CornerRadius = 5;
dialog.BackgroundColor = Color.White;
SetContentDialog(dialog);
//foreach (var viewConverter in customConverters)
// rendererService.CustomConverters.Remove(viewConverter);
var closeButton = dialog.Children
.OfType <IImageButton>()
.FirstOrDefault();
closeButton.Clicked += (s, e) =>
{
if (closeButton is IViewTransitable figmaTransition)
{
ProcessTransitionNodeID(figmaTransition.TransitionNodeID, rendererService, options);
}
};
}
static void Example1()
{
const string fileName = "EGTUYgwUC9rpHmm4kJwZQXq4";
var converters = Resources.GetConverters()
.Union(FigmaSharp.AppContext.Current.GetFigmaConverters())
.ToArray();
fileProvider = new FigmaRemoteFileProvider();
fileProvider.Load(fileName);
var rendererService = new FigmaViewRendererService(fileProvider, converters);
var rendererOptions = new FigmaViewRendererServiceOptions()
{
ScanChildrenFromFigmaInstances = false
};
rendererService.RenderInWindow(mainWindow, rendererOptions, "1.0. Bundle Figma Document");
mainWindow.Resizable = false;
mainWindow.Center();
var urlTextField = rendererService.FindViewByName <TextBox>("FigmaUrlTextField");
var bundleButton = rendererService.FindViewByName <Button>("BundleButton");
var cancelButton = rendererService.FindViewByName <Button>("CancelButton");
if (cancelButton != null)
{
cancelButton.Clicked += (s, e) =>
{
if (urlTextField != null)
{
urlTextField.Text = "You pressed cancel";
}
};
}
if (bundleButton != null)
{
bundleButton.Clicked += (s, e) =>
{
if (urlTextField != null)
{
urlTextField.Text = "You pressed bundle";
}
};
}
//We want know the background color of the figma camvas and apply to our scrollview
var canvas = fileProvider.Nodes.OfType <FigmaCanvas>().FirstOrDefault();
if (canvas != null)
{
mainWindow.BackgroundColor = canvas.backgroundColor;
}
}
static void Main(string[] args)
{
FigmaApplication.Init(Environment.GetEnvironmentVariable("TOKEN"));
NSApplication.Init();
NSApplication.SharedApplication.ActivationPolicy = NSApplicationActivationPolicy.Regular;
var stackView = new StackView()
{
Orientation = LayoutOrientation.Vertical
};
scrollView = new ScrollView();
var mainWindow = new Window(new Rectangle(0, 0, 540, 800))
{
Content = scrollView
};
mainWindow.Closing += delegate { NSRunningApplication.CurrentApplication.Terminate(); };
//TIP: the render consist in 2 steps:
//1) generate all the views, decorating and calculate sizes
//2) with this views we generate the hierarchy and position all the views based in the
//native toolkit positioning system
//in this case we want use a remote file provider (figma url from our document)
var fileProvider = new FigmaRemoteFileProvider();
//we initialize our renderer service, this uses all the converters passed
//and generate a collection of NodesProcessed which is basically contains <FigmaModel, IView, FigmaParentModel>
var rendererService = new FigmaViewRendererService(fileProvider);
rendererService.Start(fileName, scrollView.ContentView);
//now we have all the views processed and the relationship we can distribute all the views into the desired base view
var layoutManager = new StoryboardLayoutManager();
layoutManager.Run(scrollView.ContentView, rendererService);
//NOTE: some toolkits requires set the real size of the content of the scrollview before position layers
scrollView.AdjustToContent();
mainWindow.Show();
//mainWindow.Title = manager.WindowTitle;
NSApplication.SharedApplication.ActivateIgnoringOtherApps(true);
NSApplication.SharedApplication.Run();
}
public static void RenderInWindow(this FigmaViewRendererService sender, IWindow mainWindow, string windowLayerName, FigmaViewRendererServiceOptions options = null)
{
var windowFigmaNode = sender.FileProvider.FindByName(windowLayerName);
FigmaNode content = null;
if (windowFigmaNode is IFigmaNodeContainer figmaNodeContainer)
{
content = figmaNodeContainer.children.FirstOrDefault(s => s.IsNodeWindowContent());
var windowComponent = windowFigmaNode.GetDialogInstanceFromParentContainer();
if (options == null)
{
options = new FigmaViewRendererServiceOptions();
options.AreImageProcessed = false;
}
options.ToIgnore = new FigmaNode[] { windowComponent };
if (windowComponent != null)
{
var windowLabel = windowComponent.children
.OfType <FigmaText>()
.FirstOrDefault();
if (windowLabel != null)
{
mainWindow.Title = windowLabel.characters;
}
}
}
if (windowFigmaNode is IAbsoluteBoundingBox box)
{
mainWindow.Size = box.absoluteBoundingBox.Size;
}
if (content == null)
{
content = windowFigmaNode;
}
var renderContent = sender.RenderByNode(content, mainWindow.Content, options);
mainWindow.Content = renderContent;
}
/// <summary>
/// Initializes a new instance of the <see cref="T:FigmaSharp.FigmaFile"/> class.
/// </summary>
/// <param name="file">File.</param>
/// <param name="figmaViewConverters">Figma view converters.</param>
public FigmaFile(string file, FigmaViewConverter[] figmaViewConverters, FigmaViewPropertySetterBase propertySetter)
{
this.file = file;
ContentView = AppContext.Current.CreateEmptyView();
FigmaImages = new List <IImageView>();
if (propertySetter == null)
{
propertySetter = AppContext.Current.GetPropertySetter();
}
var assembly = System.Reflection.Assembly.GetCallingAssembly();
figmaLocalFileProvider = new FigmaManifestFileProvider(assembly, file);
rendererService = new FigmaViewRendererService(figmaLocalFileProvider, figmaViewConverters, propertySetter);
}
static void LoadLoginDialog(FigmaViewRendererService rendererService, FigmaViewRendererServiceOptions options)
{
mainWindow.Size = new Size(720, 467);
var customConverters = new FigmaViewConverter[] {
new DoThisLaterButtonConverter(),
new SignInMicrosoftButtonConverter(),
//new CreateAccountLinkConverter (),
//new WhySignInLinkConverter (),
};
rendererService.CustomConverters.AddRange(customConverters);
var signInDialog = rendererService.RenderByName <IView>(LoginDialog, options);
signInDialog.CornerRadius = 5;
signInDialog.BackgroundColor = new Color(0.27f, 0.15f, 0.41f);
SetContentDialog(signInDialog);
foreach (var viewConverter in customConverters)
{
rendererService.CustomConverters.Remove(viewConverter);
}
//logic
var signInButton = rendererService.FindViewByName <IButton>(SignInMicrosoftButtonConverter.SignInMicrosoftButtonName);
signInButton.Focus();
signInButton.Clicked += (s, e) =>
{
if (signInButton is IViewTransitable figmaTransition)
{
ProcessTransitionNodeID(figmaTransition.TransitionNodeID, rendererService, options);
}
};
var doThisLaterButton = rendererService.FindViewByName <IButton>(DoThisLaterButtonConverter.DoThisLaterButtonName);
doThisLaterButton.Clicked += (s, e) =>
{
if (doThisLaterButton is IViewTransitable figmaTransition)
{
ProcessTransitionNodeID(figmaTransition.TransitionNodeID, rendererService, options);
}
};
}
public GameWindow(Rectangle rect) : base(rect)
{
Resizable = false;
//we get the default basic view converters from the current loaded toolkit
var converters = FigmaSharp.AppContext.Current.GetFigmaConverters();
//in this case we want use a remote file provider (figma url from our document)
var fileProvider = new FigmaRemoteFileProvider();
fileProvider.Load("Jv8kwhoRsrmtJDsSHcTgWGYu");
//we initialize our renderer service, this uses all the converters passed
//and generate a collection of NodesProcessed which is basically contains <FigmaModel, IView, FigmaParentModel>
var rendererService = new FigmaViewRendererService(fileProvider, converters);
//play background music
backgroundMusic = new MusicPlayer("Background", "mp3");
backgroundMusic.Play(-1);
coinSound = new MusicPlayer("Coin", "mp3");
gameOverSound = new MusicPlayer("GameOver", "mp3");
//we want load the entire level 1
IView view = rendererService.RenderByName <IView>("Level1");
Content = view;
playerTile = rendererService.FindViewStartsWith <IImageView>("Player");
startingPoint = playerTile.Allocation.Origin;
pointsLabel = rendererService.FindViewByName <ILabel>("Points");
gemsTiles = rendererService.FindViewsStartsWith <IImageView>("Gem")
.ToList();
wallTiles = rendererService.FindViewsStartsWith <IImageView>("Tile")
.ToArray();
spikesTiles = rendererService.FindViewsStartsWith <IImageView>("Spikes")
.ToArray();
heartTiles = rendererService.FindViewsStartsWith <IImageView>("Heart")
.OrderBy(s => s.Allocation.X)
.ToList();
WorldUpdate();
}
static void LoadRecentItemsDialog(FigmaViewRendererService rendererService, FigmaViewRendererServiceOptions options)
{
mainWindow.Size = new Size(720, 467);
var customConverters = new FigmaViewConverter[] {
new SearchFilterConverter(),
};
rendererService.CustomConverters.AddRange(customConverters);
//new SearchFilterConverter ()
var dialog = rendererService.RenderByName <IView>("RecentItemsDialog", options);
dialog.CornerRadius = 5;
dialog.BackgroundColor = Color.White;
SetContentDialog(dialog);
foreach (var viewConverter in customConverters)
{
rendererService.CustomConverters.Remove(viewConverter);
}
var searchBox = dialog.Children
.OfType <ISearchBox>()
.FirstOrDefault();
searchBox.Focus();
var closeButton = dialog.Children
.OfType <IImageButton>()
.FirstOrDefault();
closeButton.Clicked += (s, e) =>
{
NSRunningApplication.CurrentApplication.Terminate();
};
}
public ExampleViewManager(IScrollView scrollView)
{
//we get the default basic view converters from the current loaded toolkit
var converters = FigmaSharp.AppContext.Current.GetFigmaConverters();
//TIP: the render consist in 2 steps:
//1) generate all the views, decorating and calculate sizes
//2) with this views we generate the hierarchy and position all the views based in the
//native toolkit positioning system
//in this case we want use a remote file provider (figma url from our document)
fileProvider = new FigmaRemoteFileProvider();
//we initialize our renderer service, this uses all the converters passed
//and generate a collection of NodesProcessed which is basically contains <FigmaModel, IView, FigmaParentModel>
var rendererService = new FigmaViewRendererService(fileProvider, converters);
rendererService.Start(fileName, scrollView);
//now we have all the views processed and the relationship we can distribute all the views into the desired base view
//var distributionService = new FigmaViewRendererDistributionService(rendererService);
//distributionService.Start();
var layoutManager = new StoryboardLayoutManager();
layoutManager.Run(scrollView.ContentView, rendererService);
//We want know the background color of the figma camvas and apply to our scrollview
var canvas = fileProvider.Nodes.OfType <FigmaCanvas>().FirstOrDefault();
if (canvas != null)
{
scrollView.BackgroundColor = canvas.backgroundColor;
}
//NOTE: some toolkits requires set the real size of the content of the scrollview before position layers
scrollView.AdjustToContent();
}
public FigmaDesignerSession(IFigmaFileProvider figmaFileProvider, FigmaViewRendererService figmaViewRendererService, StoryboardLayoutManager figmaViewRendererDistributionService)
{
fileProvider = figmaFileProvider;
rendererService = figmaViewRendererService;
distributionService = figmaViewRendererDistributionService;
}
public override void InitializeFigmaComponent()
{
InternalInitializeComponent();
FileProvider = new FigmaLocalFileProvider("Resources");
RendererService = new FigmaViewRendererService(FileProvider, GetFigmaViewConverters());
}
public override void InitializeFigmaComponent()
{
InternalInitializeComponent();
FileProvider = new FigmaManifestFileProvider(Assembly.GetCallingAssembly());
RendererService = new FigmaViewRendererService(FileProvider, GetFigmaViewConverters());
}
public static void RenderInWindow(this FigmaViewRendererService sender, IWindow mainWindow, params string[] path)
{
RenderInWindow(sender, mainWindow, new FigmaViewRendererServiceOptions(), path);
}
