alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: renaming stuff from react to "revue"

Browse Source
This commit is contained in:
Braks
2021-07-10 18:33:38 +02:00
parent 4661b685ad
commit 881655d483
35 changed files with 139 additions and 7009 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/index.tsx
+3 -3
View File
@@ -117,7 +117,7 @@ const ConnectionLine = defineComponent({
// eslint-disable-next-line vue/no-setup-props-destructure
const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
return () => (
<g class="react-flow__connection">
<g class="revue-flow__connection">
<ConnectionLineComponent
sourceX={sourceX.value}
sourceY={sourceY.value}
@@ -171,8 +171,8 @@ const ConnectionLine = defineComponent({
}
return () => (
<g class="react-flow__connection">
<path d={dAttr.value} class="react-flow__connection-path" style={props.connectionLineStyle} />
<g class="revue-flow__connection">
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
</g>
);
}
src/components/Edges/BezierEdge.tsx
+1 -1
View File
@@ -157,7 +157,7 @@ const BezierEdge = defineComponent({
return () => (
<>
<path style={props.style} d={path.value} class="react-flow__edge-path" marker-end={markerEnd} />
<path style={props.style} d={path.value} class="revue-flow__edge-path" marker-end={markerEnd} />
{text}
</>
);
src/components/Edges/EdgeAnchor.tsx
+1 -1
View File
@@ -44,7 +44,7 @@ export const EdgeAnchor = defineComponent({
const radius = props.radius || 10;
return () => (
<circle
class="react-flow__edgeupdater"
class="revue-flow__edgeupdater"
cx={shiftX(props.centerX, radius, props.position)}
cy={shiftY(props.centerY, radius, props.position)}
r={radius}
src/components/Edges/EdgeText.tsx
+3 -3
View File
@@ -62,7 +62,7 @@ const EdgeText = defineComponent({
return (
<g
transform={`translate(${props.x - edgeTextBox.value.width / 2} ${props.y - edgeTextBox.value.height / 2})`}
class="react-flow__edge-textwrapper"
class="revue-flow__edge-textwrapper"
>
{props.labelShowBg && (
<rect
@@ -70,13 +70,13 @@ const EdgeText = defineComponent({
x={-props.labelBgPadding[0]}
y={-props.labelBgPadding[1]}
height={edgeTextBox.value.height + 2 * props.labelBgPadding[1]}
class="react-flow__edge-textbg"
class="revue-flow__edge-textbg"
style={props.labelBgStyle}
rx={props.labelBgBorderRadius}
ry={props.labelBgBorderRadius}
/>
)}
<text class="react-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
<text class="revue-flow__edge-text" y={edgeTextBox.value.height / 2} dy="0.3em" ref={edgeRef} style={props.labelStyle}>
{label}
</text>
{slots.default ? slots.default() : ''}
src/components/Edges/SmoothStepEdge.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ const SmoothStepEdge = defineComponent({
return (
<>
<path style={props.style} class="react-flow__edge-path" d={path} marker-end={markerEnd} />
<path style={props.style} class="revue-flow__edge-path" d={path} marker-end={markerEnd} />
{text}
</>
);
src/components/Edges/StraightEdge.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const StraightEdge = defineComponent({
<>
<path
style={props.style}
class="react-flow__edge-path"
class="revue-flow__edge-path"
d={`M ${props.sourceX},${props.sourceY}L ${props.targetX},${props.targetY}`}
marker-end={markerEnd}
/>
src/components/Edges/utils.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string
return `url(#${markerEndId})`;
}
return typeof arrowHeadType !== 'undefined' ? `url(#react-flow__${arrowHeadType})` : 'none';
return typeof arrowHeadType !== 'undefined' ? `url(#revue-flow__${arrowHeadType})` : 'none';
};
export interface GetCenterParams {
src/components/Edges/wrapEdge.tsx
+2 -2
View File
@@ -14,8 +14,8 @@ export default (EdgeComponent: any): Component<EdgeProps> => {
const updating = ref<boolean>(false);
const inactive = !props.elementsSelectable && !props.onClick;
const edgeClasses = computed(() => [
'react-flow__edge',
`react-flow__edge-${props.type}`,
'revue-flow__edge',
`revue-flow__edge-${props.type}`,
{ selected: props.selected, animated: props.animated, inactive, updating: updating.value }
]);
src/components/Handle/handler.ts
+8 -8
View File
@@ -79,8 +79,8 @@ function checkElementBelowIsValid(
}
function resetRecentHandle(hoveredHandle: Element): void {
hoveredHandle?.classList.remove('react-flow__handle-valid');
hoveredHandle?.classList.remove('react-flow__handle-connecting');
hoveredHandle?.classList.remove('revue-flow__handle-valid');
hoveredHandle?.classList.remove('revue-flow__handle-connecting');
}
export function onMouseDown(
@@ -99,8 +99,8 @@ export function onMouseDown(
onConnectStop?: OnConnectStopFunc,
onConnectEnd?: OnConnectEndFunc
): void {
const reactFlowNode = (event.target as Element).closest('.react-flow');
// when react-flow is used inside a shadow root we can't use document
const revueFlowNode = (event.target as Element).closest('.revue-flow');
// when revue-flow is used inside a shadow root we can't use document
const doc = getHostForElement(event.target as HTMLElement);
if (!doc) {
@@ -111,12 +111,12 @@ export function onMouseDown(
const elementBelowIsTarget = elementBelow?.classList.contains('target');
const elementBelowIsSource = elementBelow?.classList.contains('source');
if (!reactFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
if (!revueFlowNode || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) {
return;
}
const handleType = elementEdgeUpdaterType ? elementEdgeUpdaterType : elementBelowIsTarget ? 'target' : 'source';
const containerBounds = reactFlowNode.getBoundingClientRect();
const containerBounds = revueFlowNode.getBoundingClientRect();
let recentHoveredHandle: Element;
setPosition({
@@ -151,8 +151,8 @@ export function onMouseDown(
if (!isOwnHandle && elementBelow) {
recentHoveredHandle = elementBelow;
elementBelow.classList.add('react-flow__handle-connecting');
elementBelow.classList.toggle('react-flow__handle-valid', isValid);
elementBelow.classList.add('revue-flow__handle-connecting');
elementBelow.classList.toggle('revue-flow__handle-valid', isValid);
}
}
src/components/Handle/index.tsx
+2 -2
View File
@@ -68,8 +68,8 @@ const Handle = defineComponent({
};
const handleClasses = [
'react-flow__handle',
`react-flow__handle-${props.position}`,
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: !isTarget,
src/components/Nodes/wrapNode.tsx
+2 -2
View File
@@ -162,8 +162,8 @@ export default (NodeComponent: any) => {
}
const nodeClasses = [
'react-flow__node',
`react-flow__node-${props.type}`,
'revue-flow__node',
`revue-flow__node-${props.type}`,
{
selected: props.selected,
selectable: props.isSelectable
src/components/UserSelection/index.tsx
+5 -5
View File
@@ -10,12 +10,12 @@ type UserSelectionProps = {
};
function getMousePosition(event: MouseEvent): XYPosition | void {
const reactFlowNode = (event.target as Element).closest('.react-flow');
if (!reactFlowNode) {
const revueFlowNode = (event.target as Element).closest('.revue-flow');
if (!revueFlowNode) {
return;
}
const containerBounds = reactFlowNode.getBoundingClientRect();
const containerBounds = revueFlowNode.getBoundingClientRect();
return {
x: event.clientX - containerBounds.left,
@@ -33,7 +33,7 @@ const SelectionRect = defineComponent({
return () => (
<div
class="react-flow__selection"
class="revue-flow__selection"
style={{
width: pinia.userSelectionRect.width,
height: pinia.userSelectionRect.height,
@@ -91,7 +91,7 @@ export default defineComponent({
return () => (
<div
class="react-flow__selectionpane"
class="revue-flow__selectionpane"
onMousedown={onMouseDown}
onMousemove={onMouseMove}
onMouseup={onMouseUp}