TypeScript dom.h函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中@cycle/dom.h函数的典型用法代码示例。如果您正苦于以下问题：TypeScript h函数的具体用法？TypeScript h怎么用？TypeScript h使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了h函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: renderPlayPauseControls

function renderPlayPauseControls(playing: boolean): VNode {
  if (!playing) {
    return h("polygon", {
      class: { play: true },
      attrs: { points: "10,55 40,70 10,85", fill: "lime" }
    });
  }

  return h("g", { class: { pause: true } }, [
    h("rect", {
      attrs: {
        x: 15,
        y: 55,
        height: 30,
        width: 5,
        fill: "lime"
      }
    }),
    h("rect", {
      attrs: {
        x: 30,
        y: 55,
        height: 30,
        width: 5,
        fill: "lime"
      }
    })
  ]);
}

开发者ID:helix-pi，项目名称:helix-pi，代码行数:29，代码来源:editor.ts

示例2: renderInput

function renderInput(project: Project, scenario: Scenario): VNode {
  project;
  scenario;
  const controlWidth = 50;

  const inputRanges = inputEventsToRanges(scenario.input, project.keys);

  const keys = Object.keys(inputRanges).sort();

  const ranges = keys.map(key => ({ key, input: inputRanges[key] }));

  return h(
    "svg",
    { attrs: { width: 800, height: 50 }, class: { "input-controls": true } },
    [
      h("rect", {
        attrs: {
          x: controlWidth,
          y: 0,
          width: 750,
          height: 50,
          fill: "#181818"
        }
      }),

      ...ranges.map(renderInputRange)
    ]
  );
}

开发者ID:helix-pi，项目名称:helix-pi，代码行数:29，代码来源:editor.ts

示例3: renderHealthBar

function renderHealthBar (player: PlayerState | EnemyState) {
  const width = 50;
  const height = 6;
  const healthRatio = player.health / player.maxHealth;
  const yOffset = 65;

  return [
    h('rect', {
      attrs: {
        fill: 'red',
        stroke: 'black',
        x: player.position.x - width / 2,
        y: player.position.y + yOffset - height / 2,
        width,
        height
      }
    }),

    h('rect', {
      attrs: {
        fill: 'lime',
        x: player.position.x - width / 2,
        y: player.position.y + yOffset - height / 2,
        width: width * healthRatio,
        height: height
      }
    })
  ]
}

开发者ID:Widdershin，项目名称:schism，代码行数:29，代码来源:client.ts

示例4: h

const App = () => ({
  DOM: xs.of(
    h('div.app', [
      h('h1', 'Enter the lairs'),
      h('p', 'Lorem ipsum')
    ])
  )
});

开发者ID:cutepig，项目名称:typescript-cycle-baseline，代码行数:8，代码来源:index.ts

示例5: renderRecordControls

function renderRecordControls(recording: boolean): VNode {
  if (recording) {
    return h("circle", {
      class: { "stop-recording": true },
      attrs: { cx: 25, cy: 25, r: 15, fill: "darkred" }
    });
  }

  return h("circle", {
    class: { record: true },
    attrs: { cx: 25, cy: 25, r: 15, fill: "red" }
  });
}

开发者ID:helix-pi，项目名称:helix-pi，代码行数:13，代码来源:editor.ts

示例6: selectForArray

function selectForArray(name: string, optionStrings: string[], lowIndex: number, highIndex: number, selectedValue: string, addBlank: boolean) {
  let options = [];
  if (addBlank) {
    options.push(h('option', { attrs: {value: '', selected: selectedValue == null } }));
  }

  d3.range(lowIndex, highIndex).forEach(i => {
    let optionString = optionStrings[i];
    options.push(h('option', { attrs: {value: optionString, selected: optionString == selectedValue } }, optionString));
  });

  var select = h('select' + CategoryPopupClassName, options);

  return select;
}

开发者ID:gmadrid，项目名称:cfjj-viz，代码行数:15，代码来源:htmlview.ts

