Skip to content

Commit

Permalink
refactor(Style): to sqaush review
Browse files Browse the repository at this point in the history
  • Loading branch information
@ftoromanoff
ftoromanoff committed Dec 5, 2023
1 parent 316aa28 commit c7d80eb
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 51 deletions.
2 changes: 1 addition & 1 deletion examples/source_file_gpx_3d.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
structure: '3d',
}
}))
.then(itowns.Feature2Mesh.convert({style: new itowns.Style(style)}))
.then(itowns.Feature2Mesh.convert({style}))
.then(function (mesh) {
if (mesh) {
mesh.updateMatrixWorld();
Expand Down
47 changes: 25 additions & 22 deletions src/Converter/Feature2Mesh.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import Style, { StyleContext } from 'Core/Style';

const coord = new Coordinates('EPSG:4326', 0, 0, 0);
const context = new StyleContext();
let userStyle = new Style();
const defaultStyle = new Style();
let style;

const dim_ref = new THREE.Vector2();
const dim = new THREE.Vector2();
Expand Down Expand Up @@ -209,8 +210,8 @@ function featureToPoint(feature, options) {
}

coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, v));
userStyle.setContext(context);
const { base_altitude, color, radius } = userStyle.point;
style.setContext(context);
const { base_altitude, color, radius } = style.point;
coord.z = 0;

if (!pointMaterialSize.includes(radius)) {
Expand Down Expand Up @@ -289,8 +290,8 @@ function featureToLine(feature, options) {
}

coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, v));
userStyle.setContext(context);
const { base_altitude, color, width } = userStyle.stroke;
style.setContext(context);
const { base_altitude, color, width } = style.stroke;
coord.z = 0;

