From 7a64b37468697693bac7a761d82046c3f89d3006 Mon Sep 17 00:00:00 2001 From: pTalanov Date: Thu, 1 Mar 2012 16:23:49 +0400 Subject: [PATCH] Examples updated. --- js/js.examples/js.examples.iml | 5 +- .../src/html5/creatures/creatures.js | 1119 +++++++++-------- js/js.examples/src/html5/creatures/main.kt | 6 +- .../src/html5/creatures/template.html | 4 +- .../src/html5/fancyLines/fancylines.js | 185 ++- .../src/html5/fancyLines/template.html | 4 +- js/js.examples/src/html5/fancyLines/test.kt | 4 +- js/js.examples/src/html5/floatingText/test.kt | 2 +- .../src/html5/interactive/interactive.js | 339 ----- .../src/html5/interactive/jbLogo.png | Bin 9327 -> 0 bytes js/js.examples/src/html5/interactive/main.kt | 183 --- .../src/html5/interactive/template.html | 31 - .../src/html5/interactive/template_copy.html | 30 - .../src/html5/interactive/tutorial.js | 238 ---- .../src/html5/interactive2/interactive2.js | 475 ------- .../src/html5/interactive2/jbLogo.png | Bin 9327 -> 0 bytes js/js.examples/src/html5/interactive2/main.kt | 280 ----- .../src/html5/interactive2/template.html | 31 - 18 files changed, 683 insertions(+), 2253 deletions(-) delete mode 100644 js/js.examples/src/html5/interactive/interactive.js delete mode 100644 js/js.examples/src/html5/interactive/jbLogo.png delete mode 100644 js/js.examples/src/html5/interactive/main.kt delete mode 100644 js/js.examples/src/html5/interactive/template.html delete mode 100644 js/js.examples/src/html5/interactive/template_copy.html delete mode 100644 js/js.examples/src/html5/interactive/tutorial.js delete mode 100644 js/js.examples/src/html5/interactive2/interactive2.js delete mode 100644 js/js.examples/src/html5/interactive2/jbLogo.png delete mode 100644 js/js.examples/src/html5/interactive2/main.kt delete mode 100644 js/js.examples/src/html5/interactive2/template.html diff --git a/js/js.examples/js.examples.iml b/js/js.examples/js.examples.iml index d5c07432750..861647b3dcc 100644 --- a/js/js.examples/js.examples.iml +++ b/js/js.examples/js.examples.iml @@ -2,11 +2,12 @@ - - + + + diff --git a/js/js.examples/src/html5/creatures/creatures.js b/js/js.examples/src/html5/creatures/creatures.js index a83e29d65ad..9148767d4fa 100644 --- a/js/js.examples/src/html5/creatures/creatures.js +++ b/js/js.examples/src/html5/creatures/creatures.js @@ -1,545 +1,586 @@ -/* - * 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 creatures.v_0(this.get_x() + v.get_x(), this.get_y() + v.get_y()); - } - }, minus:function () { - { - return creatures.v_0(-this.get_x(), -this.get_y()); - } - }, minus$0:function (v) { - { - return creatures.v_0(this.get_x() - v.get_x(), this.get_y() - v.get_y()); - } - }, times:function (koef) { - { - return creatures.v_0(this.get_x() * koef, this.get_y() * koef); - } - }, 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 creatures.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 creatures.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 newCreature = new creatures.Creature_0(tmp$3.mousePos_0(it), tmp$3); - tmp$3.addShape(newCreature); - tmp$3.set_valid(false); - } - } - )); - setInterval((tmp$4 = this , function () { - { - tmp$4.draw(); - } - } - ), this.get_interval()); - } - }, get_canvas:function () { - return this.$canvas; - }, get_width:function () { - return this.$width; - }, set_width:function (tmp$0) { - this.$width = tmp$0; - }, get_height:function () { - return this.$height; - }, set_height:function (tmp$0) { - this.$height = tmp$0; - }, get_size:function () { - { - return creatures.v_0(this.get_width(), this.get_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 creatures.Vector_0(0, 0); - var element = this.get_canvas(); - while (element != null) { - var el = Kotlin.sure(element); - offset = offset.plus(new creatures.Vector_0(el.offsetLeft, el.offsetTop)); - element = el.offsetParent; - } - return (new creatures.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 = creatures.reversed(this.get_shapes()).iterator(); - while (tmp$0.hasNext()) { - var shape = tmp$0.next(); - { - shape.draw(this); - } - } - } - creatures.get_Kotlin().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; - }, shadowed:function (receiver, shadowOffset, alpha, render) { - { - receiver.save(); - receiver.shadowColor = 'rgba(100, 100, 100, ' + alpha + ')'; - receiver.shadowBlur = 5; - receiver.shadowOffsetX = shadowOffset.get_x(); - receiver.shadowOffsetY = shadowOffset.get_y(); - render.call(receiver); - receiver.restore(); - } - }, fillPath:function (receiver, constructPath) { - { - receiver.beginPath(); - constructPath.call(receiver); - receiver.closePath(); - receiver.fill(); - } - } - }); - var Creature = Kotlin.Class.create(Shape, {initialize:function (pos, state) { - this.$pos = pos; - this.$state = state; - this.super_init(); - this.$shadowOffset = creatures.v_0(-5, 5); - this.$colorStops = creatures.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; - }, 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 creatures.get_Kotlin().get_centre().minus$0(this.get_position()).get_normalized(); - } - }, contains:function (mousePos) { - { - return this.get_pos().distanceTo(mousePos) < this.get_radius(); - } - }, circlePath:function (receiver, position, rad) { - { - receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false); - } - }, fillCircle:function (receiver, position, rad) { - { - var tmp$0; - this.fillPath(receiver, (tmp$0 = this , function () { - { - tmp$0.circlePath(receiver, position, rad); - } - } - )); - } - }, draw:function (state) { - { - var context = state.get_context(); - if (!this.get_selected()) { - this.drawCreature(context); - } - else { - this.drawCreatureWithShadow(context); - } - } - }, drawCreature:function (context) { - { - var tmp$0; - context.fillStyle = this.getGradient(context); - this.fillPath(context, (tmp$0 = this , function () { - { - tmp$0.tailPath(context); - tmp$0.circlePath(this, tmp$0.get_position(), tmp$0.get_radius()); - } - } - )); - this.drawEye(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; - } - }, tailPath:function (context) { - { - var tailDirection = this.get_directionToLogo().minus(); - var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); - 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)); - var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); - context.moveTo(tailPos.get_x(), tailPos.get_y()); - context.lineTo(p1.get_x(), p1.get_y()); - context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y()); - context.lineTo(tailPos.get_x(), tailPos.get_y()); - } - }, 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) { - { - var tmp$0_0; - this.shadowed(context, this.get_shadowOffset(), 0.7, (tmp$0_0 = this , function () { - { - var tmp$0; - context.fillStyle = tmp$0_0.getGradient(context); - tmp$0_0.fillPath(this, (tmp$0 = tmp$0_0 , function () { - { - tmp$0.tailPath(context); - tmp$0.circlePath(context, tmp$0.get_position(), tmp$0.get_radius()); - } - } - )); - } - } - )); - this.drawEye(context); - } - } - }); - var Logo = Kotlin.Class.create(Shape, {initialize:function (pos) { - this.$pos = pos; - this.super_init(); - this.$relSize = 0.25; - this.$shadowOffset = creatures.v_0(-3, 3); - this.$imageSize = creatures.v_0(377, 393); - this.$size = 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; - }, get_shadowOffset:function () { - return this.$shadowOffset; - }, get_imageSize:function () { - return this.$imageSize; - }, get_size:function () { - return this.$size; - }, set_size:function (tmp$0) { - this.$size = tmp$0; - }, 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; - } - }, drawLogo:function (state) { - { - this.set_size(this.get_imageSize().times(state.get_size().get_x() / this.get_imageSize().get_x()).times(this.get_relSize())); - state.get_context().drawImage(getKotlinLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_position().get_x(), this.get_position().get_y(), this.get_size().get_x(), this.get_size().get_y()); - } - }, draw:function (state) { - { - var context = state.get_context(); - if (this.get_selected()) { - var tmp$0; - this.shadowed(context, this.get_shadowOffset(), 0.2, (tmp$0 = this , function () { - { - tmp$0.drawLogo(state); - } - } - )); - } - else { - this.drawLogo(state); - } - } - }, contains:function (mousePos) { - { - return mousePos.isInRect(this.get_pos(), this.get_size()); - } - }, get_centre:function () { - { - return this.get_pos().plus(this.get_size().times(0.5)); - } - } - }); - return {Shape_0:Shape, Logo_0:Logo, Creature_0:Creature, RadialGradientGenerator_0:RadialGradientGenerator, CanvasState_0:CanvasState, Vector_0:Vector}; +var classes = function(){ + var tmp$0 = 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 creatures.v(this.get_x() + v.get_x(), this.get_y() + v.get_y()); } - (); - var creatures = Kotlin.Namespace.create({initialize:function () { - creatures.$Kotlin = new creatures.Logo_0(creatures.v_0(300, 100)); - creatures.$gradientGenerator = new creatures.RadialGradientGenerator_0(getContext()); - }, get_Kotlin:function () { - return creatures.$Kotlin; - }, get_gradientGenerator:function () { - return creatures.$gradientGenerator; - }, v_0:function (x, y) { - { - return new creatures.Vector_0(x, y); - } - }, main:function () { - { - var state = new creatures.CanvasState_0(getCanvas()); - state.addShape(creatures.get_Kotlin()); - state.addShape(new creatures.Creature_0(state.get_size().times(0.25), state)); - state.addShape(new creatures.Creature_0(state.get_size().times(0.75), state)); - setTimeout(function () { - { - state.set_valid(false); - } - } - ); - } - }, reversed:function (receiver) { - { - var result = new Kotlin.ArrayList; - var i = receiver.size(); - while (i > 0) { - result.add(receiver.get(--i)); - } - return result; - } + } + , minus:function(){ + { + return creatures.v(-this.get_x(), -this.get_y()); } - }, classes); - creatures.initialize(); + } + , minus$0:function(v){ + { + return creatures.v(this.get_x() - v.get_x(), this.get_y() - v.get_y()); + } + } + , times:function(koef){ + { + return creatures.v(this.get_x() * koef, this.get_y() * koef); + } + } + , 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 creatures.v(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 tmp$1 = 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 tmp$2 = 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 creatures.Vector(0, 0); + this.$interval = 1000 / 30; + { + var tmp$0_0; + $(this.get_canvas()).mousedown((tmp$0_0 = this , function(it){ + { + tmp$0_0.set_valid(false); + tmp$0_0.set_selection(null); + var mousePos = tmp$0_0.mousePos_0(it); + var tmp$0; + { + 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; + } + } + } + } + } + } + )); + var tmp$1; + $(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); + } + } + } + )); + var tmp$2; + $(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); + } + } + )); + var tmp$3; + $(this.get_canvas()).dblclick((tmp$3 = this , function(it){ + { + var newCreature = new creatures.Creature(tmp$3.mousePos_0(it), tmp$3); + tmp$3.addShape(newCreature); + tmp$3.set_valid(false); + } + } + )); + var tmp$4; + setInterval((tmp$4 = this , function(){ + { + tmp$4.draw(); + } + } + ), this.get_interval()); + } + } + , get_canvas:function(){ + return this.$canvas; + } + , get_width:function(){ + return this.$width; + } + , set_width:function(tmp$0){ + this.$width = tmp$0; + } + , get_height:function(){ + return this.$height; + } + , set_height:function(tmp$0){ + this.$height = tmp$0; + } + , get_size:function(){ + { + return creatures.v(this.get_width(), this.get_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 creatures.Vector(0, 0); + var element = this.get_canvas(); + while (element != null) { + var el = Kotlin.sure(element); + offset = offset.plus(new creatures.Vector(el.offsetLeft, el.offsetTop)); + element = el.offsetParent; + } + return (new creatures.Vector(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(){ + { + if (this.get_valid()) + return; + this.clear(); + var tmp$0; + { + tmp$0 = creatures.reversed(this.get_shapes()).iterator(); + while (tmp$0.hasNext()) { + var shape = tmp$0.next(); + { + shape.draw(this); + } + } + } + creatures.get_Kotlin().draw(this); + this.set_valid(true); + } + } + }); + var tmp$3 = Kotlin.Class.create({initialize:function(){ + this.$selected = false; + } + , draw:function(state){ + } + , contains:function(mousePos){ + } + , get_pos:function(){ + return this.$pos_0; + } + , set_pos:function(tmp$0){ + this.$pos_0 = tmp$0; + } + , get_selected:function(){ + return this.$selected; + } + , set_selected:function(tmp$0){ + this.$selected = tmp$0; + } + , shadowed:function(receiver, shadowOffset, alpha, render){ + { + receiver.save(); + receiver.shadowColor = 'rgba(100, 100, 100, ' + alpha + ')'; + receiver.shadowBlur = 5; + receiver.shadowOffsetX = shadowOffset.get_x(); + receiver.shadowOffsetY = shadowOffset.get_y(); + render.call(receiver); + receiver.restore(); + } + } + , fillPath:function(receiver, constructPath){ + { + receiver.beginPath(); + constructPath.call(receiver); + receiver.closePath(); + receiver.fill(); + } + } + }); + var tmp$4 = Kotlin.Class.create(tmp$3, {initialize:function(pos, state){ + this.$pos = pos; + this.$state = state; + this.super_init(); + this.$shadowOffset = creatures.v(-5, 5); + this.$colorStops = creatures.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; + } + , 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 creatures.get_Kotlin().get_centre().minus$0(this.get_position()).get_normalized(); + } + } + , contains:function(mousePos){ + { + return this.get_pos().distanceTo(mousePos) < this.get_radius(); + } + } + , circlePath:function(receiver, position, rad){ + { + receiver.arc(position.get_x(), position.get_y(), rad, 0, 2 * Math.PI, false); + } + } + , fillCircle:function(receiver, position, rad){ + { + var tmp$0; + this.fillPath(receiver, (tmp$0 = this , function(){ + { + tmp$0.circlePath(receiver, position, rad); + } + } + )); + } + } + , 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); + var tmp$0; + this.fillPath(context, (tmp$0 = this , function(){ + { + tmp$0.tailPath(context); + tmp$0.circlePath(this, tmp$0.get_position(), tmp$0.get_radius()); + } + } + )); + this.drawEye(context); + } + } + , getGradient:function(context){ + { + 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()); + var tmp$0; + var tmp$1; + var tmp$2; + { + tmp$0 = this.get_colorStops(); + tmp$1 = tmp$0.length; + for (var tmp$2 = 0; tmp$2 != tmp$1; ++tmp$2) { + var colorStop = tmp$0[tmp$2]; + { + gradient.addColorStop(colorStop[0], colorStop[1]); + } + } + } + return gradient; + } + } + , tailPath:function(context){ + { + var tailDirection = this.get_directionToLogo().minus(); + var tailPos = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + 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)); + var middlePoint = this.get_position().plus(tailDirection.times(this.get_radius()).times(1)); + context.moveTo(tailPos.get_x(), tailPos.get_y()); + context.lineTo(p1.get_x(), p1.get_y()); + context.quadraticCurveTo(middlePoint.get_x(), middlePoint.get_y(), p2.get_x(), p2.get_y()); + context.lineTo(tailPos.get_x(), tailPos.get_y()); + } + } + , 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){ + { + var tmp$0_0; + this.shadowed(context, this.get_shadowOffset(), 0.7, (tmp$0_0 = this , function(){ + { + context.fillStyle = tmp$0_0.getGradient(context); + var tmp$0; + tmp$0_0.fillPath(this, (tmp$0 = tmp$0_0 , function(){ + { + tmp$0.tailPath(context); + tmp$0.circlePath(context, tmp$0.get_position(), tmp$0.get_radius()); + } + } + )); + } + } + )); + this.drawEye(context); + } + } + }); + var tmp$5 = Kotlin.Class.create(tmp$3, {initialize:function(pos){ + this.$pos = pos; + this.super_init(); + this.$relSize = 0.25; + this.$shadowOffset = creatures.v(-3, 3); + this.$imageSize = creatures.v(377, 393); + this.$size = 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; + } + , get_shadowOffset:function(){ + return this.$shadowOffset; + } + , get_imageSize:function(){ + return this.$imageSize; + } + , get_size:function(){ + return this.$size; + } + , set_size:function(tmp$0){ + this.$size = tmp$0; + } + , 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; + } + } + , drawLogo:function(state){ + { + this.set_size(this.get_imageSize().times(state.get_size().get_x() / this.get_imageSize().get_x()).times(this.get_relSize())); + state.get_context().drawImage(getKotlinLogo(), 0, 0, this.get_imageSize().get_x(), this.get_imageSize().get_y(), this.get_position().get_x(), this.get_position().get_y(), this.get_size().get_x(), this.get_size().get_y()); + } + } + , draw:function(state){ + { + var context = state.get_context(); + if (this.get_selected()) { + var tmp$0; + this.shadowed(context, this.get_shadowOffset(), 0.2, (tmp$0 = this , function(){ + { + tmp$0.drawLogo(state); + } + } + )); + } + else { + this.drawLogo(state); + } + } + } + , contains:function(mousePos){ + { + return mousePos.isInRect(this.get_pos(), this.get_size()); + } + } + , get_centre:function(){ + { + return this.get_pos().plus(this.get_size().times(0.5)); + } + } + }); + return {Logo:tmp$5, RadialGradientGenerator:tmp$1, CanvasState:tmp$2, Shape:tmp$3, Creature:tmp$4, Vector:tmp$0}; } +(); +var creatures = Kotlin.Namespace.create({initialize:function(){ + $Kotlin = new creatures.Logo(creatures.v(300, 100)); + $gradientGenerator = new creatures.RadialGradientGenerator(getContext()); +} +, get_Kotlin:function(){ + return $Kotlin; +} +, get_gradientGenerator:function(){ + return $gradientGenerator; +} +, v:function(x, y){ + { + return new creatures.Vector(x, y); + } +} +, main:function(args){ + { + var state = new creatures.CanvasState(getCanvas()); + state.addShape(creatures.get_Kotlin()); + state.addShape(new creatures.Creature(state.get_size().times(0.25), state)); + state.addShape(new creatures.Creature(state.get_size().times(0.75), state)); + setTimeout(function(){ + { + state.set_valid(false); + } + } + ); + } +} +, reversed:function(receiver){ + { + var result = new Kotlin.ArrayList; + var i = receiver.size(); + while (i > 0) { + result.add(receiver.get(--i)); + } + return result; + } +} +}, {Shape:classes.Shape, Logo:classes.Logo, Creature:classes.Creature, CanvasState:classes.CanvasState, RadialGradientGenerator:classes.RadialGradientGenerator, Vector:classes.Vector}); +creatures.initialize(); var args = []; creatures.main(args); diff --git a/js/js.examples/src/html5/creatures/main.kt b/js/js.examples/src/html5/creatures/main.kt index 46e0d92b8c2..793ec6bbe57 100644 --- a/js/js.examples/src/html5/creatures/main.kt +++ b/js/js.examples/src/html5/creatures/main.kt @@ -176,8 +176,8 @@ class Creature(override var pos : Vector, val state : CanvasState) : Shape() { } class CanvasState(val canvas : Canvas) { - var width = canvas.width - var height = canvas.height + var width = canvas.width.toDouble() + var height = canvas.height.toDouble() val size : Vector get() = v(width, height) 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)) } -fun main() { +fun main(args : Array) { val state = CanvasState(getCanvas()) state.addShape(Kotlin) state.addShape(Creature(state.size * 0.25, state)) diff --git a/js/js.examples/src/html5/creatures/template.html b/js/js.examples/src/html5/creatures/template.html index 466bfa8168f..5f98b0ca175 100644 --- a/js/js.examples/src/html5/creatures/template.html +++ b/js/js.examples/src/html5/creatures/template.html @@ -24,8 +24,8 @@ - - + + diff --git a/js/js.examples/src/html5/fancyLines/fancylines.js b/js/js.examples/src/html5/fancyLines/fancylines.js index 27e7e39a3a3..eb3eaf2f316 100644 --- a/js/js.examples/src/html5/fancyLines/fancylines.js +++ b/js/js.examples/src/html5/fancyLines/fancylines.js @@ -1,103 +1,98 @@ -/* - * 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 FancyLines = Kotlin.Class.create({initialize:function () { - this.$context = getContext(); - this.$height = getCanvas().height; - this.$width = getCanvas().width; - this.$x = this.get_width() * Math.random(); - this.$y = this.get_height() * Math.random(); - this.$hue = 0; - }, get_context:function () { - return this.$context; - }, get_height:function () { - return this.$height; - }, get_width:function () { - return this.$width; - }, 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; - }, get_hue:function () { - return this.$hue; - }, set_hue:function (tmp$0) { - this.$hue = tmp$0; - }, line:function () { - { - this.get_context().save(); - this.get_context().beginPath(); - this.get_context().lineWidth = 20 * Math.random(); - this.get_context().moveTo(this.get_x(), this.get_y()); - this.set_x(this.get_width() * Math.random()); - 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.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 classes = function(){ + var tmp$0 = Kotlin.Class.create({initialize:function(){ + this.$context = getContext(); + this.$height = getCanvas().height; + this.$width = getCanvas().width; + this.$x = this.get_width() * Math.random(); + this.$y = this.get_height() * Math.random(); + this.$hue = 0; + } + , get_context:function(){ + return this.$context; + } + , get_height:function(){ + return this.$height; + } + , get_width:function(){ + return this.$width; + } + , 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; + } + , get_hue:function(){ + return this.$hue; + } + , set_hue:function(tmp$0){ + this.$hue = tmp$0; + } + , line:function(){ + { + this.get_context().save(); + this.get_context().beginPath(); + this.get_context().lineWidth = 20 * Math.random(); + this.get_context().moveTo(this.get_x(), this.get_y()); + this.set_x(this.get_width() * Math.random()); + 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.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(); } - (); - var fancylines = Kotlin.Namespace.create({initialize:function () { - }, main:function () { + } + , 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$0; + setInterval((tmp$0 = this , function(){ { - $(function () { - { - (new fancylines.FancyLines_0).run(); - } - } - ); + tmp$0.line(); } + } + ), 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 = []; fancylines.main(args); diff --git a/js/js.examples/src/html5/fancyLines/template.html b/js/js.examples/src/html5/fancyLines/template.html index 64a717ea926..6e6b4171cde 100644 --- a/js/js.examples/src/html5/fancyLines/template.html +++ b/js/js.examples/src/html5/fancyLines/template.html @@ -23,8 +23,8 @@ - - + + \ No newline at end of file diff --git a/js/js.examples/src/html5/fancyLines/test.kt b/js/js.examples/src/html5/fancyLines/test.kt index 892bc4695cc..bc0afc2753d 100644 --- a/js/js.examples/src/html5/fancyLines/test.kt +++ b/js/js.examples/src/html5/fancyLines/test.kt @@ -10,7 +10,7 @@ import js.*; import html5.*; import jquery.*; -fun main() { +fun main(args : Array) { //jq is a name for JQuery function jq { FancyLines().run(); @@ -54,7 +54,7 @@ class FancyLines() { fun blank() { 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() { diff --git a/js/js.examples/src/html5/floatingText/test.kt b/js/js.examples/src/html5/floatingText/test.kt index e5bca3ea4d9..3b239f7cc5c 100644 --- a/js/js.examples/src/html5/floatingText/test.kt +++ b/js/js.examples/src/html5/floatingText/test.kt @@ -68,7 +68,7 @@ class HelloKotlin() { fun renderBackground() { context.save() context.fillStyle = "#5C7EED" - context.fillRect(0.0, 0.0, width, height) + context.fillRect(0.0, 0.0, width.toDouble(), height.toDouble()) context.restore() } diff --git a/js/js.examples/src/html5/interactive/interactive.js b/js/js.examples/src/html5/interactive/interactive.js deleted file mode 100644 index e87a2d66315..00000000000 --- a/js/js.examples/src/html5/interactive/interactive.js +++ /dev/null @@ -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); diff --git a/js/js.examples/src/html5/interactive/jbLogo.png b/js/js.examples/src/html5/interactive/jbLogo.png deleted file mode 100644 index 759aa8ae05a7237bb1793cfb1706f127556b0041..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9327 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�?7QP2QYFfM|yoVITZ(RHUSx5R%X>vYGFUvpe%aq zJyMA*z8;>W*a`u(RunJVvBE|e%B~t$iY7r`m!|%-yQ?Co?MlcN2sA&K{fYj=a(wof^Ha%hXC+zT8r-a`H^)D6SIRU>sstYL!` zdWt7}`qzGW{b5yF7nxCSc$h0PdP@ndsDD7^Qc~#P^++=QYm7)C-2q`~(JMvmY0A)Q zhqIQufS$|!6CeC{5m%T6n_cOB3;I2&_0#m_K8h4|pPHmr>E(nFr!{x`x5WpyRgGq9 zaZ4O>FH4x$c+70L+N1+YC{f*Mvc>yX$f&Lx-={GQI)tf2h0BN`JzYCfjn6R2niMXx zS@$be`i{vb7y8+fnauTA|?t({p_d%9sl7l04DikFc@U<;+*7^pE@B2;{ zPqfrWQ~9M?yMFS9ZMk~klD5xjrLRdjOt6!8Um7F$AB!Y}mK+7So2zfUj;m52l*`sZ zT1pyd2S$Wi3`VjB_QEZ0x@RZ3I#Iy_de2M~i7fo$ZypANj98wxBPWgH?^);K1>f2UuY=mi3!3~>yj>H7Z7;+b#=4^SzUmStogIwnf z@3Z%3W~F=e4DLn+v?K|^z2GSZHQv3mT~XAy;cL*5;e*ss<$Fz%dg_t66Nxp~U4Nk; zD1U0osh(t;+?_Mw)IrB+zE>|=cG8V6@iT_Eg~JC~>o46bI8&VOOAf@Gh7MEkGI(xC z736;8%X(#XDwJ_^Y>w<|&oVUOt9jc8eaGE1uuoHT-HCl?we4=ep~LB+zmJ|MaK87K zPnfmydTQ)eL*0(FAFbX$3$ws8_v8n!^g^EedX+CY;Y2Y%?m49Uio(v|4zPAaY&nw= zXb4B(kH3~9lY;=Zg+@Zi?(5XBhAwZWwJ*O*blg(C`{HW3@3TUQl*8l4!yMvM3BO1m z@GpV-3`g|;T1-&MKke#c58vs*8k}?29mhQgV8>rC`dYF$AvT6itq`=X7{&bx>+Z~v zC|$aeTl!Tg{9Rc^*vV)v*Z7sALq>u6F&T zwo4J_^;fE@6=C~YlN5JRm<8A4Y$cSijhG~2@qfs}jN3j!Nb;UGGe#WfjCslw00t7s zqY5;%En$zUMI7 zees#ut0HPUB7Z=^^UsfYDz|Da_3w5gJU&be|EOAOzwf)$FTABNh-zlX#{9aHOlVwO zGiYR*zuFQOFrqEB1muA8b^`As5DVZGY1(cIsgvUy$$W3bRU!Ts$rZn%*Fm}i0U8d~ z*q@DGt%kv&utAkx{eUz1|8VmjVojGC#|`;}c*IT&?%!X`RJF>jLXimN*-KIhpre_a V?{5ee#9s~qv^DhAtM4Ks{s*lVCNKa1 diff --git a/js/js.examples/src/html5/interactive/main.kt b/js/js.examples/src/html5/interactive/main.kt deleted file mode 100644 index 86eb1c1fdfc..00000000000 --- a/js/js.examples/src/html5/interactive/main.kt +++ /dev/null @@ -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(); - 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 - }) -} \ No newline at end of file diff --git a/js/js.examples/src/html5/interactive/template.html b/js/js.examples/src/html5/interactive/template.html deleted file mode 100644 index d976e3dafc2..00000000000 --- a/js/js.examples/src/html5/interactive/template.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Canvas demo - - - - - - - - - - \ No newline at end of file diff --git a/js/js.examples/src/html5/interactive/template_copy.html b/js/js.examples/src/html5/interactive/template_copy.html deleted file mode 100644 index d3319ca6c00..00000000000 --- a/js/js.examples/src/html5/interactive/template_copy.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Canvas demo - - - - - - - - - \ No newline at end of file diff --git a/js/js.examples/src/html5/interactive/tutorial.js b/js/js.examples/src/html5/interactive/tutorial.js deleted file mode 100644 index fb48f04ce7b..00000000000 --- a/js/js.examples/src/html5/interactive/tutorial.js +++ /dev/null @@ -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 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 -// 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! \ No newline at end of file diff --git a/js/js.examples/src/html5/interactive2/interactive2.js b/js/js.examples/src/html5/interactive2/interactive2.js deleted file mode 100644 index 93de4ed144b..00000000000 --- a/js/js.examples/src/html5/interactive2/interactive2.js +++ /dev/null @@ -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); diff --git a/js/js.examples/src/html5/interactive2/jbLogo.png b/js/js.examples/src/html5/interactive2/jbLogo.png deleted file mode 100644 index 759aa8ae05a7237bb1793cfb1706f127556b0041..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9327 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�?7QP2QYFfM|yoVITZ(RHUSx5R%X>vYGFUvpe%aq zJyMA*z8;>W*a`u(RunJVvBE|e%B~t$iY7r`m!|%-yQ?Co?MlcN2sA&K{fYj=a(wof^Ha%hXC+zT8r-a`H^)D6SIRU>sstYL!` zdWt7}`qzGW{b5yF7nxCSc$h0PdP@ndsDD7^Qc~#P^++=QYm7)C-2q`~(JMvmY0A)Q zhqIQufS$|!6CeC{5m%T6n_cOB3;I2&_0#m_K8h4|pPHmr>E(nFr!{x`x5WpyRgGq9 zaZ4O>FH4x$c+70L+N1+YC{f*Mvc>yX$f&Lx-={GQI)tf2h0BN`JzYCfjn6R2niMXx zS@$be`i{vb7y8+fnauTA|?t({p_d%9sl7l04DikFc@U<;+*7^pE@B2;{ zPqfrWQ~9M?yMFS9ZMk~klD5xjrLRdjOt6!8Um7F$AB!Y}mK+7So2zfUj;m52l*`sZ zT1pyd2S$Wi3`VjB_QEZ0x@RZ3I#Iy_de2M~i7fo$ZypANj98wxBPWgH?^);K1>f2UuY=mi3!3~>yj>H7Z7;+b#=4^SzUmStogIwnf z@3Z%3W~F=e4DLn+v?K|^z2GSZHQv3mT~XAy;cL*5;e*ss<$Fz%dg_t66Nxp~U4Nk; zD1U0osh(t;+?_Mw)IrB+zE>|=cG8V6@iT_Eg~JC~>o46bI8&VOOAf@Gh7MEkGI(xC z736;8%X(#XDwJ_^Y>w<|&oVUOt9jc8eaGE1uuoHT-HCl?we4=ep~LB+zmJ|MaK87K zPnfmydTQ)eL*0(FAFbX$3$ws8_v8n!^g^EedX+CY;Y2Y%?m49Uio(v|4zPAaY&nw= zXb4B(kH3~9lY;=Zg+@Zi?(5XBhAwZWwJ*O*blg(C`{HW3@3TUQl*8l4!yMvM3BO1m z@GpV-3`g|;T1-&MKke#c58vs*8k}?29mhQgV8>rC`dYF$AvT6itq`=X7{&bx>+Z~v zC|$aeTl!Tg{9Rc^*vV)v*Z7sALq>u6F&T zwo4J_^;fE@6=C~YlN5JRm<8A4Y$cSijhG~2@qfs}jN3j!Nb;UGGe#WfjCslw00t7s zqY5;%En$zUMI7 zees#ut0HPUB7Z=^^UsfYDz|Da_3w5gJU&be|EOAOzwf)$FTABNh-zlX#{9aHOlVwO zGiYR*zuFQOFrqEB1muA8b^`As5DVZGY1(cIsgvUy$$W3bRU!Ts$rZn%*Fm}i0U8d~ z*q@DGt%kv&utAkx{eUz1|8VmjVojGC#|`;}c*IT&?%!X`RJF>jLXimN*-KIhpre_a V?{5ee#9s~qv^DhAtM4Ks{s*lVCNKa1 diff --git a/js/js.examples/src/html5/interactive2/main.kt b/js/js.examples/src/html5/interactive2/main.kt deleted file mode 100644 index e4bacc02865..00000000000 --- a/js/js.examples/src/html5/interactive2/main.kt +++ /dev/null @@ -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(); - 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>(); - 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 - }) -} \ No newline at end of file diff --git a/js/js.examples/src/html5/interactive2/template.html b/js/js.examples/src/html5/interactive2/template.html deleted file mode 100644 index f7399d7ee00..00000000000 --- a/js/js.examples/src/html5/interactive2/template.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Canvas demo - - - - - - - - - - \ No newline at end of file