Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

eraser v1 #7

Merged
merged 1 commit into from
Apr 20, 2020
Merged

eraser v1 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,12 @@
padding: 10px;
min-width: 1000px;
}

.work-area {
touch-action: none; /* swipe and scroll with touch - none */
user-select: none;
}
.paint-canvas {
background-color: #808080;
background-color: #ffffff;
margin: 5px 15px 0 10px;
cursor: cell;
position: relative;
Expand All @@ -68,6 +71,14 @@
cursor: pointer;
}

.alpha-canvas {
margin: 5px 15px 0 10px;
cursor: pointer;
position: relative;
height: 30px;
width: 480px;
}

.layer-canvas {
margin: 5px 15px 0 10px;
cursor: pointer;
Expand Down Expand Up @@ -178,10 +189,10 @@
<body>
<div class="col-container main-page">
<div class="title">
<h2>Kirsti's Kwilt</h2>
<h2>Kwilt - transparent colors in layers</h2>
</div>

<div class="row-container">
<div class="row-container work-area">

<div class="col-container">
<div class="paint-canvas">
Expand All @@ -195,22 +206,23 @@ <h2>Kirsti's Kwilt</h2>
<div class="row-container">
<!-- <button id="canvasPickBtn" class="pick-button">pick colors</button>
<button id="canvasMixBtn" class="mix-button">paint</button> -->
<select id="canvasMixPercentSelect" class="mix-select">
<!-- <select id="canvasMixPercentSelect" class="mix-select">
<option selected="selected" value="1">100%</option>
<option value="0.5">50%</option>
<option value="0.25">25%</option>
<option value="0.1">10%</option>
<option value="0.0">0%</option>
</select>
</select> -->
</div>
</div>

<div class="col-container">
<div class="palette-canvas">
<canvas width="480" height="160" style="width: 480px; height: 160px" id="palette"></canvas>
</div>
<div class="row-container">
<!-- <canvas width="480" height="30" style="width: 480px; height: 30px" id="alpha"></canvas> -->
<div class="alpha-canvas">
<canvas width="480" height="30" style="position: absolute; top: 0; left: 0; width: 480px; height: 30px" id="alpha-bg"></canvas>
<canvas width="480" height="30" style="position: absolute; top: 0; left: 0; width: 480px; height: 30px" id="alpha"></canvas>
</div>
<div class="layer-canvas">
<!-- layer-view-canvas-bg and layer-view-canvas -->
Expand Down
51 changes: 35 additions & 16 deletions kwilt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,37 @@ uncons [drop] dip
{x:380 y:10 w:20 h:20} picked-color 3 chroma-saturate color set palette cb-box-ctx
] [blend-pallet] def

# mix and paint
[{r:255 g:255 b:255}] [picked-color] def

[0.25] [mix-percent] def
[205 - 480 205 - / 10 * 1 round 0 math-max 10 /] [to-alpha] def
[ 480 205 - * 205 + 12 -] [from-alpha] def

[ x get 10 - 20 / 1 round 20 * x set y get 10 - 20 / 1 round 20 * y set
{w:20 h:20} swap merge picked-color mix-percent a set color set palette cb-box-ctx
] [mix-block] def
alpha-bg cb-init cb-clear
alpha cb-init cb-clear
{x:0 y:0 w:480 h:30 color:{r:127 g:127 b:127 a:1}} alpha-bg cb-box-ctx
{x:205 y:10 w:275 h:5 color:{r:0 g:0 b:0 a:1}} alpha-bg cb-box-ctx
{x:205 y:15 w:275 h:5 color:{r:255 g:255 b:255 a:1}} alpha-bg cb-box-ctx
[[0 1 2 3 4 5 6 7 8 9 10] [
dup 25 * 205 + {x:0 y:5 w:23 h:20} swap x set swap picked-color swap 10 / a set color set
alpha cb-box-ctx
] map drop] [blend-alpha] def

[palette cb-color-at [] cons [picked-color] def blend-pallet drop
] [mousedown] palette subscribe
[ {x:205 y:26 w:275 h:3 color:{r:127 g:127 b:127 a:1}} alpha cb-box-ctx
{x:0 y:26 w:25 h:3 color:{r:250 g:10 b:10 a:1}} canvas-mix-percent from-alpha x set
alpha cb-box-ctx
] [indicate-current-alpha] def

[ selected get [] cons [canvas-mix-percent] def drop ] [change] canvasMixPercentSelect subscribe

# mix and paint
[{r:255 g:255 b:255}] [picked-color] def
blend-alpha

[palette cb-color-at [] cons [picked-color] def blend-pallet blend-alpha drop
] [pointerdown] palette subscribe

##[ selected get [] cons [canvas-mix-percent] def drop ] [change] canvasMixPercentSelect subscribe
[dup2 > [drop] [swap drop] ifte] [math-max] def
[ x get to-alpha [] cons [canvas-mix-percent] def drop indicate-current-alpha ]
[pointerdown] alpha subscribe

# setup the painting area
canvas0 cb-init cb-clear
Expand All @@ -99,10 +117,10 @@ canvas2 cb-init cb-clear
] [print-block] def

[false] [mouse-button-down] def
[ print-block [true] [mouse-button-down] def drop] [mousedown] canvas2 subscribe
[ [false] [mouse-button-down] def drop] [mouseup] canvas2 subscribe
[ [false] [mouse-button-down] def drop] [mouseout] canvas2 subscribe
[ buttons get 1 == mouse-button-down or [print-block] [drop] ifte drop] [mousemove] canvas2 subscribe
[ print-block [true] [mouse-button-down] def drop] [pointerdown] canvas2 subscribe
[ [false] [mouse-button-down] def drop] [pointerup] canvas2 subscribe
[ [false] [mouse-button-down] def drop] [pointerout] canvas2 subscribe
[ buttons get 1 == mouse-button-down or [print-block] [drop] ifte drop] [pointermove] canvas2 subscribe

[[true] [mixCanvasMode] def
] [set-canvas-mode] def
Expand Down Expand Up @@ -141,6 +159,7 @@ layer-view-canvas-2 cb-init cb-clear
] transform-array paint-on-layer get [drop] dip layer-view-canvas- paint-on-layer str-append cb-transform-ctx
] [de-indicate-layer] def
indicate-layer
indicate-current-alpha

# layer events
[ de-indicate-layer x get 130 <
Expand All @@ -153,9 +172,9 @@ indicate-layer
ifte
[] cons [paint-on-layer] def
indicate-layer
drop log
] [mousedown] layer-view-canvas-2 subscribe

drop
] [pointerdown] layer-view-canvas-2 subscribe
#[] [contextmenu] canvas2 subscribe
`;
const out = pounce.run(Pounce_ast.parse(pl+' ', {actions: parser_actions.parser_actions}), [], [pounce.words])[1][0];

Expand Down
1 change: 1 addition & 0 deletions pounce/js/modules/subscription_module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
const key = event.type + event.target.id;
const [_, resultstack] = pounce.run([evt, ...lookup[key][0]], lookup[key][1], lookup[key][2]);
pounce.resumable.stack = [...pounce.resumable.stack, ...pounce.cloneItem(resultstack)];
event.preventDefault();
}

let lookup = {};
Expand Down