Skip to content

Commit

Permalink
feat: add selectedRangesText props #38
Browse files Browse the repository at this point in the history
  • Loading branch information
daybrush committed Mar 3, 2023
1 parent a714d8f commit 6b1f77a
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 47 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"@daybrush/jsdoc": "^0.4.3",
"@daybrush/release": "^0.7.0",
"cpx": "1.5.0",
"daybrush-jsdoc-template": "^1.7.0",
"daybrush-jsdoc-template": "^1.10.0",
"gh-pages": "^2.0.1",
"intercept-stdout": "0.1.2",
"lerna": "^4.0.0",
Expand Down
1 change: 1 addition & 0 deletions packages/react-ruler/src/demo/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export default class App extends React.Component {
type="horizontal"
direction="start"
selectedRanges={[[-100, 250]]}
selectedRangesText={true}
style={{ display: "block", width: "400px", height: "30px" }}
lineWidth={1}
/>
Expand Down
113 changes: 71 additions & 42 deletions packages/react-ruler/src/react-ruler/Ruler.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react";
import { ref } from "framework-utils";
import { RulerInterface, RulerProps } from "./types";
import { convertUnitSize } from "@daybrush/utils";
import { convertUnitSize, findIndex } from "@daybrush/utils";

export default class Ruler extends React.PureComponent<RulerProps> implements RulerInterface {
public static defaultProps: Partial<RulerProps> = {
Expand Down Expand Up @@ -127,6 +127,9 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
selectedRanges,
selectedBackgroundColor,
lineWidth = 1,
selectedRangesText,
selectedRangesTextColor = "#44aaff",
selectedRangesTextOffset = [0, 0],
} = props as Required<RulerProps>;

const rulerScale = this._getRulerScale();
Expand Down Expand Up @@ -186,6 +189,22 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
const length = maxRange - minRange;
const alignOffset = Math.max(["left", "center", "right"].indexOf(textAlign) - 1, -1);
const barSize = isHorizontal ? height : width;
const values: Array<{
value: number;
color: string;
backgroundColor?: string;
offset: number[];
}> = [];

for (let i = 0; i <= length; ++i) {
values.push({
color: textColor,
offset: textOffset,
backgroundColor: textBackgroundColor,
value: (i + minRange) * unit,
});
}


// Draw Selected Range Background
if (selectedBackgroundColor !== "transparent" && selectedRanges?.length) {
Expand All @@ -195,19 +214,32 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
const rangeX = (rangeStart - scrollPos) * nextZoom;
const rangeWidth = ((rangeEnd - rangeStart) * nextZoom);

if (selectedRangesText) {
selectedRange.forEach(value => {
const index = findIndex(values, ({ value: prevValue }) => prevValue === value);

if (index > -1) {
values.splice(index, 1);
}
values.push({
value,
color: selectedRangesTextColor,
offset: selectedRangesTextOffset,
});
});
}

if (rangeWidth <= 0) {
return;
}

context.save();
context.fillStyle = selectedBackgroundColor;

if (isHorizontal) {
context.fillRect(rangeX, 0, rangeWidth, barSize);
} else {
context.fillRect(0, rangeX, barSize, rangeWidth);
}

context.restore();
});
}
Expand Down Expand Up @@ -274,17 +306,16 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
context.stroke();

