TypeScript GuiFactory.build方法代码示例

 (store, doc, body) => {
   return GuiFactory.build(
     Container.sketch({
       dom: {
         classes: [ 'colorinput-container' ]
       },
       components: [
         renderColorInput({
           type: 'colorinput',
           name: 'alpha',
           label: Option.some('test-color-input'),
         }, helpers.shared, {
           colorPicker: (callback, value) => {},
           hasCustomColors: () => true,
           getColors: () => [
             { type: choiceItem, text: 'Turquoise', value: '#18BC9B' },
             { type: choiceItem, text: 'Green', value: '#2FCC71' },
             { type: choiceItem, text: 'Blue', value: '#3598DB' },
             { type: choiceItem, text: 'Purple', value: '#9B59B6' },
             { type: choiceItem, text: 'Navy Blue', value: '#34495E' }
           ],
           getColorCols: () => 3
         })
       ]
     })
   );
 },

const makeCell = (row, col, labelId) => {
  const emitCellOver = (c) => AlloyTriggers.emitWith(c, cellOverEvent, {row, col} );
  const emitExecute = (c) => AlloyTriggers.emitWith(c, cellExecuteEvent, {row, col} );

  return GuiFactory.build({
    dom: {
      tag: 'div',
      attributes: {
        role: 'button',
        ['aria-labelledby']: labelId
      }
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('insert-table-picker-cell', [
        AlloyEvents.run(NativeEvents.mouseover(), Focusing.focus),
        AlloyEvents.run(SystemEvents.execute(), emitExecute),
        AlloyEvents.run(SystemEvents.tapOrClick(), emitExecute)
      ]),
      Toggling.config({
        toggleClass: 'tox-insert-table-picker__selected',
        toggleOnExecute: false
      }),
      Focusing.config({onFocus: emitCellOver})
    ])
  });
};

 (store, doc, body) => {
   return GuiFactory.build(
     renderDropZone({
       type: 'dropzone',
       name: 'drop1',
       label: Option.some('Dropzone Label'),
     }, TestProviders)
   );
 },

 (store, doc, body) => {
   return GuiFactory.build(
     renderHtmlPanel({
       type: 'htmlpanel',
       html: '<br /><br /><hr />',
       presets: 'presentation'
     })
   );
 },

 (store, doc, body) => {
   return GuiFactory.build(
     renderColorPicker({
       type: 'colorpicker',
       label: Option.some('ColorPicker label'),
       name: 'col1'
     })
   );
 },

export const setup = (editor: Editor, lazySink: () => Result<AlloyComponent, Error>, backstage: UiFactoryBackstage) => {
  const contextmenu = GuiFactory.build(
    InlineView.sketch({
      dom: {
        tag: 'div',
      },
      lazySink,
      onEscape: () => editor.focus(),
      fireDismissalEventInstead: { },
      inlineBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('dismissContextMenu', [
          AlloyEvents.run(SystemEvents.dismissRequested(), (comp, se) => {
            Sandboxing.close(comp);
            editor.focus();
          })
        ])
      ])
    }),
  );

  editor.on('init', () => {
    editor.on('contextmenu', (e) => {
      if (isNativeOverrideKeyEvent(editor, e)) {
        return;
      }

      // Different browsers trigger the context menu from keyboards differently, so need to check both the button and target here
      // Chrome: button = 0 & target = the selection range node
      // Firefox: button = 0 & target = body
      // IE: button = 2 & target = body
      // Safari: N/A (Mac's don't expose a contextmenu keyboard shortcut)
      const isTriggeredByKeyboardEvent = e.button !== 2 || e.target === editor.getBody();
      const anchorSpec = isTriggeredByKeyboardEvent ? getNodeAnchor(editor) : getPointAnchor(editor, e);

      const registry = editor.ui.registry.getAll();
      const menuConfig = Settings.getContextMenu(editor);

      // Use the event target element for mouse clicks, otherwise fallback to the current selection
      const selectedElement = isTriggeredByKeyboardEvent ? editor.selection.getStart(true) : e.target as Element;

      const items = generateContextMenu(registry.contextMenus, menuConfig, selectedElement);

      NestedMenus.build(items, ItemResponse.CLOSE_ON_EXECUTE, backstage).map((menuData) => {
        e.preventDefault();

        // show the context menu, with items set to close on click
        InlineView.showMenuAt(contextmenu, anchorSpec, {
          menu: {
            markers: MenuParts.markers('normal')
          },
          data: menuData
        });
      });
    });
  });
};

 memOverflow.getOpt(sink).fold(() => {
   // overflow isn't there yet ... so add it, and return the built thing
   const builtoverFlow = GuiFactory.build(memOverflow.asSpec());
   Attachment.attach(sink, builtoverFlow);
   Positioning.position(sink, toolbarSpec.backstage.shared.anchors.toolbarOverflow(), builtoverFlow);
   SplitAlloyToolbar.refresh(toolbar);
   SplitAlloyToolbar.getMoreButton(toolbar).each(Focusing.focus);
   Keying.focusIn(builtoverFlow);
   // return builtoverFlow;
 }, (builtOverflow) => {

 (store, doc, body) => {
   return GuiFactory.build(
     renderSizeInput({
       type: 'sizeinput',
       name: 'dimensions',
       label: Option.some('size'),
       constrain: true
     }, TestProviders)
   );
 },

 (store, doc, body) => {
   return GuiFactory.build(
     renderInput({
       name: 'input',
       label: Option.some('LabelA'),
       placeholder: Option.none(),
       validation: Option.none()
     }, TestProviders)
   );
 },

 (store, doc, body) => {
   return GuiFactory.build(
     renderIFrame({
       type: 'iframe',
       name: 'frame-a',
       label: Option.some('iframe label'),
       sandboxed: true
     }, TestProviders)
   );
 },