From 24c736945126625c6e099d6062bcd51a0c967e68 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 28 Oct 2017 14:10:46 +0900 Subject: [PATCH 1/3] Remove update propagation --- src/background/actions/settings.js | 0 src/console/components/completion.js | 4 ++++ src/console/components/console.js | 4 ++++ src/console/index.js | 12 ++---------- src/content/components/common/follow.js | 3 --- src/content/components/common/index.js | 9 --------- src/content/components/common/input.js | 3 --- src/content/components/common/keymapper.js | 3 --- src/content/components/frame-content.js | 15 +-------------- .../components/top-content/follow-controller.js | 4 ++++ src/content/components/top-content/index.js | 9 +++------ src/content/index.js | 14 +++++--------- 12 files changed, 23 insertions(+), 57 deletions(-) delete mode 100644 src/background/actions/settings.js diff --git a/src/background/actions/settings.js b/src/background/actions/settings.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/console/components/completion.js b/src/console/components/completion.js index 5033b5c..a49a221 100644 --- a/src/console/components/completion.js +++ b/src/console/components/completion.js @@ -3,6 +3,10 @@ export default class Completion { this.wrapper = wrapper; this.store = store; this.prevState = {}; + + store.subscribe(() => { + this.update(); + }); } update() { diff --git a/src/console/components/console.js b/src/console/components/console.js index dcd4041..49bda0e 100644 --- a/src/console/components/console.js +++ b/src/console/components/console.js @@ -17,6 +17,10 @@ export default class ConsoleComponent { this.hideCommand(); this.hideMessage(); + + store.subscribe(() => { + this.update(); + }); } onBlur() { diff --git a/src/console/index.js b/src/console/index.js index 2ae5779..36473fe 100644 --- a/src/console/index.js +++ b/src/console/index.js @@ -7,14 +7,11 @@ import { createStore } from 'shared/store'; import * as consoleActions from 'console/actions/console'; const store = createStore(reducers); -let completionComponent = null; -let consoleComponent = null; window.addEventListener('load', () => { let wrapper = document.querySelector('#vimvixen-console-completion'); - completionComponent = new CompletionComponent(wrapper, store); - - consoleComponent = new ConsoleComponent(document.body, store); + new CompletionComponent(wrapper, store); // eslint-disable-line no-new + new ConsoleComponent(document.body, store); // eslint-disable-line no-new }); const onMessage = (message) => { @@ -30,11 +27,6 @@ const onMessage = (message) => { } }; -store.subscribe(() => { - completionComponent.update(); - consoleComponent.update(); -}); - browser.runtime.onMessage.addListener(onMessage); window.addEventListener('message', (event) => { onMessage(JSON.parse(event.data)); diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 4eeaaa2..19c31eb 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -39,9 +39,6 @@ export default class Follow { messages.onMessage(this.onMessage.bind(this)); } - update() { - } - key(key) { if (Object.keys(this.hints).length === 0) { return false; diff --git a/src/content/components/common/index.js b/src/content/components/common/index.js index 5f5531b..4c2c1df 100644 --- a/src/content/components/common/index.js +++ b/src/content/components/common/index.js @@ -14,21 +14,12 @@ export default class Common { input.onKey(key => keymapper.key(key)); this.store = store; - this.children = [ - follow, - input, - keymapper, - ]; this.reloadSettings(); messages.onMessage(this.onMessage.bind(this)); } - update() { - this.children.forEach(c => c.update()); - } - onMessage(message) { switch (message.type) { case messages.SETTINGS_CHANGED: diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js index ef5af29..8b1d35d 100644 --- a/src/content/components/common/input.js +++ b/src/content/components/common/input.js @@ -28,9 +28,6 @@ export default class InputComponent { target.addEventListener('keyup', this.onKeyUp.bind(this)); } - update() { - } - onKey(cb) { this.onKeyListeners.push(cb); } diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index 44d8212..1da3c0d 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -7,9 +7,6 @@ export default class KeymapperComponent { this.store = store; } - update() { - } - key(key) { this.store.dispatch(inputActions.keyPress(key)); diff --git a/src/content/components/frame-content.js b/src/content/components/frame-content.js index 46786d2..ca999ba 100644 --- a/src/content/components/frame-content.js +++ b/src/content/components/frame-content.js @@ -1,16 +1,3 @@ import CommonComponent from './common'; -export default class FrameContent { - - constructor(win, store) { - this.children = [new CommonComponent(win, store)]; - } - - update() { - this.children.forEach(c => c.update()); - } - - onMessage(message, sender) { - this.children.forEach(c => c.onMessage(message, sender)); - } -} +export default CommonComponent; diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js index 7570cf8..a87ecc7 100644 --- a/src/content/components/top-content/follow-controller.js +++ b/src/content/components/top-content/follow-controller.js @@ -19,6 +19,10 @@ export default class FollowController { this.producer = null; messages.onMessage(this.onMessage.bind(this)); + + store.subscribe(() => { + this.update(); + }); } onMessage(message, sender) { diff --git a/src/content/components/top-content/index.js b/src/content/components/top-content/index.js index c4a8461..f6afbfa 100644 --- a/src/content/components/top-content/index.js +++ b/src/content/components/top-content/index.js @@ -9,13 +9,12 @@ export default class TopContent { constructor(win, store) { this.win = win; - this.children = [ - new CommonComponent(win, store), - new FollowController(win, store), - ]; this.store = store; this.prevBlacklist = undefined; + new CommonComponent(win, store); // eslint-disable-line no-new + new FollowController(win, store); // eslint-disable-line no-new + // TODO make component consoleFrames.initialize(this.win.document); @@ -28,8 +27,6 @@ export default class TopContent { this.disableIfBlack(blacklist); this.prevBlacklist = blacklist; } - - this.children.forEach(c => c.update()); } disableIfBlack(blacklist) { diff --git a/src/content/index.js b/src/content/index.js index 77249f8..97a8b30 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -6,12 +6,8 @@ import FrameContentComponent from './components/frame-content'; const store = createStore(reducers); -let rootComponent = window.self === window.top - ? new TopContentComponent(window, store) - : new FrameContentComponent(window, store); - -store.subscribe(() => { - rootComponent.update(); -}); - -rootComponent.update(); +if (window.self === window.top) { + new TopContentComponent(window, store); // eslint-disable-line no-new +} else { + new FrameContentComponent(window, store); // eslint-disable-line no-new +} From 2c600786c8ecfd73db91204e6fd816d54c077d77 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 29 Oct 2017 10:46:34 +0900 Subject: [PATCH 2/3] rename to follow-controller --- .../{follow.js => follow-controller.js} | 8 ++-- src/content/actions/index.js | 8 ++-- .../top-content/follow-controller.js | 17 +++---- .../{follow.js => follow-controller.js} | 8 ++-- src/content/reducers/index.js | 6 +-- .../content/actions/follow-controller.test.js | 35 ++++++++++++++ test/content/actions/follow.test.js | 35 -------------- .../reducers/follow-controller.test.js | 48 +++++++++++++++++++ test/content/reducers/follow.test.js | 48 ------------------- 9 files changed, 107 insertions(+), 106 deletions(-) rename src/content/actions/{follow.js => follow-controller.js} (62%) rename src/content/reducers/{follow.js => follow-controller.js} (77%) create mode 100644 test/content/actions/follow-controller.test.js delete mode 100644 test/content/actions/follow.test.js create mode 100644 test/content/reducers/follow-controller.test.js delete mode 100644 test/content/reducers/follow.test.js diff --git a/src/content/actions/follow.js b/src/content/actions/follow-controller.js similarity index 62% rename from src/content/actions/follow.js rename to src/content/actions/follow-controller.js index 5a18dd5..3fd4dce 100644 --- a/src/content/actions/follow.js +++ b/src/content/actions/follow-controller.js @@ -2,27 +2,27 @@ import actions from 'content/actions'; const enable = (newTab) => { return { - type: actions.FOLLOW_ENABLE, + type: actions.FOLLOW_CONTROLLER_ENABLE, newTab, }; }; const disable = () => { return { - type: actions.FOLLOW_DISABLE, + type: actions.FOLLOW_CONTROLLER_DISABLE, }; }; const keyPress = (key) => { return { - type: actions.FOLLOW_KEY_PRESS, + type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: key }; }; const backspace = () => { return { - type: actions.FOLLOW_BACKSPACE, + type: actions.FOLLOW_CONTROLLER_BACKSPACE, }; }; diff --git a/src/content/actions/index.js b/src/content/actions/index.js index 83fa7cf..8cc2303 100644 --- a/src/content/actions/index.js +++ b/src/content/actions/index.js @@ -17,8 +17,8 @@ export default { COMPLETION_SELECT_PREV: 'completions.select.prev', // Follow - FOLLOW_ENABLE: 'follow.enable', - FOLLOW_DISABLE: 'follow.disable', - FOLLOW_KEY_PRESS: 'follow.key.press', - FOLLOW_BACKSPACE: 'follow.backspace', + FOLLOW_CONTROLLER_ENABLE: 'follow.controller.enable', + FOLLOW_CONTROLLER_DISABLE: 'follow.controller.disable', + FOLLOW_CONTROLLER_KEY_PRESS: 'follow.controller.key.press', + FOLLOW_CONTROLLER_BACKSPACE: 'follow.controller.backspace', }; diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js index a87ecc7..38869e6 100644 --- a/src/content/components/top-content/follow-controller.js +++ b/src/content/components/top-content/follow-controller.js @@ -1,4 +1,4 @@ -import * as followActions from 'content/actions/follow'; +import * as followControllerActions from 'content/actions/follow-controller'; import messages from 'shared/messages'; import HintKeyProducer from 'content/hint-key-producer'; @@ -28,7 +28,8 @@ export default class FollowController { onMessage(message, sender) { switch (message.type) { case messages.FOLLOW_START: - return this.store.dispatch(followActions.enable(message.newTab)); + return this.store.dispatch( + followControllerActions.enable(message.newTab)); case messages.FOLLOW_RESPONSE_COUNT_TARGETS: return this.create(message.count, sender); case messages.FOLLOW_KEY_PRESS: @@ -38,7 +39,7 @@ export default class FollowController { update() { let prevState = this.state; - this.state = this.store.getState().follow; + this.state = this.store.getState().followController; if (!prevState.enabled && this.state.enabled) { this.count(); @@ -53,7 +54,7 @@ export default class FollowController { let shown = this.keys.filter(key => key.startsWith(this.state.keys)); if (shown.length === 1) { this.activate(); - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); } broadcastMessage(this.win, { @@ -73,18 +74,18 @@ export default class FollowController { switch (key) { case 'Enter': this.activate(); - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); break; case 'Escape': - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); break; case 'Backspace': case 'Delete': - this.store.dispatch(followActions.backspace()); + this.store.dispatch(followControllerActions.backspace()); break; default: if (DEFAULT_HINT_CHARSET.includes(key)) { - this.store.dispatch(followActions.keyPress(key)); + this.store.dispatch(followControllerActions.keyPress(key)); } break; } diff --git a/src/content/reducers/follow.js b/src/content/reducers/follow-controller.js similarity index 77% rename from src/content/reducers/follow.js rename to src/content/reducers/follow-controller.js index b7c0cf3..2afb232 100644 --- a/src/content/reducers/follow.js +++ b/src/content/reducers/follow-controller.js @@ -8,21 +8,21 @@ const defaultState = { export default function reducer(state = defaultState, action = {}) { switch (action.type) { - case actions.FOLLOW_ENABLE: + case actions.FOLLOW_CONTROLLER_ENABLE: return Object.assign({}, state, { enabled: true, newTab: action.newTab, keys: '', }); - case actions.FOLLOW_DISABLE: + case actions.FOLLOW_CONTROLLER_DISABLE: return Object.assign({}, state, { enabled: false, }); - case actions.FOLLOW_KEY_PRESS: + case actions.FOLLOW_CONTROLLER_KEY_PRESS: return Object.assign({}, state, { keys: state.keys + action.key, }); - case actions.FOLLOW_BACKSPACE: + case actions.FOLLOW_CONTROLLER_BACKSPACE: return Object.assign({}, state, { keys: state.keys.slice(0, -1), }); diff --git a/src/content/reducers/index.js b/src/content/reducers/index.js index ae4a845..17c0429 100644 --- a/src/content/reducers/index.js +++ b/src/content/reducers/index.js @@ -1,14 +1,14 @@ import addonReducer from './addon'; import settingReducer from './setting'; import inputReducer from './input'; -import followReducer from './follow'; +import followControllerReducer from './follow-controller'; // Make setting reducer instead of re-use const defaultState = { addon: addonReducer(undefined, {}), setting: settingReducer(undefined, {}), input: inputReducer(undefined, {}), - follow: followReducer(undefined, {}), + followController: followControllerReducer(undefined, {}), }; export default function reducer(state = defaultState, action = {}) { @@ -16,6 +16,6 @@ export default function reducer(state = defaultState, action = {}) { addon: addonReducer(state.addon, action), setting: settingReducer(state.setting, action), input: inputReducer(state.input, action), - follow: followReducer(state.follow, action), + followController: followControllerReducer(state.followController, action), }); } diff --git a/test/content/actions/follow-controller.test.js b/test/content/actions/follow-controller.test.js new file mode 100644 index 0000000..298abf2 --- /dev/null +++ b/test/content/actions/follow-controller.test.js @@ -0,0 +1,35 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import * as followControllerActions from 'content/actions/follow-controller'; + +describe('follow-controller actions', () => { + describe('enable', () => { + it('creates FOLLOW_CONTROLLER_ENABLE action', () => { + let action = followControllerActions.enable(true); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_ENABLE); + expect(action.newTab).to.equal(true); + }); + }); + + describe('disable', () => { + it('creates FOLLOW_CONTROLLER_DISABLE action', () => { + let action = followControllerActions.disable(true); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_DISABLE); + }); + }); + + describe('keyPress', () => { + it('creates FOLLOW_CONTROLLER_KEY_PRESS action', () => { + let action = followControllerActions.keyPress(100); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_KEY_PRESS); + expect(action.key).to.equal(100); + }); + }); + + describe('backspace', () => { + it('creates FOLLOW_CONTROLLER_BACKSPACE action', () => { + let action = followControllerActions.backspace(100); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_BACKSPACE); + }); + }); +}); diff --git a/test/content/actions/follow.test.js b/test/content/actions/follow.test.js deleted file mode 100644 index 3ac844c..0000000 --- a/test/content/actions/follow.test.js +++ /dev/null @@ -1,35 +0,0 @@ -import { expect } from "chai"; -import actions from 'content/actions'; -import * as followActions from 'content/actions/follow'; - -describe('follow actions', () => { - describe('enable', () => { - it('creates FOLLOW_ENABLE action', () => { - let action = followActions.enable(true); - expect(action.type).to.equal(actions.FOLLOW_ENABLE); - expect(action.newTab).to.equal(true); - }); - }); - - describe('disable', () => { - it('creates FOLLOW_DISABLE action', () => { - let action = followActions.disable(true); - expect(action.type).to.equal(actions.FOLLOW_DISABLE); - }); - }); - - describe('keyPress', () => { - it('creates FOLLOW_KEY_PRESS action', () => { - let action = followActions.keyPress(100); - expect(action.type).to.equal(actions.FOLLOW_KEY_PRESS); - expect(action.key).to.equal(100); - }); - }); - - describe('backspace', () => { - it('creates FOLLOW_BACKSPACE action', () => { - let action = followActions.backspace(100); - expect(action.type).to.equal(actions.FOLLOW_BACKSPACE); - }); - }); -}); diff --git a/test/content/reducers/follow-controller.test.js b/test/content/reducers/follow-controller.test.js new file mode 100644 index 0000000..f4b91d2 --- /dev/null +++ b/test/content/reducers/follow-controller.test.js @@ -0,0 +1,48 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import followControllerReducer from 'content/reducers/follow-controller'; + +describe('follow-controller reducer', () => { + it ('returns the initial state', () => { + let state = followControllerReducer(undefined, {}); + expect(state).to.have.property('enabled', false); + expect(state).to.have.property('newTab'); + expect(state).to.have.deep.property('keys', ''); + }); + + it ('returns next state for FOLLOW_CONTROLLER_ENABLE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_ENABLE, newTab: true }; + let state = followControllerReducer({ enabled: false, newTab: false }, action); + expect(state).to.have.property('enabled', true); + expect(state).to.have.property('newTab', true); + expect(state).to.have.property('keys', ''); + }); + + it ('returns next state for FOLLOW_CONTROLLER_DISABLE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_DISABLE }; + let state = followControllerReducer({ enabled: true }, action); + expect(state).to.have.property('enabled', false); + }); + + it ('returns next state for FOLLOW_CONTROLLER_KEY_PRESS', () => { + let action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'a'}; + let state = followControllerReducer({ keys: '' }, action); + expect(state).to.have.deep.property('keys', 'a'); + + action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'b'}; + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', 'ab'); + }); + + it ('returns next state for FOLLOW_CONTROLLER_BACKSPACE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_BACKSPACE }; + let state = followControllerReducer({ keys: 'ab' }, action); + expect(state).to.have.deep.property('keys', 'a'); + + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', ''); + + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', ''); + }); +}); diff --git a/test/content/reducers/follow.test.js b/test/content/reducers/follow.test.js deleted file mode 100644 index e2b3445..0000000 --- a/test/content/reducers/follow.test.js +++ /dev/null @@ -1,48 +0,0 @@ -import { expect } from "chai"; -import actions from 'content/actions'; -import followReducer from 'content/reducers/follow'; - -describe('follow reducer', () => { - it ('returns the initial state', () => { - let state = followReducer(undefined, {}); - expect(state).to.have.property('enabled', false); - expect(state).to.have.property('newTab'); - expect(state).to.have.deep.property('keys', ''); - }); - - it ('returns next state for FOLLOW_ENABLE', () => { - let action = { type: actions.FOLLOW_ENABLE, newTab: true }; - let state = followReducer({ enabled: false, newTab: false }, action); - expect(state).to.have.property('enabled', true); - expect(state).to.have.property('newTab', true); - expect(state).to.have.property('keys', ''); - }); - - it ('returns next state for FOLLOW_DISABLE', () => { - let action = { type: actions.FOLLOW_DISABLE }; - let state = followReducer({ enabled: true }, action); - expect(state).to.have.property('enabled', false); - }); - - it ('returns next state for FOLLOW_KEY_PRESS', () => { - let action = { type: actions.FOLLOW_KEY_PRESS, key: 'a'}; - let state = followReducer({ keys: '' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - action = { type: actions.FOLLOW_KEY_PRESS, key: 'b'}; - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', 'ab'); - }); - - it ('returns next state for FOLLOW_BACKSPACE', () => { - let action = { type: actions.FOLLOW_BACKSPACE }; - let state = followReducer({ keys: 'ab' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - }); -}); From 14241ca842b7dc92f26252a0ac7bb7e549d560c8 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Tue, 31 Oct 2017 21:37:53 +0900 Subject: [PATCH 3/3] support following area tags --- src/content/components/common/follow.js | 16 +++-- src/content/components/common/hint.js | 20 ++++++- src/shared/utils/dom.js | 78 ++++++++++++++++++++++++- 3 files changed, 104 insertions(+), 10 deletions(-) diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 19c31eb..83aeb0a 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -3,17 +3,18 @@ import Hint from './hint'; import * as dom from 'shared/utils/dom'; const TARGET_SELECTOR = [ - 'a', 'button', 'input', 'textarea', + 'a', 'button', 'input', 'textarea', 'area', '[contenteditable=true]', '[contenteditable=""]', '[tabindex]' ].join(','); + const inViewport = (win, element, viewSize, framePosition) => { let { top, left, bottom, right - } = element.getBoundingClientRect(); - let doc = win.doc; - let frameWidth = win.innerWidth || doc.documentElement.clientWidth; - let frameHeight = win.innerHeight || doc.documentElement.clientHeight; + } = dom.viewportRect(element); + let doc = win.document; + let frameWidth = doc.documentElement.clientWidth; + let frameHeight = doc.documentElement.clientHeight; if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) { // out of frame @@ -115,6 +116,7 @@ export default class Follow { let element = hint.target; switch (element.tagName.toLowerCase()) { case 'a': + case 'area': return this.openLink(element); case 'input': switch (element.type) { @@ -162,7 +164,9 @@ export default class Follow { let all = win.document.querySelectorAll(TARGET_SELECTOR); let filtered = Array.prototype.filter.call(all, (element) => { let style = win.getComputedStyle(element); - return style.display !== 'none' && + + // AREA's 'display' in Browser style is 'none' + return (element.tagName === 'AREA' || style.display !== 'none') && style.visibility !== 'hidden' && element.type !== 'hidden' && element.offsetHeight > 0 && diff --git a/src/content/components/common/hint.js b/src/content/components/common/hint.js index cc46fd6..9ef9eba 100644 --- a/src/content/components/common/hint.js +++ b/src/content/components/common/hint.js @@ -1,4 +1,18 @@ import './hint.css'; +import * as dom from 'shared/utils/dom'; + +const hintPosition = (element) => { + let { left, top, right, bottom } = dom.viewportRect(element); + + if (element.tagName !== 'AREA') { + return { x: left, y: top }; + } + + return { + x: (left + right) / 2, + y: (top + bottom) / 2, + }; +}; export default class Hint { constructor(target, tag) { @@ -9,14 +23,14 @@ export default class Hint { this.target = target; let doc = target.ownerDocument; - let { top, left } = target.getBoundingClientRect(); + let { x, y } = hintPosition(target); let { scrollX, scrollY } = window; this.element = doc.createElement('span'); this.element.className = 'vimvixen-hint'; this.element.textContent = tag; - this.element.style.left = left + scrollX + 'px'; - this.element.style.top = top + scrollY + 'px'; + this.element.style.left = x + scrollX + 'px'; + this.element.style.top = y + scrollY + 'px'; this.show(); doc.body.append(this.element); diff --git a/src/shared/utils/dom.js b/src/shared/utils/dom.js index c111ee7..d4fd68a 100644 --- a/src/shared/utils/dom.js +++ b/src/shared/utils/dom.js @@ -5,4 +5,80 @@ const isContentEditable = (element) => { ); }; -export { isContentEditable }; +const rectangleCoordsRect = (coords) => { + let [left, top, right, bottom] = coords.split(',').map(n => Number(n)); + return { left, top, right, bottom }; +}; + +const circleCoordsRect = (coords) => { + let [x, y, r] = coords.split(',').map(n => Number(n)); + return { + left: x - r, + top: y - r, + right: x + r, + bottom: y + r, + }; +}; + +const polygonCoordsRect = (coords) => { + let params = coords.split(','); + let minx = Number(params[0]), + maxx = Number(params[0]), + miny = Number(params[1]), + maxy = Number(params[1]); + let len = Math.floor(params.length / 2); + for (let i = 2; i < len; i += 2) { + let x = Number(params[i]), + y = Number(params[i + 1]); + if (x < minx) { + minx = x; + } + if (x > maxx) { + maxx = x; + } + if (y < miny) { + miny = y; + } + if (y > maxy) { + maxy = y; + } + } + return { left: minx, top: miny, right: maxx, bottom: maxy }; +}; + +const viewportRect = (e) => { + if (e.tagName !== 'AREA') { + return e.getBoundingClientRect(); + } + + let mapElement = e.parentNode; + let imgElement = document.querySelector(`img[usemap="#${mapElement.name}"]`); + let { + left: mapLeft, + top: mapTop + } = imgElement.getBoundingClientRect(); + let coords = e.getAttribute('coords'); + let rect = { left: 0, top: 0, right: 0, bottom: 0 }; + switch (e.getAttribute('shape')) { + case 'rect': + case 'rectangle': + rect = rectangleCoordsRect(coords); + break; + case 'circ': + case 'circle': + rect = circleCoordsRect(coords); + break; + case 'poly': + case 'polygon': + rect = polygonCoordsRect(coords); + break; + } + return { + left: rect.left + mapLeft, + top: rect.top + mapTop, + right: rect.right + mapLeft, + bottom: rect.bottom + mapTop, + }; +}; + +export { isContentEditable, viewportRect };