// Render Labels
for (let i = 0; i <= length; ++i) {
const value = i + minRange;


values.forEach(({ value, offset, backgroundColor, color }) => {
if (!isNegative && value < 0) {
continue;
return;
}
const startValue = value * unit;
const startPos = (startValue - scrollPos) * nextZoom;
const startPos = (value - scrollPos) * nextZoom;

if (startPos < -zoomUnit || startPos >= size + unit * nextZoom || startValue < range[0] || startValue > range[1]) {
continue;
if (startPos < -zoomUnit || startPos >= size + unit * nextZoom || value < range[0] || value > range[1]) {
return;
}

let origin = 0
Expand All @@ -304,53 +335,51 @@ export default class Ruler extends React.PureComponent<RulerProps> implements Ru
? [startPos + alignOffset * -3, origin]
: [origin, startPos + alignOffset * 3];

let text = `${startValue}`;
let text = `${value}`;

if (textFormat) {
text = textFormat(startValue);
text = textFormat(value);
}

context.textAlign = textAlign;


let backgroundOffset = 0
const textSize = context.measureText(text).width
switch (textAlign) {
case "left":
backgroundOffset = 0;
break;
case "center":
backgroundOffset = -textSize / 2;
break;
case "right":
backgroundOffset = -textSize;
break;
}

if (isHorizontal) {
context.save();
context.fillStyle = textBackgroundColor;
context.fillRect(startX + textOffset[0] + backgroundOffset, 0, textSize, mainLineSize);
context.restore();
} else {
if (backgroundColor) {
let backgroundOffset = 0
const textSize = context.measureText(text).width
switch (textAlign) {
case "left":
backgroundOffset = 0;
break;
case "center":
backgroundOffset = -textSize / 2;
break;
case "right":
backgroundOffset = -textSize;
break;
}
context.save();
context.translate(0, startY + textOffset[1]);
context.rotate(-Math.PI / 2);
context.fillStyle = textBackgroundColor;
context.fillRect(backgroundOffset, 0, textSize, mainLineSize);
context.fillStyle = backgroundColor;
if (isHorizontal) {
context.fillRect(startX + offset[0] + backgroundOffset, 0, textSize, mainLineSize);
} else {
context.translate(0, startY + offset[1]);
context.rotate(-Math.PI / 2);
context.fillRect(backgroundOffset, 0, textSize, mainLineSize);
}
context.restore();
}

context.save();
context.fillStyle = color;
if (isHorizontal) {
context.fillText(text, startX + textOffset[0], startY + textOffset[1]);
context.fillText(text, startX + offset[0], startY + offset[1]);
} else {
context.save();
context.translate(startX + textOffset[0], startY + textOffset[1]);
context.translate(startX + offset[0], startY + offset[1]);
context.rotate(-Math.PI / 2);
context.fillText(text, 0, 0);
context.restore();
}
}
context.restore();
});

context.restore();
}
Expand Down
3 changes: 3 additions & 0 deletions packages/react-ruler/src/react-ruler/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ export const PROPERTIES: Array<keyof RulerProps> = [
"selectedRanges",
"defaultPixelScale",
"useResizeObserver",
"selectedRangesText",
"selectedRangesTextColor",
"selectedRangesTextOffset",
];
export const METHODS: Array<keyof RulerInterface> = [
"scroll",
Expand Down
18 changes: 18 additions & 0 deletions packages/react-ruler/src/react-ruler/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,24 @@ export interface RulerProps {
* @default "#555555"
*/
selectedBackgroundColor?: string;
/**
* Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible.
* @since 0.16.0
* @default false
*/
selectedRangesText?: boolean;
/**
* Position offset of text in selected ranges
* @since 0.16.0
* @default "0, 0"
*/
selectedRangesTextOffset?: number[];
/**
* Color of text in selected ranges
* @since 0.16.0
* @default "#44aaff"
*/
selectedRangesTextColor?: string;
/**
* Scale value of canvase when device high density is 1.
* Less than 2 may cause pixels to blur.
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6797,10 +6797,10 @@ dateformat@^3.0.0:
resolved "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz"
integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==

daybrush-jsdoc-template@^1.7.0:
version "1.7.0"
resolved "https://registry.npmjs.org/daybrush-jsdoc-template/-/daybrush-jsdoc-template-1.7.0.tgz"
integrity sha512-+R+37tg0etaaWqMP+z5mGMdt7432riKh1jMo2SYZnUMhk0KMEmoXUC4JzwF1sKQtmWojLBQZ7Z2zfbsVA2tBjQ==
daybrush-jsdoc-template@^1.10.0:
version "1.10.0"
resolved "https://registry.npmjs.org/daybrush-jsdoc-template/-/daybrush-jsdoc-template-1.10.0.tgz#6fc0f2f90c689b1eaaf0d2d74e67062a5a593c25"
integrity sha512-9bj+MGARB1Spqn2WQYpnK6f5KOBFLcJLunUrGqjLKkwi9X2WrWCqPfjIATahwSA/I7I0+XNjavlYgegyc1y47g==
dependencies:
"@daybrush/jsdoc" "^0.4.0"
"@daybrush/utils" "^1.6.0"
Expand Down

0 comments on commit 6b1f77a

Please sign in to comment.