Skip to content

Commit

Permalink
#2679 Highlight colors for Simple Objects do not match the new design
Browse files Browse the repository at this point in the history
  • Loading branch information
@StarlaStarla
StarlaStarla committed Jul 25, 2023
1 parent 9d48010 commit 607aafd
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 68 deletions.
6 changes: 2 additions & 4 deletions packages/ketcher-core/src/application/render/options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,7 @@ function defaultOptions(options: RenderOptions): RenderOptions {
},
hoverStyle: {
stroke: '#0097A8',
fill: 'transparent',
fillSelected: '#CCFFDD',
fill: '#CCFFDD',
'stroke-width': (0.6 * scaleFactor) / 20,
},
sgroupBracketStyle: {
Expand All @@ -106,11 +105,10 @@ function defaultOptions(options: RenderOptions): RenderOptions {
stroke: 'gray',
'stroke-width': '1px',
},
hoverStyleSimpleObject: {
selectionStyleSimpleObject: {
stroke: '#57FF8F',
'stroke-width': scaleFactor / 4,
'stroke-linecap': 'round',
'stroke-opacity': 0.6,
},
atomSelectionPlateRadius: labelFontSize,
contractedFunctionalGroupSize: 50,
Expand Down
1 change: 1 addition & 0 deletions packages/ketcher-core/src/application/render/render.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export type RenderOptions = {
hoverStyle: RenderOptionStyles;
sgroupBracketStyle: RenderOptionStyles;
lassoStyle: RenderOptionStyles;
selectionStyleSimpleObject: RenderOptionStyles;
hoverStyleSimpleObject: RenderOptionStyles;
atomSelectionPlateRadius: number;
contractedFunctionalGroupSize: number;
Expand Down
14 changes: 10 additions & 4 deletions packages/ketcher-core/src/application/render/restruct/reobject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,16 @@ class ReObject {

changeSelectionStyle(options: any) {
const { hoverStyle } = options;
this.hovering?.attr({
fill: this.selected ? hoverStyle.fillSelected : hoverStyle.fill,
'fill-opacity': this.selected ? 1 : 0,
});
if (this.visel.type === 'simpleObject') {
this.hovering?.attr({
'fill-opacity': this.selected ? 1 : 0,
});
} else {
this.hovering?.attr({
fill: hoverStyle.fill,
'fill-opacity': this.selected ? 1 : 0,
});
}
}

getVBoxObj(render: Render): Box2Abs | null {
Expand Down
139 changes: 83 additions & 56 deletions packages/ketcher-core/src/application/render/restruct/resimpleObject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ interface StyledPath {
}
class ReSimpleObject extends ReObject {
private item: any;
private selectionSet: any;
private selectionPointsSet: any;

constructor(simpleObject: any) {
super('simpleObject');
Expand Down Expand Up @@ -189,6 +191,14 @@ class ReSimpleObject extends ReObject {
return refPoints;
}

getHoverPathStyle(path: any, render: Render, type: boolean) {
if (type) {
return path.attr(render.options.hoverStyle);
} else {
return path.attr({ ...render.options.hoverStyle, fill: '#fff' });
}
}

hoverPath(render: Render): Array<StyledPath> {
const point: Array<Vec2> = [];

Expand All @@ -197,56 +207,61 @@ class ReSimpleObject extends ReObject {
});
const scaleFactor = render.options.scale;

const path: Array<any> = [];
const paths: Array<StyledPath> = [];

// TODO: It seems that inheritance will be the better approach here
switch (this.item.mode) {
case SimpleObjectMode.ellipse: {
const rad = Vec2.diff(point[1], point[0]);
const rx = rad.x / 2;
const ry = rad.y / 2;
path.push(
render.paper.ellipse(
tfx(point[0].x + rx),
tfx(point[0].y + ry),
tfx(Math.abs(rx) + scaleFactor / 8),
tfx(Math.abs(ry) + scaleFactor / 8),
),
const outerEllipse = render.paper.ellipse(
tfx(point[0].x + rx),
tfx(point[0].y + ry),
tfx(Math.abs(rx) + scaleFactor / 8),
tfx(Math.abs(ry) + scaleFactor / 8),
);
paths.push({
path: this.getHoverPathStyle(outerEllipse, render, true),
stylesApplied: true,
});
if (
Math.abs(rx) - scaleFactor / 8 > 0 &&
Math.abs(ry) - scaleFactor / 8 > 0
) {
path.push(
render.paper.ellipse(
tfx(point[0].x + rx),
tfx(point[0].y + ry),
tfx(Math.abs(rx) - scaleFactor / 8),
tfx(Math.abs(ry) - scaleFactor / 8),
),
const innerEllipse = render.paper.ellipse(
tfx(point[0].x + rx),
tfx(point[0].y + ry),
tfx(Math.abs(rx) - scaleFactor / 8),
tfx(Math.abs(ry) - scaleFactor / 8),
);
paths.push({
path: this.getHoverPathStyle(innerEllipse, render, false),
stylesApplied: true,
});
}
break;
}

case SimpleObjectMode.rectangle: {
path.push(
render.paper.rect(
tfx(Math.min(point[0].x, point[1].x) - scaleFactor / 8),
tfx(Math.min(point[0].y, point[1].y) - scaleFactor / 8),
tfx(
Math.max(point[0].x, point[1].x) -
Math.min(point[0].x, point[1].x) +
scaleFactor / 4,
),
tfx(
Math.max(point[0].y, point[1].y) -
Math.min(point[0].y, point[1].y) +
scaleFactor / 4,
),
const outerRect = render.paper.rect(
tfx(Math.min(point[0].x, point[1].x) - scaleFactor / 8),
tfx(Math.min(point[0].y, point[1].y) - scaleFactor / 8),
tfx(
Math.max(point[0].x, point[1].x) -
Math.min(point[0].x, point[1].x) +
scaleFactor / 4,
),
tfx(
Math.max(point[0].y, point[1].y) -
Math.min(point[0].y, point[1].y) +
scaleFactor / 4,
),
);

paths.push({
path: this.getHoverPathStyle(outerRect, render, true),
stylesApplied: true,
});
if (
Math.max(point[0].x, point[1].x) -
Math.min(point[0].x, point[1].x) -
Expand All @@ -257,22 +272,24 @@ class ReSimpleObject extends ReObject {
scaleFactor / 4 >
0
) {
path.push(
render.paper.rect(
tfx(Math.min(point[0].x, point[1].x) + scaleFactor / 8),
tfx(Math.min(point[0].y, point[1].y) + scaleFactor / 8),
tfx(
Math.max(point[0].x, point[1].x) -
Math.min(point[0].x, point[1].x) -
scaleFactor / 4,
),
tfx(
Math.max(point[0].y, point[1].y) -
Math.min(point[0].y, point[1].y) -
scaleFactor / 4,
),
const innerRect = render.paper.rect(
tfx(Math.min(point[0].x, point[1].x) + scaleFactor / 8),
tfx(Math.min(point[0].y, point[1].y) + scaleFactor / 8),
tfx(
Math.max(point[0].x, point[1].x) -
Math.min(point[0].x, point[1].x) -
scaleFactor / 4,
),
tfx(
Math.max(point[0].y, point[1].y) -
Math.min(point[0].y, point[1].y) -
scaleFactor / 4,
),
);
paths.push({
path: this.getHoverPathStyle(innerRect, render, false),
stylesApplied: true,
});
}

break;
Expand Down Expand Up @@ -320,20 +337,18 @@ class ReSimpleObject extends ReObject {
p0.x + ((k * scaleFactor) / 8) * Math.sin(angle),
p0.y - ((k * scaleFactor) / 8) * Math.cos(angle),
);

path.push(render.paper.path(poly));
paths.push({
path: this.getHoverPathStyle(render.paper.path(poly), render, true),
stylesApplied: true,
});
break;
}
default: {
throw new Error('Unsupported shape type');
}
}

const enhPaths: Array<StyledPath> = path.map((p) => {
return { path: p, stylesApplied: false };
});

return enhPaths;
return paths;
}

drawHover(render: Render): Array<any> {
Expand All @@ -355,21 +370,33 @@ class ReSimpleObject extends ReObject {

const refPoints = this.getReferencePoints();
const scaleFactor = restruct.render.options.scale;
const selectionSet = restruct.render.paper.set();
selectionSet.push(
this.selectionSet = restruct.render.paper.set();
this.selectionPointsSet = restruct.render.paper.set();
this.selectionSet.push(
generatePath(this.item.mode, paper, pos).attr(
styles.hoverStyleSimpleObject,
styles.selectionStyleSimpleObject,
),
);
refPoints.forEach((rp) => {
const scaledRP = Scale.obj2scaled(rp, restruct.render.options);
selectionSet.push(
this.selectionPointsSet.push(
restruct.render.paper
.circle(scaledRP.x, scaledRP.y, scaleFactor / 8)
.attr({ fill: 'black' }),
);
});
return selectionSet;
restruct.addReObjectPath(
LayerMap.selectionPlate,
this.visel,
this.selectionPointsSet,
);
return this.selectionSet;
}

togglePoints(displayFlag: boolean) {
displayFlag
? this.selectionPointsSet?.show()
: this.selectionPointsSet?.hide();
}

show(restruct: ReStruct, options: any): void {
Expand Down
6 changes: 2 additions & 4 deletions packages/ketcher-core/src/application/render/restruct/restruct.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -748,13 +748,11 @@ class ReStruct {
if (item.selectionPlate) {
item.selectionPlate.show();
item.additionalInfo?.show();
item.cip?.rectangle.attr({
fill: '#7f7',
stroke: '#7f7',
});
if (item.togglePoints) item.togglePoints(true);
}
} else if (exists && item.selectionPlate) {
item.selectionPlate.hide();
if (item.togglePoints) item.togglePoints(false);
item.additionalInfo?.hide();
item.cip?.rectangle.attr({
fill: '#fff',
Expand Down

0 comments on commit 607aafd

Please sign in to comment.