mirror of
https://github.com/rgleichman/glance.git
synced 2024-08-16 18:30:36 +03:00
Fix ports for case rhs and patterns being switched. Revise tutorial.
This commit is contained in:
parent
96c10d9e4e
commit
798466004c
@ -175,16 +175,16 @@ resultPort :: SyntaxNode -> Port
|
||||
resultPort = const resultPortConst
|
||||
|
||||
caseRhsPorts :: [Port]
|
||||
caseRhsPorts = fmap Port [2,4..]
|
||||
caseRhsPorts = fmap Port [3,5..]
|
||||
|
||||
casePatternPorts :: [Port]
|
||||
casePatternPorts = fmap Port [3,5..]
|
||||
casePatternPorts = fmap Port [2,4..]
|
||||
|
||||
guardRhsPorts :: [Port]
|
||||
guardRhsPorts = caseRhsPorts
|
||||
guardRhsPorts = casePatternPorts
|
||||
|
||||
guardBoolPorts :: [Port]
|
||||
guardBoolPorts = casePatternPorts
|
||||
guardBoolPorts = caseRhsPorts
|
||||
|
||||
argumentPorts :: SyntaxNode -> [Port]
|
||||
argumentPorts n = case n of
|
||||
|
@ -5,6 +5,12 @@ How could it be extended? I feel that we are just at the very beginning of
|
||||
visual programming languages, and that there is a huge universe of visual
|
||||
programming language designs waiting to be discovered.
|
||||
|
||||
This tutorial assumes that the reader has some familiarity with the basics
|
||||
of Haskell.
|
||||
|
||||
|
||||
Function Application:
|
||||
|
||||
Let's start with y = f x.
|
||||
The function f is applied to the argument x, and the result is bound to y.
|
||||
-}
|
||||
@ -39,7 +45,13 @@ y = (*) ((+) 8 7) 2
|
||||
-}
|
||||
y = (*) ((+) 8 7) 2
|
||||
|
||||
{-That was probably not too surprising. How about this?-}
|
||||
{-
|
||||
|
||||
The Mystery Icon:
|
||||
|
||||
That was probably not too surprising. How about this? What does the green icon
|
||||
represent?
|
||||
-}
|
||||
f x = 3 * x
|
||||
|
||||
{-Let's try to figure it out. First look at the f. It's green and in an orange
|
||||
@ -59,7 +71,7 @@ y = (\x -> 3 * x) 7
|
||||
|
||||
{-Now for the answer. As you might have suspected. The green icon defines a
|
||||
function. The dot inside the icon is the formal parameter. The blue square
|
||||
represents the value returned by function (i.e. what's on the right size
|
||||
represents the value returned by function (i.e. what's on the right side
|
||||
of the -> in a lambda expression). The green circle represents the function
|
||||
that has been defined.
|
||||
|
||||
@ -129,7 +141,11 @@ f x y = max (2 * y) (1 + x)
|
||||
-}
|
||||
f x y = max (2 * y) (1 + x)
|
||||
|
||||
{-Something different about Glance is that Glance does not have any rigid code regions.
|
||||
{-
|
||||
|
||||
No Code Regions:
|
||||
|
||||
Something different about Glance is that Glance does not have any rigid code regions.
|
||||
In other visual programming languages, the icons inside the body of a function
|
||||
would be restricted to a rectangle. In Glance, all icons are on the same level.
|
||||
Theoretically, Glance's flat layout should allow more compact drawings since space
|
||||
@ -153,8 +169,11 @@ f1 x y = (\z -> x + z) y
|
||||
f1 x y = (\z -> x + z) y
|
||||
|
||||
{-
|
||||
|
||||
Graph and Tree Topology:
|
||||
|
||||
Let's go back to the function apply icon. If you are used to other graphical
|
||||
programming languages, you may be thinking that drawing below
|
||||
programming languages, you may be thinking that the drawing below
|
||||
does not look very graphical. Here graphical is referring to a graph topology,
|
||||
and no it does not look graphical. The core idea is that nested function
|
||||
application has a tree topology, not a graph topology. The result of each
|
||||
@ -181,13 +200,16 @@ y = (((2 + 4 * 4) - (7+ 2 + baz)*8)/21)
|
||||
-}
|
||||
y = (((2 + 4 * 4) - (7+ 2 + baz)*8)/21)
|
||||
|
||||
{-Continuing on, here is a simple pattern match.
|
||||
{-
|
||||
Patterns:
|
||||
|
||||
Continuing on, here is a simple pattern match.
|
||||
(Just x) = Just 3
|
||||
-}
|
||||
(Just x) = Just 3
|
||||
|
||||
{-
|
||||
Since constructors are functions, the match icon has a topology similar to
|
||||
Since data constructors are functions, the match icon has a topology similar to
|
||||
the apply icon.
|
||||
|
||||
Now that you are familiar with matches, here's a simple case expression.
|
||||
@ -200,19 +222,17 @@ y = case maybeInt of
|
||||
Just x -> x + 1
|
||||
|
||||
{-The case icon is the magenta icon with three yellow circles next to it.
|
||||
The matches (the textual part left of the arrow) connect to the triangles,
|
||||
and the result for each match (the textual part to the right of the arrow) is
|
||||
indicated with the yellow circle.
|
||||
The patterns connect to the triangles, and the result for each match is indicated
|
||||
with the yellow circle.
|
||||
|
||||
The result for the first match (Nothing -> 0)
|
||||
connects to the circle on the case icon since the right hand side (0) does not
|
||||
use any value from the pattern (Nothing). For the second match, since the result
|
||||
(x + 1) is connected to its pattern (Just x), Glance can connect
|
||||
the result to a new yellow circle.
|
||||
the result of (x + 1) to a new yellow circle.
|
||||
|
||||
If the result always had to be connected to
|
||||
the yellow result circle on the case icon, this would create many cycles in the
|
||||
graph, making the layout much messier.
|
||||
|
||||
Guards:
|
||||
|
||||
Guards and if expressions look like this:
|
||||
y | x == 0 = 1
|
||||
@ -241,11 +261,13 @@ factorial x =
|
||||
then 1
|
||||
else factorial (x - 1) * x
|
||||
|
||||
{-Bonus section:
|
||||
{-
|
||||
Compose (bonus section):
|
||||
|
||||
The depth of an icon's application tree is called the nesting depth.
|
||||
For example, The icon representing "factorial (x - 1) * x" above has a nesting
|
||||
depth of 3.
|
||||
depth of 3, since it is an apply icon (depth=1), inside an apply icon (depth=2),
|
||||
inside an apply icon (depth=3).
|
||||
|
||||
To reduce nesting depth, Glance has an icon that represents an argument applied
|
||||
to a composition of functions.
|
||||
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 568 KiB After Width: | Height: | Size: 581 KiB |
Loading…
Reference in New Issue
Block a user