示例7: view

  function view([actor, nameVtree]: [Actor, VNode]): VNode {
    return div(".actor-panel.flex-column", [
      div(".attributes.flex-column", [
        nameVtree,
        "Width",
        input(".width", { props: { value: actor.width } }),
        "Height",
        input(".height", { props: { value: actor.height } }),

        "Color",
        input(".color", { props: { value: actor.color } }),

        button(".add-to-scenario", "Add to scenario")
      ]),

      div(".sidebar-preview.flex-column", [
        "Preview",

        h(
          "svg",
          {
            attrs: { height: 300, viewBox: `-150 -150 300 300` },
            style: { background: "#222" }
          },
          [renderActor(actor, [], 0, 0, 0)]
        )
      ])
    ]);
  }

开发者ID:helix-pi，项目名称:helix-pi，代码行数:29，代码来源:editor.ts

示例8: view

function view ([id, state]) {
  const time = new Date().getTime();
  const player = state.players[id];

  const groups = [
    ...Object.values(state.players).map(player => renderPlayer(player, time)),
    ...state.enemies.map(enemy => renderEnemy(enemy, time, player.target))
  ];

  return (
    h('svg', {
      attrs: {
        width: '100vw',
        height: '100vh',
        xmlns: "http://www.w3.org/2000/svg",
        'xmlns:xlink': 'http://www.w3.org/1999/xlink'
      }
    }, [
      defs,

      ...groups.sort((a, b) => a.data.attrs.y - b.data.attrs.y),

      renderInventory(player.inventory)
    ])
  );
}

开发者ID:Widdershin，项目名称:schism，代码行数:26，代码来源:client.ts

示例9: control

function control(state: State) {
  // Build a selector for each chosen category. 
  // The first category will always have some choice, but the others will default to blank (unchosen).
  let unchosenCategories = new Set(state.categories);
  let stop = false;
  let selects = [];
  state.selectedCategories.forEach(pair => {
    if (stop) return;

    let [categoryName, categoryValue] = pair;
    if (!unchosenCategories.has(categoryName)) {
      stop = true;
    } else {
      selects.push(selectForArray('', 
        Array.from(unchosenCategories.values()), 
        0, 
        unchosenCategories.size, 
        categoryName, 
        selects.length > 0));
      selects.push(h('br'));
      unchosenCategories.delete(categoryName);
    }
  });
  if (unchosenCategories.size > 0) {
    selects.push(selectForArray('', Array.from(unchosenCategories.values()), 0, unchosenCategories.size, null, true));
  }

  let foo = selectForArray('foobar', state.categories, 0, state.categories.length, state.selectedCategories[0][0], false);

  return div('#formdiv', [
    h('form', { attrs: { id: 'controlForm'} }, selects)
    ]);
}

开发者ID:gmadrid，项目名称:cfjj-viz，代码行数:33，代码来源:htmlview.ts

示例10: renderInventory

function renderInventory (inventory) {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  const width = (64 + 8) * 8 + 8;
  const height = 80;

  const slots = [0, 1, 2, 3, 4, 5, 6, 7];

  return (
    h('g', [
      h('rect', {
        attrs: {
          x: windowWidth / 2 - width / 2,
          y: windowHeight - height,
          width,
          height,
          fill: '#343'
        }
      }),

      ...slots.map(i => (
        h('rect', {
          attrs: {
            x: 8 + windowWidth / 2 - width / 2 + i * 72,
            y: 8 + windowHeight - height,
            width: 64,
            height: 64,
            fill: '#565'
          }
        })
      )),

      ...inventory.map((item, index) => (
        h('image', {
          attrs: {
            href: '/scroll.png',
            x: 8 + windowWidth / 2 - width / 2 + index * 64,
            y: 8 + windowHeight - height,
            width: 64,
            height: 64
          }
        })
      ))
    ])
  )
}

开发者ID:Widdershin，项目名称:schism，代码行数:46，代码来源:client.ts

注：本文中的@cycle/dom.h函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。