当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript DOM.getViewPort方法代码示例

本文整理汇总了TypeScript中tinymce/core/api/dom/DOMUtils.DOM.getViewPort方法的典型用法代码示例。如果您正苦于以下问题:TypeScript DOM.getViewPort方法的具体用法?TypeScript DOM.getViewPort怎么用?TypeScript DOM.getViewPort使用的例子?那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在tinymce/core/api/dom/DOMUtils.DOM的用法示例。


在下文中一共展示了DOM.getViewPort方法的6个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: function

const toAbsolute = function (rect) {
  const vp = DOMUtils.DOM.getViewPort();

  return {
    x: rect.x + vp.x,
    y: rect.y + vp.y,
    w: rect.w,
    h: rect.h
  };
};
开发者ID:,项目名称:,代码行数:10,代码来源:

示例2: open


//.........这里部分代码省略.........
  ])).hide();

  mainPanel = createPanel(reverseIfRtl([
    { tooltip: 'Crop', icon: 'crop', onclick: switchPanel(cropPanel) },
    { tooltip: 'Resize', icon: 'resize2', onclick: switchPanel(resizePanel) },
    { tooltip: 'Orientation', icon: 'orientation', onclick: switchPanel(flipRotatePanel) },
    { tooltip: 'Brightness', icon: 'sun', onclick: switchPanel(brightnessPanel) },
    { tooltip: 'Sharpen', icon: 'sharpen', onclick: switchPanel(sharpenPanel) },
    { tooltip: 'Contrast', icon: 'contrast', onclick: switchPanel(contrastPanel) },
    { tooltip: 'Color levels', icon: 'drop', onclick: switchPanel(colorizePanel) },
    { tooltip: 'Gamma', icon: 'gamma', onclick: switchPanel(gammaPanel) },
    { tooltip: 'Invert', icon: 'invert', onclick: switchPanel(invertPanel) }
    // {text: 'More', onclick: switchPanel(filtersPanel)}
  ]));

  imagePanel = ImagePanel.create({
    flex: 1,
    imageSrc: currentState.url
  });

  sidePanel = Factory.create('Container', {
    layout: 'flex',
    direction: 'column',
    pack: 'start',
    border: '0 1 0 0',
    padding: 5,
    spacing: 5,
    items: [
      { type: 'button', icon: 'undo', tooltip: 'Undo', name: 'undo', onclick: undo },
      { type: 'button', icon: 'redo', tooltip: 'Redo', name: 'redo', onclick: redo },
      { type: 'button', icon: 'zoomin', tooltip: 'Zoom in', onclick: zoomIn },
      { type: 'button', icon: 'zoomout', tooltip: 'Zoom out', onclick: zoomOut }
    ]
  });

  mainViewContainer = Factory.create('Container', {
    type: 'container',
    layout: 'flex',
    direction: 'row',
    align: 'stretch',
    flex: 1,
    items: reverseIfRtl([sidePanel, imagePanel])
  });

  panels = [
    mainPanel,
    cropPanel,
    resizePanel,
    flipRotatePanel,
    filtersPanel,
    invertPanel,
    brightnessPanel,
    huePanel,
    saturatePanel,
    contrastPanel,
    grayscalePanel,
    sepiaPanel,
    colorizePanel,
    sharpenPanel,
    embossPanel,
    gammaPanel,
    exposurePanel
  ];

  win = editor.windowManager.open({
    layout: 'flex',
    direction: 'column',
    align: 'stretch',
    minWidth: Math.min(DOMUtils.DOM.getViewPort().w, 800),
    minHeight: Math.min(DOMUtils.DOM.getViewPort().h, 650),
    title: 'Edit image',
    items: panels.concat([mainViewContainer]),
    buttons: reverseIfRtl([
      { text: 'Save', name: 'save', subtype: 'primary', onclick: save },
      { text: 'Cancel', onclick: 'close' }
    ])
  });

  win.on('close', function () {
    reject();
    destroyStates(undoStack.data);
    undoStack = null;
    tempState = null;
  });

  undoStack.add(currentState);
  updateButtonUndoStates();

  imagePanel.on('load', function () {
    width = imagePanel.imageSize().w;
    height = imagePanel.imageSize().h;
    ratioW = height / width;
    ratioH = width / height;

    win.find('#w').value(width);
    win.find('#h').value(height);
  });

  imagePanel.on('crop', crop);
}
开发者ID:danielpunkass,项目名称:tinymce,代码行数:101,代码来源:Dialog.ts

示例3: function

const getMinHeight = function (editor) {
  return editor.getParam('code_dialog_height', Math.min(DOMUtils.DOM.getViewPort().h - 200, 500));
};
开发者ID:danielpunkass,项目名称:tinymce,代码行数:3,代码来源:Settings.ts

示例4: function

      Tools.each(children, function (child) {
        if (child.nodeType) {
          elm.appendChild(child);
        }
      });
    }

    return elm;
  },

  createFragment (html) {
    return DOMUtils.DOM.createFragment(html);
  },

  getWindowSize () {
    return DOMUtils.DOM.getViewPort();
  },

  getSize (elm) {
    let width, height;

    if (elm.getBoundingClientRect) {
      const rect = elm.getBoundingClientRect();

      width = Math.max(rect.width || (rect.right - rect.left), elm.offsetWidth);
      height = Math.max(rect.height || (rect.bottom - rect.bottom), elm.offsetHeight);
    } else {
      width = elm.offsetWidth;
      height = elm.offsetHeight;
    }
开发者ID:abstask,项目名称:tinymce,代码行数:30,代码来源:DomUtils.ts

示例5: function

const getDialogMinHeight = function (editor) {
  return Math.min(DOMUtils.DOM.getViewPort().w, editor.getParam('codesample_dialog_height', 650));
};
开发者ID:abstask,项目名称:tinymce,代码行数:3,代码来源:Settings.ts

示例6: function

const getDialogHeight = function (editor) {
  return Math.min(DOMUtils.DOM.getViewPort().h, editor.getParam('template_popup_height', 500));
};
开发者ID:danielpunkass,项目名称:tinymce,代码行数:3,代码来源:Settings.ts


注:本文中的tinymce/core/api/dom/DOMUtils.DOM.getViewPort方法示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。