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 759aa8ae05a..00000000000 Binary files a/js/js.examples/src/html5/interactive/jbLogo.png and /dev/null differ 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 759aa8ae05a..00000000000 Binary files a/js/js.examples/src/html5/interactive2/jbLogo.png and /dev/null differ 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