if (!lineMaterialWidth.includes(width)) {
Expand Down Expand Up @@ -350,8 +351,8 @@ function featureToPolygon(feature, options) {
}

coord.copy(context.setLocalCoordinatesFromArray(feature.vertices, i));
userStyle.setContext(context);
const { base_altitude, color } = userStyle.fill;
style.setContext(context);
const { base_altitude, color } = style.fill;
coord.z = 0;

// populate geometry buffers
Expand Down Expand Up @@ -436,8 +437,8 @@ function featureToExtrudedPolygon(feature, options) {

coord.copy(context.setLocalCoordinatesFromArray(ptsIn, i));

userStyle.setContext(context);
const { base_altitude, extrusion_height, color } = userStyle.fill;
style.setContext(context);
const { base_altitude, extrusion_height, color } = style.fill;
coord.z = 0;

// populate base geometry buffers
Expand Down Expand Up @@ -529,10 +530,10 @@ function createInstancedMesh(mesh, count, ptsIn) {
* @param {Object} options - options controlling the conversion
* @returns {THREE.Mesh} mesh or GROUP of THREE.InstancedMesh
*/
function pointsToInstancedMeshes(feature, options) {
function pointsToInstancedMeshes(feature) {
const ptsIn = feature.vertices;
const count = feature.geometries.length;
const modelObject = options.style.point.model.object;
const modelObject = style.point.model.object;

if (modelObject instanceof THREE.Mesh) {
return createInstancedMesh(modelObject, count, ptsIn);
Expand All @@ -549,9 +550,9 @@ function pointsToInstancedMeshes(feature, options) {

/**
* Convert a [Feature]{@link Feature} to a Mesh
*
* @param {Feature} feature - the feature to convert
* @param {Object} options - options controlling the conversion
*
* @return {THREE.Mesh} mesh or GROUP of THREE.InstancedMesh
*/
function featureToMesh(feature, options) {
Expand All @@ -562,9 +563,9 @@ function featureToMesh(feature, options) {
let mesh;
switch (feature.type) {
case FEATURE_TYPES.POINT:
if (userStyle.point?.model?.object) {
if (style.point?.model?.object) {
try {
mesh = pointsToInstancedMeshes(feature, options);
mesh = pointsToInstancedMeshes(feature);
mesh.isInstancedMesh = true;
} catch (e) {
mesh = featureToPoint(feature, options);
Expand All @@ -577,7 +578,7 @@ function featureToMesh(feature, options) {
mesh = featureToLine(feature, options);
break;
case FEATURE_TYPES.POLYGON:
if (userStyle.fill && Object.keys(userStyle.fill).includes('extrusion_height')) {
if (style.fill && Object.keys(style.fill).includes('extrusion_height')) {
mesh = featureToExtrudedPolygon(feature, options);
} else {
mesh = featureToPolygon(feature, options);
Expand Down Expand Up @@ -607,6 +608,8 @@ export default {
* @param {function} [options.batchId] - optional function to create batchId attribute.
* It is passed the feature property and the feature index. As the batchId is using an unsigned int structure on 32 bits,
* the batchId could be between 0 and 4,294,967,295.
* @param {StyleOptions} [options.style] - optional style properties. Only needed if the convert is used without instancing
* a layer beforehand.
* @return {function}
* @example <caption>Example usage of batchId with featureId.</caption>
* view.addLayer({
Expand Down Expand Up @@ -639,17 +642,17 @@ export default {

if (!options.pointMaterial) {
// Opacity and wireframe refered with layer properties
// TODO :next step is move these properties to Style
// TODO: next step is move these properties to Style
options.pointMaterial = ReferLayerProperties(new THREE.PointsMaterial(), this);
options.lineMaterial = ReferLayerProperties(new THREE.LineBasicMaterial(), this);
options.polygonMaterial = ReferLayerProperties(new THREE.MeshBasicMaterial(), this);
// In the case we didn't instanciate the layer (this) before the convert, we can directly
// pass a style using options.style.
// This is usually done in some tests and if you want to use Feature2Mesh.convert()
// as in examples/source_file_gpx_3d.html.
options.style = options.style || (this ? this.style : undefined);
}
userStyle = options.style || userStyle;

// In the case we didn't instanciate the layer (this) before the convert, we can pass
// style properties (@link StyleOptions) using options.style.
// This is usually done in some tests and if you want to use Feature2Mesh.convert()
// as in examples/source_file_gpx_3d.html.
style = this?.style || (options.style ? new Style(options.style) : defaultStyle);

context.setCollection(collection);

Expand Down
37 changes: 13 additions & 24 deletions src/Converter/Feature2Texture.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Style, { StyleContext } from 'Core/Style';

const defaultStyle = new Style();
const context = new StyleContext();
let userStyle = new Style();
let style;

/**
* Draw polygon (contour, line edge and fill) based on feature vertices into canvas
Expand All @@ -26,17 +26,6 @@ function drawPolygon(ctx, vertices, indices = [{ offset: 0, count: 1 }], size, e
if (vertices.length === 0) {
return;
}
if (userStyle.length) {
// NEED INFORMATION: when and what for is this case use ?
for (const s of userStyle) {
_drawPolygon(ctx, vertices, indices, s, size, extent, invCtxScale, canBeFilled);
}
} else {
_drawPolygon(ctx, vertices, indices, userStyle, size, extent, invCtxScale, canBeFilled);
}
}

function _drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale, canBeFilled) {
// build contour
const path = new Path2D();

Expand All @@ -50,24 +39,24 @@ function _drawPolygon(ctx, vertices, indices, style, size, extent, invCtxScale,
}
}
}
Style.prototype.applyToCanvasPolygon.call(style, ctx, path, invCtxScale, canBeFilled);
style.applyToCanvasPolygon(ctx, path, invCtxScale, canBeFilled);
}

function drawPoint(ctx, x, y, invCtxScale) {
ctx.beginPath();
const opacity = userStyle.point.opacity == undefined ? 1.0 : userStyle.point.opacity;
const opacity = style.point.opacity == undefined ? 1.0 : style.point.opacity;
if (opacity !== ctx.globalAlpha) {
ctx.globalAlpha = opacity;
}

ctx.arc(x, y, (userStyle.point.radius || 3.0) * invCtxScale, 0, 2 * Math.PI, false);
if (userStyle.point.color) {
ctx.fillStyle = userStyle.point.color;
ctx.arc(x, y, (style.point.radius || 3.0) * invCtxScale, 0, 2 * Math.PI, false);
if (style.point.color) {
ctx.fillStyle = style.point.color;
ctx.fill();
}
if (userStyle.point.line) {
ctx.lineWidth = (userStyle.point.width || 1.0) * invCtxScale;
ctx.strokeStyle = userStyle.point.line;
if (style.point.line) {
ctx.lineWidth = (style.point.width || 1.0) * invCtxScale;
ctx.strokeStyle = style.point.line;
ctx.stroke();
}
}
Expand All @@ -83,11 +72,11 @@ function drawFeature(ctx, feature, extent, invCtxScale) {
context.setGeometry(geometry);

if (
feature.type === FEATURE_TYPES.POINT && userStyle.point
feature.type === FEATURE_TYPES.POINT && style.point
) {
// cross multiplication to know in the extent system the real size of
// the point
const px = (Math.round(userStyle.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
const px = (Math.round(style.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
for (const indice of geometry.indices) {
const offset = indice.offset * feature.size;
const count = offset + indice.count * feature.size;
Expand Down Expand Up @@ -119,8 +108,8 @@ export default {
// backgroundColor is a THREE.Color to specify a color to fill the texture
// with, given there is no feature passed in parameter
createTextureFromFeature(collection, extent, sizeTexture, layerStyle, backgroundColor) {
userStyle = layerStyle || defaultStyle;
userStyle.setContext(context);
style = layerStyle || defaultStyle;
style.setContext(context);
let texture;

if (collection) {
Expand Down
19 changes: 16 additions & 3 deletions src/Core/Style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,18 @@ const textAnchorPosition = {
'top-left': [0, 0],
};

/**
* Define Getter/Setter for a specifique parameter of one of the five Style categories (fill, stroke, point, text, icon)
* and zoom of a Style instance.
* When the getter of a categorie.parameter is called, the purpose is to send, in that order, the value set by the user 'userValue'
* (if available), or the value read from the data 'dataValue' or the default value 'defaultValue' (if set). In case we
* need to overpass all we can set a value using the setter.
* @param {Style} style - The Style instance to set.
* @param {string} category - The category (fill, stroke, point, test, icon or zoom) to set.
* @param {string} parameter - The parameter of the category to set.
* @param {All} userValue - The value given by the user (if any). Can be undefined.
* @param {All} [defaultValue] - The default value to return (if needed).
*/
function defineStyleProperty(style, category, parameter, userValue, defaultValue) {
let property;
Object.defineProperty(
Expand All @@ -138,10 +150,11 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
{
enumerable: true,
get: () => {
if (property !== undefined) { return property; }
if (userValue !== undefined) { return readExpression(userValue, style.context); }
// != to check for 'undefined' and 'null' value)
if (property != undefined) { return property; }
if (userValue != undefined) { return readExpression(userValue, style.context); }
const dataValue = style.context.featureStyle?.[category]?.[parameter];
if (dataValue !== undefined) { return readExpression(dataValue, style.context); }
if (dataValue != undefined) { return readExpression(dataValue, style.context); }
if (defaultValue instanceof Function) {
return defaultValue(style.context.properties, style.context);
}
Expand Down
2 changes: 1 addition & 1 deletion src/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export { CAMERA_TYPE } from 'Renderer/Camera';

// Internal itowns format
export { default as Feature, FeatureCollection, FeatureGeometry, FEATURE_TYPES } from 'Core/Feature';
export { default as Style } from 'Core/Style';
// export { default as Style } from 'Core/Style';
export { default as Label } from 'Core/Label';

// Layers provided by default in iTowns
Expand Down

0 comments on commit c7d80eb

Please sign in to comment.