dialect "standard" import "dom" as dom import "random" as rand import "sys" as sys import "intrinsic" as intrinsic // ** Helpers *************************************************** type Foreign = Unknown def document: Foreign = dom.document def frameRate:Number = 30 // The frame rate of the drawing trait open { // ** Types ******************************************************************** type Component = Object & interface { // The super-type of all components in a GUI. element // The underlying DOM element of the component. width -> Number // The width of this component height -> Number // The height of this component. size -> Point // The size (width, height) of this component onMouseClickDo (f: MouseResponse) -> Done // Respond to a mouse click (press and release) in this component by executing f onMousePressDo (f: MouseResponse) -> Done // Respond to a mouse press in this component by executing f. onMouseReleaseDo (f: MouseResponse) -> Done // Respond to a mouse release in this component by executing f. onMouseMoveDo (f: MouseResponse) -> Done // Respond to a mouse move in this component by executing f. onMouseDragDo (f: MouseResponse) -> Done // Respond to a mouse drag (move during press) in this component by executing f. onMouseEnterDo (f: MouseResponse) -> Done // Respond to a mouse entering this component by executing f. onMouseExitDo (f: MouseResponse) -> Done // Respond to a mouse exiting this component by executing f. onKeyTypeDo (f: KeyResponse) -> Done // Respond to a key type (press and release) in this component by executing f. onKeyPressDo (f: KeyResponse) -> Done // Respond to a key press in this component by executing f. onKeyReleaseDo (f: KeyResponse) -> Done // Respond to a key release in this component by executing f. isFlexible -> Boolean // will this component fill any empty space in the // direction of its parent container. flexible := (value: Boolean) -> Done // Sets whether this component will fill empty space in the // direction of its parent container. } type Container = Component & interface { // The type of components that contain other components. size -> Number // The number of components inside this container. at (index: Number) -> Component // Retrieve the component at the given index. at (index: Number) put(component: Component) -> Done // Put the given component at the given index. append (component: Component) -> Done // Add a component to the end of the container. prepend (component: Component) -> Done // Add a component to the start of the container. do (f: Procedure1⟦Component⟧) -> Done // Perform the action f for every component inside this container. arrangeHorizontal -> Done // Arrange the contents of this container horizontally. // Components that exceed the width of the container will wrap around. arrangeVertical -> Done // Arrange the contents of this container vertically. // Components that exceed the height of the container will wrap around. } type Application = Container & interface { // A standalone window that contains other components. windowTitle -> String // The title of this application window. windowTitle:= (value: String) -> Done // Sets the title of the application window. startApplication -> Done // Makes this window visible, with active listeners for mouse actions stopApplication -> Done // Close this window } type Graphic = Object & interface { // an object that can be drawn on a canvas and moved around. location -> Point // Tte location of this object with respect to the top-left corner of the screen. x -> Number // the horizontal offset of this object from the left edge of the screen. y -> Number // Tte vertical offset of this object from the top of the screen. addToCanvas (canvas: DrawingCanvas) -> Done // adds this object to canvas. removeFromCanvas -> Done // removes this object from its canvas. isVisible -> Boolean // whether this object is currently visible on the canvas. visible:= (value: Boolean) -> Done // sets whether this object should be visible on the canvas. moveTo(newLocation: Point) -> Done // moves this object to newLocation on the canvas. moveBy(dx: Number, dy: Number) -> Done // moves this object on the canvas by dx horizontally, and dy vertically. contains(pt: Point) -> Boolean // is pt is inside this object? overlaps(graphic: Graphic2D) -> Boolean // is any point in graphic also inside this object? color := (c: Color)->Done // sets the color of this object to c color -> Color // answers the color of this object sendForward -> Done // sends this object up one layer on the screen sendBackward -> Done // sends this object down one layer on the screen sendToFront -> Done // sends this object to the top layer on the screen sendToBack -> Done // sends this object to the bottom layer on the screen } type DrawingCanvas = Component & interface { // a canvas that can hold Graphic objects startDrawing -> Done // redraws the canvas and its contents regularly as needed add (d: Graphic)->Done // adds d to canvas remove (d: Graphic)->Done // removes d from canvas notifyRedraw -> Done // informs me that I need to be redrawn clear -> Done // clears the canvas sendToFront (d: Graphic) -> Done // sends d to top layer of graphics sendToBack (d: Graphic) -> Done // sends d to bottom layer of graphics sendForward (d: Graphic) -> Done // sends d up one layer in graphics sendBackward (d: Graphic) -> Done // sends d down one layer in graphics } type GraphicApplication = Application & interface { // Type of an object that runs a graphical application that draws // on a canvas displayed in a window, and responds to mouse actions canvas -> DrawingCanvas // canvas holds graphic objects on screen onMouseClick (m: Point) -> Done // Respond to a mouse click (press and release) in the canvas at m onMousePress (m: Point) -> Done // Respond to a mouse press in the canvas at m onMouseRelease (m: Point) -> Done // Respond to a mouse release in the canvas at m onMouseMove (m: Point) -> Done // Respond to a mouse move in the canvas at tm onMouseDrag (m: Point) -> Done // Respond to a mouse drag (move during press) in the canvas at m onMouseEnter (m: Point) -> Done // Respond to a mouse entering the canvas at m onMouseExit (m: Point) -> Done // Respond to a mouse exiting the canvas at m startGraphics -> Done // makes this object's window visisble, along with its contents, and // prepares the window to handle mouse events } type Graphic2D = Graphic & interface { // Two-dimensional objects that have a size, and can be resized width -> Number // dimensions of this object height -> Number size -> Point size := (dimensions: Point) -> Done // change dimensions of this object width := (newWidth: Number) -> Done height := (newHeight: Number) -> Done } type Line = Graphic & interface { // One-dimensional objects start -> Point // start of this line end -> Point // end of this line start := (start': Point) -> Done // sets start of this line to start' end := (end': Point) -> Done // sets end of this line to end' setEndPoints (start': Point, end': Point) -> Done // sets both start and end } type Text = Graphic & interface { // Text that can be drawn on a canvas. contents -> String // return my contents contents := (s: String) -> Done // sets my contents to s width -> Number // returns the width of my content (currently inaccurate) fontSize -> Number // return size of the font used to display my contents fontSize := (size: Number) -> Done // sets the size of the font used to display my contents } type TextBox = Component & interface { // Component of window that can hold text contents -> String // The text contents of this box. contents:= (value: String) -> Done } type Labeled = Component & interface { // Component of window that holds text label -> String // The label name. label:= (value: String) -> Done } type Button = Labeled // type of button component in window type Input = Component & interface { // Component taking input and responding to an event onFocusDo(f: Response) -> Done // Respond to this input gaining focus with the given event. onBlurDo(f: Response) -> Done // Respond to this input losing focus with the given event. onChangeDo(f: Response) -> Done // Respond to this input having its value changed. } type TextField = Input & interface { // Component taking user's text input text -> String // The contents of the field text := (value: String) -> Done // changes text } type NumberField = Input & interface { // Component taking user's numeric input number -> Number // The contents of the field. number := (value: Number) -> Done // Changes number } type Choice = Input & interface { // Pop-up menus selected -> String // The currently selected option selected := (value: String) -> Done // Changes selected } // ** Colors ******************************************************************* type Color = interface { red -> Number // The red component of the color. green -> Number // The green component of the color. blue -> Number // The blue component of the color. } type ColorFactory = interface { r (r': Number) g (g': Number) b (b': Number) -> Color random -> Color white -> Color black -> Color green -> Color red -> Color gray -> Color blue -> Color cyan -> Color magenta -> Color yellow -> Color neutral -> Color } once method ColorOutOfRange -> ExceptionKind { // the Exception that will be thrown if the r, b, or g components // are not between 0 and 255 (inclusive) self.ProgrammingError.refine "ColorOutOfRange" } once class colorGen -> ColorFactory { class r (r': Number) g (g': Number) b (b': Number) -> Color { use equality // Creates a color with rgb coordinates r', g', and b' if ((r' < 0) || (r' > 255)) then { ColorOutOfRange.raise "red index {r'} out of bounds 0..255" } if ((g' < 0) || (g' > 255)) then { ColorOutOfRange.raise "green index {g'} out of bounds 0..255" } if ((b' < 0) || (b' > 255)) then { ColorOutOfRange.raise "blue index {b'} out of bounds 0..255" } def red:Number is public = r'.truncated def green:Number is public = g'.truncated def blue:Number is public = b'.truncated method == (c: Color) -> Boolean { (red == c.red) && (green == c.green) && (blue == c.blue) } method hash -> Number { hashCombine(hashCombine(red.hash, green.hash), blue.hash) } method asString -> String { "color w/ rgb({red}, {green}, {blue})" } } method random -> Color { // return a random color. r (rand.integerIn 0 to 255) g (rand.integerIn 0 to 255) b (rand.integerIn 0 to 255) } def white:Color is public = r 255 g 255 b 255 def black:Color is public = r 0 g 0 b 0 def green:Color is public = r 0 g 255 b 0 def red:Color is public = r 255 g 0 b 0 def gray:Color is public = r 60 g 60 b 60 def blue:Color is public = r 0 g 0 b 255 def cyan:Color is public = r 0 g 255 b 255 def magenta:Color is public = r 255 g 0 b 255 def yellow:Color is public = r 255 g 255 b 0 def neutral:Color is public = r 220 g 220 b 220 } // ** Events ******************************************************************* type Event = interface { // Generic event containing source of the event. source -> Component } type MouseEvent = Event & interface { // Mouse event containing mouse location when event generated at -> Point } type KeyEvent = Event & interface { // Type of an event associated with a key press code -> Number //character -> String //modifiers -> Modifiers } type Response = Procedure1⟦Event⟧ // an action taking an Event as argument type MouseResponse = Procedure1⟦MouseEvent⟧ // action taking a MouseEvent as argument type KeyResponse = Procedure1⟦KeyEvent⟧ // an action taking a KeyEvent as argument class eventSource (source':Component) -> Event { // Creates an event generated by source' def source: Component is public = source' method asString -> String { "Event on {source}" } } class mouseEventSource (source':Component) event (event':Foreign) -> MouseEvent { // Creates a mouseEvent with the mouse location from event' inherit eventSource (source') def at: Point is public = (event'.pageX - source.element.offsetLeft) @ (event'.pageY - source.element.offsetTop) // String representation of the mouse event method asString -> String { "Mouse event on {source} at {at}" } } class keyEventSource (source':Component) event(event':Foreign) -> KeyEvent { // represents the keyboard event' from source' inherit eventSource (source') method code → Number { event'.which } method character → String { event'.key } method shiftKey → Boolean { event'.shiftKey } method ctrlKey → Boolean { event'.ctrlKey } method altKey → Boolean { event'.altKey } method metaKey → Boolean { event'.metaKey } method asString → String { "an event on {source} for key-code {code}" } } // ** Internal factories ******************************************************* type ComponentFactory⟦T where T <: Component⟧ = interface { fromElement (element) -> T // Build a component around the existing element. ofElementType (tagName: String) -> T // Build a component around a new element with the given tag name. } once method maxClickTime -> Number { 200 } // The maximum number of milliseconds for which the mouse-button can // be held down in order for the event to be registered as a click. class componentFromElement (element') -> Component { def element is public = element' method width -> Number { // width of component element.width } method height -> Number { // height of component element.height } method size -> Point { // dimensions of component element.width @ element.height } method on(event': String) do(f: Procedure1⟦Foreign⟧) -> Done is confidential { // associates action f with event' on this component element.addEventListener(event', f) done } method on (kind: String) withPointDo (f:MouseResponse) -> Done is confidential { // associates response f with mouse event of kind on (kind) do { event' -> f.apply (mouseEventSource (self) event (event')) } } method onMouseClickDo (f:MouseResponse) -> Done { // associates action f with mouse click event var lastDown: Foreign on "mousedown" do {event': Foreign -> lastDown:= event'.timeStamp } on "click" do {event': Foreign -> if ((event'.timeStamp - lastDown) <= maxClickTime) then { f.apply (mouseEventSource(self) event(event')) } } } method onMousePressDo (f: MouseResponse) -> Done { // Associates action f with any mouse press event on "mousedown" withPointDo (f) } method onMouseReleaseDo (f: MouseResponse) -> Done { // Associates action f with any mouse release event on "mouseup" withPointDo (f) } method onMouseMoveDo (f: MouseResponse) -> Done { // Associates action f with any mouse move event on "mousemove" do { event' -> if (if (dom.doesObject (event') haveProperty ("buttons")) then { event'.buttons == 0 } else { event'.which == 0 }) then { f.apply(mouseEventSource (self) event (event')) } } } method onMouseDragDo (f: MouseResponse) -> Done { // Associate action f with mouse drag event on "mousemove" do { event' -> if (if (dom.doesObject (event') haveProperty ("buttons")) then { event'.buttons == 1 } else { event'.which == 1 }) then { f.apply(mouseEventSource (self) event(event')) } } } method onMouseEnterDo (f: MouseResponse) -> Done { // Associate action f with mouse enter (of window) event on "mouseover" do { event' -> def from = event'.relatedTarget if ((dom.noObject == from) || {!element.contains(from)}) then { f.apply (mouseEventSource (self) event (event')) } } } method onMouseExitDo (f: MouseResponse) -> Done { // Associate action f with mouse exit event on "mouseout" do {event' -> def to = event'.relatedTarget if ((dom.noObject == to) || {!element.contains (to)}) then { f.apply (mouseEventSource (self) event (event')) } } } method on (kind: String) // Associate action f with key event of kind withKeyDo (f: KeyResponse) -> Done is confidential { on (kind) do {event' -> f.apply (keyEventSource (self) event (event')) } } method onKeyPressDo(f: KeyResponse) -> Done { // Associate action f with key press event on "keydown" withKeyDo (f) } method onKeyReleaseDo (f: KeyResponse) -> Done { // Associate action f with key release event on "keyup" withKeyDo (f) } method onKeyTypeDo (f: KeyResponse) -> Done { // Associate action f with key type (press & release) event on "keypress" withKeyDo (f) } method isFlexible -> Boolean { // Does this component have flexible size? element.style.flexGrow.asNumber > 0 } method flexible:= (value: Boolean) -> Done { // Sets whether I am flexibile element.style.flexGrow := if (value) then { 1 } else { 0 } } method asString -> String { "a component" } } class componentOfElementType (tagName:String) -> Component { // Creates a component with type tagName inherit componentFromElement (document.createElement (tagName)) } class containerOfElementType (tagName: String) -> Component { inherit containerFromElement (document.createElement (tagName)) } class containerFromElement (element') -> Container { // Create a and return new Container from element' inherit componentFromElement (element') def children = list [] method size -> Number { // answers the number of children of this container children.size } method isEmpty -> Boolean { // is this container empty? size == 0 } method at (index: Number) -> Component { // returns my subcomponent at position index children.at (index) // children.at will check bounds } method at (index: Number) put (aComponent: Component) -> Done { // replaces subcomponent at index by aComponent if ((index < 1) || (index > (size + 1))) then { BoundsError.raise "Can't put component at {index} because I have only {size} elements" } if (index == (size + 1)) then { element.appendChild (aComponent.element) } else { element.insertBefore (aComponent.element, children.at (index).element) } children.at (index) put (aComponent) done } method append (aComponent: Component) -> Done { // adds aComponent after all my existing components element.appendChild (aComponent.element) children.addLast (aComponent) done } method prepend (aComponent: Component) -> Done { // adds aComponent before all my existing components if (isEmpty) then { element.appendChild (aComponent.element) } else { element.insertBefore (aComponent.element, element.firstChild) } children.addFirst (aComponent) done } method do (f: Procedure1⟦Component⟧) -> Done { // apply f to all my children children.do {aComponent: Component -> f.apply(aComponent) } } method fold⟦T⟧(f: Function2⟦T, Component, T⟧) startingWith (initial: T) -> T { // answers the fold of the binary function f over all my children. // answers initial if I have no children. var value:T := initial children.do {aComponent: Component -> value:= f.apply (value, aComponent) } value } method flex -> Done is confidential { // makes me more flexible element.style.display := "inline-flex" element.style.justifyContent := "center" element.style.flexFlow := "row wrap" } method arrangeHorizontal -> Done { // arranges my elements in rows flex element.style.flexDirection:= "row" } method arrangeVertical -> Done { // Arranges my elements in columns flex element.style.flexDirection := "column" } method asString -> String { // answers a description of me "container: with {size} children" } } class emptyContainer -> Container { // creates and returns an empty container ready to add in row inherit containerOfElementType "div" self.arrangeHorizontal } class containerSize (width':Number, height':Number) -> Container { // creates and returns an empty container with width' and height' inherit emptyContainer self.element.style.width:= "{width'}px" self.element.style.height:= "{height'}px" self.element.style.overflow:= "auto" } class inputFromElement (element') -> Input { // A factory building components that take input inherit componentFromElement(element') method onFocusDo (f: Response) -> Done { // Respond with action f to this input gaining focus with the given event. element.addEventListener ("focus", { _ -> f.apply(eventSource(self)) }) } method onBlurDo (f: Response) -> Done { // Respond with action f to this input losing focus with the given event. element.addEventListener("blur", { _ -> f.apply(eventSource(self)) }) } method onChangeDo (f: Response) -> Done { // Respond with action f to this input having its value changed. element.addEventListener ("change", { _ -> f.apply(eventSource(self)) }) } method asString -> String { // return description of component "an input" } } class inputOfElementType(elementType: String) -> Input { // Create component of type elementType to handle input inherit inputFromElement (document.createElement (elementType)) } class inputOfType (inputType: String) -> Input { // Create component of type inputType to handle input inherit inputOfElementType("input") self.element.setAttribute ("type", inputType) } class labeledWidgetFromElement (element') -> Labeled { // create labeled input from element' inherit inputFromElement (element') var labeler:Foreign // debug -- work around for selectBox method labelElement -> Foreign is confidential { self.element } method label -> String { // answers the Text of the label labelElement.textContent } method label:= (value: String) -> Done { // sets the label to value labelElement.textContent:= value done } method asString -> String { // a human-readable description of this object "an input labeled: {label}" } } class labeledWidgetOfElementType (elementType:String) -> Labeled { // creates labeled input a new document of elementType inherit labeledWidgetFromElement (document.createElement (elementType)) } class labeledWidgetOfElementType (elementType: String) labeled(newLabel: String) -> Labeled { // Create labeled element from elementType with newLabel inherit labeledWidgetOfElementType(elementType) // method to help get initialization code right in choice elements method init -> Done is confidential {} init self.label := newLabel } class fieldOfType(inputType: String) labeled(label': String) -> Input { // Create input field of type inputType showing label' inherit inputOfType(inputType) // label on the field method label -> String { self.element.placeholder } // reset the label on the field method label:= (value: String) -> Done { self.element.placeholder:= value done } // String representing the labeled field (including label) method asString -> String { "a field labeled: {label}" } label:= label' } // ** External factories ******************************************************* class eventLogKind(kind': String) response(response': Response) is confidential { // Log entry to keep track of response to an event def kind: String is public = kind' def response: Response is public = response' } class applicationTitle(initialTitle: String) size (dimensions': Point) -> Application { // returns an Application with window with initialTitle and dimensions' inherit containerFromElement(document.createDocumentFragment) alias containerElement = element alias containerArrangeHorizontal = arrangeHorizontal alias containerArrangeVertical = arrangeVertical var isOpened: Boolean:= false // whether window is visible var theWindow: Foreign var theTitle: String:= initialTitle var theWidth: Number:= dimensions'.x var theHeight: Number:= dimensions'.y def events = list [] method element -> Foreign { if (isOpened) then { theWindow.document.body } else { containerElement } } // Whether new items are added to window from left to right or top to bottom var isHorizontal: Boolean:= true // Arrange the contents of this container along the horizontal axis. // Components that exceed the width of the container will wrap around. method arrangeHorizontal -> Done { if (isOpened) then { containerArrangeHorizontal } else { isHorizontal:= true } } // Arrange the contents of this container along the vertical axis. // Components which exceed the height of the container will wrap around. method arrangeVertical -> Done { if (isOpened) then { containerArrangeVertical } else { isHorizontal:= false } } // Associate response with event kind method on (kind: String) do (response: Procedure1⟦Event⟧) -> Done is confidential { if (isOpened) then { theWindow.addEventListener (kind, response) } else { events.addLast (eventLogKind (kind) response (response)) } } // The title of the application window. method windowTitle -> String { if (isOpened) then { theWindow.title } else { theTitle } } // Set the title of the application window. method windowTitle:= (value: String) -> Done { if (isOpened) then { theWindow.title:= value } else { theTitle:= value } } // The current width of the window method width -> Number { if (isOpened) then { theWindow.width } else { theWidth } } // the current height of the window method height -> Number { if (isOpened) then { theWindow.height } else { theHeight } } // The enter/exit events need to be redefined to account for the body element // not necessarily accounting for all of the space in the window. If we only // consider cases where relatedTarget is null, then it represents only enter // and exit of the whole window. // Respond to a mouse entering this window with the response f. method onMouseEnterDo(f: MouseResponse) -> Done { on "mouseover" do { event' -> def from = event'.relatedTarget if (dom.noObject == from) then { f.apply(mouseEventSource(self) event(event')) } } } // Respond to a mouse exiting this window with the response f. method onMouseExitDo(f: MouseResponse) -> Done { on "mouseout" do { event' -> def to = event'.relatedTarget if (dom.noObject == to) then { f.apply(mouseEventSource(self) event(event')) } } } // Respond to mouse action of kind with response bl method onMouse (kind: String) do (bl: MouseResponse) -> Done is confidential { theWindow.addEventListener(kind, {evt -> bl.apply(evt.pageX @ evt.pageY) }) } // Create window with listeners for mouse enter and exit actions method startApplication -> Done { if (!isOpened) then { theWindow:= dom.window.open("", "", "width={theWidth},height={theHeight}") if (intrinsic.inBrowser && (dom.noObject == theWindow)) then { print "Failed to open the graphics window.\nIs your browser blocking pop-ups?" sys.exit 1 } theWindow.document.title:= theTitle theWindow.document.body.appendChild(element) if (dom.doesObject(dom.window) haveProperty("graceRegisterWindow")) then { dom.window.graceRegisterWindow(theWindow) } isOpened:= true element.style.width:= "100%" element.style.margin:= "0px" if (isHorizontal) then { arrangeHorizontal } else { arrangeVertical } events.do { anEvent -> on(anEvent.kind) do(anEvent.response) } } } // Close the window method stopApplication -> Done { if (isOpened) then { theWindow.close } } // Return string representing the application method asString -> String { "application titled {windowTitle}" } } class drawingCanvasSize (dimensions': Point) -> DrawingCanvas { // class representing a window panel that manages graphics on screen // The window containing the canvas has dimensions width' x height' inherit componentFromElement(document.createElement("canvas")) element.width:= dimensions'.x element.height:= dimensions'.y element.style.alignSelf:= "center" def theContext: Foreign = element.getContext("2d") theContext.lineWidth:= 2 // Current width of the canvas method width -> Number { element.width } // Current height of the canvas method height -> Number { element.height } method size -> Point {element.width @ element.height} var theGraphics := list [ ] // all the objects on this canvas (hidden or not) var redraw: Boolean:= false method notifyRedraw -> Done { // tels this canvas that it needs to be redrawn redraw:= true } // redraws the canvas and its contents regularly as needed method startDrawing -> Done { element.ownerDocument.defaultView.setInterval ({ if (redraw) then { dom.draw (theContext, theGraphics, width, height) } }, 1000 / frameRate) } // remove all items from canvas method clear -> Done { theGraphics.clear notifyRedraw } // Add new item d to canvas method add (d:Graphic) -> Done { theGraphics.addLast(d) notifyRedraw } // remove aGraphic from items on canvas method remove (aGraphic: Graphic) -> Done { if (theGraphics.contains(aGraphic)) then { theGraphics.remove (aGraphic) notifyRedraw } } // send item d to front/top layer of canvas method sendToFront (aGraphic: Graphic) -> Done { theGraphics.remove (aGraphic) theGraphics.addLast (aGraphic) notifyRedraw } // send item d to back/bottom layer of canvas method sendToBack (aGraphic: Graphic) -> Done { theGraphics.remove (aGraphic) theGraphics.addFirst (aGraphic) notifyRedraw } // send item d one layer higher on canvas method sendForward (aGraphic: Graphic) -> Done { def theIndex = theGraphics.indexOf (aGraphic) if (theIndex != theGraphics.size) then { theGraphics.remove (aGraphic) theGraphics.at (theIndex + 1) add (aGraphic) notifyRedraw } } // send item d one layer lower on canvas method sendBackward (aGraphic: Graphic)->Done { def theIndex = theGraphics.indexOf(aGraphic) if (theIndex != 1) then { theGraphics.remove (aGraphic) theGraphics.at (theIndex - 1) add (aGraphic) notifyRedraw } } // debug method to print all objects on canvas method printObjects -> Done { theGraphics.do { aGraphic -> print (aGraphic) } } // string representation of canvas method asString -> String { "canvas: with {theGraphics.size} objects" } } class graphicApplicationSize (theDimension':Point) -> GraphicApplication { // Create window with dimensions theDimension', with canvas // installed, and that responds to mouse actions inherit applicationTitle ("Simple graphics") size (theDimension') def canvas: DrawingCanvas is public = drawingCanvasSize (theDimension') children.addLast (canvas) def before: Container = emptyContainer def after: Container = emptyContainer arrangeVertical element.appendChild (before.element) element.appendChild (canvas.element) element.appendChild (after.element) // Add a component to the top of the window. method prepend (aComponent: Component) -> Done { before.prepend (aComponent) children.addFirst (aComponent) } // Add a component to the bottom of the window. method append (aComponent: Component) -> Done { after.append (aComponent) children.addLast (aComponent) } // The following methods are defind to be called in response to mouse // actions. They will be overridden in subclasses to provide appropriate // behavior, as now they do nothing! // Method to handle mouse click at pt method onMouseClick (pt: Point) -> Done {} // Method to handle mouse press at pt method onMousePress (pt: Point) -> Done {} // Method to handle mouse release at pt method onMouseRelease (pt: Point) -> Done {} // Method to handle mouse move at pt method onMouseMove (pt: Point) -> Done {} // Method to handle mouse drag at pt method onMouseDrag (pt: Point) -> Done {} // Method to handle mouse enter of canvas at pt method onMouseEnter (pt: Point) -> Done {} // Method to handle mouse exit of canvas at pt method onMouseExit (pt: Point) -> Done {} // Create window and its contents as well as prepare the // window to handle mouse events method startGraphics -> Done { def parentElement = document.createElement ("div") parentElement.className := "height-calculator" parentElement.style.width := "{theDimension'.x}px" parentElement.appendChild (element.cloneNode (true)) document.body.appendChild (parentElement) theHeight:= parentElement.offsetHeight document.body.removeChild (parentElement) startApplication canvas.startDrawing theWindow.document.documentElement.style.overflow := "hidden" canvas.onMouseClickDo { event' -> onMouseClick (event'.at) } canvas.onMousePressDo { event' -> onMousePress (event'.at) } canvas.onMouseReleaseDo { event' -> onMouseRelease (event'.at) } canvas.onMouseMoveDo { event' -> onMouseMove (event'.at) } canvas.onMouseDragDo { event' -> onMouseDrag (event'.at) } canvas.onMouseEnterDo { event' -> onMouseEnter (event'.at) } canvas.onMouseExitDo { event' -> onMouseExit (event'.at) } } method asString -> String { "graphic application of {canvas}" } } class drawableAt (location':Point) on (canvas':DrawingCanvas) -> Graphic { // abstract superclass for drawable objects (of type Graphic) use identityEquality // location of object on screen var location: Point is readable:= location' // x coordinate of object method x -> Number { location.x } // y coordinate of object method y -> Number { location.y } var canvas: DrawingCanvas := canvas' // The canvas this object is part of var theColor: Color:= colorGen.black // the color of this object method color -> Color {theColor} method color:= (newColor: Color) -> Done { theColor:= newColor notifyRedraw } var theFrameColor: Color := colorGen.black method frameColor -> Color { theFrameColor } method frameColor := (newfColor:Color) -> Done { theFrameColor:= newfColor notifyRedraw } // Determine if object is shown on screen var isVisible: Boolean is readable := true // Set whether object is visible or hidden method visible := (b:Boolean) -> Done { isVisible := b notifyRedraw } // Add this object to canvas c method addToCanvas (c: DrawingCanvas) -> Done { removeFromCanvas canvas := c c.add (self) notifyRedraw } // Remove this object from its canvas method removeFromCanvas -> Done { canvas.remove (self) notifyRedraw } // move this object to newLocn method moveTo (newLocn: Point) -> Done{ location := newLocn notifyRedraw } // move this object dx to the right and dy down method moveBy (dx: Number, dy: Number) -> Done { location := location + (dx @ dy) notifyRedraw } // Determine whether this object contains the point at locn method contains (locn: Point) -> Boolean is abstract // Determine whether this object overlaps otherObject method overlaps (otherObject: Graphic2D) -> Boolean is abstract // Send this object up one layer on the screen method sendForward -> Done { canvas.sendForward (self) } // send this object down one layer on the screen method sendBackward -> Done { canvas.sendBackward (self) } // send this object to the top layer on the screen method sendToFront -> Done { canvas.sendToFront (self) } // send this object to the bottom layer on the screen method sendToBack -> Done { canvas.sendToBack (self) } // Tell the canvas that the screen needs to be repainted method notifyRedraw -> Done is confidential { canvas.notifyRedraw } // Draw this object on the applet !! confidential method draw (ctx: Foreign) -> Done is abstract // Return a string representation of the object method asString -> String { "Graphic object" } } class drawable2DAt (location': Point) size (dimension': Point) on (canvas': DrawingCanvas) -> Graphic { // abstract class for two-dimensional objects inherit drawableAt (location') on (canvas') var theWidth:Number := dimension'.x method width -> Number {theWidth} // Width of the object var theHeight:Number := dimension'.y method height -> Number {theHeight} // Height of the object method size -> Point {theWidth @ theHeight} // whether the object contains locn // Only checks whether is in the bounding box of the object!! method contains(locn:Point)->Boolean{ (x <= locn.x) && (locn.x <= (x + width)) && (y <= locn.y) && (locn.y <= (y + height)) } // Whether bounding box of object overlaps bounding box of other method overlaps (other:Graphic2D) -> Boolean { def itemleft = other.x def itemright = other.x + other.width def itemtop = other.y def itembottom = other.y + other.height def disjoint: Boolean = ((x + width) < itemleft) || (itemright < x) || ((y + height) < itemtop) || (itembottom < y) !disjoint } // Return string representation of the object method asString -> String { "drawable2D object at ({x},{y}) "++ "with height {height}, width {width}, and color {self.color}" } } class resizable2DAt (location': Point) size (dimensions': Point) on (canvas': DrawingCanvas) -> Graphic2D { // abstract class for 2 dimensional objects that can be resized. inherit drawable2DAt (location') size (dimensions') on (canvas') // Reset width of object to w method width:= (w: Number) -> Done { theWidth := w notifyRedraw } // Reset height of object to h method height := (h: Number) -> Done { theHeight := h notifyRedraw } // Reset size of object to w x h method size:= (dimensions: Point) -> Done { width := dimensions.x height := dimensions.y } // Return string representation of object method asString -> String { "Resizable2D object at ({x},{y}) "++ "with height {height}, width {width}, and color {self.color}" } } class framedRectAt (location': Point) size (dimensions': Point) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate framed rectangle at (x',y') with size dimensions' // created on canvas' inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') // Draw the framed rectangle on the canvas method draw (ctx: Foreign) -> Done { def col = self.color ctx.save ctx.strokeStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.strokeRect (x, y, width, height) ctx.restore } // Return description of framed rectangle method asString -> String { "FramedRect at ({x},{y}) "++ "with height {height}, width {width}, and color {self.color}" } } class filledRectAt (location': Point) size (dimensions': Point) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate filled rectangle at (x', y') with size width' x height' // created on canvas' inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') // Draw filled rectangle on the canvas method draw (ctx: Foreign) -> Done { def col = self.color ctx.save ctx.fillStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.fillRect (x, y, width, height) ctx.restore } // Return string representation of the filled rectangle method asString -> String { "FilledRect at ({x}, {y}) " ++ "with height {height}, width {width}, and color {self.color}" } } class framedOvalAt (location': Point) size (dimensions': Point) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate framed oval at (x',y') with size width' x height' // created on canvas' inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') // draw framed oval on canvas method draw (ctx: Foreign) -> Done { def col = self.color ctx.beginPath ctx.save ctx.translate (x + width / 2, y + height / 2) ctx.scale (width / 2, height / 2) ctx.arc (0, 0, 1, 0, 2 * pi) ctx.restore ctx.save ctx.strokeStyle := "rgb({col.red}, {col.green}, {col.blue})" ctx.stroke ctx.restore ctx.closePath } // string representation of oval method asString -> String { "FramedOval at ({x},{y}) "++ "with height {height}, width {width}, and color {self.color}" } } class filledOvalAt (location': Point) size (dimensions': Point) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate filled oval at (x',y') with size width' x height' // created on canvas' inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') method draw (ctx: Foreign) -> Done { // Draw filled oval on canvas def col = self.color ctx.beginPath ctx.save ctx.translate (x + width / 2, y + height / 2) ctx.scale (width / 2, height / 2) ctx.arc (0, 0, 1, 0, 2 * pi) ctx.restore ctx.save ctx.fillStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.fill ctx.restore ctx.closePath } method asString -> String { // string representation of oval "FilledOval at ({x},{y}) " ++ "with height {height}, width {width}, and color {self.color}" } } class framedArcAt (location': Point) size (dimensions': Point) from (startAngle: Number) to (endAngle: Number) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate framed arc at (x',y') with size width' x height' // from startAngle radians to endAngle radians created on canvas' // Note that angle 0 is in direction of positive x axis and increases in // angles go clockwise. inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') method draw (ctx: Foreign) -> Done { // Draw framed arc def col = self.color ctx.beginPath ctx.save ctx.translate (x + width / 2, y + height / 2) ctx.scale (width / 2, height / 2) if (startAngle <= endAngle) then { ctx.arc (0, 0, 1, (startAngle * pi) / 180, (endAngle * pi) / 180) } else { ctx.arc (0, 0, 1, (endAngle * pi) / 180, (startAngle * pi) / 180) } ctx.restore ctx.save ctx.strokeStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.stroke ctx.restore ctx.closePath } method asString -> String { // String representation of framed arc "FramedArc at ({x},{y}) " ++ "with height {height}, width {width}, and color {self.color} going " ++ "from {startAngle} degrees to {endAngle} degrees" } } class filledArcAt (location': Point) size (dimensions': Point) from (startAngle: Number) to (endAngle: Number) on (canvas': DrawingCanvas) -> Graphic2D { // class to generate filled arc at (x',y') with size width' x height' // from startAngle degrees to endAngle degrees created on canvas' // Note that angle 0 is in direction of positive x axis and increases in // angles go clockwise. inherit resizable2DAt (location') size (dimensions') on (canvas') addToCanvas (canvas') method draw (ctx: Foreign) -> Done { // Draw filled arc on canvas def col = self.color ctx.beginPath ctx.save ctx.translate (x + width / 2, y + height / 2) ctx.scale (width / 2, height / 2) if (startAngle <= endAngle) then { ctx.arc (0, 0, 1, (startAngle * pi) / 180, (endAngle * pi) / 180) } else { ctx.arc (0, 0, 1, (endAngle * pi) / 180, (startAngle * pi) / 180) } ctx.restore ctx.save ctx.fillStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.fill ctx.save ctx.closePath } method asString -> String { // String representation of filled arc "FilledArc at ({x},{y}) " ++ "with height {height}, width {width}, and color {self.color} going " ++ "from {startAngle} degrees to {endAngle} degrees" } } class drawableImageAt (location': Point) size (dimensions': Point) url (url: String) on (canvas': DrawingCanvas) -> Graphic2D { // Creates image from url and places on // canvas' at location' with size width' x height' inherit resizable2DAt (location') size (dimensions') on (canvas') var theImage:= document.createElement("img") theImage.src:= url theImage.addEventListener("load", { _ -> addToCanvas(canvas') }) // draw the image method draw(ctx: Foreign) -> Done { ctx.drawImage(theImage, x, y, width, height) } // Return string representation of image method asString -> String { "DrawableImage at ({x},{y}) "++ "with height {height}, width {width}, "++ "from url {url}" } } type LineFactory = interface { // Type of factory for creating line segments from (start:Point) to (end:Point) on (canvas: DrawingCanvas) -> Line // Creates a line from start to end on canvas from (pt:Point) length (len:Number) direction (radians:Number) on (canvas:DrawingCanvas) -> Line // Creates a line from pt, of length len, in direction radians, on canvas } class lineFrom (start': Point) to (end': Point) on (canvas': DrawingCanvas) -> Line { // Create a line from start' to end' on canvas' inherit drawableAt (start') on (canvas') var theEnd: Point:= end' method start -> Point { // position of start of line location } method end -> Point { // position of end of line theEnd } addToCanvas (canvas') method start := (newStart: Point) -> Done { // set start of line location := newStart notifyRedraw } method end := (newEnd: Point) -> Done { // Set end of line theEnd := newEnd notifyRedraw } method setEndPoints (newStart: Point,newEnd: Point) -> Done { // Set start and end of line start := newStart end := newEnd } method draw (ctx: Foreign) -> Done { // Draw the line on the canvas def col = self.color ctx.save ctx.strokeStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.beginPath ctx.moveTo (location.x, location.y) ctx.lineTo (theEnd.x, theEnd.y) ctx.stroke ctx.restore } method moveBy (dx: Number, dy: Number) -> Done { // Moves the line by (dx, dy) location := location + (dx @ dy) //.translate(dx,dy) theEnd:= theEnd + (dx @ dy) //.translate(dx,dy) notifyRedraw } method moveTo (newLocn:Point) -> Done { // Moves this object to newLocn def dx: Number = (newLocn - location).x def dy: Number = (newLocn - location).y location := newLocn theEnd := theEnd + (dx @ dy) notifyRedraw } method dist2 (v: Point, w: Point) -> Number is confidential { // answers the square of the distance between v and w ((v.x - w.x) ^ 2) + ((v.y - w.y) ^ 2) } method distToSegmentSquared (p: Point, v: Point, w: Point) -> Number is confidential { // returns the square of the distance between p and the line through v and w var l2: Number:= dist2 (v, w) if (l2 == 0) then {return dist2 (p, v)} var t: Number:= ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2 if (t < 0) then {return dist2 (p, v)} if (t > 1) then {return dist2 (p, w)} dist2 (p, ( (v.x + t * (w.x - v.x)) @ (v.y + t * (w.y - v.y) ))) } method distToSegment (p: Point, v: Point, w: Point) -> Number { // Return the distance from p to the line through v and w distToSegmentSquared (p, v, w).sqrt } method contains(pt:Point) -> Boolean { // Answers whether the line contains pt. Returns true if pt is within // 2 pixels of the line def tolerance: Number = 2 distToSegment(pt,start,end) < tolerance } method asString -> String { // Answers a string representation of this line "Line from {start} to {end} with color {self.color}" } } class lineFrom (pt: Point) length (len: Number) direction (radians: Number) on (canvas':DrawingCanvas) -> Line { // Creates a line starting at pt of length len, in direction radians on canvas' inherit lineFrom (pt) to (pt + ((len * radians.cos) @ (-len * radians.sin))) on (canvas') } class textAt (location': Point) with (contents': String) on(canvas': DrawingCanvas) -> Text { // class to generate text at location' on canvas' initially showing // contents' inherit drawableAt (location') on (canvas') var theContents: String:= contents' var fsize: Number is readable:= 10 var wid: Number := theContents.size * fsize / 2 // Return approximation of the width of the text method width -> Number { wid } // Draw the text method draw(ctx: Foreign) -> Done { def col = self.color ctx.save ctx.font:= "{fontSize}pt sans-serif" ctx.fillStyle:= "rgb({col.red}, {col.green}, {col.blue})" ctx.fillText (contents, location.x, location.y) wid := ctx.measureText(theContents).width ctx.restore } // Return the string held in the text item (i.e., its contents) method contents -> String { theContents } // Reset the contents to newContents method contents := (newContents: String) -> Done { theContents := newContents notifyRedraw } // Reset the font size to size' method fontSize := (size': Number) -> Done { fsize := size' notifyRedraw } // Return the size of the font method fontSize -> Number { fsize } // Return string representation of the text item method asString -> String { "Text at ({x},{y}) with value {contents} and color {self.color}" } addToCanvas(canvas') } class textBoxWith (contents': String) -> TextBox { // Create a component in window that holds the string contents' // It cannot respond to user actions inherit componentOfElementType "span" method contents -> String { // the string in this text box self.element.textContent } method contents:= (value: String) -> Done { // changes the string in this text box to be `value` self.element.textContent:= value done } method asString -> String { // a string describing this text box "a text box showing {contents}" } contents:= contents' } class buttonLabeled (label': String) -> Button { // Creates a button with label' inherit labeledWidgetOfElementType ("button") labeled (label') method asString -> String { "a button labeled: {self.label}" } } class textFieldLabeled (label':String) -> TextField { // Generates a text field with label' inherit fieldOfType ("text") labeled (label') method text -> String { // answer the text self.element.value } method text:= (value: String) -> Done { // Updates the text self.element.value:= value } // Return string representation of the text field method asString -> String { if (self.label == "") then { "a text field with {text}" } else { "a text field labeled: {self.label} with {text}" } } } class textFieldUnlabeled -> TextField { // Generates a text field without initial contents inherit textFieldLabeled "" } class passwordFieldLabeled (lab: String) -> Input { // Generates password field with initial contents lab inherit textFieldLabeled (lab) self.element.setAttribute ("type", "password") method asString -> String { // Return string representation of password field if (self.label == "") then { "a password field" } else { "a password field labeled: {self.label}" } } } class passwordFieldUnlabeled -> TextField { // Generate an unlabeled password field inherit passwordFieldLabeled "" } class numberFieldLabeled (label': String) -> NumberField { // Generates a number field with initial contents label' inherit fieldOfType("number") labeled (label') method number -> Number { // Return the number in the field self.element.value.asNumber } method number:= (value: Number) -> Done { // update the number in the field self.element.value:= value } method asString -> String { // Return description of the number field if (self.label == "") then { "a number field holding {number}" } else { "a number field labeled: {self.label} holding {number}" } } } class numberFieldUnlabeled -> NumberField { // Creates an unlabeled number field inherit numberFieldLabeled "" } class menuWithOptions(options:Collection⟦String⟧) labeled (label':String) -> Choice is confidential { // Creates choice box with list of items from options; initially shows label' inherit labeledWidgetOfElementType("select") labeled(label') // def labeler:Foreign method init is override, confidential { self.labeler := document.createElement("option") labeler.value:= "" } method labelElement -> Foreign { labeler } self.element.appendChild(labeler) options.do { name: String -> def anOption: Foreign = document.createElement("option") anOption.value:= name anOption.textContent:= name self.element.appendChild(anOption) } // Return selected item in menu method selected -> String { self.element.value } // Sets selected item in menu to value method selected:= (value: String) -> Done { self.element.value:= value } // Return string representation of the menu method asString -> String { if (self.label == "") then { "a pop-up menu" } else { "a pop-up menu labeled: {self.label}" } } } class menuWithOptions (options: Collection⟦String⟧) -> Choice { // Creates choice box with list of items from options // Initially shows first item in options inherit menuWithOptions (options) labeled "" self.element.removeChild (self.labelElement) } type Audio = interface { // An audio file that can be played source -> String // The source URL of the audio. source:= (value: String) -> Done play -> Done // Play the audio. pause -> Done // Pause playing the audio. isLooping -> Boolean // does the audio loop back to the start? looping:= (value: Boolean) -> Done // determine whether the audio will loop isEnded -> Boolean // whether the audio has finished } class audioUrl(source': String) -> Audio { // Creates an audio file from source', which is a web URL def element = document.createElement("audio") element.src:= source' if (dom.doesObject(dom.window) haveProperty("graceRegisterAudio")) then { dom.window.graceRegisterAudio(element) } // URL of the audio file method source -> String { element.src } // Reset the source URL of the audio file method source:= (value: String) -> Done { element.src:= value } // Play the audio. method play -> Done { element.play } // Pause the audio. method pause -> Done { element.pause } // Whether the audio will loop back to the start when it ends. method isLooping -> Boolean { element.loop } // Set whether audio loops back to start when it end method looping:= (value: Boolean) -> Done { element.loop:= value } // Whether the audio has finished playing. method isEnded -> Boolean { element.ended } // String representation of audio file method asString -> String { "audio from {source}" } } }