オープンソースの冒険:エピソード19:IMBA
6868 ワード
私がIMBA 1に入った日に、私はおもちゃのImba 1アプリの多くを書いた.それはimba 2でそれらを書き直す良い時間です.
移植にはいくつかの困難があります. Imba 1をImba 2コードに変換する自動化された方法はありません、それはCoffeeScriptの異なる方言です、そして、それはちょうど構文的でありません コンポーネントモデルは同じではなく、Imba Imba 2がWebコンポーネントに基づいているので、全体的な疑わしい決定-それによる1つの巨大な問題は、彼らがちょうどSVGで働きません、そして、私は私のアプリで多くのSVGを使用しました;私は、Imbaがすることができたどんな回避もあるかどうか、わかりません 私のミニアプリはすべてのSCSSを使用し、Imba 私はそのようなポートを前にしました-Imba 1 eyes , Imba 2 eyes - which you can see in action here .
Imba 2強制タブmake Imba 2 code look like total ass on github , タブのインデント、およびOMGのための8つのスペースを使用するように、それは醜いです.By comparison 2-spaced Imba 1 code looks neat .
あなたがエディタを2つのスペースとしてタブを表示するように設定することができるということを知っています、しかし、このセッティングはどこにでも適用されません.私は、それが全くひどい選択であると思います、そして、Imbaはちょうど異なるようにしようとする代わりに、他のすべてのフロントエンド技術使用を標準的な2つのスペースに変えるべきです.
私はすべての目を自分で作らなければならなかった
私はImba 2の新しいCSSシステムにそれをポートしませんでした.私は、私がそれをまだしていなかったので、それがちょうど私が持っていたSCSSを再利用することをしていた時を信じています.
次のいくつかのエピソードでは、私はImba 2にいくつかのより多くのImbaのアプリをポートしようとすると、おそらくその新しいCSSシステムのようないくつかの新しいImba 2の機能を試してみてください.
移植にはいくつかの困難があります.
Imba 2強制タブmake Imba 2 code look like total ass on github , タブのインデント、およびOMGのための8つのスペースを使用するように、それは醜いです.By comparison 2-spaced Imba 1 code looks neat .
あなたがエディタを2つのスペースとしてタブを表示するように設定することができるということを知っています、しかし、このセッティングはどこにでも適用されません.私は、それが全くひどい選択であると思います、そして、Imbaはちょうど異なるようにしようとする代わりに、他のすべてのフロントエンド技術使用を標準的な2つのスペースに変えるべきです.
アイム1アイズコード
tag Eye < svg:g
prop mx
prop my
def render
let max_eye_movement = 0.3 * data:sz
let rx = data:x
let ry = data:y
if mx != null && my != null
let dx = mx - data:x
let dy = my - data:y
let dl = Math.sqrt(dx*dx + dy*dy)
if dl > max_eye_movement
dx = max_eye_movement * dx/dl
dy = max_eye_movement * dy/dl
rx += dx
ry += dy
<self>
<svg:circle.eye1 cx=(data:x) cy=(data:y) r=(data:sz)>
<svg:circle.eye2 cx=(rx) cy=(ry) r=(data:sz * 0.5) css:fill=(data:color)>
<svg:circle.eye3 cx=(rx) cy=(ry) r=(data:sz * 0.2)>
tag App
def mount
schedule(raf: true)
def onmousemove(event)
let native_event = event:_event
let svg = document.get-element-by-id("eyes")
let rect = svg.get-bounding-client-rect()
@mx = native_event:pageX - rect:x
@my = native_event:pageY - rect:y
def eye_distance(eye1, eye2)
let dx = eye1:x - eye2:x
let dy = eye1:y - eye2:y
Math.sqrt((dx * dx) + (dy * dy))
def can_place_eye(new_eye)
@eyes.every do |eye|
eye_distance(eye, new_eye) >= eye:sz + new_eye:sz + 5
def random_color
let h = Math.random() * 360
let s = Math.round(50 + Math.random() * 50)
let l = Math.round(30 + Math.random() * 40)
"hsl({h}, {s}%, {l}%)"
def setup
let wh = window:inner-height
let ww = window:inner-width
@mx = Math.random() * ww
@my = Math.random() * wh
@eyes = []
for i in [1..1000]
let sz = 20 + Math.random() * 60
let x = sz + Math.random() * (ww - 2 * sz)
let y = sz + Math.random() * (wh - 2 * sz)
let new_eye = {x: x, y: y, sz: sz, color: random_color}
if can_place_eye(new_eye)
@eyes.push(new_eye)
def render
<self>
<svg:svg#eyes>
for eye in @eyes
<Eye[eye] mx=@mx my=@my>
Imba.mount <App>
ここで注目すべきデザインはEye
コンポーネントはsvg:g
.アイム1アイズ
@import 'normalize-scss';
@include normalize();
body {
overflow: hidden;
}
.App {
width: 100vw;
height: 100vh;
overflow: hidden;
svg {
width: 100vw;
height: 100vh;
display: block;
background-color: #aaa;
.eye1 {
fill: white;
stroke: black;
stroke-width: 3px;
}
.eye2 {
stroke: black;
stroke-width: 1px;
}
.eye3 {
fill: black;
}
}
}
それは簡単にプレーンCSSを持つことができました、しかし、私はちょうど普通のCSSが好きでありません.また、パッケージから正規化を使用すると、関連する部分はいくつかの行になります.アイム2アイズコード
私はすべての目を自分で作らなければならなかった
<svg>
ちょうどAである代わりに<g>
. このおもちゃのアプリの罰金だが、Imba 2のアプローチだけではない多くのケースがあります.# NOTE:
# Can't inherit from svg:g yet in imba2
# so this is a bit awkward
tag spooky-eye
def render
let max_eye_movement = 0.3 * data.sz
let rx = data.x
let ry = data.y
if mx != null && my != null
let dx = mx - data.x
let dy = my - data.y
let dl = Math.sqrt(dx*dx + dy*dy)
if dl > max_eye_movement
dx = max_eye_movement * dx/dl
dy = max_eye_movement * dy/dl
rx += dx
ry += dy
<self>
<svg>
<svg:circle.eye1 cx=(data.x) cy=(data.y) r=(data.sz)>
<svg:circle.eye2 cx=(rx) cy=(ry) r=(data.sz * 0.5) css:fill=(data.color)>
<svg:circle.eye3 cx=(rx) cy=(ry) r=(data.sz * 0.2)>
tag app-root
def eye_distance(eye1, eye2)
let dx = eye1.x - eye2.x
let dy = eye1.y - eye2.y
Math.sqrt((dx * dx) + (dy * dy))
def can_place_eye(new_eye)
eyes.every do |eye|
eye_distance(eye, new_eye) >= eye.sz + new_eye.sz + 5
def random_color()
let h = Math.random() * 360
let s = Math.round(50 + Math.random() * 50)
let l = Math.round(30 + Math.random() * 40)
"hsl({h}, {s}%, {l}%)"
def onmousemove(event)
let element = document.get-element-by-id("eyes")
let rect = element.get-bounding-client-rect()
mx = event.page-x - rect.x
my = event.page-y - rect.y
def constructor
super
let wh = window.inner-height
let ww = window.inner-width
mx = Math.random() * ww
my = Math.random() * wh
eyes = []
for i in [1 .. 1000]
let sz = 20 + Math.random() * 60
let x = sz + Math.random() * (ww - 2 * sz)
let y = sz + Math.random() * (wh - 2 * sz)
let new_eye = {x: x, y: y, sz: sz, color: random_color()}
if can_place_eye(new_eye)
eyes.push(new_eye)
def render
<self#eyes :mousemove.onmousemove>
for eye in eyes
<spooky-eye data=eye mx=mx my=my>
アイムツーアイズ
私はImba 2の新しいCSSシステムにそれをポートしませんでした.私は、私がそれをまだしていなかったので、それがちょうど私が持っていたSCSSを再利用することをしていた時を信じています.
@import 'normalize-scss';
@include normalize();
app-root {
display: block;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #aaa;
svg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
.eye1 {
fill: white;
stroke: black;
stroke-width: 3px;
}
.eye2 {
stroke: black;
stroke-width: 1px;
}
.eye3 {
fill: black;
}
}
}
今度来る
次のいくつかのエピソードでは、私はImba 2にいくつかのより多くのImbaのアプリをポートしようとすると、おそらくその新しいCSSシステムのようないくつかの新しいImba 2の機能を試してみてください.
Reference
この問題について(オープンソースの冒険:エピソード19:IMBA), 我々は、より多くの情報をここで見つけました https://dev.to/taw/open-source-adventures-episode-19-porting-imba-1-apps-to-imba-2-22kfテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol