SHARE
TWEET

Untitled

a guest Oct 13th, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { CycleDOMEvent, div, h1, hr, input, label, p, VNode } from "@cycle/dom";
  2. import { css } from "emotion";
  3. import * as Snabbdom from "snabbdom-pragma";
  4. import { DOMSource, makeDOMDriver } from "@cycle/dom/lib/cjs/rxjs";
  5. import { run } from "@cycle/rxjs-run";
  6. import { Observable, timer, from } from "rxjs";
  7. import "../stylus/style.styl";
  8. import * as Rx from "rxjs";
  9. import {
  10.   map,
  11.   startWith,
  12.   scan,
  13.   switchMap,
  14.   combineLatest,
  15.   takeUntil
  16. } from "rxjs/operators";
  17.  
  18. type Sources = {
  19.   DOM: DOMSource;
  20. };
  21.  
  22. type Sinks = {
  23.   DOM: Observable<VNode>;
  24. };
  25.  
  26. /**
  27.  * アプリケーション
  28.  * @param sources
  29.  * @returns {{DOM: Observable<VNode>}}
  30.  **/
  31.  
  32. function cardMain(card: string) {
  33.   return function main(sources: Sources): Sinks {
  34.     // スライダー入力イベントを取得 ( Intent )
  35.     const input$: Observable<Event> = sources.DOM.select("#" + card).events(
  36.       "mousedown"
  37.     );
  38.     const mouseMove$: Observable<Event> = sources.DOM.select("#" + card).events(
  39.       "mousemove"
  40.     );
  41.     const mouseUp$: Observable<Event> = sources.DOM.select("#" + card).events(
  42.       "mouseup"
  43.     );
  44.     const mouseLeave$: Observable<Event> = sources.DOM.select(
  45.       "#" + card
  46.     ).events("mouseleave");
  47.     const mouseUpLeave$: Observable<Event> = Rx.merge(mouseUp$, mouseLeave$);
  48.     const inputGoniMousemomve$: Observable<Event> = input$
  49.       .pipe(switchMap(() => mouseMove$))
  50.       .pipe(takeUntil(mouseUpLeave$));
  51.  
  52.     // 入力イベントから現在の状態ないし値を取得 ( Model )
  53.     const value$: Observable<[number, number]> = inputGoniMousemomve$.pipe(
  54.       map((ev: MouseEvent) => {
  55.         return [ev.pageX - 30, ev.pageY - 30];
  56.       })
  57.     );
  58.  
  59.     const state$ = value$.pipe(startWith([400, 400]));
  60.  
  61.     const myStyle = css({
  62.       color: "hotpink",
  63.       fontSize: "3rem",
  64.       fontWeight: "bold"
  65.     });
  66.  
  67.     // 現在の状態を画面に描画 ( View )
  68.     const vdom$: Observable<VNode> = state$.pipe(
  69.       map((value) => {
  70.         console.log(card);
  71.         const styleOfCard = css({
  72.           top: value[1] + "px",
  73.           left: value[0] + "px",
  74.           position: "absolute"
  75.         });
  76.         return (
  77.           <div className={myStyle}>
  78.             <div id={card} className={styleOfCard}>
  79.               {card}
  80.             </div>
  81.           </div>
  82.         );
  83.       })
  84.     );
  85.  
  86.     // 結果をドライバに出力する ( Sinks )
  87.     return {
  88.       DOM: vdom$
  89.     };
  90.   };
  91. }
  92. function drackAndDrop(card: string) {
  93.   const cardElement = document.getElementById(card);
  94.   const x = cardElement.offsetLeft;
  95.   const y = cardElement.offsetTop;
  96.   const mousedown$ = Rx.fromEvent(cardElement, "mousedown");
  97.   mousedown$.subscribe(mdown);
  98.   //マウスが押された際の関数
  99.   function mdown(e) {
  100.     //drag中はdragってクラスがついてることにしておく
  101.     cardElement.classList.add("drag");
  102.     document.body.addEventListener("mousemove", mmove, false);
  103.   }
  104.   //マウスカーソルが動いたときに発火
  105.   function mmove(e) {
  106.     cardElement.style.top = e.pageY - y + "px";
  107.     cardElement.style.left = e.pageX - x + "px";
  108.     cardElement.addEventListener("mouseup", mup, false);
  109.     document.body.addEventListener("mouseleave", mup, false);
  110.   }
  111.   function mup(e) {
  112.     console.log("mup");
  113.     //ムーブベントハンドラの消去
  114.     document.body.removeEventListener("mousemove", mmove, false);
  115.     cardElement.removeEventListener("mouseup", mup, false);
  116.     cardElement.classList.remove("drag");
  117.   }
  118. }
  119.  
  120. // // アプリケーションからの戻り値を受け取るドライバ群を定義
  121. const drivers = {
  122.   DOM: makeDOMDriver("#app-container") // DOM をレンダリングするドライバ
  123. };
  124.  
  125. // アプリケーションとドライバを結びつける
  126. run(cardMain("裁きの龍"), drivers);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top