Examples updated.
This commit is contained in:
pTalanov
@@ -2,11 +2,12 @@
|
|||||||
<module type="JAVA_MODULE" version="4">
|
<module type="JAVA_MODULE" version="4">
|
||||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
<exclude-output />
|
<exclude-output />
|
||||||
<content url="file://$MODULE_DIR$">
|
<content url="file://$MODULE_DIR$/src/html5/fancyLines">
|
||||||
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
|
<sourceFolder url="file://$MODULE_DIR$/src/html5/fancyLines" isTestSource="false" />
|
||||||
</content>
|
</content>
|
||||||
<orderEntry type="inheritedJdk" />
|
<orderEntry type="inheritedJdk" />
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
<orderEntry type="module" module-name="js.libraries" />
|
||||||
</component>
|
</component>
|
||||||
</module>
|
</module>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -176,8 +176,8 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
class CanvasState(val canvas : Canvas) {
|
class CanvasState(val canvas : Canvas) {
|
||||||
var width = canvas.width
|
var width = canvas.width.toDouble()
|
||||||
var height = canvas.height
|
var height = canvas.height.toDouble()
|
||||||
val size : Vector
|
val size : Vector
|
||||||
get() = v(width, height)
|
get() = v(width, height)
|
||||||
val context = getContext()
|
val context = getContext()
|
||||||
@@ -311,7 +311,7 @@ class Vector(val x : Double = 0.0, val y : Double = 0.0) {
|
|||||||
get() = this * (1.0 / Math.sqrt(sqr))
|
get() = this * (1.0 / Math.sqrt(sqr))
|
||||||
}
|
}
|
||||||
|
|
||||||
fun main() {
|
fun main(args : Array<String>) {
|
||||||
val state = CanvasState(getCanvas())
|
val state = CanvasState(getCanvas())
|
||||||
state.addShape(Kotlin)
|
state.addShape(Kotlin)
|
||||||
state.addShape(Creature(state.size * 0.25, state))
|
state.addShape(Creature(state.size * 0.25, state))
|
||||||
|
|||||||
@@ -24,8 +24,8 @@
|
|||||||
|
|
||||||
<canvas width="600" height="800"></canvas>
|
<canvas width="600" height="800"></canvas>
|
||||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||||
<script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
<script src="../../../../js.translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
||||||
<script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
<script src="../../../../js.translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
||||||
<script src="creatures.js" type="text/javascript"></script>
|
<script src="creatures.js" type="text/javascript"></script>
|
||||||
<img src="kotlinlogo.png" hidden=true/>
|
<img src="kotlinlogo.png" hidden=true/>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,103 +1,98 @@
|
|||||||
/*
|
var classes = function(){
|
||||||
* Copyright 2000-2012 JetBrains s.r.o.
|
var tmp$0 = Kotlin.Class.create({initialize:function(){
|
||||||
*
|
this.$context = getContext();
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
this.$height = getCanvas().height;
|
||||||
* you may not use this file except in compliance with the License.
|
this.$width = getCanvas().width;
|
||||||
* You may obtain a copy of the License at
|
this.$x = this.get_width() * Math.random();
|
||||||
*
|
this.$y = this.get_height() * Math.random();
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
this.$hue = 0;
|
||||||
*
|
}
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
, get_context:function(){
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
return this.$context;
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
}
|
||||||
* See the License for the specific language governing permissions and
|
, get_height:function(){
|
||||||
* limitations under the License.
|
return this.$height;
|
||||||
*/
|
}
|
||||||
|
, get_width:function(){
|
||||||
{
|
return this.$width;
|
||||||
var classes = function () {
|
}
|
||||||
var FancyLines = Kotlin.Class.create({initialize:function () {
|
, get_x:function(){
|
||||||
this.$context = getContext();
|
return this.$x;
|
||||||
this.$height = getCanvas().height;
|
}
|
||||||
this.$width = getCanvas().width;
|
, set_x:function(tmp$0){
|
||||||
this.$x = this.get_width() * Math.random();
|
this.$x = tmp$0;
|
||||||
this.$y = this.get_height() * Math.random();
|
}
|
||||||
this.$hue = 0;
|
, get_y:function(){
|
||||||
}, get_context:function () {
|
return this.$y;
|
||||||
return this.$context;
|
}
|
||||||
}, get_height:function () {
|
, set_y:function(tmp$0){
|
||||||
return this.$height;
|
this.$y = tmp$0;
|
||||||
}, get_width:function () {
|
}
|
||||||
return this.$width;
|
, get_hue:function(){
|
||||||
}, get_x:function () {
|
return this.$hue;
|
||||||
return this.$x;
|
}
|
||||||
}, set_x:function (tmp$0) {
|
, set_hue:function(tmp$0){
|
||||||
this.$x = tmp$0;
|
this.$hue = tmp$0;
|
||||||
}, get_y:function () {
|
}
|
||||||
return this.$y;
|
, line:function(){
|
||||||
}, set_y:function (tmp$0) {
|
{
|
||||||
this.$y = tmp$0;
|
this.get_context().save();
|
||||||
}, get_hue:function () {
|
this.get_context().beginPath();
|
||||||
return this.$hue;
|
this.get_context().lineWidth = 20 * Math.random();
|
||||||
}, set_hue:function (tmp$0) {
|
this.get_context().moveTo(this.get_x(), this.get_y());
|
||||||
this.$hue = tmp$0;
|
this.set_x(this.get_width() * Math.random());
|
||||||
}, line:function () {
|
this.set_y(this.get_height() * Math.random());
|
||||||
{
|
this.get_context().bezierCurveTo(this.get_width() * Math.random(), this.get_height() * Math.random(), this.get_width() * Math.random(), this.get_height() * Math.random(), this.get_x(), this.get_y());
|
||||||
this.get_context().save();
|
this.set_hue(this.get_hue() + Math.random() * 10);
|
||||||
this.get_context().beginPath();
|
this.get_context().strokeStyle = 'hsl(' + this.get_hue() + ', 50%, 50%)';
|
||||||
this.get_context().lineWidth = 20 * Math.random();
|
this.get_context().shadowColor = 'white';
|
||||||
this.get_context().moveTo(this.get_x(), this.get_y());
|
this.get_context().shadowBlur = 10;
|
||||||
this.set_x(this.get_width() * Math.random());
|
this.get_context().stroke();
|
||||||
this.set_y(this.get_height() * Math.random());
|
this.get_context().restore();
|
||||||
this.get_context().bezierCurveTo(this.get_width() * Math.random(), this.get_height() * Math.random(), this.get_width() * Math.random(), this.get_height() * Math.random(), this.get_x(), this.get_y());
|
|
||||||
this.set_hue(this.get_hue() + Math.random() * 10);
|
|
||||||
this.get_context().strokeStyle = 'hsl(' + this.get_hue() + ', 50%, 50%)';
|
|
||||||
this.get_context().shadowColor = 'white';
|
|
||||||
this.get_context().shadowBlur = 10;
|
|
||||||
this.get_context().stroke();
|
|
||||||
this.get_context().restore();
|
|
||||||
}
|
|
||||||
}, blank:function () {
|
|
||||||
{
|
|
||||||
this.get_context().fillStyle = 'rgba(255,255,1,0.1)';
|
|
||||||
this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
|
|
||||||
}
|
|
||||||
}, run:function () {
|
|
||||||
{
|
|
||||||
var tmp$1;
|
|
||||||
var tmp$0;
|
|
||||||
setInterval((tmp$0 = this , function () {
|
|
||||||
{
|
|
||||||
tmp$0.line();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
), 40);
|
|
||||||
setInterval((tmp$1 = this , function () {
|
|
||||||
{
|
|
||||||
tmp$1.blank();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
), 100);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {FancyLines_0:FancyLines};
|
|
||||||
}
|
}
|
||||||
();
|
}
|
||||||
var fancylines = Kotlin.Namespace.create({initialize:function () {
|
, blank:function(){
|
||||||
}, main:function () {
|
{
|
||||||
|
this.get_context().fillStyle = 'rgba(255,255,1,0.1)';
|
||||||
|
this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
, run:function(){
|
||||||
|
{
|
||||||
|
var tmp$0;
|
||||||
|
setInterval((tmp$0 = this , function(){
|
||||||
{
|
{
|
||||||
$(function () {
|
tmp$0.line();
|
||||||
{
|
|
||||||
(new fancylines.FancyLines_0).run();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
), 40);
|
||||||
|
var tmp$1;
|
||||||
|
setInterval((tmp$1 = this , function(){
|
||||||
|
{
|
||||||
|
tmp$1.blank();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
), 100);
|
||||||
}
|
}
|
||||||
}, classes);
|
}
|
||||||
fancylines.initialize();
|
});
|
||||||
|
return {FancyLines:tmp$0};
|
||||||
}
|
}
|
||||||
|
();
|
||||||
|
var fancylines = Kotlin.Namespace.create({initialize:function(){
|
||||||
|
}
|
||||||
|
, main:function(args){
|
||||||
|
{
|
||||||
|
$(function(){
|
||||||
|
{
|
||||||
|
(new fancylines.FancyLines).run();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {FancyLines:classes.FancyLines});
|
||||||
|
fancylines.initialize();
|
||||||
|
|
||||||
var args = [];
|
var args = [];
|
||||||
fancylines.main(args);
|
fancylines.main(args);
|
||||||
|
|||||||
@@ -23,8 +23,8 @@
|
|||||||
<body>
|
<body>
|
||||||
<canvas height="450" width="800"></canvas>
|
<canvas height="450" width="800"></canvas>
|
||||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||||
<script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
<script src="../../../../js.translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
||||||
<script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
<script src="../../../../js.translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
||||||
<script src="fancylines.js" type="text/javascript"></script>
|
<script src="fancylines.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -10,7 +10,7 @@ import js.*;
|
|||||||
import html5.*;
|
import html5.*;
|
||||||
import jquery.*;
|
import jquery.*;
|
||||||
|
|
||||||
fun main() {
|
fun main(args : Array<String>) {
|
||||||
//jq is a name for JQuery function
|
//jq is a name for JQuery function
|
||||||
jq {
|
jq {
|
||||||
FancyLines().run();
|
FancyLines().run();
|
||||||
@@ -54,7 +54,7 @@ class FancyLines() {
|
|||||||
|
|
||||||
fun blank() {
|
fun blank() {
|
||||||
context.fillStyle = "rgba(255,255,1,0.1)";
|
context.fillStyle = "rgba(255,255,1,0.1)";
|
||||||
context.fillRect(0.0, 0.0, width, height);
|
context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble());
|
||||||
}
|
}
|
||||||
|
|
||||||
fun run() {
|
fun run() {
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ class HelloKotlin() {
|
|||||||
fun renderBackground() {
|
fun renderBackground() {
|
||||||
context.save()
|
context.save()
|
||||||
context.fillStyle = "#5C7EED"
|
context.fillStyle = "#5C7EED"
|
||||||
context.fillRect(0.0, 0.0, width, height)
|
context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble())
|
||||||
context.restore()
|
context.restore()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,339 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
{
|
|
||||||
var classes = function () {
|
|
||||||
var Vector = Kotlin.Class.create({initialize:function (x, y) {
|
|
||||||
this.$x = x;
|
|
||||||
this.$y = y;
|
|
||||||
}, get_x:function () {
|
|
||||||
return this.$x;
|
|
||||||
}, set_x:function (tmp$0) {
|
|
||||||
this.$x = tmp$0;
|
|
||||||
}, get_y:function () {
|
|
||||||
return this.$y;
|
|
||||||
}, set_y:function (tmp$0) {
|
|
||||||
this.$y = tmp$0;
|
|
||||||
}, plus:function (v) {
|
|
||||||
{
|
|
||||||
return interactive.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y());
|
|
||||||
}
|
|
||||||
}, minus:function (v) {
|
|
||||||
{
|
|
||||||
return interactive.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y());
|
|
||||||
}
|
|
||||||
}, times:function (coef) {
|
|
||||||
{
|
|
||||||
return interactive.v_0(this.get_x() * coef, this.get_y() * coef);
|
|
||||||
}
|
|
||||||
}, distanceTo:function (v) {
|
|
||||||
{
|
|
||||||
return Math.sqrt(this.minus(v).get_sqr());
|
|
||||||
}
|
|
||||||
}, isInRect:function (topLeft, size) {
|
|
||||||
{
|
|
||||||
return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y();
|
|
||||||
}
|
|
||||||
}, get_sqr:function () {
|
|
||||||
{
|
|
||||||
return this.get_x() * this.get_x() + this.get_y() * this.get_y();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var CanvasState = Kotlin.Class.create({initialize:function (canvas) {
|
|
||||||
this.$canvas = canvas;
|
|
||||||
this.$width = this.get_canvas().width;
|
|
||||||
this.$height = this.get_canvas().height;
|
|
||||||
this.$context = getContext();
|
|
||||||
this.$valid = false;
|
|
||||||
this.$shapes = new Kotlin.ArrayList;
|
|
||||||
this.$selection = null;
|
|
||||||
this.$dragOff = new interactive.Vector_0(0, 0);
|
|
||||||
this.$interval = 1000 / 30;
|
|
||||||
this.$size = 20;
|
|
||||||
{
|
|
||||||
var tmp$4;
|
|
||||||
var tmp$3;
|
|
||||||
var tmp$2;
|
|
||||||
var tmp$1;
|
|
||||||
var tmp$0_0;
|
|
||||||
$(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) {
|
|
||||||
{
|
|
||||||
var tmp$0;
|
|
||||||
tmp$0_0.set_valid(false);
|
|
||||||
tmp$0_0.set_selection(null);
|
|
||||||
var mousePos = tmp$0_0.mousePos_0(it);
|
|
||||||
{
|
|
||||||
tmp$0 = tmp$0_0.get_shapes().iterator();
|
|
||||||
while (tmp$0.hasNext()) {
|
|
||||||
var shape = tmp$0.next();
|
|
||||||
{
|
|
||||||
if (shape.contains(mousePos)) {
|
|
||||||
tmp$0_0.set_dragOff(mousePos.minus(shape.get_pos()));
|
|
||||||
shape.set_selected(true);
|
|
||||||
tmp$0_0.set_selection(shape);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).mousemove((tmp$1 = this , function (it) {
|
|
||||||
{
|
|
||||||
if (tmp$1.get_selection() != null) {
|
|
||||||
Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus(tmp$1.get_dragOff()));
|
|
||||||
tmp$1.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).mouseup((tmp$2 = this , function (it) {
|
|
||||||
{
|
|
||||||
if (tmp$2.get_selection() != null) {
|
|
||||||
Kotlin.sure(tmp$2.get_selection()).set_selected(false);
|
|
||||||
}
|
|
||||||
tmp$2.set_selection(null);
|
|
||||||
tmp$2.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).dblclick((tmp$3 = this , function (it) {
|
|
||||||
{
|
|
||||||
var redTransparentCircle = new interactive.Circle_0(tmp$3.mousePos_0(it), tmp$3.get_size(), 'rgba(200, 100, 100, 0.3)');
|
|
||||||
tmp$3.addShape(redTransparentCircle);
|
|
||||||
tmp$3.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
interactive.doWithPeriod(this.get_interval(), (tmp$4 = this , function () {
|
|
||||||
{
|
|
||||||
tmp$4.draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
}
|
|
||||||
}, get_canvas:function () {
|
|
||||||
return this.$canvas;
|
|
||||||
}, get_width:function () {
|
|
||||||
return this.$width;
|
|
||||||
}, get_height:function () {
|
|
||||||
return this.$height;
|
|
||||||
}, get_context:function () {
|
|
||||||
return this.$context;
|
|
||||||
}, get_valid:function () {
|
|
||||||
return this.$valid;
|
|
||||||
}, set_valid:function (tmp$0) {
|
|
||||||
this.$valid = tmp$0;
|
|
||||||
}, get_shapes:function () {
|
|
||||||
return this.$shapes;
|
|
||||||
}, set_shapes:function (tmp$0) {
|
|
||||||
this.$shapes = tmp$0;
|
|
||||||
}, get_selection:function () {
|
|
||||||
return this.$selection;
|
|
||||||
}, set_selection:function (tmp$0) {
|
|
||||||
this.$selection = tmp$0;
|
|
||||||
}, get_dragOff:function () {
|
|
||||||
return this.$dragOff;
|
|
||||||
}, set_dragOff:function (tmp$0) {
|
|
||||||
this.$dragOff = tmp$0;
|
|
||||||
}, get_interval:function () {
|
|
||||||
return this.$interval;
|
|
||||||
}, get_size:function () {
|
|
||||||
return this.$size;
|
|
||||||
}, mousePos_0:function (e) {
|
|
||||||
{
|
|
||||||
var offset = new interactive.Vector_0(0, 0);
|
|
||||||
var element = this.get_canvas();
|
|
||||||
while (element != null) {
|
|
||||||
var el = Kotlin.sure(element);
|
|
||||||
offset = offset.plus(new interactive.Vector_0(el.offsetLeft, el.offsetTop));
|
|
||||||
element = el.offsetParent;
|
|
||||||
}
|
|
||||||
return (new interactive.Vector_0(e.pageX, e.pageY)).minus(offset);
|
|
||||||
}
|
|
||||||
}, addShape:function (shape) {
|
|
||||||
{
|
|
||||||
this.get_shapes().add(shape);
|
|
||||||
this.set_valid(false);
|
|
||||||
}
|
|
||||||
}, clear:function () {
|
|
||||||
{
|
|
||||||
this.get_context().fillStyle = '#FFFFFF';
|
|
||||||
this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
|
|
||||||
this.get_context().strokeStyle = '#000000';
|
|
||||||
this.get_context().lineWidth = 4;
|
|
||||||
this.get_context().strokeRect(0, 0, this.get_width(), this.get_height());
|
|
||||||
}
|
|
||||||
}, draw:function () {
|
|
||||||
{
|
|
||||||
var tmp$0;
|
|
||||||
if (this.get_valid())
|
|
||||||
return;
|
|
||||||
this.clear();
|
|
||||||
{
|
|
||||||
tmp$0 = this.get_shapes().iterator();
|
|
||||||
while (tmp$0.hasNext()) {
|
|
||||||
var shape = tmp$0.next();
|
|
||||||
{
|
|
||||||
shape.draw(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.set_valid(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Shape = Kotlin.Class.create({initialize:function () {
|
|
||||||
this.$selected = false;
|
|
||||||
}, draw:function (state) {
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_selected:function () {
|
|
||||||
return this.$selected;
|
|
||||||
}, set_selected:function (tmp$0) {
|
|
||||||
this.$selected = tmp$0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var JB = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) {
|
|
||||||
this.$pos = pos;
|
|
||||||
this.$relSize = relSize;
|
|
||||||
this.super_init();
|
|
||||||
this.$imageSize = interactive.v_0(704, 254);
|
|
||||||
this.$canvasSize = this.get_imageSize().times(this.get_relSize());
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_relSize:function () {
|
|
||||||
return this.$relSize;
|
|
||||||
}, set_relSize:function (tmp$0) {
|
|
||||||
this.$relSize = tmp$0;
|
|
||||||
}, get_imageSize:function () {
|
|
||||||
return this.$imageSize;
|
|
||||||
}, get_canvasSize:function () {
|
|
||||||
return this.$canvasSize;
|
|
||||||
}, draw:function (state) {
|
|
||||||
{
|
|
||||||
var context = state.get_context();
|
|
||||||
context.drawImage(getKotlinLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y());
|
|
||||||
}
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
{
|
|
||||||
return mousePos.isInRect(this.get_pos(), this.get_canvasSize());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Rectangle = Kotlin.Class.create(Shape, {initialize:function (pos, size) {
|
|
||||||
this.$pos = pos;
|
|
||||||
this.$size = size;
|
|
||||||
this.super_init();
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_size:function () {
|
|
||||||
return this.$size;
|
|
||||||
}, set_size:function (tmp$0) {
|
|
||||||
this.$size = tmp$0;
|
|
||||||
}, draw:function (state) {
|
|
||||||
{
|
|
||||||
var context = state.get_context();
|
|
||||||
context.fillStyle = 'rgba(0,255,0,.6)';
|
|
||||||
context.fillRect(this.get_pos().get_x(), this.get_pos().get_y(), this.get_size().get_x(), this.get_size().get_y());
|
|
||||||
if (this.get_selected()) {
|
|
||||||
context.strokeStyle = '#FF0000';
|
|
||||||
context.lineWidth = 2;
|
|
||||||
context.strokeRect(this.get_pos().get_x(), this.get_pos().get_y(), this.get_size().get_x(), this.get_size().get_y());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
{
|
|
||||||
return mousePos.isInRect(this.get_pos(), this.get_size());
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Circle = Kotlin.Class.create(Shape, {initialize:function (pos, radius, fillColor) {
|
|
||||||
this.$pos = pos;
|
|
||||||
this.$radius = radius;
|
|
||||||
this.$fillColor = fillColor;
|
|
||||||
this.super_init();
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_radius:function () {
|
|
||||||
return this.$radius;
|
|
||||||
}, set_radius:function (tmp$0) {
|
|
||||||
this.$radius = tmp$0;
|
|
||||||
}, get_fillColor:function () {
|
|
||||||
return this.$fillColor;
|
|
||||||
}, set_fillColor:function (tmp$0) {
|
|
||||||
this.$fillColor = tmp$0;
|
|
||||||
}, draw:function (state) {
|
|
||||||
{
|
|
||||||
var context = state.get_context();
|
|
||||||
context.shadowColor = 'white';
|
|
||||||
context.shadowBlur = 10;
|
|
||||||
context.fillStyle = this.get_fillColor();
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(this.get_pos().get_x(), this.get_pos().get_y(), this.get_radius(), 0, 2 * Math.PI, false);
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
{
|
|
||||||
return this.get_pos().distanceTo(mousePos) < this.get_radius();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {Shape_0:Shape, JB_0:JB, Rectangle_0:Rectangle, Circle_0:Circle, CanvasState_0:CanvasState, Vector_0:Vector};
|
|
||||||
}
|
|
||||||
();
|
|
||||||
var interactive = Kotlin.Namespace.create({initialize:function () {
|
|
||||||
interactive.$state = new interactive.CanvasState_0(getCanvas());
|
|
||||||
}, get_state:function () {
|
|
||||||
return interactive.$state;
|
|
||||||
}, doWithPeriod:function (period, f) {
|
|
||||||
{
|
|
||||||
setInterval(f, period);
|
|
||||||
}
|
|
||||||
}, v_0:function (x, y) {
|
|
||||||
{
|
|
||||||
return new interactive.Vector_0(x, y);
|
|
||||||
}
|
|
||||||
}, main:function () {
|
|
||||||
{
|
|
||||||
var state = new interactive.CanvasState_0(getCanvas());
|
|
||||||
state.addShape(new interactive.JB_0(interactive.v_0(1, 1), 0.3));
|
|
||||||
setTimeout(function () {
|
|
||||||
{
|
|
||||||
state.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, classes);
|
|
||||||
interactive.initialize();
|
|
||||||
}
|
|
||||||
|
|
||||||
var args = [];
|
|
||||||
interactive.main(args);
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
@@ -1,183 +0,0 @@
|
|||||||
package interactive;
|
|
||||||
|
|
||||||
import jquery.*;
|
|
||||||
import html5.*;
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import js.*;
|
|
||||||
import js.Math;
|
|
||||||
import js.setInterval
|
|
||||||
import html5.getCanvas
|
|
||||||
import html5.getKotlinLogo
|
|
||||||
import jquery.jq
|
|
||||||
import js.setTimeout
|
|
||||||
|
|
||||||
val state = CanvasState(getCanvas());
|
|
||||||
|
|
||||||
fun doWithPeriod(period : Int, f : ()->Unit) {
|
|
||||||
setInterval(f, period);
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract class Shape() {
|
|
||||||
abstract fun draw(state : CanvasState);
|
|
||||||
abstract fun contains(mousePos : Vector) : Boolean;
|
|
||||||
abstract var pos : Vector;
|
|
||||||
var selected : Boolean = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
class Circle(override var pos : Vector,
|
|
||||||
var radius : Double = 1.0,
|
|
||||||
var fillColor : String = "#AAAAAA") : Shape() {
|
|
||||||
|
|
||||||
override fun draw(state : CanvasState) {
|
|
||||||
val context = state.context;
|
|
||||||
context.shadowColor = "white";
|
|
||||||
context.shadowBlur = 10.0;
|
|
||||||
context.fillStyle = fillColor;
|
|
||||||
context.beginPath();
|
|
||||||
context.arc(pos.x, pos.y, radius, 0.0, 2 * Math.PI, false);
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
override fun contains(mousePos : Vector) = pos.distanceTo(mousePos) < radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
class Rectangle(override var pos : Vector,
|
|
||||||
var size : Vector) : Shape()
|
|
||||||
{
|
|
||||||
override fun draw(state : CanvasState) {
|
|
||||||
val context = state.context;
|
|
||||||
context.fillStyle = "rgba(0,255,0,.6)";
|
|
||||||
context.fillRect(pos.x, pos.y, size.x, size.y);
|
|
||||||
if (selected) {
|
|
||||||
context.strokeStyle = "#FF0000"
|
|
||||||
context.lineWidth = 2.0;
|
|
||||||
context.strokeRect(pos.x, pos.y, size.x, size.y)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
override fun contains(mousePos : Vector) = mousePos.isInRect(pos, size);
|
|
||||||
}
|
|
||||||
|
|
||||||
class JB(override var pos : Vector,
|
|
||||||
var relSize : Double = 0.3) : Shape()
|
|
||||||
{
|
|
||||||
|
|
||||||
val imageSize = v(704.0, 254.0)
|
|
||||||
val canvasSize = imageSize * relSize
|
|
||||||
|
|
||||||
override fun draw(state : CanvasState) {
|
|
||||||
val context = state.context;
|
|
||||||
context.drawImage(getKotlinLogo(), 0.0, 0.0, imageSize.x, imageSize.y, pos.x, pos.y, canvasSize.x, canvasSize.y)
|
|
||||||
}
|
|
||||||
|
|
||||||
override fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, canvasSize)
|
|
||||||
}
|
|
||||||
|
|
||||||
class CanvasState(val canvas : Canvas) {
|
|
||||||
val width = canvas.width;
|
|
||||||
val height = canvas.height;
|
|
||||||
val context = getContext();
|
|
||||||
var valid = false;
|
|
||||||
var shapes = ArrayList<Shape>();
|
|
||||||
var selection : Shape? = null;
|
|
||||||
var dragOff = Vector();
|
|
||||||
val interval = 1000 / 30;
|
|
||||||
val size = 20.0;
|
|
||||||
|
|
||||||
{
|
|
||||||
jq(canvas).mousedown {
|
|
||||||
valid = false;
|
|
||||||
selection = null;
|
|
||||||
val mousePos = mousePos(it);
|
|
||||||
for (shape in shapes) {
|
|
||||||
if (mousePos in shape) {
|
|
||||||
dragOff = mousePos - shape.pos;
|
|
||||||
shape.selected = true;
|
|
||||||
selection = shape;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).mousemove {
|
|
||||||
if (selection != null) {
|
|
||||||
selection.sure().pos = mousePos(it) - dragOff;
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).mouseup {
|
|
||||||
if (selection != null) {
|
|
||||||
selection.sure().selected = false;
|
|
||||||
}
|
|
||||||
selection = null;
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).dblclick {
|
|
||||||
val redTransparentCircle = Circle(mousePos(it), size, "rgba(200, 100, 100, 0.3)");
|
|
||||||
addShape(redTransparentCircle);
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
doWithPeriod(interval) {
|
|
||||||
draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fun mousePos(e : MouseEvent) : Vector {
|
|
||||||
var offset = Vector();
|
|
||||||
var element : DomElement? = canvas;
|
|
||||||
while (element != null) {
|
|
||||||
val el : DomElement = element.sure();
|
|
||||||
offset += Vector(el.offsetLeft, el.offsetTop);
|
|
||||||
element = el.offsetParent;
|
|
||||||
}
|
|
||||||
return Vector(e.pageX, e.pageY) - offset;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun addShape(shape : Shape) {
|
|
||||||
shapes.add(shape);
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun clear() {
|
|
||||||
context.fillStyle = "#FFFFFF"
|
|
||||||
context.fillRect(0.0, 0.0, width, height)
|
|
||||||
context.strokeStyle = "#000000"
|
|
||||||
context.lineWidth = 4.0;
|
|
||||||
context.strokeRect(0.0, 0.0, width, height)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun draw() {
|
|
||||||
if (valid) return
|
|
||||||
|
|
||||||
clear();
|
|
||||||
for (shape in shapes) {
|
|
||||||
shape.draw(this);
|
|
||||||
}
|
|
||||||
valid = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fun v(x : Double, y : Double) = Vector(x, y);
|
|
||||||
|
|
||||||
class Vector(var x : Double = 0.0, var y : Double = 0.0) {
|
|
||||||
fun plus(v : Vector) = v(x + v.x, y + v.y);
|
|
||||||
fun minus(v : Vector) = v(x - v.x, y - v.y);
|
|
||||||
fun times(coef : Double) = v(x * coef, y * coef);
|
|
||||||
fun distanceTo(v : Vector) = Math.sqrt((this - v).sqr);
|
|
||||||
fun isInRect(topLeft : Vector, size : Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) &&
|
|
||||||
(y >= topLeft.y) && (y <= topLeft.y + size.y)
|
|
||||||
val sqr : Double
|
|
||||||
get() = x * x + y * y;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun main() {
|
|
||||||
val state = CanvasState(getCanvas());
|
|
||||||
state.addShape(JB(v(1.0, 1.0)));
|
|
||||||
setTimeout({
|
|
||||||
state.valid = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<!--
|
|
||||||
~ Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/html4/loose.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Canvas demo</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas height="450" width="800"></canvas>
|
|
||||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
||||||
<script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
|
||||||
<script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
|
||||||
<script src="interactive.js" type="text/javascript"></script>
|
|
||||||
<img src="jbLogo.png" hidden=true/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
<!--
|
|
||||||
~ Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/html4/loose.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Canvas demo</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas height="450" width="800"></canvas>
|
|
||||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
||||||
<script src="../../kotlin_lib.js" type="text/javascript"></script>
|
|
||||||
<script src="../../canvas_helper.js" type="text/javascript"></script>
|
|
||||||
<script src="tutorial.js" type="text/javascript"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// By Simon Sarris
|
|
||||||
// www.simonsarris.com
|
|
||||||
// sarris@acm.org
|
|
||||||
//
|
|
||||||
// Last update December 2011
|
|
||||||
//
|
|
||||||
// Free to use and distribute at will
|
|
||||||
// So long as you are nice to people, etc
|
|
||||||
|
|
||||||
// Constructor for Shape objects to hold data for all drawn objects.
|
|
||||||
// For now they will just be defined as rectangles.
|
|
||||||
function Shape(x, y, w, h, fill) {
|
|
||||||
// This is a very simple and unsafe constructor. All we're doing is checking if the values exist.
|
|
||||||
// "x || 0" just means "if there is a value for x, use that. Otherwise use 0."
|
|
||||||
// But we aren't checking anything else! We could put "Lalala" for the value of x
|
|
||||||
this.x = x || 0;
|
|
||||||
this.y = y || 0;
|
|
||||||
this.w = w || 1;
|
|
||||||
this.h = h || 1;
|
|
||||||
this.fill = fill || '#AAAAAA';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draws this shape to a given context
|
|
||||||
Shape.prototype.draw = function (ctx) {
|
|
||||||
ctx.fillStyle = this.fill;
|
|
||||||
ctx.fillRect(this.x, this.y, this.w, this.h);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine if a point is inside the shape's bounds
|
|
||||||
Shape.prototype.contains = function (mx, my) {
|
|
||||||
// All we have to do is make sure the Mouse X,Y fall in the area between
|
|
||||||
// the shape's X and (X + Height) and its Y and (Y + Height)
|
|
||||||
return (this.x <= mx) && (this.x + this.w >= mx) &&
|
|
||||||
(this.y <= my) && (this.y + this.h >= my);
|
|
||||||
}
|
|
||||||
|
|
||||||
function CanvasState(canvas) {
|
|
||||||
// **** First some setup! ****
|
|
||||||
|
|
||||||
this.canvas = canvas;
|
|
||||||
this.width = canvas.width;
|
|
||||||
this.height = canvas.height;
|
|
||||||
this.ctx = canvas.getContext('2d');
|
|
||||||
// This complicates things a little but but fixes mouse co-ordinate problems
|
|
||||||
// when there's a border or padding. See getMouse for more detail
|
|
||||||
// if (document.defaultView && document.defaultView.getComputedStyle) {
|
|
||||||
// this.stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
|
|
||||||
// this.stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
|
|
||||||
// this.styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
|
|
||||||
// this.styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
|
|
||||||
// }
|
|
||||||
// Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
|
|
||||||
// They will mess up mouse coordinates and this fixes that
|
|
||||||
var html = document.body.parentNode;
|
|
||||||
this.htmlTop = html.offsetTop;
|
|
||||||
this.htmlLeft = html.offsetLeft;
|
|
||||||
|
|
||||||
// **** Keep track of state! ****
|
|
||||||
|
|
||||||
this.valid = false; // when set to false, the canvas will redraw everything
|
|
||||||
this.shapes = []; // the collection of things to be drawn
|
|
||||||
this.dragging = false; // Keep track of when we are dragging
|
|
||||||
// the current selected object. In the future we could turn this into an array for multiple selection
|
|
||||||
this.selection = null;
|
|
||||||
this.dragoffx = 0; // See mousedown and mousemove events for explanation
|
|
||||||
this.dragoffy = 0;
|
|
||||||
|
|
||||||
// **** Then events! ****
|
|
||||||
|
|
||||||
// This is an example of a closure!
|
|
||||||
// Right here "this" means the CanvasState. But we are making events on the Canvas itself,
|
|
||||||
// and when the events are fired on the canvas the variable "this" is going to mean the canvas!
|
|
||||||
// Since we still want to use this particular CanvasState in the events we have to save a reference to it.
|
|
||||||
// This is our reference!
|
|
||||||
var myState = this;
|
|
||||||
|
|
||||||
//fixes a problem where double clicking causes text to get selected on the canvas
|
|
||||||
canvas.addEventListener('selectstart', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
return false;
|
|
||||||
}, false);
|
|
||||||
// Up, down, and move are for dragging
|
|
||||||
canvas.addEventListener('mousedown', function (e) {
|
|
||||||
var mouse = myState.getMouse(e);
|
|
||||||
var mx = mouse.x;
|
|
||||||
var my = mouse.y;
|
|
||||||
var shapes = myState.shapes;
|
|
||||||
var l = shapes.length;
|
|
||||||
for (var i = l - 1; i >= 0; i--) {
|
|
||||||
if (shapes[i].contains(mx, my)) {
|
|
||||||
var mySel = shapes[i];
|
|
||||||
// Keep track of where in the object we clicked
|
|
||||||
// so we can move it smoothly (see mousemove)
|
|
||||||
myState.dragoffx = mx - mySel.x;
|
|
||||||
myState.dragoffy = my - mySel.y;
|
|
||||||
myState.dragging = true;
|
|
||||||
myState.selection = mySel;
|
|
||||||
myState.valid = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// havent returned means we have failed to select anything.
|
|
||||||
// If there was an object selected, we deselect it
|
|
||||||
if (myState.selection) {
|
|
||||||
myState.selection = null;
|
|
||||||
myState.valid = false; // Need to clear the old selection border
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
canvas.addEventListener('mousemove', function (e) {
|
|
||||||
if (myState.dragging) {
|
|
||||||
var mouse = myState.getMouse(e);
|
|
||||||
// We don't want to drag the object by its top-left corner, we want to drag it
|
|
||||||
// from where we clicked. Thats why we saved the offset and use it here
|
|
||||||
myState.selection.x = mouse.x - myState.dragoffx;
|
|
||||||
myState.selection.y = mouse.y - myState.dragoffy;
|
|
||||||
myState.valid = false; // Something's dragging so we must redraw
|
|
||||||
}
|
|
||||||
}, true);
|
|
||||||
canvas.addEventListener('mouseup', function (e) {
|
|
||||||
myState.dragging = false;
|
|
||||||
}, true);
|
|
||||||
// double click for making new shapes
|
|
||||||
canvas.addEventListener('dblclick', function (e) {
|
|
||||||
var mouse = myState.getMouse(e);
|
|
||||||
myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)'));
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
// **** Options! ****
|
|
||||||
|
|
||||||
this.selectionColor = '#CC0000';
|
|
||||||
this.selectionWidth = 2;
|
|
||||||
this.interval = 30;
|
|
||||||
setInterval(function () {
|
|
||||||
myState.draw();
|
|
||||||
}, myState.interval);
|
|
||||||
}
|
|
||||||
|
|
||||||
CanvasState.prototype.addShape = function (shape) {
|
|
||||||
this.shapes.push(shape);
|
|
||||||
this.valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
CanvasState.prototype.clear = function () {
|
|
||||||
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
// While draw is called as often as the INTERVAL variable demands,
|
|
||||||
// It only ever does something if the canvas gets invalidated by our code
|
|
||||||
CanvasState.prototype.draw = function () {
|
|
||||||
// if our state is invalid, redraw and validate!
|
|
||||||
if (!this.valid) {
|
|
||||||
var ctx = this.ctx;
|
|
||||||
var shapes = this.shapes;
|
|
||||||
this.clear();
|
|
||||||
|
|
||||||
// ** Add stuff you want drawn in the background all the time here **
|
|
||||||
|
|
||||||
// draw all shapes
|
|
||||||
var l = shapes.length;
|
|
||||||
for (var i = 0; i < l; i++) {
|
|
||||||
var shape = shapes[i];
|
|
||||||
// We can skip the drawing of elements that have moved off the screen:
|
|
||||||
if (shape.x > this.width || shape.y > this.height ||
|
|
||||||
shape.x + shape.w < 0 || shape.y + shape.h < 0) continue;
|
|
||||||
shapes[i].draw(ctx);
|
|
||||||
}
|
|
||||||
|
|
||||||
// draw selection
|
|
||||||
// right now this is just a stroke along the edge of the selected Shape
|
|
||||||
if (this.selection != null) {
|
|
||||||
ctx.strokeStyle = this.selectionColor;
|
|
||||||
ctx.lineWidth = this.selectionWidth;
|
|
||||||
var mySel = this.selection;
|
|
||||||
ctx.strokeRect(mySel.x, mySel.y, mySel.w, mySel.h);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ** Add stuff you want drawn on top all the time here **
|
|
||||||
|
|
||||||
this.valid = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Creates an object with x and y defined, set to the mouse position relative to the state's canvas
|
|
||||||
// If you wanna be super-correct this can be tricky, we have to worry about padding and borders
|
|
||||||
CanvasState.prototype.getMouse = function (e) {
|
|
||||||
var element = this.canvas, offsetX = 0, offsetY = 0, mx, my;
|
|
||||||
|
|
||||||
// Compute the total offset
|
|
||||||
if (element.offsetParent !== undefined) {
|
|
||||||
do {
|
|
||||||
offsetX += element.offsetLeft;
|
|
||||||
offsetY += element.offsetTop;
|
|
||||||
} while ((element = element.offsetParent));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add padding and border style widths to offset
|
|
||||||
// Also add the <html> offsets in case there's a position:fixed bar
|
|
||||||
// offsetX += this.stylePaddingLeft + this.styleBorderLeft + this.htmlLeft;
|
|
||||||
// offsetY += this.stylePaddingTop + this.styleBorderTop + this.htmlTop;
|
|
||||||
|
|
||||||
mx = e.pageX - offsetX;
|
|
||||||
my = e.pageY - offsetY;
|
|
||||||
|
|
||||||
// We return a simple javascript object (a hash) with x and y defined
|
|
||||||
return {x:mx, y:my};
|
|
||||||
}
|
|
||||||
|
|
||||||
// If you dont want to use <body onLoad='init()'>
|
|
||||||
// You could uncomment this init() reference and place the script reference inside the body tag
|
|
||||||
init();
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
var s = new CanvasState(getCanvas());
|
|
||||||
s.addShape(new Shape(40, 40, 50, 50)); // The default is gray
|
|
||||||
s.addShape(new Shape(60, 140, 40, 60, 'lightskyblue'));
|
|
||||||
// Lets make some partially transparent
|
|
||||||
s.addShape(new Shape(80, 150, 60, 30, 'rgba(127, 255, 212, .5)'));
|
|
||||||
s.addShape(new Shape(125, 80, 30, 80, 'rgba(245, 222, 179, .7)'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Now go make something amazing!
|
|
||||||
@@ -1,475 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
{
|
|
||||||
var classes = function () {
|
|
||||||
var Vector = Kotlin.Class.create({initialize:function (x, y) {
|
|
||||||
this.$x = x;
|
|
||||||
this.$y = y;
|
|
||||||
}, get_x:function () {
|
|
||||||
return this.$x;
|
|
||||||
}, get_y:function () {
|
|
||||||
return this.$y;
|
|
||||||
}, plus:function (v) {
|
|
||||||
{
|
|
||||||
return interactive2.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y());
|
|
||||||
}
|
|
||||||
}, minus:function () {
|
|
||||||
{
|
|
||||||
return interactive2.v_0(-this.get_x(), -this.get_y());
|
|
||||||
}
|
|
||||||
}, minus$0:function (v) {
|
|
||||||
{
|
|
||||||
return interactive2.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y());
|
|
||||||
}
|
|
||||||
}, times:function (coef) {
|
|
||||||
{
|
|
||||||
return interactive2.v_0(this.get_x() * coef, this.get_y() * coef);
|
|
||||||
}
|
|
||||||
}, distanceTo:function (v) {
|
|
||||||
{
|
|
||||||
return Math.sqrt(this.minus$0(v).get_sqr());
|
|
||||||
}
|
|
||||||
}, rotatedBy:function (theta) {
|
|
||||||
{
|
|
||||||
var sin = Math.sin(theta);
|
|
||||||
var cos = Math.cos(theta);
|
|
||||||
return interactive2.v_0(this.get_x() * cos - this.get_y() * sin, this.get_x() * sin + this.get_y() * cos);
|
|
||||||
}
|
|
||||||
}, isInRect:function (topLeft, size) {
|
|
||||||
{
|
|
||||||
return this.get_x() >= topLeft.get_x() && this.get_x() <= topLeft.get_x() + size.get_x() && this.get_y() >= topLeft.get_y() && this.get_y() <= topLeft.get_y() + size.get_y();
|
|
||||||
}
|
|
||||||
}, get_sqr:function () {
|
|
||||||
{
|
|
||||||
return this.get_x() * this.get_x() + this.get_y() * this.get_y();
|
|
||||||
}
|
|
||||||
}, get_normalized:function () {
|
|
||||||
{
|
|
||||||
return this.times(1 / Math.sqrt(this.get_sqr()));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var RadialGradientGenerator = Kotlin.Class.create({initialize:function (context) {
|
|
||||||
this.$context = context;
|
|
||||||
this.$gradients = new Kotlin.ArrayList;
|
|
||||||
this.$current = 0;
|
|
||||||
{
|
|
||||||
this.newColorStops([
|
|
||||||
[0, '#F59898'],
|
|
||||||
[0.5, '#F57373'],
|
|
||||||
[1, '#DB6B6B']
|
|
||||||
]);
|
|
||||||
this.newColorStops([
|
|
||||||
[0.39, 'rgb(140,167,209)'],
|
|
||||||
[0.7, 'rgb(104,139,209)'],
|
|
||||||
[0.85, 'rgb(67,122,217)']
|
|
||||||
]);
|
|
||||||
this.newColorStops([
|
|
||||||
[0, 'rgb(255,222,255)'],
|
|
||||||
[0.5, 'rgb(255,185,222)'],
|
|
||||||
[1, 'rgb(230,154,185)']
|
|
||||||
]);
|
|
||||||
this.newColorStops([
|
|
||||||
[0, 'rgb(255,209,114)'],
|
|
||||||
[0.5, 'rgb(255,174,81)'],
|
|
||||||
[1, 'rgb(241,145,54)']
|
|
||||||
]);
|
|
||||||
this.newColorStops([
|
|
||||||
[0, 'rgb(132,240,135)'],
|
|
||||||
[0.5, 'rgb(91,240,96)'],
|
|
||||||
[1, 'rgb(27,245,41)']
|
|
||||||
]);
|
|
||||||
this.newColorStops([
|
|
||||||
[0, 'rgb(250,147,250)'],
|
|
||||||
[0.5, 'rgb(255,80,255)'],
|
|
||||||
[1, 'rgb(250,0,217)']
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
}, get_context:function () {
|
|
||||||
return this.$context;
|
|
||||||
}, get_gradients:function () {
|
|
||||||
return this.$gradients;
|
|
||||||
}, get_current:function () {
|
|
||||||
return this.$current;
|
|
||||||
}, set_current:function (tmp$0) {
|
|
||||||
this.$current = tmp$0;
|
|
||||||
}, newColorStops:function (colorStops) {
|
|
||||||
{
|
|
||||||
this.get_gradients().add(colorStops);
|
|
||||||
}
|
|
||||||
}, getNext:function () {
|
|
||||||
{
|
|
||||||
var result = this.get_gradients().get(this.get_current());
|
|
||||||
this.set_current((this.get_current() + 1) % this.get_gradients().size());
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var CanvasState = Kotlin.Class.create({initialize:function (canvas) {
|
|
||||||
this.$canvas = canvas;
|
|
||||||
this.$width = this.get_canvas().width;
|
|
||||||
this.$height = this.get_canvas().height;
|
|
||||||
this.$context = getContext();
|
|
||||||
this.$valid = false;
|
|
||||||
this.$shapes = new Kotlin.ArrayList;
|
|
||||||
this.$selection = null;
|
|
||||||
this.$dragOff = new interactive2.Vector_0(0, 0);
|
|
||||||
this.$interval = 1000 / 30;
|
|
||||||
{
|
|
||||||
var tmp$4;
|
|
||||||
var tmp$3;
|
|
||||||
var tmp$2;
|
|
||||||
var tmp$1;
|
|
||||||
var tmp$0_0;
|
|
||||||
$(this.get_canvas()).mousedown((tmp$0_0 = this , function (it) {
|
|
||||||
{
|
|
||||||
var tmp$0;
|
|
||||||
tmp$0_0.set_valid(false);
|
|
||||||
tmp$0_0.set_selection(null);
|
|
||||||
var mousePos = tmp$0_0.mousePos_0(it);
|
|
||||||
{
|
|
||||||
tmp$0 = tmp$0_0.get_shapes().iterator();
|
|
||||||
while (tmp$0.hasNext()) {
|
|
||||||
var shape = tmp$0.next();
|
|
||||||
{
|
|
||||||
if (shape.contains(mousePos)) {
|
|
||||||
tmp$0_0.set_dragOff(mousePos.minus$0(shape.get_pos()));
|
|
||||||
shape.set_selected(true);
|
|
||||||
tmp$0_0.set_selection(shape);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).mousemove((tmp$1 = this , function (it) {
|
|
||||||
{
|
|
||||||
if (tmp$1.get_selection() != null) {
|
|
||||||
Kotlin.sure(tmp$1.get_selection()).set_pos(tmp$1.mousePos_0(it).minus$0(tmp$1.get_dragOff()));
|
|
||||||
tmp$1.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).mouseup((tmp$2 = this , function (it) {
|
|
||||||
{
|
|
||||||
if (tmp$2.get_selection() != null) {
|
|
||||||
Kotlin.sure(tmp$2.get_selection()).set_selected(false);
|
|
||||||
}
|
|
||||||
tmp$2.set_selection(null);
|
|
||||||
tmp$2.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
$(this.get_canvas()).dblclick((tmp$3 = this , function (it) {
|
|
||||||
{
|
|
||||||
var redTransparentCircle = new interactive2.Creature_0(tmp$3.mousePos_0(it), tmp$3);
|
|
||||||
tmp$3.addShape(redTransparentCircle);
|
|
||||||
tmp$3.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
interactive2.doWithPeriod(this.get_interval(), (tmp$4 = this , function () {
|
|
||||||
{
|
|
||||||
tmp$4.draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
));
|
|
||||||
}
|
|
||||||
}, get_canvas:function () {
|
|
||||||
return this.$canvas;
|
|
||||||
}, get_width:function () {
|
|
||||||
return this.$width;
|
|
||||||
}, get_height:function () {
|
|
||||||
return this.$height;
|
|
||||||
}, get_context:function () {
|
|
||||||
return this.$context;
|
|
||||||
}, get_valid:function () {
|
|
||||||
return this.$valid;
|
|
||||||
}, set_valid:function (tmp$0) {
|
|
||||||
this.$valid = tmp$0;
|
|
||||||
}, get_shapes:function () {
|
|
||||||
return this.$shapes;
|
|
||||||
}, set_shapes:function (tmp$0) {
|
|
||||||
this.$shapes = tmp$0;
|
|
||||||
}, get_selection:function () {
|
|
||||||
return this.$selection;
|
|
||||||
}, set_selection:function (tmp$0) {
|
|
||||||
this.$selection = tmp$0;
|
|
||||||
}, get_dragOff:function () {
|
|
||||||
return this.$dragOff;
|
|
||||||
}, set_dragOff:function (tmp$0) {
|
|
||||||
this.$dragOff = tmp$0;
|
|
||||||
}, get_interval:function () {
|
|
||||||
return this.$interval;
|
|
||||||
}, mousePos_0:function (e) {
|
|
||||||
{
|
|
||||||
var offset = new interactive2.Vector_0(0, 0);
|
|
||||||
var element = this.get_canvas();
|
|
||||||
while (element != null) {
|
|
||||||
var el = Kotlin.sure(element);
|
|
||||||
offset = offset.plus(new interactive2.Vector_0(el.offsetLeft, el.offsetTop));
|
|
||||||
element = el.offsetParent;
|
|
||||||
}
|
|
||||||
return (new interactive2.Vector_0(e.pageX, e.pageY)).minus$0(offset);
|
|
||||||
}
|
|
||||||
}, addShape:function (shape) {
|
|
||||||
{
|
|
||||||
this.get_shapes().add(shape);
|
|
||||||
this.set_valid(false);
|
|
||||||
}
|
|
||||||
}, clear:function () {
|
|
||||||
{
|
|
||||||
this.get_context().fillStyle = '#FFFFFF';
|
|
||||||
this.get_context().fillRect(0, 0, this.get_width(), this.get_height());
|
|
||||||
this.get_context().strokeStyle = '#000000';
|
|
||||||
this.get_context().lineWidth = 4;
|
|
||||||
this.get_context().strokeRect(0, 0, this.get_width(), this.get_height());
|
|
||||||
}
|
|
||||||
}, draw:function () {
|
|
||||||
{
|
|
||||||
var tmp$0;
|
|
||||||
if (this.get_valid())
|
|
||||||
return;
|
|
||||||
this.clear();
|
|
||||||
{
|
|
||||||
tmp$0 = this.get_shapes().iterator();
|
|
||||||
while (tmp$0.hasNext()) {
|
|
||||||
var shape = tmp$0.next();
|
|
||||||
{
|
|
||||||
shape.draw(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.set_valid(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Shape = Kotlin.Class.create({initialize:function () {
|
|
||||||
this.$selected = false;
|
|
||||||
}, draw:function (state) {
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_selected:function () {
|
|
||||||
return this.$selected;
|
|
||||||
}, set_selected:function (tmp$0) {
|
|
||||||
this.$selected = tmp$0;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) {
|
|
||||||
this.$pos = pos;
|
|
||||||
this.$state = state;
|
|
||||||
this.super_init();
|
|
||||||
this.$shadowOffset = interactive2.v_0(-5, 5);
|
|
||||||
this.$colorStops = interactive2.get_gradientGenerator().getNext();
|
|
||||||
this.$relSize = 0.05;
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_state:function () {
|
|
||||||
return this.$state;
|
|
||||||
}, set_state:function (tmp$0) {
|
|
||||||
this.$state = tmp$0;
|
|
||||||
}, get_shadowOffset:function () {
|
|
||||||
return this.$shadowOffset;
|
|
||||||
}, get_colorStops:function () {
|
|
||||||
return this.$colorStops;
|
|
||||||
}, get_relSize:function () {
|
|
||||||
return this.$relSize;
|
|
||||||
}, get_radius:function () {
|
|
||||||
{
|
|
||||||
return this.get_state().get_width() * this.get_relSize();
|
|
||||||
}
|
|
||||||
}, get_position:function () {
|
|
||||||
var tmp$0;
|
|
||||||
if (this.get_selected())
|
|
||||||
tmp$0 = this.get_pos().minus$0(this.get_shadowOffset());
|
|
||||||
else
|
|
||||||
tmp$0 = this.get_pos();
|
|
||||||
{
|
|
||||||
return tmp$0;
|
|
||||||
}
|
|
||||||
}, get_directionToLogo:function () {
|
|
||||||
{
|
|
||||||
return interactive2.get_JB().get_centre().minus$0(this.get_position()).get_normalized();
|
|
||||||
}
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
{
|
|
||||||
return this.get_pos().distanceTo(mousePos) < this.get_radius();
|
|
||||||
}
|
|
||||||
}, fillCircle:function (receiver, position, rad) {
|
|
||||||
{
|
|
||||||
receiver.beginPath();
|
|
||||||
receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false);
|
|
||||||
receiver.closePath();
|
|
||||||
receiver.fill();
|
|
||||||
}
|
|
||||||
}, draw:function (state) {
|
|
||||||
{
|
|
||||||
var context = state.get_context();
|
|
||||||
if (!this.get_selected()) {
|
|
||||||
this.drawCreature(context);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.drawCreatureWithShadow(context);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, drawCreature:function (context) {
|
|
||||||
{
|
|
||||||
context.fillStyle = this.getGradient(context);
|
|
||||||
this.fillCircle(context, this.get_position(), this.get_radius());
|
|
||||||
this.drawEye(context);
|
|
||||||
this.drawTail(context);
|
|
||||||
}
|
|
||||||
}, getGradient:function (context) {
|
|
||||||
{
|
|
||||||
var tmp$0;
|
|
||||||
var gradientCentre = this.get_position().plus(this.get_directionToLogo().times(this.get_radius() / 4));
|
|
||||||
var gradient = context.createRadialGradient(gradientCentre.get_x(), gradientCentre.get_y(), 1, gradientCentre.get_x(), gradientCentre.get_y(), 2 * this.get_radius());
|
|
||||||
{
|
|
||||||
tmp$0 = Kotlin.arrayIterator(this.get_colorStops());
|
|
||||||
while (tmp$0.hasNext()) {
|
|
||||||
var colorStop = tmp$0.next();
|
|
||||||
{
|
|
||||||
gradient.addColorStop(colorStop[0], colorStop[1]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return gradient;
|
|
||||||
}
|
|
||||||
}, drawTail:function (context) {
|
|
||||||
{
|
|
||||||
var tailDirection = this.get_directionToLogo().minus();
|
|
||||||
var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(0.7));
|
|
||||||
var tailSize = this.get_radius() * 1.6;
|
|
||||||
var angle = Math.PI / 6;
|
|
||||||
var p1 = tailPos.plus(tailDirection.rotatedBy(angle).times(tailSize));
|
|
||||||
var p2 = tailPos.plus(tailDirection.rotatedBy(-angle).times(tailSize));
|
|
||||||
context.fillStyle = this.getGradient(context);
|
|
||||||
context.beginPath();
|
|
||||||
context.moveTo(tailPos.get_x(), tailPos.get_y());
|
|
||||||
context.lineTo(p1.get_x(), p1.get_y());
|
|
||||||
var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1));
|
|
||||||
context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y());
|
|
||||||
context.lineTo(tailPos.get_x(), tailPos.get_y());
|
|
||||||
context.closePath();
|
|
||||||
context.fill();
|
|
||||||
}
|
|
||||||
}, drawEye:function (context) {
|
|
||||||
{
|
|
||||||
var eyePos = this.get_directionToLogo().times(this.get_radius()).times(0.6).plus(this.get_position());
|
|
||||||
var eyeRadius = this.get_radius() / 3;
|
|
||||||
var eyeLidRadius = eyeRadius / 2;
|
|
||||||
context.fillStyle = '#FFFFFF';
|
|
||||||
this.fillCircle(context, eyePos, eyeRadius);
|
|
||||||
context.fillStyle = '#000000';
|
|
||||||
this.fillCircle(context, eyePos, eyeLidRadius);
|
|
||||||
}
|
|
||||||
}, drawCreatureWithShadow:function (context) {
|
|
||||||
{
|
|
||||||
context.save();
|
|
||||||
this.setShadow(context);
|
|
||||||
context.fillStyle = this.getGradient(context);
|
|
||||||
this.fillCircle(context, this.get_position(), this.get_radius());
|
|
||||||
context.restore();
|
|
||||||
this.drawEye(context);
|
|
||||||
this.drawTail(context);
|
|
||||||
}
|
|
||||||
}, setShadow:function (context) {
|
|
||||||
{
|
|
||||||
context.shadowColor = 'rgba(100, 100, 100, 0.7)';
|
|
||||||
context.shadowBlur = 5;
|
|
||||||
context.shadowOffsetX = this.get_shadowOffset().get_x();
|
|
||||||
context.shadowOffsetY = this.get_shadowOffset().get_y();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var Logo = Kotlin.Class.create(Shape, {initialize:function (pos, relSize) {
|
|
||||||
this.$pos = pos;
|
|
||||||
this.$relSize = relSize;
|
|
||||||
this.super_init();
|
|
||||||
this.$imageSize = interactive2.v_0(704, 254);
|
|
||||||
this.$canvasSize = this.get_imageSize().times(this.get_relSize());
|
|
||||||
}, get_pos:function () {
|
|
||||||
return this.$pos;
|
|
||||||
}, set_pos:function (tmp$0) {
|
|
||||||
this.$pos = tmp$0;
|
|
||||||
}, get_relSize:function () {
|
|
||||||
return this.$relSize;
|
|
||||||
}, set_relSize:function (tmp$0) {
|
|
||||||
this.$relSize = tmp$0;
|
|
||||||
}, get_imageSize:function () {
|
|
||||||
return this.$imageSize;
|
|
||||||
}, get_canvasSize:function () {
|
|
||||||
return this.$canvasSize;
|
|
||||||
}, draw:function (state) {
|
|
||||||
{
|
|
||||||
var context = state.get_context();
|
|
||||||
context.drawImage(getKotlinLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_pos().get_x(), this.get_pos().get_y(), this.get_canvasSize().get_x(), this.get_canvasSize().get_y());
|
|
||||||
}
|
|
||||||
}, contains:function (mousePos) {
|
|
||||||
{
|
|
||||||
return mousePos.isInRect(this.get_pos(), this.get_canvasSize());
|
|
||||||
}
|
|
||||||
}, get_centre:function () {
|
|
||||||
{
|
|
||||||
return this.get_pos().plus(this.get_canvasSize().times(0.5));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector};
|
|
||||||
}
|
|
||||||
();
|
|
||||||
var interactive2 = Kotlin.Namespace.create({initialize:function () {
|
|
||||||
interactive2.$gradientGenerator = new interactive2.RadialGradientGenerator_0(getContext());
|
|
||||||
interactive2.$JB = new interactive2.Logo_0(interactive2.v_0(20, 20), 0.3);
|
|
||||||
}, get_gradientGenerator:function () {
|
|
||||||
return interactive2.$gradientGenerator;
|
|
||||||
}, get_JB:function () {
|
|
||||||
return interactive2.$JB;
|
|
||||||
}, doWithPeriod:function (period, f) {
|
|
||||||
{
|
|
||||||
setInterval(f, period);
|
|
||||||
}
|
|
||||||
}, v_0:function (x, y) {
|
|
||||||
{
|
|
||||||
return new interactive2.Vector_0(x, y);
|
|
||||||
}
|
|
||||||
}, main:function () {
|
|
||||||
{
|
|
||||||
var state = new interactive2.CanvasState_0(getCanvas());
|
|
||||||
state.addShape(interactive2.get_JB());
|
|
||||||
setTimeout(function () {
|
|
||||||
{
|
|
||||||
state.set_valid(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, classes);
|
|
||||||
interactive2.initialize();
|
|
||||||
}
|
|
||||||
|
|
||||||
var args = [];
|
|
||||||
interactive2.main(args);
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
@@ -1,280 +0,0 @@
|
|||||||
package interactive2;
|
|
||||||
|
|
||||||
import jquery.*;
|
|
||||||
import html5.*;
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import js.*;
|
|
||||||
import js.Math;
|
|
||||||
import js.setInterval
|
|
||||||
import html5.getCanvas
|
|
||||||
import html5.getKotlinLogo
|
|
||||||
import jquery.jq
|
|
||||||
import js.setTimeout
|
|
||||||
|
|
||||||
val gradientGenerator = RadialGradientGenerator(getContext())
|
|
||||||
val JB = Logo(v(20.0, 20.0))
|
|
||||||
|
|
||||||
fun doWithPeriod(period : Int, f : ()->Unit) {
|
|
||||||
setInterval(f, period);
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract class Shape() {
|
|
||||||
abstract fun draw(state : CanvasState);
|
|
||||||
abstract fun contains(mousePos : Vector) : Boolean;
|
|
||||||
abstract var pos : Vector;
|
|
||||||
var selected : Boolean = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
class Logo(override var pos : Vector,
|
|
||||||
var relSize : Double = 0.3)
|
|
||||||
: Shape()
|
|
||||||
{
|
|
||||||
val imageSize = v(704.0, 254.0)
|
|
||||||
val canvasSize = imageSize * relSize
|
|
||||||
|
|
||||||
override fun draw(state : CanvasState) {
|
|
||||||
val context = state.context;
|
|
||||||
context.drawImage(getKotlinLogo(), 0.0, 0.0, imageSize.x, imageSize.y, pos.x, pos.y, canvasSize.x, canvasSize.y)
|
|
||||||
}
|
|
||||||
|
|
||||||
override fun contains(mousePos: Vector): Boolean = mousePos.isInRect(pos, canvasSize)
|
|
||||||
|
|
||||||
val centre : Vector
|
|
||||||
get() = pos + canvasSize * 0.5
|
|
||||||
}
|
|
||||||
|
|
||||||
class Creature(override var pos : Vector,
|
|
||||||
var state : CanvasState) : Shape() {
|
|
||||||
|
|
||||||
val shadowOffset = v(-5.0, 5.0)
|
|
||||||
val colorStops = gradientGenerator.getNext()
|
|
||||||
val relSize = 0.05;
|
|
||||||
val radius : Double
|
|
||||||
get() = state.width * relSize;
|
|
||||||
|
|
||||||
val position : Vector
|
|
||||||
get() = if (selected) pos - shadowOffset else pos
|
|
||||||
|
|
||||||
val directionToLogo : Vector
|
|
||||||
get() = (JB.centre - position).normalized
|
|
||||||
|
|
||||||
override fun contains(mousePos : Vector) = pos.distanceTo(mousePos) < radius;
|
|
||||||
|
|
||||||
fun Context.fillCircle(position : Vector, rad : Double) {
|
|
||||||
beginPath();
|
|
||||||
arc(position.x, position.y, rad, 0.0, 2 * Math.PI, false);
|
|
||||||
closePath();
|
|
||||||
fill()
|
|
||||||
}
|
|
||||||
|
|
||||||
override fun draw(state : CanvasState) {
|
|
||||||
val context = state.context;
|
|
||||||
if (!selected) {
|
|
||||||
drawCreature(context)
|
|
||||||
} else {
|
|
||||||
drawCreatureWithShadow(context)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fun drawCreature(context : Context) {
|
|
||||||
context.fillStyle = getGradient(context);
|
|
||||||
context.fillCircle(position, radius)
|
|
||||||
drawEye(context)
|
|
||||||
drawTail(context)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun getGradient(context : Context) : CanvasGradient {
|
|
||||||
val gradientCentre = position + directionToLogo * (radius / 4)
|
|
||||||
val gradient = context.createRadialGradient(gradientCentre.x, gradientCentre.y, 1.0, gradientCentre.x, gradientCentre.y, 2 * radius)
|
|
||||||
for (colorStop in colorStops) {
|
|
||||||
gradient.addColorStop(colorStop._1, colorStop._2)
|
|
||||||
}
|
|
||||||
return gradient;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun drawTail(context : Context) {
|
|
||||||
val tailDirection = -directionToLogo;
|
|
||||||
val tailPos = position + tailDirection * radius * 0.7
|
|
||||||
val tailSize = radius * 1.6
|
|
||||||
val angle = Math.PI / 6.0;
|
|
||||||
val p1 = tailPos + tailDirection.rotatedBy(angle) * tailSize
|
|
||||||
val p2 = tailPos + tailDirection.rotatedBy(-angle) * tailSize
|
|
||||||
context.fillStyle = getGradient(context)
|
|
||||||
context.beginPath()
|
|
||||||
context.moveTo(tailPos.x, tailPos.y)
|
|
||||||
context.lineTo(p1.x, p1.y)
|
|
||||||
val middlePoint = position + tailDirection * radius * 1.0
|
|
||||||
context.quadraticCurveTo(middlePoint.x, middlePoint.y, p2.x, p2.y)
|
|
||||||
context.lineTo(tailPos.x, tailPos.y)
|
|
||||||
context.closePath()
|
|
||||||
context.fill()
|
|
||||||
}
|
|
||||||
|
|
||||||
fun drawEye(context : Context) {;
|
|
||||||
val eyePos = directionToLogo * radius * 0.6 + position;
|
|
||||||
val eyeRadius = radius / 3;
|
|
||||||
val eyeLidRadius = eyeRadius / 2;
|
|
||||||
context.fillStyle = "#FFFFFF";
|
|
||||||
context.fillCircle(eyePos, eyeRadius)
|
|
||||||
context.fillStyle = "#000000"
|
|
||||||
context.fillCircle(eyePos, eyeLidRadius)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun drawCreatureWithShadow(context : Context) {
|
|
||||||
context.save()
|
|
||||||
setShadow(context)
|
|
||||||
context.fillStyle = getGradient(context)
|
|
||||||
context.fillCircle(position, radius)
|
|
||||||
context.restore();
|
|
||||||
drawEye(context)
|
|
||||||
drawTail(context)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun setShadow(context : Context) {
|
|
||||||
context.shadowColor = "rgba(100, 100, 100, 0.7)";
|
|
||||||
context.shadowBlur = 5.0;
|
|
||||||
context.shadowOffsetX = shadowOffset.x;
|
|
||||||
context.shadowOffsetY = shadowOffset.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class CanvasState(val canvas : Canvas) {
|
|
||||||
val width = canvas.width;
|
|
||||||
val height = canvas.height;
|
|
||||||
val context = getContext();
|
|
||||||
var valid = false;
|
|
||||||
var shapes = ArrayList<Shape>();
|
|
||||||
var selection : Shape? = null;
|
|
||||||
var dragOff = Vector();
|
|
||||||
val interval = 1000 / 30;
|
|
||||||
|
|
||||||
{
|
|
||||||
jq(canvas).mousedown {
|
|
||||||
valid = false;
|
|
||||||
selection = null;
|
|
||||||
val mousePos = mousePos(it);
|
|
||||||
for (shape in shapes) {
|
|
||||||
if (mousePos in shape) {
|
|
||||||
dragOff = mousePos - shape.pos;
|
|
||||||
shape.selected = true;
|
|
||||||
selection = shape;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).mousemove {
|
|
||||||
if (selection != null) {
|
|
||||||
selection.sure().pos = mousePos(it) - dragOff;
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).mouseup {
|
|
||||||
if (selection != null) {
|
|
||||||
selection.sure().selected = false;
|
|
||||||
}
|
|
||||||
selection = null;
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
jq(canvas).dblclick {
|
|
||||||
val redTransparentCircle = Creature(mousePos(it), this @CanvasState);
|
|
||||||
addShape(redTransparentCircle);
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
doWithPeriod(interval) {
|
|
||||||
draw();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fun mousePos(e : MouseEvent) : Vector {
|
|
||||||
var offset = Vector();
|
|
||||||
var element : DomElement? = canvas;
|
|
||||||
while (element != null) {
|
|
||||||
val el : DomElement = element.sure();
|
|
||||||
offset += Vector(el.offsetLeft, el.offsetTop);
|
|
||||||
element = el.offsetParent;
|
|
||||||
}
|
|
||||||
return Vector(e.pageX, e.pageY) - offset;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun addShape(shape : Shape) {
|
|
||||||
shapes.add(shape);
|
|
||||||
valid = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
fun clear() {
|
|
||||||
context.fillStyle = "#FFFFFF"
|
|
||||||
context.fillRect(0.0, 0.0, width, height)
|
|
||||||
context.strokeStyle = "#000000"
|
|
||||||
context.lineWidth = 4.0;
|
|
||||||
context.strokeRect(0.0, 0.0, width, height)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun draw() {
|
|
||||||
if (valid) return
|
|
||||||
|
|
||||||
clear();
|
|
||||||
for (shape in shapes) {
|
|
||||||
shape.draw(this);
|
|
||||||
}
|
|
||||||
valid = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class RadialGradientGenerator(val context : Context) {
|
|
||||||
val gradients = ArrayList<Array<#(Double, String)>>();
|
|
||||||
var current = 0
|
|
||||||
|
|
||||||
fun newColorStops(vararg colorStops : #(Double, String)) {
|
|
||||||
gradients.add(colorStops)
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
newColorStops(#(0.0, "#F59898"), #(0.5, "#F57373"), #(1.0, "#DB6B6B"))
|
|
||||||
newColorStops(#(0.39, "rgb(140,167,209)"), #(0.7, "rgb(104,139,209)"), #(0.85, "rgb(67,122,217)"))
|
|
||||||
newColorStops(#(0.0, "rgb(255,222,255)"), #(0.5, "rgb(255,185,222)"), #(1.0, "rgb(230,154,185)"))
|
|
||||||
newColorStops(#(0.0, "rgb(255,209,114)"), #(0.5, "rgb(255,174,81)"), #(1.0, "rgb(241,145,54)"))
|
|
||||||
newColorStops(#(0.0, "rgb(132,240,135)"), #(0.5, "rgb(91,240,96)"), #(1.0, "rgb(27,245,41)"))
|
|
||||||
newColorStops(#(0.0, "rgb(250,147,250)"), #(0.5, "rgb(255,80,255)"), #(1.0, "rgb(250,0,217)"))
|
|
||||||
}
|
|
||||||
|
|
||||||
fun getNext() : Array<#(Double, String)> {
|
|
||||||
val result = gradients.get(current)
|
|
||||||
current = (current + 1) % gradients.size()
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fun v(x : Double, y : Double) = Vector(x, y);
|
|
||||||
|
|
||||||
class Vector(val x : Double = 0.0, val y : Double = 0.0) {
|
|
||||||
fun plus(v : Vector) = v(x + v.x, y + v.y);
|
|
||||||
fun minus() = v(-x, -y)
|
|
||||||
fun minus(v : Vector) = v(x - v.x, y - v.y)
|
|
||||||
fun times(coef : Double) = v(x * coef, y * coef)
|
|
||||||
fun distanceTo(v : Vector) = Math.sqrt((this - v).sqr)
|
|
||||||
fun rotatedBy(theta : Double) : Vector {
|
|
||||||
val sin = Math.sin(theta)
|
|
||||||
val cos = Math.cos(theta)
|
|
||||||
return v(x * cos - y * sin, x * sin + y * cos)
|
|
||||||
}
|
|
||||||
|
|
||||||
fun isInRect(topLeft : Vector, size : Vector) = (x >= topLeft.x) && (x <= topLeft.x + size.x) &&
|
|
||||||
(y >= topLeft.y) && (y <= topLeft.y + size.y)
|
|
||||||
|
|
||||||
val sqr : Double
|
|
||||||
get() = x * x + y * y
|
|
||||||
val normalized : Vector
|
|
||||||
get() = this * (1.0 / Math.sqrt(sqr))
|
|
||||||
}
|
|
||||||
|
|
||||||
fun main() {
|
|
||||||
val state = CanvasState(getCanvas());
|
|
||||||
state.addShape(JB);
|
|
||||||
setTimeout({
|
|
||||||
state.valid = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
<!--
|
|
||||||
~ Copyright 2000-2012 JetBrains s.r.o.
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/html4/loose.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Canvas demo</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas height="450" width="800"></canvas>
|
|
||||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
|
||||||
<script src="../../../../translator/testFiles/kotlin_lib.js" type="text/javascript"></script>
|
|
||||||
<script src="../../../../translator/testFiles/canvas_helper.js" type="text/javascript"></script>
|
|
||||||
<script src="interactive2.js" type="text/javascript"></script>
|
|
||||||
<img src="jbLogo.png" hidden=true/>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user