Skip to content

Commit b8bba97

Browse files
saschanazsaschanaz
committed
Merge pull request #10 from crosspop/master
maintenance
2 parents d43112c + 4218978 commit b8bba97

8 files changed

+109
-80
lines changed

‎.gitmodules

+6
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,9 @@
44
[submodule "croquis.js"]
55
path = croquis.js
66
url = https://github.com/disjukr/croquis.js.git
7+
[submodule "HSBRect"]
8+
path = HSBRect
9+
url = https://[email protected]/disjukr/HSBRect.git
10+
[submodule "input-range-polyfill"]
11+
path = input-range-polyfill
12+
url = https://github.com/disjukr/input-range-polyfill.git

‎HSBRect

Submodule HSBRect added at 5e5d107

‎croquis.js

‎croquispop.css

+8-16
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,17 @@ body {
1616
cursor: crosshair;
1717
}
1818

19+
.croquis-dirty-rect-display {
20+
touch-action: none;
21+
}
22+
1923
#right-side {
2024
display: inline-block;
2125
vertical-align: top;
2226
}
2327

2428
#color-picker {
29+
touch-action: none;
2530
}
2631

2732
#color-picker:active {
@@ -40,21 +45,8 @@ body {
4045
background-color: #fff;
4146
}
4247

43-
#color-picker-saturate {
44-
width: 150px;
45-
height: 150px;
46-
margin-top: -150px;
47-
background-image: linear-gradient(to right, hsla(0, 100%, 50%, 0), red);
48-
}
49-
50-
#color-picker-brightness {
51-
width: 150px;
52-
height: 150px;
53-
margin-top: -150px;
54-
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
55-
}
56-
5748
#color-picker-thumb {
49+
position: relative;
5850
margin-top: -7.5px;
5951
margin-left: -7.5px;
6052
width: 11px;
@@ -105,10 +97,10 @@ body {
10597

10698
span {
10799
font-size: 12pt;
108-
font-family: 'Nanum Gothic';
100+
font-family: 'Nanum Gothic', sans-serif;
109101
}
110102

111103
.comment {
112104
font-size: 9pt;
113-
font-family: 'Nanum Gothic';
105+
font-family: 'Nanum Gothic', sans-serif;
114106
}

‎croquispop.html

+27-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<meta charset="UTF-8">
55
<title>Croquispop</title>
66
<link rel="stylesheet" type="text/css" href="./croquispop.css">
7+
<!--[if lt IE 11]>
8+
<link rel="stylesheet" type="text/css"
9+
href="./input-range-polyfill/input-range-polyfill.css">
10+
<![endif]-->
711
<link rel="stylesheet" type="text/css"
812
href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
13+
<script src="./hand.minified-1.1.1.js"></script>
914
</head>
10-
<body>
15+
<body unselectable="on">
1116
<object id="tablet-api" type="application/x-wacomtabletplugin"></object>
1217
<div id="tool-shelf">
1318
<span>Stabilizer level: </span>
@@ -32,10 +37,6 @@
3237
<div id="right-side">
3338
<div id="color-picker">
3439
<div id="color-picker-sb">
35-
<div id="color-picker-white"></div>
36-
<div id="color-picker-saturate"></div>
37-
<div id="color-picker-brightness"></div>
38-
<div id="color-picker-thumb"></div>
3940
</div>
4041
<span>hue: </span>
4142
<input id="color-picker-hue-slider" type="range" min="0" max="360">
@@ -70,8 +71,28 @@
7071
<p class="comment">If pressure is not applied, try installing the
7172
<a href="http://www.wacom.com/support/drivers" target="_blank">
7273
recent version of the graphics tablet driver.</a></p>
74+
<!--[if lt IE 11]>
75+
<script src="./input-range-polyfill/input-range-polyfill.js"></script>
76+
<![endif]-->
7377
<script src="./TinyColor/tinycolor.js"></script>
78+
<script src="./HSBRect/HSBRect.js"></script>
7479
<script src="./croquis.js/croquis.js"></script>
7580
<script src="./croquispop.js"></script>
81+
<!--[if lt IE 10]>
82+
<script>
83+
// code from: http://stackoverflow.com/a/4448965/1711246
84+
function makeUnselectable(node) {
85+
if (node.nodeType == 1) {
86+
node.setAttribute('unselectable', 'on');
87+
}
88+
var child = node.firstChild;
89+
while (child) {
90+
makeUnselectable(child);
91+
child = child.nextSibling;
92+
}
93+
}
94+
makeUnselectable(document.body);
95+
</script>
96+
<![endif]-->
7697
</body>
7798
</html>

‎croquispop.js

+64-57
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,31 @@ croquis.setToolStabilizeWeight(0.5);
2020
var croquisDOMElement = croquis.getDOMElement();
2121
var canvasArea = document.getElementById('canvas-area');
2222
canvasArea.appendChild(croquisDOMElement);
23-
function canvasMouseDown(e) {
24-
var mousePosition = getRelativePosition(e.clientX, e.clientY);
25-
canvasArea.style.setProperty('cursor', 'none');
26-
croquis.down(mousePosition.x, mousePosition.y);
27-
document.addEventListener('mousemove', canvasMouseMove);
28-
document.addEventListener('mouseup', canvasMouseUp);
23+
function canvasPointerDown(e) {
24+
var pointerPosition = getRelativePosition(e.clientX, e.clientY);
25+
if (IEVersion > 10)
26+
canvasArea.style.setProperty('cursor', 'none');
27+
croquis.down(pointerPosition.x, pointerPosition.y, e.pointerType == "pen" ? e.pressure : null);
28+
document.addEventListener('pointermove', canvasPointerMove);
29+
document.addEventListener('pointerup', canvasPointerUp);
2930
}
30-
function canvasMouseMove(e) {
31-
var mousePosition = getRelativePosition(e.clientX, e.clientY);
32-
croquis.move(mousePosition.x, mousePosition.y);
31+
function canvasPointerMove(e) {
32+
var pointerPosition = getRelativePosition(e.clientX, e.clientY);
33+
croquis.move(pointerPosition.x, pointerPosition.y, e.pointerType == "pen" ? e.pressure : null);
3334
}
34-
function canvasMouseUp(e) {
35-
var mousePosition = getRelativePosition(e.clientX, e.clientY);
36-
canvasArea.style.setProperty('cursor', 'crosshair');
37-
croquis.up(mousePosition.x, mousePosition.y);
38-
document.removeEventListener('mousemove', canvasMouseMove);
39-
document.removeEventListener('mouseup', canvasMouseUp);
35+
function canvasPointerUp(e) {
36+
var pointerPosition = getRelativePosition(e.clientX, e.clientY);
37+
if (IEVersion > 10)
38+
canvasArea.style.setProperty('cursor', 'crosshair');
39+
croquis.up(pointerPosition.x, pointerPosition.y, e.pointerType == "pen" ? e.pressure : null);
40+
document.removeEventListener('pointermove', canvasPointerMove);
41+
document.removeEventListener('pointerup', canvasPointerUp);
4042
}
4143
function getRelativePosition(absoluteX, absoluteY) {
4244
var rect = croquisDOMElement.getBoundingClientRect();
4345
return {x: absoluteX - rect.left, y: absoluteY - rect.top};
4446
}
45-
croquisDOMElement.addEventListener('mousedown', canvasMouseDown);
47+
croquisDOMElement.addEventListener('pointerdown', canvasPointerDown);
4648

4749
//clear & fill button ui
4850
var clearButton = document.getElementById('clear-button');
@@ -62,10 +64,10 @@ var brushImages = document.getElementsByClassName('brush-image');
6264
var currentBrush = circleBrush;
6365

6466
Array.prototype.map.call(brushImages, function (brush) {
65-
brush.addEventListener('mousedown', brushImageMouseDown);
67+
brush.addEventListener('pointerdown', brushImagePointerDown);
6668
});
6769

68-
function brushImageMouseDown(e) {
70+
function brushImagePointerDown(e) {
6971
var image = e.currentTarget;
7072
currentBrush.className = 'brush-image';
7173
image.className = 'brush-image on';
@@ -89,50 +91,58 @@ var brushPointerContainer = document.createElement('div');
8991
brushPointerContainer.className = 'brush-pointer';
9092

9193
if (IEVersion > 10) {
92-
croquisDOMElement.addEventListener('mouseover', function () {
93-
croquisDOMElement.addEventListener('mousemove', croquisMouseMove);
94+
croquisDOMElement.addEventListener('pointerover', function () {
95+
croquisDOMElement.addEventListener('pointermove', croquisPointerMove);
9496
document.body.appendChild(brushPointerContainer);
9597
});
96-
croquisDOMElement.addEventListener('mouseout', function () {
97-
croquisDOMElement.removeEventListener('mousemove', croquisMouseMove);
98+
croquisDOMElement.addEventListener('pointerout', function () {
99+
croquisDOMElement.removeEventListener('pointermove', croquisPointerMove);
98100
brushPointerContainer.parentElement.removeChild(brushPointerContainer);
99101
});
100102
}
101103

102-
function croquisMouseMove(e) {
103-
var x = e.clientX + window.pageXOffset;
104-
var y = e.clientY + window.pageYOffset;
105-
brushPointerContainer.style.setProperty('left', x + 'px');
106-
brushPointerContainer.style.setProperty('top', y + 'px');
104+
function croquisPointerMove(e) {
105+
if (IEVersion > 10) {
106+
var x = e.clientX + window.pageXOffset;
107+
var y = e.clientY + window.pageYOffset;
108+
brushPointerContainer.style.setProperty('left', x + 'px');
109+
brushPointerContainer.style.setProperty('top', y + 'px');
110+
}
107111
}
108112

109113
function updatePointer() {
110-
var image = currentBrush;
111-
var threshold;
112-
if (currentBrush == circleBrush) {
113-
image = null;
114-
threshold = 0xff;
115-
}
116-
else {
117-
threshold = 0x30;
114+
if (IEVersion > 10) {
115+
var image = currentBrush;
116+
var threshold;
117+
if (currentBrush == circleBrush) {
118+
image = null;
119+
threshold = 0xff;
120+
}
121+
else {
122+
threshold = 0x30;
123+
}
124+
var brushPointer = Croquis.createBrushPointer(
125+
image, brush.getSize(), threshold, true);
126+
brushPointer.style.setProperty('margin-left',
127+
'-' + (brushPointer.width * 0.5) + 'px');
128+
brushPointer.style.setProperty('margin-top',
129+
'-' + (brushPointer.height * 0.5) + 'px');
130+
brushPointerContainer.innerHTML = '';
131+
brushPointerContainer.appendChild(brushPointer);
118132
}
119-
var brushPointer = Croquis.createBrushPointer(
120-
image, brush.getSize(), threshold, true);
121-
brushPointer.style.setProperty('margin-left',
122-
'-' + (brushPointer.width * 0.5) + 'px');
123-
brushPointer.style.setProperty('margin-top',
124-
'-' + (brushPointer.height * 0.5) + 'px');
125-
brushPointerContainer.innerHTML = '';
126-
brushPointerContainer.appendChild(brushPointer);
127133
}
128134
updatePointer();
129135

130136
//color picker
131137
var colorPickerHueSlider =
132138
document.getElementById('color-picker-hue-slider');
133139
var colorPickerSb = document.getElementById('color-picker-sb');
134-
var colorPickerSaturate = document.getElementById('color-picker-saturate');
135-
var colorPickerThumb = document.getElementById('color-picker-thumb');
140+
var colorPickerHSBRect = new HSBRect(150, 150);
141+
colorPickerHSBRect.DOMElement.id = 'color-picker-hsbrect';
142+
colorPickerSb.appendChild(colorPickerHSBRect.DOMElement);
143+
var colorPickerThumb = document.createElement('div');
144+
colorPickerThumb.id = 'color-picker-thumb';
145+
colorPickerSb.appendChild(colorPickerThumb);
136146
colorPickerHueSlider.value = tinycolor(brush.getColor()).toHsv().h;
137147

138148
function setColor() {
@@ -153,21 +163,18 @@ function setColor() {
153163
}
154164

155165
colorPickerHueSlider.onchange = function () {
156-
var hue = colorPickerHueSlider.value;
157-
colorPickerSaturate.style.setProperty('background-image',
158-
'linear-gradient(to right, hsla(' +
159-
hue + ', 100%, 50%, 0), hsl(' + hue + ', 100%, 50%))');
166+
colorPickerHSBRect.hue = colorPickerHueSlider.value;
160167
setColor();
161168
}
162169

163-
function colorPickerMouseDown(e) {
164-
document.addEventListener('mousemove', colorPickerMouseMove);
165-
colorPickerMouseMove(e);
170+
function colorPickerPointerDown(e) {
171+
document.addEventListener('pointermove', colorPickerPointerMove);
172+
colorPickerPointerMove(e);
166173
}
167-
function colorPickerMouseUp(e) {
168-
document.removeEventListener('mousemove', colorPickerMouseMove);
174+
function colorPickerPointerUp(e) {
175+
document.removeEventListener('pointermove', colorPickerPointerMove);
169176
}
170-
function colorPickerMouseMove(e) {
177+
function colorPickerPointerMove(e) {
171178
var boundRect = colorPickerSb.getBoundingClientRect();
172179
var x = (e.clientX - boundRect.left);
173180
var y = (e.clientY - boundRect.top);
@@ -187,8 +194,8 @@ function pickColor(x, y) {
187194
(y < sbSize * 0.5)? '#000' : '#fff');
188195
setColor();
189196
}
190-
colorPickerSb.addEventListener('mousedown', colorPickerMouseDown);
191-
document.addEventListener('mouseup', colorPickerMouseUp);
197+
colorPickerSb.addEventListener('pointerdown', colorPickerPointerDown);
198+
document.addEventListener('pointerup', colorPickerPointerUp);
192199

193200
var backgroundCheckerImage;
194201
(function () {

0 commit comments

Comments
 (0)