\documentclass{article}
\usepackage[affil-it]{authblk}
\usepackage{graphicx}
\usepackage[space]{grffile}
\usepackage{latexsym}
\usepackage{textcomp}
\usepackage{longtable}
\usepackage{tabulary}
\usepackage{booktabs,array,multirow}
\usepackage{amsfonts,amsmath,amssymb}
\providecommand\citet{\cite}
\providecommand\citep{\cite}
\providecommand\citealt{\cite}
\usepackage{url}
\usepackage{hyperref}
\hypersetup{colorlinks=false,pdfborder={0 0 0}}
\usepackage{etoolbox}
\makeatletter
\patchcmd\@combinedblfloats{\box\@outputbox}{\unvbox\@outputbox}{}{%
  \errmessage{\noexpand\@combinedblfloats could not be patched}%
}%
\makeatother
% You can conditionalize code for latexml or normal latex using this.
\newif\iflatexml\latexmlfalse
\AtBeginDocument{\DeclareGraphicsExtensions{.pdf,.PDF,.eps,.EPS,.png,.PNG,.tif,.TIF,.jpg,.JPG,.jpeg,.JPEG}}

\usepackage[utf8]{inputenc}
\usepackage[english]{babel}

\def\latex{LaTeX}


\begin{document}

\title{Drawing Feynman Diagrams Using the Application at feynman.aivazis.com}


\author{Alec Aivazis}
\affil{Affiliation not available}



\date{\today}

\maketitle




The web application at feynman.aivazis.com is an attempt to provide the quality of diagrams that is producible in similar packages with the ease of use and portability that is found only on the web. By allowing the user to create diagrams at any Internet-connected device, feynman aims to be a complete solution for producing and exporting production-ready diagrams with as little effort by the user as possible. The only prerequisite in order to fully benefit from the application is to download the LaTeX drawing package that is used by the system if the diagram is to be exported to LaTeX. \footnote{This package is available for download at feynman.aivazis.com/package as well as when the diagram is successfully exported to LaTeX.}

\section{Introduction}

Since they were first introduced in 1948, Feynman diagrams have been the go to representation of mathematical expressions commonly found in high energy physics. For a while, high quality diagrams were only necessary for publications and due to the popularity of latex as a typesetting tool, the most commonly used tools to create these diagrams were packages written for the LaTeX environment.\footnote{The UK List of TeX Frequently Asked Questions provides four possibilities for drawing Feynman diagrams in LaTeX: feynman,  axodraw, feynmf, and feyn.} While this did allow for an extremely portable representation, the description of these drawings can be rather cryptic to someone who is not intimately familiar with the package. To combat this, Lukas Theussl developed a standalone application known as JaxoDraw which provides a graphical interface for constructing the diagrams and exporting it to various formats, including LaTeX. The major drawback to JaxoDraw is that it requires the user to download the application onto their computer and have a version of Java installed on their computer which is compatible with the one the application was compiled with.



\section{Layout}\label{sect:layout}

As shown in figure \ref{fig:mainLayout}, the main layout of the application is divided into three parts. The left most area is reserved for diagram wide settings and actions. These include changing the diagram title and grid size as well as exporting to various file types. The middle area is where the diagram is drawn and the right area is for element specific creation and configuration. 

Each of these areas has specific behaviors outlined below.

\subsection{Diagram Configuration and Tools}

The left-most area of the application is reserved for diagram wide settings such as the title and grid size, as well as for performing various actions on the grid as a whole. These actions fall into three categories: exporting the diagram to various file types\footnote{Currently only png, svg, and LaTeX are supported but there are more file types to come as well as the ability to export to a Mathematica package for further calculations.}, toggle the visibility of the anchors and grid, and navigating the undo stack which allows for the ability to revert the diagram to older versions. There is also a description of the various shortcuts implemented in the application as described in section \ref{sect:shortcuts}.

\subsection{The Canvas}

The middle section is the primary interaction area and displays the current diagram and its title. The user can add elements to the diagram in two ways: using the shortcuts described in section \ref{sect:shortcuts}, or by dragging and element from the toolbar on the right and dropping it on somewhere on the grid.

It is important to note that the user can hold the spacebar down while dragging in order to pan around the canvas and can scroll with his/her wheel in order to zoom in/out accordingly. 

\subsection{Item Palette / Element Configuration}

When no element is selected, the right most area shows the item palette which provides a way for the user to add various elements to the diagram by dragging them from the buttons on the right and dropping them on the canvas. When the element is placed, the application first looks for overlapping anchors and performs a merge if necessary, then it looks for overlapping lines, and finally shapes which would act as a constraint to the anchor. There is also a button to draw pre-defined patterns onto the diagram (overwritting anything that was previously present).

