Skip to content

Commit b4e3e89

Browse files
KiteniteKitenite
committed
Add history example
1 parent f01e47b commit b4e3e89

File tree

5 files changed

+90
-68
lines changed

5 files changed

+90
-68
lines changed

‎app/components/hotkey-map/hotkeys.element.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class Hotkeys extends HTMLElement {
5050

5151
hotkeys('esc', e => this.hideTool())
5252
hotkeys(`${metaKey}+z`, (e) => undoLastEvent());
53-
hotkeys(`${metaKey}+z`, (e) => redoLastEvent());
53+
hotkeys(`${metaKey}+shift+z`, (e) => redoLastEvent());
5454
}
5555

5656
disconnectedCallback() { }

‎app/features/color.js‎

Lines changed: 67 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,87 @@
11
import $ from 'blingblingjs'
22
import { TinyColor } from '@ctrl/tinycolor'
33
import { getStyle } from '../utilities/'
4+
import { handleEditEvent } from "./events";
45

56
const state = {
67
active_color: 'background',
78
elements: [],
89
}
910

1011
export function ColorPicker(pallete, selectorEngine) {
11-
const foregroundPicker = $('#foreground', pallete)
12-
const backgroundPicker = $('#background', pallete)
13-
const borderPicker = $('#border', pallete)
14-
const fgInput = $('input', foregroundPicker[0])
15-
const bgInput = $('input', backgroundPicker[0])
16-
const boInput = $('input', borderPicker[0])
12+
const foregroundPicker = $('#foreground', pallete)
13+
const backgroundPicker = $('#background', pallete)
14+
const borderPicker = $('#border', pallete)
15+
const fgInput = $('input', foregroundPicker[0])
16+
const bgInput = $('input', backgroundPicker[0])
17+
const boInput = $('input', borderPicker[0])
1718

1819
const shadows = {
19-
active: '0 0 0 2px hotpink, rgba(0, 0, 0, 0.25) 0px 0.25em 0.5em',
20+
active: '0 0 0 2px hotpink, rgba(0, 0, 0, 0.25) 0px 0.25em 0.5em',
2021
inactive: '0 0 0 2px var(--theme-bg), rgba(0, 0, 0, 0.25) 0px 0.25em 0.5em',
2122
}
2223

2324
const state = {
2425
active_color: undefined,
25-
elements: [],
26+
elements: [],
2627
}
2728

28-
fgInput.on('input', ({target:{value}}) => {
29-
state.elements.map(el =>
30-
el.style['color'] = value)
29+
fgInput.on('input', ({ target: { value } }) => {
30+
state.elements.map(el => {
31+
const oldStyle = el.style["color"];
32+
el.style['color'] = value
33+
handleEditEvent({
34+
el,
35+
editType: "STYLE",
36+
newValue: { color: value },
37+
oldValue: { color: oldStyle },
38+
});
39+
})
3140

3241
foregroundPicker[0].style.setProperty(`--contextual_color`, value)
3342
})
3443

35-
bgInput.on('input', ({target:{value}}) => {
36-
state.elements.map(el =>
37-
el.style[el instanceof SVGElement
38-
? 'fill'
39-
: 'backgroundColor'
40-
] = value)
44+
bgInput.on('input', ({ target: { value } }) => {
45+
state.elements.map(el => {
46+
const oldStyle = el.style[el instanceof SVGElement ? "fill" : "backgroundColor"];
47+
el.style[el instanceof SVGElement ? 'fill' : 'backgroundColor'] = value
48+
handleEditEvent({
49+
el,
50+
editType: "STYLE",
51+
newValue: { [el instanceof SVGElement ? "fill" : "backgroundColor"]: value },
52+
oldValue: { [el instanceof SVGElement ? "fill" : "backgroundColor"]: oldStyle },
53+
});
54+
})
4155

4256
backgroundPicker[0].style.setProperty(`--contextual_color`, value)
4357
})
4458

45-
boInput.on('input', ({target:{value}}) => {
46-
state.elements.map(el =>
59+
boInput.on('input', ({ target: { value } }) => {
60+
state.elements.map(el => {
61+
const oldStyle =
62+
el.style[el instanceof SVGElement ? "fill" : "backgroundColor"];
4763
el.style[el instanceof SVGElement
4864
? 'stroke'
4965
: 'borderColor'
50-
] = value)
66+
] = value
67+
68+
handleEditEvent({
69+
el,
70+
editType: "STYLE",
71+
newValue: { [el instanceof SVGElement ? "fill" : "backgroundColor"]: value },
72+
oldValue: { [el instanceof SVGElement ? "fill" : "backgroundColor"]: oldStyle },
73+
});
74+
});
5175

5276
borderPicker[0].style.setProperty(`--contextual_color`, value)
5377
})
5478

5579
const extractColors = elements => {
5680
state.elements = elements
5781

58-
let isMeaningfulForeground = false
59-
let isMeaningfulBackground = false
60-
let isMeaningfulBorder = false
82+
let isMeaningfulForeground = false
83+
let isMeaningfulBackground = false
84+
let isMeaningfulBorder = false
6185
let FG, BG, BO
6286

6387
if (state.elements.length == 1) {
@@ -85,24 +109,24 @@ export function ColorPicker(pallete, selectorEngine) {
85109

86110
isMeaningfulForeground = FG.originalInput !== 'rgb(0, 0, 0)' || (el.children.length === 0 && el.textContent !== '')
87111
isMeaningfulBackground = BG.originalInput !== 'rgba(0, 0, 0, 0)'
88-
isMeaningfulBorder = BO.originalInput !== 'rgb(0, 0, 0)'
112+
isMeaningfulBorder = BO.originalInput !== 'rgb(0, 0, 0)'
89113

90114
if (isMeaningfulForeground && !isMeaningfulBackground)
91115
setActive('foreground')
92116
else if (isMeaningfulBackground && !isMeaningfulForeground || isMeaningfulBackground && isMeaningfulForeground)
93117
setActive('background')
94118

95-
const new_fg = isMeaningfulForeground ? fg : ''
96-
const new_bg = isMeaningfulBackground ? bg : ''
97-
const new_bo = isMeaningfulBorder ? bo : ''
119+
const new_fg = isMeaningfulForeground ? fg : ''
120+
const new_bg = isMeaningfulBackground ? bg : ''
121+
const new_bo = isMeaningfulBorder ? bo : ''
98122

99-
const fg_icon = isMeaningfulForeground ? healthyContrastColor(FG) : ''
100-
const bg_icon = isMeaningfulBackground ? healthyContrastColor(BG) : ''
101-
const bo_icon = isMeaningfulBorder ? healthyContrastColor(BO) : ''
123+
const fg_icon = isMeaningfulForeground ? healthyContrastColor(FG) : ''
124+
const bg_icon = isMeaningfulBackground ? healthyContrastColor(BG) : ''
125+
const bo_icon = isMeaningfulBorder ? healthyContrastColor(BO) : ''
102126

103-
fgInput.attr('value', `#`+FG.toHex())
104-
bgInput.attr('value', `#`+BG.toHex())
105-
boInput.attr('value', `#`+BO.toHex())
127+
fgInput.attr('value', `#` + FG.toHex())
128+
bgInput.attr('value', `#` + BG.toHex())
129+
boInput.attr('value', `#` + BO.toHex())
106130

107131
foregroundPicker.attr('style', `
108132
--contextual_color: ${new_fg};
@@ -166,10 +190,14 @@ export function ColorPicker(pallete, selectorEngine) {
166190
return {
167191
getActive,
168192
setActive,
169-
foreground: { color: color =>
170-
foregroundPicker[0].style.setProperty('--contextual_color', color)},
171-
background: { color: color =>
172-
backgroundPicker[0].style.setProperty('--contextual_color', color)}
193+
foreground: {
194+
color: color =>
195+
foregroundPicker[0].style.setProperty('--contextual_color', color)
196+
},
197+
background: {
198+
color: color =>
199+
backgroundPicker[0].style.setProperty('--contextual_color', color)
200+
}
173201
}
174202
}
175203

@@ -188,8 +216,8 @@ export const functionalNotate = color => {
188216

189217
if (chunks.length === 4) {
190218
let opacity = chunks.pop()
191-
chunks[0] = chunks[0].replace('hsla','hsl')
192-
chunks[0] = chunks[0].replace('rgba','rgb')
219+
chunks[0] = chunks[0].replace('hsla', 'hsl')
220+
chunks[0] = chunks[0].replace('rgba', 'rgb')
193221
return chunks.join(' ') + ` / ${opacity}`
194222
}
195223
else {

‎app/features/events.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1-
import { addToHistory } from "./history";
2-
import { getUniqueSelector } from "../utilities";
1+
import { addToHistory, EditType } from "./history";
2+
import { finder } from '@medv/finder'
3+
4+
export const getUniqueSelector = (el) => {
5+
let selector = el.tagName.toLowerCase()
6+
try {
7+
if (el.nodeType !== Node.ELEMENT_NODE) { return selector }
8+
// Class names can change too much between states so should ignore.
9+
selector = finder(el, { className: () => false })
10+
} catch (e) {
11+
console.error("Error creating selector ", e);
12+
}
13+
return selector
14+
}
315

416
const elementSelectorCache = new WeakMap(); // Cache for element selectors
517

@@ -10,7 +22,6 @@ function debounce(func, wait) {
1022
const context = this;
1123
const editEvent = args[0];
1224
const element = editEvent.el;
13-
1425
// Use cached selector if available, otherwise compute and cache it
1526
if (!elementSelectorCache.has(element)) {
1627
elementSelectorCache.set(

‎app/features/history.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -92,18 +92,14 @@ export function redoLastEvent() {
9292
}
9393

9494
function createReverseEvent(event) {
95-
switch (event.editType) {
96-
// Not handling insert and remove types
97-
case EditType.STYLE || EditType.TEXT:
98-
default:
99-
return {
100-
createdAt: event.createdAt,
101-
selector: event.selector,
102-
editType: event.editType,
103-
newVal: event.oldVal,
104-
oldVal: event.newVal,
105-
};
106-
}
95+
// Can handle different edit types here
96+
return {
97+
createdAt: event.createdAt,
98+
selector: event.selector,
99+
editType: event.editType,
100+
newVal: event.oldVal,
101+
oldVal: event.newVal,
102+
};
107103
}
108104

109105
function applyStyleEvent(event, element) {

‎app/utilities/selector.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)