Skip to content

Commit 6b8cc16

Browse files
timjbtimjb
authored
Merge pull request #38 from Operational-Transformation/renovate/prettier-2.x
Update dependency prettier to v2.3.2
2 parents ceb94aa + ecda3b3 commit 6b8cc16

9 files changed

+192
-189
lines changed

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,6 @@
3434
"@snowpack/plugin-webpack": "3.0.0",
3535
"@types/snowpack-env": "2.3.3",
3636
"dependency-cruiser": "10.0.4",
37-
"prettier": "2.2.1"
37+
"prettier": "2.3.2"
3838
}
3939
}

‎src/applicationSpecific/plainTextWithScanningOperations.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const plainTextWithScanningOperationsFunctions: ApplicationSpecificFuncti
5454
TextOperation
5555
> = {
5656
transform(a: TextOperation, b: TextOperation): [TextOperation, TextOperation] {
57-
return (TextOperation.transform(a, b) as unknown) as [TextOperation, TextOperation]; // because type definition is wrong
57+
return TextOperation.transform(a, b) as unknown as [TextOperation, TextOperation]; // because type definition is wrong
5858
},
5959
compose(first: TextOperation, second: TextOperation) {
6060
return first.compose(second);

‎src/generic/ArrowDiagram.tsx

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -66,50 +66,52 @@ interface ArrowDiagramProps<OpT> {
6666

6767
type ArrowDiagram<OpT> = FunctionComponent<ArrowDiagramProps<OpT>>;
6868

69-
export const makeArrowDiagram = <OpT extends unknown>(
70-
OperationVisualization: OperationVisualizationComp<OpT>,
71-
): ArrowDiagram<OpT> => ({ width, height, arrows }) => {
72-
return (
73-
<div
74-
style={{
75-
position: "relative",
76-
width: `${width}px`,
77-
height: `${height}px`,
78-
margin: "0 auto",
79-
}}
80-
>
81-
<svg
82-
xmlns="http://www.w3.org/2000/svg"
83-
width={width}
84-
height={height}
85-
style={{ position: "absolute", opacity: "0.2" }}
69+
export const makeArrowDiagram =
70+
<OpT extends unknown>(
71+
OperationVisualization: OperationVisualizationComp<OpT>,
72+
): ArrowDiagram<OpT> =>
73+
({ width, height, arrows }) => {
74+
return (
75+
<div
76+
style={{
77+
position: "relative",
78+
width: `${width}px`,
79+
height: `${height}px`,
80+
margin: "0 auto",
81+
}}
8682
>
87-
{arrows.map(({ operation, start, end }, i) => (
88-
<SvgArrow
89-
key={i}
90-
start={interpolate(0.1, start, end)}
91-
end={interpolate(0.95, start, end)}
92-
color={getClientColor(operation.meta.author)}
93-
{...operationArrowStyle}
94-
/>
95-
))}
96-
</svg>
97-
{arrows.map(({ operation, start, end, tooltipPlacement }, i) => {
98-
const centerPoint = interpolate(0.45, start, end);
99-
const style: CSSProperties = {
100-
position: "absolute",
101-
left: `${centerPoint.x - 10}px`,
102-
top: `${centerPoint.y - 10}px`,
103-
};
104-
return (
105-
<OperationVisualization
106-
key={i}
107-
operation={operation}
108-
tooltipPlacement={tooltipPlacement}
109-
style={style}
110-
/>
111-
);
112-
})}
113-
</div>
114-
);
115-
};
83+
<svg
84+
xmlns="http://www.w3.org/2000/svg"
85+
width={width}
86+
height={height}
87+
style={{ position: "absolute", opacity: "0.2" }}
88+
>
89+
{arrows.map(({ operation, start, end }, i) => (
90+
<SvgArrow
91+
key={i}
92+
start={interpolate(0.1, start, end)}
93+
end={interpolate(0.95, start, end)}
94+
color={getClientColor(operation.meta.author)}
95+
{...operationArrowStyle}
96+
/>
97+
))}
98+
</svg>
99+
{arrows.map(({ operation, start, end, tooltipPlacement }, i) => {
100+
const centerPoint = interpolate(0.45, start, end);
101+
const style: CSSProperties = {
102+
position: "absolute",
103+
left: `${centerPoint.x - 10}px`,
104+
top: `${centerPoint.y - 10}px`,
105+
};
106+
return (
107+
<OperationVisualization
108+
key={i}
109+
operation={operation}
110+
tooltipPlacement={tooltipPlacement}
111+
style={style}
112+
/>
113+
);
114+
})}
115+
</div>
116+
);
117+
};

‎src/generic/ClientAndSocketsVisualization.tsx

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,31 +33,33 @@ interface OperationInSocketProps<OpT> {
3333
onTransitionEnd?: () => void;
3434
}
3535

36-
const makeOperationInSocket = <OpT extends unknown>(
37-
OperationVisualization: OperationVisualizationComp<OpT>,
38-
): FunctionComponent<OperationInSocketProps<OpT>> => (props) => {
39-
const classes = useSocketOperationStyles();
36+
const makeOperationInSocket =
37+
<OpT extends unknown>(
38+
OperationVisualization: OperationVisualizationComp<OpT>,
39+
): FunctionComponent<OperationInSocketProps<OpT>> =>
40+
(props) => {
41+
const classes = useSocketOperationStyles();
4042

41-
const isInitialRender = useIsInitialRender();
43+
const isInitialRender = useIsInitialRender();
4244

43-
const positionStyle: CSSProperties =
44-
isInitialRender && props.initialPositionTop !== undefined
45-
? { top: props.initialPositionTop }
46-
: props.positionTop !== undefined
47-
? { top: props.positionTop }
48-
: {};
45+
const positionStyle: CSSProperties =
46+
isInitialRender && props.initialPositionTop !== undefined
47+
? { top: props.initialPositionTop }
48+
: props.positionTop !== undefined
49+
? { top: props.positionTop }
50+
: {};
4951

50-
const hoverStyle: CSSProperties = props.disableHover ? { pointerEvents: "none" } : {};
52+
const hoverStyle: CSSProperties = props.disableHover ? { pointerEvents: "none" } : {};
5153

52-
return (
53-
<OperationVisualization
54-
operation={props.operation}
55-
className={classes.operationInSocket}
56-
style={{ ...positionStyle, ...hoverStyle }}
57-
onTransitionEnd={props.onTransitionEnd}
58-
/>
59-
);
60-
};
54+
return (
55+
<OperationVisualization
56+
operation={props.operation}
57+
className={classes.operationInSocket}
58+
style={{ ...positionStyle, ...hoverStyle }}
59+
onTransitionEnd={props.onTransitionEnd}
60+
/>
61+
);
62+
};
6163

6264
const useSocketStyles = createUseStyles({
6365
socket: {

‎src/generic/ClientLogVisualization.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,8 @@ const makeClientLogItemVisualization = <OpT extends unknown>(
4747
applicationSpecific: ApplicationSpecificOperationComponents<OpT>,
4848
): FunctionComponent<ClientLogItem<OpT>> => {
4949
const OperationVisualization = makeOperationVisualization(applicationSpecific);
50-
const SynchronizationStateVisualization = makeSynchronizationStateVisualization(
51-
OperationVisualization,
52-
);
50+
const SynchronizationStateVisualization =
51+
makeSynchronizationStateVisualization(OperationVisualization);
5352
const ArrowDiagram = makeArrowDiagram(OperationVisualization);
5453

5554
const UserEditImmediatelySentToServerVisualization: FunctionComponent<
@@ -396,9 +395,8 @@ export const makeClientLogVisualization = <OpT extends unknown>(
396395
applicationSpecific: ApplicationSpecificOperationComponents<OpT>,
397396
): FunctionComponent<ClientLogVisualizationProps<OpT>> => {
398397
const OperationVisualization = makeOperationVisualization(applicationSpecific);
399-
const SynchronizationStateVisualization = makeSynchronizationStateVisualization(
400-
OperationVisualization,
401-
);
398+
const SynchronizationStateVisualization =
399+
makeSynchronizationStateVisualization(OperationVisualization);
402400
const ClientLogItemVisualization = makeClientLogItemVisualization(applicationSpecific);
403401

404402
return ({ clientLog, initialSynchronizationState }) => {

‎src/generic/OperationVisualization.tsx

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -114,62 +114,64 @@ enum SelfOpenStatus {
114114

115115
export type OperationVisualizationComp<OpT> = FunctionComponent<OperationProps<OpT>>;
116116

117-
export const makeOperationVisualization = <OpT extends unknown>(
118-
applicationSpecific: ApplicationSpecificOperationComponents<OpT>,
119-
): OperationVisualizationComp<OpT> => (props) => {
120-
const classes = useOperationStyles();
121-
const { className, style, operation, tooltipPlacement, ...otherProps } = props;
122-
123-
const [tooltipContent, setTooltipContent] = useState<NonNullable<React.ReactNode>>("");
124-
const [selfOpenStatus, setSelfOpenStatus] = useState<SelfOpenStatus>(SelfOpenStatus.Closed);
125-
const [hoveredOperation, setHoveredOperation] = useOperationHoverState();
126-
127-
useEffect(() => {
128-
if (
129-
selfOpenStatus === SelfOpenStatus.Closed &&
130-
hoveredOperation !== undefined &&
131-
isRelated(hoveredOperation, operation)
132-
) {
133-
setTooltipContent(renderRelatedOperation(operation, hoveredOperation));
134-
} else if (selfOpenStatus === SelfOpenStatus.Closing && hoveredOperation === undefined) {
135-
setSelfOpenStatus(SelfOpenStatus.Closed);
136-
}
137-
}, [selfOpenStatus, hoveredOperation, operation]);
138-
139-
const onOpen = useCallback(() => {
140-
setSelfOpenStatus(SelfOpenStatus.Open);
141-
setTooltipContent(renderOperation(applicationSpecific.renderOperation, operation));
142-
setHoveredOperation(operation);
143-
}, [operation, setHoveredOperation]);
144-
145-
const onClose = useCallback(() => {
146-
setSelfOpenStatus(hoveredOperation ? SelfOpenStatus.Closing : SelfOpenStatus.Closed);
147-
setHoveredOperation(undefined);
148-
}, [hoveredOperation, setHoveredOperation]);
149-
150-
const isRelatedOperationHovered =
151-
hoveredOperation !== undefined && isRelated(operation, hoveredOperation);
152-
153-
return (
154-
<Tooltip
155-
key={operation.meta.id}
156-
arrow={true}
157-
classes={{ tooltip: classes.tooltip }}
158-
title={tooltipContent}
159-
open={selfOpenStatus === SelfOpenStatus.Open || isRelatedOperationHovered}
160-
placement={tooltipPlacement ?? "bottom"}
161-
onOpen={onOpen}
162-
onClose={onClose}
163-
>
164-
<span
117+
export const makeOperationVisualization =
118+
<OpT extends unknown>(
119+
applicationSpecific: ApplicationSpecificOperationComponents<OpT>,
120+
): OperationVisualizationComp<OpT> =>
121+
(props) => {
122+
const classes = useOperationStyles();
123+
const { className, style, operation, tooltipPlacement, ...otherProps } = props;
124+
125+
const [tooltipContent, setTooltipContent] = useState<NonNullable<React.ReactNode>>("");
126+
const [selfOpenStatus, setSelfOpenStatus] = useState<SelfOpenStatus>(SelfOpenStatus.Closed);
127+
const [hoveredOperation, setHoveredOperation] = useOperationHoverState();
128+
129+
useEffect(() => {
130+
if (
131+
selfOpenStatus === SelfOpenStatus.Closed &&
132+
hoveredOperation !== undefined &&
133+
isRelated(hoveredOperation, operation)
134+
) {
135+
setTooltipContent(renderRelatedOperation(operation, hoveredOperation));
136+
} else if (selfOpenStatus === SelfOpenStatus.Closing && hoveredOperation === undefined) {
137+
setSelfOpenStatus(SelfOpenStatus.Closed);
138+
}
139+
}, [selfOpenStatus, hoveredOperation, operation]);
140+
141+
const onOpen = useCallback(() => {
142+
setSelfOpenStatus(SelfOpenStatus.Open);
143+
setTooltipContent(renderOperation(applicationSpecific.renderOperation, operation));
144+
setHoveredOperation(operation);
145+
}, [operation, setHoveredOperation]);
146+
147+
const onClose = useCallback(() => {
148+
setSelfOpenStatus(hoveredOperation ? SelfOpenStatus.Closing : SelfOpenStatus.Closed);
149+
setHoveredOperation(undefined);
150+
}, [hoveredOperation, setHoveredOperation]);
151+
152+
const isRelatedOperationHovered =
153+
hoveredOperation !== undefined && isRelated(operation, hoveredOperation);
154+
155+
return (
156+
<Tooltip
165157
key={operation.meta.id}
166-
className={clsx(classes.operation, props.className)}
167-
style={{
168-
background: getClientColor(operation.meta.author),
169-
...style,
170-
}}
171-
{...otherProps}
172-
/>
173-
</Tooltip>
174-
);
175-
};
158+
arrow={true}
159+
classes={{ tooltip: classes.tooltip }}
160+
title={tooltipContent}
161+
open={selfOpenStatus === SelfOpenStatus.Open || isRelatedOperationHovered}
162+
placement={tooltipPlacement ?? "bottom"}
163+
onOpen={onOpen}
164+
onClose={onClose}
165+
>
166+
<span
167+
key={operation.meta.id}
168+
className={clsx(classes.operation, props.className)}
169+
style={{
170+
background: getClientColor(operation.meta.author),
171+
...style,
172+
}}
173+
{...otherProps}
174+
/>
175+
</Tooltip>
176+
);
177+
};

0 commit comments

Comments
 (0)