SHARE
TWEET

Untitled

a guest Oct 13th, 2019 103 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as Rx from "rxjs";
  2. import * as Snabbdom from "snabbdom-pragma";
  3. import { CycleDOMEvent, div, h1, hr, input, label, p, VNode } from "@cycle/dom";
  4. import { DOMSource, makeDOMDriver } from "@cycle/dom/lib/cjs/rxjs";
  5. import { run } from "@cycle/rxjs-run";
  6. import { Observable, from } from "rxjs";
  7. import { map, startWith } from "rxjs/operators";
  8.  
  9. //想定 40個のボタン
  10.  
  11. // 正直かなりリアクトで書いた感に欠いてる
  12. type Sources = {
  13.   DOM: DOMSource;
  14. };
  15.  
  16. type Sinks = {
  17.   DOM: Observable<VNode>;
  18. };
  19.  
  20. /**
  21.  * アプリケーション
  22.  * @param sources
  23.  * @returns {{DOM: Observable<VNode>}}
  24.  */
  25. export function cardMain(card: CardName) {
  26.   return function main(sources: Sources): Sinks {
  27.     // スライダー入力イベントを取得 ( Intent )
  28.     const input$: Observable<Event> = sources.DOM.select("#" + card).events(
  29.       "mousedown"
  30.     );
  31.  
  32.     // 入力イベントから現在の状態ないし値を取得 ( Model )
  33.     const value$: Observable<number> = from(input$).pipe(
  34.       map((ev: Event) => {
  35.         const entity = ev.target as HTMLInputElement;
  36.         console.log(entity.value);
  37.         return parseInt((ev.target as HTMLInputElement).value);
  38.       })
  39.     );
  40.  
  41.     const DEFAULT_VALUE = 50;
  42.     const d = new Date();
  43.     const hun = d.getSeconds();
  44.     const state$ = value$.pipe(startWith(hun));
  45.  
  46.     // 現在の状態を画面に描画 ( View )
  47.     const vdom$: Observable<VNode> = state$.pipe(
  48.       map((value) => {
  49.         console.log(card);
  50.         return div("hoge")
  51.       })
  52.     );
  53.  
  54.     // 結果をドライバに出力する ( Sinks )
  55.     return {
  56.       DOM: vdom$
  57.     };
  58.   };
  59. }
  60.  
  61. export function drackAndDrop(card: CardName) {
  62.   const cardElement = document.getElementById(card);
  63.   const x = cardElement.offsetLeft;
  64.   const y = cardElement.offsetTop;
  65.   const mousedown$ = Rx.fromEvent(cardElement, "mousedown");
  66.   mousedown$.subscribe(mdown);
  67.   //マウスが押された際の関数
  68.   function mdown(e) {
  69.     //drag中はdragってクラスがついてることにしておく
  70.     cardElement.classList.add("drag");
  71.     document.body.addEventListener("mousemove", mmove, false);
  72.   }
  73.   //マウスカーソルが動いたときに発火
  74.   function mmove(e) {
  75.     cardElement.style.top = e.pageY - y + "px";
  76.     cardElement.style.left = e.pageX - x + "px";
  77.     cardElement.addEventListener("mouseup", mup, false);
  78.     document.body.addEventListener("mouseleave", mup, false);
  79.   }
  80.   function mup(e) {
  81.     console.log("mup");
  82.     //ムーブベントハンドラの消去
  83.     document.body.removeEventListener("mousemove", mmove, false);
  84.     cardElement.removeEventListener("mouseup", mup, false);
  85.     cardElement.classList.remove("drag");
  86.   }
  87. }
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