When an element is selected, the right most area shows the various configuration parameters for the selected element(s) as described in section \ref{sect:configuration}.\selectlanguage{english}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=0.70\columnwidth]{figures/mainLayout/mainLayout}
\caption{{\label{fig:mainLayout}%
}}
\end{center}
\end{figure}

\section{Drawing and Manipulating Elements}

Diagram elements fall into four major categories: propagators, anchors, shapes, and free text. While the user cannot create an anchor from the palette, the rest of these can be added to the diagram by dragging and dropping the corresponding item from the menu on the right. The user can also quickly build diagrams using the shortcuts described in section \ref{sect:shortcuts}.

Individual elements can be selected by clicking on them or encompassing them with a selection rectangle created by dragging on the canvas. If multiple items are encompassed by the rectangle then only configuration parameters that would normally apply to multiple items of each selected type in a given diagram are shown.

Individual elements by dragging them on the canvas. If there are many highlighted elements, one of which is being dragged, then the group will move as a whole. 

To deselect an element, click on the canvas.

\subsection{Shortcuts}\label{sect:shortcuts}

The shortcuts implemented in the web application are an attempt to  provide the optimal workflow for constructing diagrams. As of revision number 450, the implemented shortcut scheme is as follows:

\begin{itemize}
\item Create an anchor: alt + click
\item Create a propagator: alt + drag ; This be initiated on the canvas or from an anchor or line. The latter will cause a split in the line at the anchors location.
\item Move element: click and drag
\item Delete selected element: backspace or delete
\item Undo: ctrl + z
\item Redo: shift + ctrl + z
\item Pan: space + drag
\item Zoom: scroll wheel
\end{itemize}

\subsection{Element Configuration}\label{sect:configuration}

A summary of the valid configuration parameters for each element and style type can be found in table \ref{table:configuration}.\selectlanguage{english}
\begin{table}\label{table:configuration}
    \begin{tabular}{ccccc}
    Parameter Name & Value Type        & Valid Element                                          & Default & Description                                             \\ \hline
    color          & hexidecimal color & all                                                   & 000000  & The color of the element                                \\
    lineWidth      & float             & fermion, dashed, gluon, electroweak, sfermion, gluino & 1.4     & The width of the line in pts                            \\
    label          & string            & fermion, dashed,  gluon, electroweak, sfermion, gluino & *empty* & The label to show around the line                       \\
    labelDistance  & float             & fermion, dashed,  gluon, electroweak, sfermion, gluino & 30      & The distance from the label to the line in pots         \\
    labelLocation  & float             & fermion, dashed,  gluon, electroweak, sfermion, gluino & 0.5     & Where along the line the label should place itself      \\
    showArrow      & boolean           & fermion, dashed                                       & false   & Wether or not to show the arrows                        \\
    loopDirection  & 1 or -1           & gluon, electroweak                                    & 1       & Wether the period starts up or down                     \\
    endCaps    & boolean           & gluon                                                 & true    & Wether or not to draw end caps with the gluon           \\
    fixed          & boolean           & anchor                                                & false   & Wether or not the anchor should listen to move commands \\
    ~              & ~                 & ~                                                     & ~       & ~                                                       \\
    \end{tabular}
\end{table}


\subsection{Exporting}

Diagrams created through the web application are easily exportable to a wide variety of formats such as png, svg, pdf, and LaTeX. To export the diagram, the user clicks on one of the button in the left diagram tools area as described in section \ref{sect:layout}.

\subsubsection{Exporting to LaTeX}

To export to LaTeX, the user must download first download the latex drawing package and place it in the same directory as the latex file. Then, add the following line to the preamble of their document

\verb|\usepackage{feynman}|


The user can then place the code generated by the "export to LaTeX" button anywhere in their document.

It is important to note that one can easily convert from the web configurations to an equivalent element in the LaTeX drawing package. For example, propagators are of the form 

\verb|\<style>[<configuration>]{anchor1}{anchor2}|


where <configuration> is optional can be any key=value pair separated by commas and <anchor1> and <anchor2> are comma separated numbers indicating the position of the anchor in the designated unit system; ie:

\verb|\electroweak[color=0AFF91, label=\gamma]{0,0}{0,2}|



\section{Known Bugs/Fixes}

\begin{itemize}
\item In Linux, holding alt and dragging the cursor moves the entire browser rather than panning the canvas. This is the operating systems fault (nothing I can do except change the shortcut to something like ctrl). A temporary fix is to run the following command in the terminal: 

\verb|gsettings set org.gnome.desktop.wm.preferences mouse-button-modifier "<Super>"|

Which will tell Linux to pass the alt key down to the browser.

\item Groups do not check for merges after they are finished being moved somewhere
\end{itemize}

\section{To-Do's}

\begin{itemize}
\item Add elements to the diagram by selecting the kind of element to add and then single clicks anywhere (to accommodate mobile users)
\end{itemize}

\selectlanguage{english}
\FloatBarrier
\end{CJK}\end{document}

