yiminghe / dom-align Goto Github PK
View Code? Open in Web Editor NEWAlign DOM Node Flexibly
License: MIT License
Align DOM Node Flexibly
License: MIT License
场景,table 列表 里的 行 鼠标滑过弹窗对齐
为什么对页面进行镜像操作后,body上加ttransform: scaleX(-1);,dom-aligin的定位就不准确了
ie8下有兼容性问题:
https://caniuse.com/#search=getBoundingClientRect
The returned object lacks width and height properties.
页面底部有一定区域增加了fixed布局的浮层
使用rc-dropdown、rc-trigger等引用dom-align调整弹框对齐位置的组件时,会出现下拉浮层被fixed层遮挡
希望可以通过某些参数支持alwaysByViewport + offset来调整overflow的判断
即希望可以支持设置距离可视窗口一定距离时,做overflow判断,以调整弹出菜单的位置
I am using the antd library for my UI (located within a shadow dom in an Google Chrome Extension) and have been experiencing issues when using the Popover component. I've traced the error back to the use of this library when trying to work with document fragments, which breaks the flow.
Any advice on this?
We are seeing an error in this line of code in our error tracking:
dom-align/src/getOffsetParent.js
Line 9 in 7548785
The stack trace indicates it's coming from rc-align
usage:
Looks it might be fixable with safe property access within this library, but not sure exactly what's going on. Any help appreciated. Thanks!
dom-align: 1.6.6
弹出面板中是一个input框,弹出后键入一个值,input的焦点会丢失。
如果把元素粘贴在底部
position: sticky;
bottom: 0;
在未拖动到底部时的效果和 fixed 类似,但是库是按照正常文档流来处理的,导致在向下滚动的时候 Popup 一直不可见
dom-align/src/getVisibleRectForElement.js
Line 89 in 33a8b1b
Hello,i am working on an project with [email protected], which has indirect dependency on [email protected]. It will broken on IE8 because of window.getComptedStyle
in [email protected] .
Why not set a 2.x version, so it would be safer for Dependents .
Thanks a lot for the excellent work.
代码:https://github.com/MrErHu/dom-align-bugfix-demo(url: http://localhost:3000/bugfix)
原始状态如下:
source node:
taget node:
当配置:
{
points: ['bc', 'tc'],
offset: [0, -10],
targetOffset: [0, 0],
overflow: {
adjustX: true,
adjustY: true,
}
}
理论上Y轴无法显示,source node的points应该改变为
['tc', 'bc']`,对应的offset: [0, 10]。
但是实际情况是:
add && 'name'
judgment
// /dom-align/src/utils.js
function _getComputedStyle(elem, name, cs) {
var computedStyle = cs;
var val = '';
var d = getDocument(elem);
computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null); // https://github.com/kissyteam/kissy/issues/61
if (computedStyle && name) {
val = computedStyle.getPropertyValue(name) || computedStyle[name];
}
return val;
}
It occurred in using rc-color-picker accidently.
Error tracker positioned the error source code:
He.prototype.__iterate = function(e, t) { var n = this , r = 0; return this._root && this._root.iterate((function(t) { return r++, e(t[1], t[0], n) } ), t), r }
Need Help.
http://yiminghe.me/dom-align/examples/fail.html
demo效果对应配置应该是 points: ['tl', 'tl']
? 而不是points: ['bl', 'bl']
期望:
页面zoom放大时,Source元素能正确计算定位的left, top
演示地址:here
I agree the source node is good to have an initial "left/top" set (i.e "-9999px"), to shown out of screen before we calculated the actual position. However, not all developers doing good things.
Debugging into the source, the issue happens in utils.setOffset
, current
is always 0
if the initial "left/top" are not set.
...
for (key in offset) {
current = parseFloat(css(elem, key)) || 0;
ret[key] = current + offset[key] - old[key];
}
...
BTW, I'm from China, to keep consistent with your repo style, I'm using English instead. And this tool is cool 😋
getElFuturePos.js:4 Uncaught TypeError: Cannot read property '1' of undefined.
css-vendor will call window.getComputedStyle without checking if it is defined. The latest version import css-vender make rc-align crash in IE8
您好,我的问题是,如果dom-align后对target node进行了调整,在外面怎么才能确定确实经过了adjust呢?目前domAlign方法的返回值里有point、offset和targetoffset,我想的是可以根据这几个值是否经过flipOffset处理过来判断是否经过了adjust,但这样的方式感觉不够直观,请问是否有其他方式来进行这种判断呢?
或者把fail也返回?
I found this issue while working with some fixed elements that have overflow styles in the parent. Is this expected? I would think that the adjust feature would pull the element back into the viewport.
Bug Example: https://codesandbox.io/s/dom-align-bug-scymr
Expected Result: Clicking on button would auto adjust dropdown to be within the window.
Actual Result: Dropdown element flows off of page, adding a scroll in the x direction.
I'm unit testing a component of mine that uses antd dropdown.
I get this error when trying to use enzyme to mount the component and then simulate a click on that drop down.
The above error occurred in the <Align> component:
in Align (created by Popup)
in AnimateChild (created by Animate)
in Animate (created by Popup)
in div (created by Popup)
in Popup (created by Trigger)
in Portal (created by Trigger)
in Trigger (created by Dropdown)
in Dropdown (created by Dropdown)
TypeError: getComputedStyleX is not a function
at getWH (node_modules/dom-align/lib/utils.js:434:23)
at HTMLAnchorElement.<anonymous> (node_modules/dom-align/lib/utils.js:486:19)
at swap (node_modules/dom-align/lib/utils.js:359:12)
at getWHIgnoreDisplay (node_modules/dom-align/lib/utils.js:485:5)
at Object.domUtils.(anonymous function) [as outerWidth] (node_modules/dom-
align/lib/utils.js:495:18)
at getRegion (node_modules/dom-align/lib/getRegion.js:19:28)
at alignElement (node_modules/dom-align/lib/align/alignElement.js:34:50)
at Align._this.forceAlign (node_modules/rc-align/lib/Align.js:76:47)
at Align.componentDidMount (node_modules/rc-align/lib/Align.js:91:10)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:14362:22)
I definitely do have a window defined.
console.log(".....", window.getComputedStyle);
let wrapper = mount(<UserMenu />);
wrapper.find(Dropdown).simulate('click')
I'm showing a tooltip with an arrow and would like to change the arrow location based on whether there was a flip or not. Is this possible in the current library?
After the 1.8.1 update our tests which use jsdom fail with the error:
ReferenceError: getComputedStyle is not defined
at getVisibleRectForElement (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/getVisibleRectForElement.js:83:19)
at isOutOfVisibleRect (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/align/alignElement.js:26:63)
at alignElement (/home/developer/workspace/main/pvc-core/webui/node_modules/dom-align/lib/align/alignElement.js:36:34)
at Align._this.forceAlign (/home/developer/workspace/main/pvc-core/webui/node_modules/rc-align/lib/Align.js:88:47)
at Align.componentDidMount (/home/developer/workspace/main/pvc-core/webui/node_modules/rc-align/lib/Align.js:107:12)
at /home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:262:25
at measureLifeCyclePerf (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:73:12)
at /home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactCompositeComponent.js:261:11
at CallbackQueue.notifyAll (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/CallbackQueue.js:74:22)
at ReactReconcileTransaction.close (/home/developer/workspace/main/pvc-core/webui/node_modules/react-dom/lib/ReactReconcileTransaction.js:78:26)
Is their a workaround for this?
https://github.com/yiminghe/dom-align/blob/master/src/utils.js#L203-L210
导致bug的原因是 在设置位置的时候 改变两次css属性,使得 getOffset(elem) 获取的值是css变幻过程中的一个值 导致计算有问题, 能否通过单纯的计算获取位置,中间不要改变css的值
transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s;
This is a follow up of an old issue I reported, but essentially it would be cool if we could have a way to prevent the source to touch the viewport edges.
See demo here:
http://requirebin.com/?gist=1406e9992ca56949d224903c2f87c11a
My understanding of setting overflow: {adjustX: true} is that if the source is positioned offscreen it should be adjusted back onto the screen
As seen in the provided example this does not seem to be happening.
It seems like this was a regression caused by this commit: aaac734 . Specifically
newOverflowCfg.adjustX = overflow.adjustX &&
isFailX(elFuturePos, elRegion, realXRegion);
Should be
newOverflowCfg.adjustX = overflow.adjustX &&
isFailX(elFuturePos, elRegion, visibleRect);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.