DragPanels.tex

\documentclass[10pt, twoside]{article}   	% use "amsart" instead of "article" for AMSLaTeX format
\usepackage[innermargin=3in, top=0.75in]{geometry}                		% See geometry.pdf to learn the layout options. There are lots.
\usepackage[english]{babel}
\geometry{a4paper}                   		% ... or a4paper or a5paper or ... 
%\geometry{landscape}                		% Activate for for rotated page geometry
%\usepackage[parfill]{parskip}    		% Activate to begin paragraphs with an empty line rather than an indent
\usepackage{graphicx}				% Use pdf, png, jpg, or epsß with pdflatex; use eps in DVI mode
\usepackage{fontspec}
\setmainfont{Arial}
					
\linespread{1.1}			% TeX will automatically convert eps --> pdf in pdflatex		
\usepackage{amssymb}
\usepackage{eurosym}
\usepackage{colortbl}
\usepackage{titlesec}
\titleformat{\section}[block]%
  {\normalfont\scshape\filright}%
  {\makebox[2em][l]{\thesection}}%
  {1em}
  {}[\color{blue}{\titlerule}]
\titlespacing{\section}{-3em}{3.5ex plus 1ex minus .2ex}{2.3ex plus .2ex}
\titleformat{\subsection}[block]%
  {\color{blue}{\normalfont\scshape\filright}}%
  {\makebox[2em][l]{\color{blue}{\thesubsection}}}%
  {1em}
 {}
 


\title{DragPanels}
\author{Stephan J.C. Eggermont, Sensus}
\begin{document}
\setlength{\parindent}{0pt}
\maketitle
\begin{quote}
\em
DragPanels demonstrates how to make widgets that support click, double-click, drag-and-drop
and context menus in Morphic. This is shown with a color panel and an avatar panel.
Morphic is a powerful graphics environment, used in Self, Squeak, Cuis and Pharo.
\end{quote} 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{A color and avatar panel}
\begin{figure}[htb]
\begin{center}
\includegraphics[width=100pt]{CardColors.png}
\includegraphics[width=100pt]{Avatars.png}
\caption{The panels}
\label{1stIteration}
\end{center}
\end{figure}
The first iteration (Figure \ref{1stIteration})  shows two panel windows that
stay in front of other windows. They can be moved around  by dragging
the title bar part. The plus symbol can be clicked to add new elements
to the panel. Each element is a square of 30*30 pixels. An element can 
start a drag action where a copy of the element is dragged to a Morph that
wants to receive it. The default action for dragging a color is setting the color
of the Morph, for dragging an avatar it is setting the email.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{A Drag Well}
A DragWell is a small square widget. The default size is 30 px. It is derived from a 
BorderedMorph as a a border might be shown.

\begin{verbatim}
BorderedMorph subclass: #DragWell
    instanceVariableNames: 'panel over dropSelector clickSelector'
    classVariableNames: ''
    category: 'DragPanels'
\end{verbatim} 
The default border can be white and 1 px
\begin{verbatim}
DragWell>>defaultBorderColor
    ^Color white

DragWell>>defaultBorderWidth
    ^1

DragWell>>defaultBounds
    ^0@0 corner: 30@30
\end{verbatim}

\section{Copying a Morph}

A DragWell keeps a reference to the DragPanel it belongs to. This is stored 
in the panel instance variable. When Morphs are copied, they are by default copied very deep.
We expect all nested submorphs to be copied too. For some instance variables that is unwanted.
A link to a parent object is typically something that should be either shallow copied, so the reference 
remains to the same parent object, or it should be nilled or set to some default value. To make sure 
that that is what happens when copying a DragWell, there are two methods that potentially need 
to be created: veryDeepInner: and veryDeepFixupWith:. Here, we just want a shallow copy of 
all instance variables

\begin{verbatim}
DragWell>>veryDeepInner: deepCopier
        super veryDeepInner: deepCopier.
\end{verbatim}	

\section{Hovering}
The DragWell responds to mouse actions. To show that it does so, we want to give feedback
when the mouse is over the DragWell. 

\begin{verbatim}
DragWell>>mouseEnter: evt
        "Handle a mouseEnter event, meaning the mouse 
         just entered my bounds with no button pressed."

        super mouseEnter: evt.
        self over: true

DragWell>>mouseLeave: evt
        "Handle a mouseLeave event, meaning the mouse 
         just left my bounds with no button pressed."

        super mouseLeave: evt.
        self over: false
\end{verbatim}	

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{Loading the code}
The code can be found on www.smalltalkhub.com, in the repository StephanEggermont/DragPanels
Open the Monticello Browser. Add a new repository of type smalltalkhub.com. 
The owner is StephanEggermont, the project is DragPanels. User and password are only needed
when you want to commit changes to the repository. Open the repository and load the latest version of
DragPanels.


\end{document}