25:["$","title",null,{"children":"DeckGL | mheard03 | Observable"}] 49:T6f7,deckgl = { const deckgl = new deck.DeckGL({ views: new deck.MapView({repeat: true}), container, controller: true, initialViewState: {longitude: 0, latitude: 35, zoom: 1}, layers: [ /* new deck.GeoJsonLayer({ id: 'countries', data: countries.features, _subLayerProps: { "polygons-fill": { type: SdfPolygonLayer } }, stroked: true, filled: true, extruded: false, wrapLongitude: true, autoHighlight: true, lineWidthUnits: 'common', lineJointRounded: true, lineWidthMinPixels: 1, lineWidthMaxPixels: 10, getLineWidth: 1, getFillColor: f => [128, 128, 128], getLineColor: f => [255, 0, 0, 128], getOffset: f => 0.5, getFeatureId: f => f.properties.name }), */ /* new deck.GeoJsonLayer({ id: 'countries', data: countries.features, _subLayerProps: { "polygons-fill": { type: SdfPolygonLayer } }, stroked: true, filled: true, extruded: false, wrapLongitude: true, autoHighlight: true, lineWidthUnits: 'common', lineJointRounded: true, lineWidthMinPixels: 1, lineWidthMaxPixels: 10, getLineWidth: 1, getFillColor: f => [128, 128, 128], getLineColor: f => [255, 0, 0, 128], getOffset: f => 0.5, getFeatureId: f => f.properties.name }) */ ] }); invalidation.then(() => { try { deckgl.finalize(); } catch (e) { console.log('error finalizing deckgl instance', e); } container.innerHTML = ""; }); return deckgl; }4a:T1948,// Direct lift from https://github.com/visgl/deck.gl/blob/master/modules/extensions/src/utils/projection-utils.ts ProjectionUtils = { const MAX_VIEWPORT_SIZE = 2048; const { WebMercatorViewport, OrthographicViewport, Layer, Viewport } = deck; /* * Compute the union of bounds from multiple layers * Returns bounds in CARTESIAN coordinates */ // layers: The layers to combine // viewport: A Viewport instance that is used to determine the type of the view function joinLayerBounds(layers, viewport) { // Join the bounds of layer data const bounds = [Infinity, Infinity, -Infinity, -Infinity]; for (const layer of layers) { const layerBounds = layer.getBounds(); if (layerBounds) { const bottomLeftCommon = layer.projectPosition(layerBounds[0], {viewport, autoOffset: false}); const topRightCommon = layer.projectPosition(layerBounds[1], {viewport, autoOffset: false}); bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]); bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]); bounds[2] = Math.max(bounds[2], topRightCommon[0]); bounds[3] = Math.max(bounds[3], topRightCommon[1]); } } if (Number.isFinite(bounds[0])) { return bounds; } return null; } /** Construct a viewport that just covers the target bounds. Used for rendering to common space indexed texture. */ // bounds: The cartesian bounds of layers that will render into this texture // width: Target width. If not specified, will be deduced from zoom // height: Target height. If not specified, will be deduced from zoom // zoom: Target zoom. If not specified, will be deduced from width and height // border: Border around the viewport in pixels // viewport: A viewport used to determine the output type function makeViewport({ bounds, width, height, zoom, border = 0, viewport }) { const {isGeospatial} = viewport; if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) { return null; } const centerWorld = viewport.unprojectPosition([ (bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2, 0 ]); if (zoom === undefined) { // Use width and height to determine zoom width = width - border * 2; height = height - border * 2; const scale = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1])); zoom = Math.min(Math.log2(scale), 20); } else if (!width || !height) { // Use zoom to determine width and height const scale = 2 ** zoom; width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale); height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale); const maxSize = MAX_VIEWPORT_SIZE - border * 2; if (width > maxSize || height > maxSize) { const r = maxSize / Math.max(width, height); width = Math.round(width * r); height = Math.round(height * r); zoom += Math.log2(r); } } // TODO - find a more generic way to construct this viewport // Geospatial viewports may not be web-mercator return isGeospatial ? new WebMercatorViewport({ id: viewport.id, x: border, y: border, width, height, longitude: centerWorld[0], latitude: centerWorld[1], zoom, orthographic: true }) : new OrthographicViewport({ id: viewport.id, x: border, y: border, width, height, target: centerWorld, zoom, flipY: false }); } /** Returns viewport bounds in CARTESIAN coordinates */ function getViewportBounds(viewport, zRange) { // Viewport bounds in world coordinates let viewportBoundsWorld; if (zRange && zRange.length === 2) { const [minZ, maxZ] = zRange; const bounds0 = viewport.getBounds({z: minZ}); const bounds1 = viewport.getBounds({z: maxZ}); viewportBoundsWorld = [ Math.min(bounds0[0], bounds1[0]), Math.min(bounds0[1], bounds1[1]), Math.max(bounds0[2], bounds1[2]), Math.max(bounds0[3], bounds1[3]) ]; } else { viewportBoundsWorld = viewport.getBounds(); } // Viewport bounds in cartesian coordinates const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2)); const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4)); return [ viewportBottomLeftCommon[0], viewportBottomLeftCommon[1], viewportTopRightCommon[0], viewportTopRightCommon[1] ]; } /* * Determine the common space bounds that best cover the given data for the given viewport * Returns bounds in CARTESIAN coordinates */ function getRenderBounds(layerBounds, viewport, zRange) { if (!layerBounds) { return [0, 0, 1, 1]; } const viewportBounds = getViewportBounds(viewport, zRange); // Expand viewport bounds by 2X. Heurestically chosen to avoid masking // errors when mask is partially out of view const paddedBounds = doubleBounds(viewportBounds); // When bounds of the layers are smaller than the viewport bounds simply use // mask bounds, so as to maximize resolution & avoid rerenders if ( layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] && layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1] ) { return layerBounds; } // As viewport shrinks, to avoid pixelation along mask edges // we need to reduce the bounds and only render the visible portion // of the mask. // We pad the viewport bounds to capture the section // of the mask just outside the viewport to correctly maskByInstance. // Intersect mask & padded viewport bounds return [ Math.max(layerBounds[0], paddedBounds[0]), Math.max(layerBounds[1], paddedBounds[1]), Math.min(layerBounds[2], paddedBounds[2]), Math.min(layerBounds[3], paddedBounds[3]) ]; } function doubleBounds(bounds) { const dx = bounds[2] - bounds[0]; const dy = bounds[3] - bounds[1]; const centerX = (bounds[0] + bounds[2]) / 2; const centerY = (bounds[1] + bounds[3]) / 2; return [centerX - dx, centerY - dy, centerX + dx, centerY + dy]; } return { joinLayerBounds, makeViewport, getViewportBounds, getRenderBounds, doubleBounds }; }4b:T4e9,class PickingMaskPass extends deck._LayersPass { constructor(device, props) { super(device, props); const { mapSize = 2048 } = props; this.maskMap = device.createTexture({ format: 'rgba8unorm', width: mapSize, height: mapSize, sampler: { minFilter: 'linear', magFilter: 'linear', addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' } }); this.fbo = device.createFramebuffer({ id: 'maskmap', width: mapSize, height: mapSize, colorAttachments: [this.maskMap] }); } render(options) { const colorMask = [false, false, false, false]; colorMask[options.channel] = true; const clearColor = [255, 255, 255, 255]; const GL = WebGL2RenderingContext; return luma.withParameters( this.device, { blend: true, blendFunc: [GL.ZERO, GL.ONE], blendEquation: GL.FUNC_SUBTRACT, colorMask, depthTest: false }, () => super.render({...options, clearColor, target: this.fbo, pass: 'pickingMask'}) ); } shouldDrawLayer(layer) { return layer.props.operation.includes('pickingMask'); } delete() { this.fbo.delete(); this.maskMap.delete(); } }4c:T20c1,PickingMaskEffect = { const { Layer, Viewport, log } = deck; const { Texture, Buffer } = luma; const { equals } = mathgl; const { joinLayerBounds, getRenderBounds, makeViewport } = ProjectionUtils; /* type Mask = { index: number; bounds: Bounds; coordinateOrigin: [number, number, number]; coordinateSystem: CoordinateSystem; }; type Channel = { id: string; index: number; layers: Layer[]; bounds: Bounds | null; maskBounds: Bounds; layerBounds: Bounds[]; coordinateOrigin: [number, number, number]; coordinateSystem: CoordinateSystem; }; export type MaskPreRenderStats = { didRender: boolean; }; */ // Class to manage mask effect class PickingMaskEffect { id = 'mask-effect'; props = null; useInPicking = true; order = 0; private dummyMaskMap?: Texture; private channels: (Channel | null)[] = []; private masks: Record | null = null; private maskPass?: MaskPass; private maskMap?: Texture; private lastViewport?: Viewport; preRender( device: Device, {layers, layerFilter, viewports, onViewportActive, views, isPicking}: PreRenderOptions ): MaskPreRenderStats { let didRender = false; if (!this.dummyMaskMap) { this.dummyMaskMap = device.createTexture({ width: 1, height: 1 }); } if (isPicking) { // Do not update on picking pass return {didRender}; } const maskLayers = layers.filter(l => l.props.visible && l.props.operation.includes('mask')); if (maskLayers.length === 0) { this.masks = null; this.channels.length = 0; return {didRender}; } this.masks = {}; if (!this.maskPass) { this.maskPass = new MaskPass(device, {id: 'default-mask'}); this.maskMap = this.maskPass.maskMap; } // Map layers to channels const channelMap = this._sortMaskChannels(maskLayers); // TODO - support multiple views const viewport = viewports[0]; const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport); if (viewport.resolution !== undefined) { log.warn('MaskExtension is not supported in GlobeView')(); return {didRender}; } for (const maskId in channelMap) { const result = this._renderChannel(channelMap[maskId], { layerFilter, onViewportActive, views, viewport, viewportChanged }); didRender ||= result; } // debugFBO(this.maskMap, {opaque: true}); return {didRender}; } /* eslint-disable-next-line complexity */ private _renderChannel( channelInfo: Channel, { layerFilter, onViewportActive, views, viewport, viewportChanged }: { layerFilter: PreRenderOptions['layerFilter']; onViewportActive: PreRenderOptions['onViewportActive']; views: PreRenderOptions['views']; viewport: Viewport; viewportChanged: boolean; } ): boolean { let didRender = false; const oldChannelInfo = this.channels[channelInfo.index]; if (!oldChannelInfo) { return didRender; } const maskChanged = // If a channel is new channelInfo === oldChannelInfo || // If sublayers have changed channelInfo.layers.length !== oldChannelInfo.layers.length || channelInfo.layers.some( (layer, i) => // Layer instance is updated // Layer props might have changed // Undetermined props could have an effect on the output geometry of a mask layer, // for example getRadius+updateTriggers, radiusScale, modelMatrix layer !== oldChannelInfo.layers[i] || // Some prop is in transition layer.props.transitions ) || // If a sublayer's positions have been updated, the cached bounds will change shallowly channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]); channelInfo.bounds = oldChannelInfo.bounds; channelInfo.maskBounds = oldChannelInfo.maskBounds; this.channels[channelInfo.index] = channelInfo; if (maskChanged || viewportChanged) { // Recalculate mask bounds this.lastViewport = viewport; const layerBounds = joinLayerBounds(channelInfo.layers, viewport); channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport); if (maskChanged || !equals(channelInfo.bounds, oldChannelInfo.bounds)) { // Rerender mask FBO const {maskPass, maskMap} = this; const maskViewport = layerBounds && makeViewport({ bounds: channelInfo.bounds!, viewport, width: maskMap!.width, height: maskMap!.height, border: 1 }); channelInfo.maskBounds = maskViewport ? maskViewport.getBounds() : [0, 0, 1, 1]; // @ts-ignore (2532) This method is only called from preRender where maskPass is defined maskPass.render({ pass: 'mask', channel: channelInfo.index, layers: channelInfo.layers, layerFilter, viewports: maskViewport ? [maskViewport] : [], onViewportActive, views, moduleParameters: { devicePixelRatio: 1 } }); didRender = true; } } // @ts-ignore (2532) This method is only called from preRender where masks is defined this.masks[channelInfo.id] = { index: channelInfo.index, bounds: channelInfo.maskBounds, coordinateOrigin: channelInfo.coordinateOrigin, coordinateSystem: channelInfo.coordinateSystem }; return didRender; } /** * Find a channel to render each mask into * If a maskId already exists, diff and update the existing channel * Otherwise replace a removed mask * Otherwise create a new channel * Returns a map from mask layer id to channel info */ private _sortMaskChannels(maskLayers: Layer[]): Record { const channelMap = {}; let channelCount = 0; for (const layer of maskLayers) { const {id} = layer.root; let channelInfo = channelMap[id]; if (!channelInfo) { if (++channelCount > 4) { log.warn('Too many mask layers. The max supported is 4')(); continue; // eslint-disable-line no-continue } channelInfo = { id, index: this.channels.findIndex(c => c?.id === id), layers: [], layerBounds: [], coordinateOrigin: layer.root.props.coordinateOrigin, coordinateSystem: layer.root.props.coordinateSystem }; channelMap[id] = channelInfo; } channelInfo.layers.push(layer); channelInfo.layerBounds.push(layer.getBounds()); } for (let i = 0; i < 4; i++) { const channelInfo = this.channels[i]; if (!channelInfo || !(channelInfo.id in channelMap)) { // The mask id at this channel no longer exists this.channels[i] = null; } } for (const maskId in channelMap) { const channelInfo = channelMap[maskId]; if (channelInfo.index < 0) { channelInfo.index = this.channels.findIndex(c => !c); this.channels[channelInfo.index] = channelInfo; } } return channelMap; } getModuleParameters(): { maskMap: Texture; maskChannels: Record | null; } { return { maskMap: this.masks ? this.maskMap! : this.dummyMaskMap!, maskChannels: this.masks }; } cleanup(): void { if (this.dummyMaskMap) { this.dummyMaskMap.delete(); this.dummyMaskMap = undefined; } if (this.maskPass) { this.maskPass.delete(); this.maskPass = undefined; this.maskMap = undefined; } this.lastViewport = undefined; this.masks = null; this.channels.length = 0; } } }4d:T570,sdfShaders = ({ inject: { 'vs:#decl': `\ attribute vec4 instancePerimeterSegmentXyzw; out float distanceToEdge; `, 'vs:#main-end': `\ vec2 perimeterCommonCoord1 = project_position(instancePerimeterSegmentXyzw.xy); vec2 perimeterCommonCoord2 = project_position(instancePerimeterSegmentXyzw.zw); if (perimeterCommonCoord1 == perimeterCommonCoord2) { distanceToEdge = distance(geometry.position.xy, perimeterCommonCoord1.xy); } else { float x0 = geometry.position.x; float y0 = geometry.position.y; float x1 = perimeterCommonCoord1.x; float y1 = perimeterCommonCoord1.y; float x2 = perimeterCommonCoord2.x; float y2 = perimeterCommonCoord2.y; float numerator = (x2-x1)*(y1-y0)-(x1-x0)*(y2-y1); float denominator = distance(perimeterCommonCoord1, perimeterCommonCoord2); distanceToEdge = abs(numerator / denominator); } `, 'fs:#decl': ` varying float distanceToEdge; `, 'fs:DECKGL_FILTER_COLOR': `\ // vec2 pixelCoord = gl_FragCoord.xy; // * pixelsPerClip; // vec2 commonCoord = pixelCoord * commonUnitsPerPixel; // float commonDistance = commonDistanceToSegment(commonCoord); // float pixelDistance = commonDistance / commonUnitsPerPixel; color.a = distanceToEdge / 255.0; // color.a = commonCoord.x / 255.0; // gl_FragCoord.x * pixelsPerClip.x; // color.a = gl_FragCoord.x / 256.0; `, }, })4e:Tdd1,MaskedGeoJsonLayer = { const MASK_LAYER_DEFAULT_PROPS = _.cloneDeep(deck.SolidPolygonLayer.defaultProps); delete MASK_LAYER_DEFAULT_PROPS.getLineColor; const MASK_LAYER_MAPPING = { type: deck.SolidPolygonLayer, props: { extruded: 'extruded', filled: 'filled', wireframe: 'wireframe', elevationScale: 'elevationScale', material: 'material', _full3d: '_full3d', getElevation: 'getElevation', } }; function forwardProps(layer, mapping) { const {transitions, updateTriggers} = layer.props; const result = { updateTriggers: {}, transitions: transitions && { getPosition: transitions.geometry } }; for (const sourceKey in mapping) { const targetKey = mapping[sourceKey]; let value = layer.props[sourceKey]; if (sourceKey.startsWith('get')) { // isAccessor value = layer.getSubLayerAccessor(value); result.updateTriggers[targetKey] = updateTriggers[sourceKey]; if (transitions) { result.transitions[targetKey] = transitions[sourceKey]; } } result[targetKey] = value; } return result; } class MaskedGeoJsonLayer extends deck.GeoJsonLayer { static { MaskedGeoJsonLayer.layerName = 'MaskedGeoJsonLayer'; MaskedGeoJsonLayer.defaultProps = _.cloneDeep(deck.GeoJsonLayer.defaultProps);; MaskedGeoJsonLayer.defaultProps._subLayerProps = { "polygons-stroke": { extensions: [ new deck.MaskExtension() ], maskByInstance: false, maskId: "polygons-mask" }, "polygons-mask": { operation: 'mask', } } } _renderMaskLayer() { const {extruded, wireframe} = this.props; const {layerProps} = this.state; const id = 'polygons-mask'; const PolygonMaskLayer = this.shouldRenderSubLayer(id, layerProps.polygons?.data) && this.getSubLayerClass(id, MASK_LAYER_MAPPING.type); if (PolygonMaskLayer) { const forwardedProps = forwardProps(this, MASK_LAYER_MAPPING.props); return new PolygonMaskLayer( forwardedProps, this.getSubLayerProps({ id, updateTriggers: forwardedProps.updateTriggers }), layerProps.polygons ); } return null; } renderLayers() { debugger; const {extruded} = this.props; const polygonFillLayer = this._renderPolygonLayer(); const lineLayers = this._renderLineLayers(); const pointLayers = this._renderPointLayers(); const maskLayer = (lineLayers || pointLayers) ? this._renderMaskLayer() : null; /* const nonFillLayers = [lineLayers, pointLayers].filter(a => a).flat(); nonFillLayers.forEach(l => { if (l.extensions?.length) { debugger; } else { const extension = new deck.MaskExtension(); extension.initializeState.call(l, l.context, extension); l.extensions.push(extension); l.setChangeFlags({ extensionsChanged: true }); l.maskId = 'polygons-mask'; } });*/ return [ // If not extruded: flat fill layer is drawn below outlines !extruded && polygonFillLayer, maskLayer, lineLayers, pointLayers, // If extruded: draw fill layer last for correct blending behavior extruded && polygonFillLayer ]; } } return MaskedGeoJsonLayer; }4f:T55c,class FeaturesLayer extends deck.CompositeLayer { static { FeaturesLayer.layerName = "FeaturesLayer"; FeaturesLayer.defaultProps = Object.assign({}, deck.GeoJsonLayer.defaultProps, { stroked: true, filled: true, extruded: false, // wrapLongitude: true, autoHighlight: true, lineWidthUnits: 'common', lineJointRounded: true, lineWidthMinPixels: 1, lineWidthMaxPixels: 10, getLineWidth: 1, getFillColor: f => [128, 128, 128], getLineColor: f => [255, 0, 0], getOffset: f => 0.5, extensions: [new deck.PathStyleExtension({offset: true})], getFeatureId: f => f.properties.name }); } getForwardedProps() { const forwarded = { updateTriggers: {} }; for (let key of Object.keys(deck.GeoJsonLayer.defaultProps)) { if (key in this.props) forwarded[key] = this.props[key]; if (key in this.props.updateTriggers) forwarded.updateTriggers[key] = this.props.updateTriggers[key]; } return forwarded; } renderLayers() { const layers = []; for (let feature of this.props.data ?? []) { const id = this.props.getFeatureId(feature); const layer = new deck.GeoJsonLayer(this.getForwardedProps(), this.getSubLayerProps({ id }), { data: feature }); layers.push(layer); } return layers; } }50:[{"id":"b5fdce542c70e41914b65bf22d732e8818f2a9d9804f2d5e976f9210159982d3333533f32049590c485c0d888bbe0a15d7b7b2d6577df04f2c06000569594b40","href":"https://static.observableusercontent.com/files/b5fdce542c70e41914b65bf22d732e8818f2a9d9804f2d5e976f9210159982d3333533f32049590c485c0d888bbe0a15d7b7b2d6577df04f2c06000569594b40","name":"rgb.png","type":"image/png","lastModified":1702049933361.844,"size":74848}] 29:{"id":"ed7ca216d595fad3","slug":null,"title":"DeckGL","thumbnail":"c2ca08fa1012724583d528a2a19943f39ddb1139a39d64583328cea3fd1fafa2","access_level":"public","create_time":"$D2023-10-30T01:49:46.501Z","update_time":"$D2023-12-11T01:22:08.765Z","view_time":null,"first_public_time":"$D2023-10-30T01:49:46.501Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"02d4ccf8951f2f02","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":"starter_2024","bio":"","following":false},"version":1888,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6afb6cac5f188ec0","login":"mheard03","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ae42ada5dc924d7cd620a4ae3bb6279a3e82fb649668ee6c0729bdada1ebf016","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"DeckGL","cells":[{"id":0,"value":"# DeckGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1481,"value":"https://deck.gl/docs/developer-guide/performance#:~:text=import%20%7BBuffer%7D,%5D%0A%7D)%3B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"container = html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1863,"value":"grossCountry = _.sortBy(countries.features.filter(c => c.geometry.type == \"Polygon\"), [f => -f.geometry.coordinates.length, f => -f.geometry.coordinates.reduce((sum, r) => sum + r.length, 0)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1887,"value":"JSON.stringify(grossCountry[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"path = {\n const result = [];\n const p = d3.path();\n for (let ring of grossCountry[0].geometry.coordinates) {\n p.moveTo(...ring[0]);\n ring.slice(1).forEach(c => p.lineTo(...c));\n p.closePath();\n result.push(p._);\n }\n return result.join(\"\")\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1880,"value":"turf.bbox(grossCountry[0]).join(\" \")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"path._","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"new MaskedPathLayer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"class MaskedPathLayer extends deck.PathLayer {\n static {\n MaskedPathLayer.layerName = 'MaskedPathLayer';\n MaskedPathLayer.defaultProps = {\n getVisibleColor: { type: 'accessor', value: [255, 0, 0] },\n maskTexture: { type: 'image' },\n };\n }\n \n initializeState(params) {\n const GL = WebGL2RenderingContext;\n super.initializeState(params);\n this.getAttributeManager().addInstanced({\n visibleColor: {\n size: this.props.colorFormat.length,\n type: GL.UNSIGNED_BYTE,\n normalized: true,\n accessor: 'getVisibleColor',\n defaultValue: [255, 0, 0, 255],\n shaderAttributes: {\n instanceFillColors: {\n divisor: 1\n }\n }\n },\n });\n }\n \n draw({ uniforms }) {\n super.draw({\n uniforms: {\n ...uniforms,\n maskTexture: this.props.maskTexture\n }\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1830,"value":"{\n await deckgl;\n\n /*\n const texture = new luma.Texture2D(deckgl.deckRenderer.gl);\n texture.setImageData({ data: rgbPng, width: 2048, height: 2048 });\n */\n\n const bmp = new deck.BitmapLayer({\n id: 'bitmap-layer',\n bounds: [-180, -90, 180, 90],\n image: rgbPng //'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png'\n });\n \n const geo = new deck.GeoJsonLayer({\n id: 'countries',\n data: countries.features,\n _subLayerProps: {\n \"polygons-fill\": {\n type: SdfPolygonLayer\n }\n },\n stroked: true,\n filled: true,\n extruded: false,\n wrapLongitude: true,\n autoHighlight: true,\n \n lineWidthUnits: 'common',\n lineJointRounded: true,\n lineWidthMinPixels: 1,\n lineWidthMaxPixels: 10,\n getLineWidth: 1,\n getFillColor: f => [128, 128, 128],\n getLineColor: f => [255, 0, 0, 128],\n getOffset: f => 0.5,\n\n getFeatureId: f => f.properties.name\n });\n deckgl.layerManager.setLayers([bmp, geo]);\n\n\n\n \n// \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"rgbPng = {\n const sloppy = await FileAttachment(\"rgb.png\").image();\n sloppy.style.maxWidth = \"200px\";\n return sloppy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1628,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1564,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"deckgl.deckRenderer.l","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1335,"value":"skel","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"SdfPolygonLayer = {\n class SdfPolygonLayer extends deck.SolidPolygonLayer {\n static {\n SdfPolygonLayer.layerName = 'SdfPolygonLayer';\n SdfPolygonLayer.defaultProps = _.cloneDeep(deck.SolidPolygonLayer.defaultProps);\n SdfPolygonLayer.defaultProps.getPerimeterSegment = () => [0,0,0,0];\n }\n\n initializeState(params) {\n super.initializeState(params);\n this.getAttributeManager().addInstanced({\n instancePerimeterSegmentXyzw: {\n size: 4,\n accessor: 'getPerimeterSegment'\n },\n });\n }\n \n getShaders(type) {\n // use object.assign to make sure we don't overwrite existing fields like `vs`, `modules`...\n let shaders = super.getShaders(type);\n shaders = Object.assign({}, shaders, sdfShaders);\n return shaders;\n }\n \n }\n\n return SdfPolygonLayer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"deck.SolidPolygonLayer.defaultProps","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"spl = new deck.SolidPolygonLayer()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"class PolygonBorderLayer extends deck.SolidPolygonLayer {\n static {\n PolygonBorderLayer.layerName = 'PolygonBorderLayer';\n PolygonBorderLayer.POSITIONS = {\n CENTER: 0,\n INSIDE: 1,\n OUTSIDE: 2\n }\n PolygonBorderLayer.defaultProps = _.cloneDeep(deck.PathLayer.defaultProps);\n PolygonBorderLayer.defaultProps.getPosition = { type: 'accessor', value: 0, min: 0, max: 2 };\n updateTriggers: {\n getFillColor: [maleColor, femaleColor]\n }\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"class InnerBorderLayer extends deck.PathLayer {\n static {\n InnerBorderLayer.defaultProps = _.cloneDeep(deck.PathLayer.defaultProps);\n InnerBorderLayer.layerName = 'InnerBorderLayer';\n }\n\n getShaders() {\n // vPathPosition.x - position along the width of the path, between [-1, 1]. 0 is the center line.\n const result = {\n ...super.getShaders(),\n inject: { \"fs:#main-end\": \"\\nif (vPathPosition.x >= 0.0) discard;\\n\" }\n }\n debugger;\n return result;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"feature = countries.features[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"countries = fetch('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson')\n .then(resp => resp.json())\n .then(geo => d3.geoStitch(geo))\n .then(result => {\n // Join results\n const countries = new Map();\n for (const feature of result.features) {\n const name = feature.properties.sr_subunit;\n if (!countries.has(name)) countries.set(name, []);\n countries.get(name).push(feature);\n }\n const features = Array.from(countries.entries())\n .map(([name, features], i) => {\n // const color = [55 + i / 200, 55 + i % 200, 128];\n return (features.length === 1)\n ? turf.polygon(features[0].geometry.coordinates, {name})\n : turf.multiPolygon(features.map(f => f.geometry.coordinates), {name});\n // turf.coordEach(feature, c => c[2] = i);\n });\n const fc = turf.featureCollection(features);\n return d3.geoStitch(fc);\n });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\", \"d3-geo\", \"d3-geo-projection\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1508,"value":"deck = require(`deck.gl@8.9/dist.min.js`);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"luma = {\n await deck;\n return window.luma;\n // return await require(`@luma.gl/core@${window.luma.VERSION}/dist/dist.min.js`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"lumagl_webgl = {\n /*\n await deck;\n let lumagl_webgl;\n const luma = window.luma;\n try {\n delete window.luma;\n debugger;\n lumagl_webgl = await require(`@luma.gl/webgl@${luma.VERSION}/dist/dist.min.js`);\n }\n finally {\n window.luma = luma;\n }\n return lumagl_webgl;\n */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"lumagl_core = {\n /*\n await deck;\n let lumagl_core;\n const luma = window.luma;\n try {\n delete window.luma;\n debugger;\n lumagl_core = await require(`@luma.gl/core@${luma.VERSION}/dist/dist.min.js`);\n }\n finally {\n window.luma = luma;\n }\n return lumagl_core;\n */\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"mathgl = import('https://unpkg.com/@math.gl/core@4.0/dist/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"w8r = {\n const Offset = (await import('https://cdn.skypack.dev/polygon-offset@0.3.2?min')).default;\n const { intersection, diff, union, xor } = await import('https://cdn.skypack.dev/martinez-polygon-clipping@0.7.3?min');\n return { Offset, intersection, diff, union, xor };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"turf = require('@turf/turf@6.5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null